[JavaScript] 데이터 타입 변환과 단축 평가 : 마법같은 변신!

 

 

자바스크립트는 무엇인가 3살짜리 아기 같은 되게 예민한 아이 같다 ㅠㅠ

아래처럼 막 다를 것 같은데 하면 같고 같은데 하면 다르고~ 뭔가 이상하다......

 

 

JAVA는 그냥 꼰대 상남자 같은데  이번엔 자바스크립트의 null처리 undefiend를 처리하는 방법과 형변환에 대해서 알아보도록 하겠습니다.

 

 

 

 

자바스크립트 타입

 

자바스크립트의 특징

 

자바스크립트는 동적 타이핑 언어로, 변수의 타입이 런타임에 결정됩니다.

let a = 'aoxx';
a = 100;

console.log(a);
// 출력
// 100

 

위에 코드와 같이 a 라는 변수에 문자열 aoxx를 할당하였다.
그리고 100이라는 숫자를 재할당하였고 console창에 a에 할당된 값을 출력해 보았다.
그런데 a 라는 변수는 자바와는 다르게 String인 문자열로 할당되고 Number인 숫자형도 할당되는 게 아니겠는가

 

또 다른 경우를 보도록 하겠습니다.

let b = 10;

console.log(b + '');
// 출력
// 10

 

나는 분명 변수 b에 숫자 10을 할당하였다.  b + '' 를 해주고 console창에 출력을 했지만 10이 숫자형인지 문자인지 알 수 있을까?

 

 

그래서 자료형이 주어진 타입스크립트가 나왔나보네,,,,

// 타입스크립트 코드
let name: string = "jsp";
let age: number = 30;

 

 

 

 

데이터 타입의 종류

 

JavaScript에는 7개의 데이터 타입을 가지고 있습니다.  근데 저는 8개의 데이터 타입을 가지고 있다고 생각합니다.
오브젝트타입 안에 함수 데이터 타입이 있다 해도 함수는 따로 작성해야 한다고 생각해서 8개로 작성하게 되었습니다.

 

데이터 타입	설명
Number	정수, 실수와 같은 숫자들을 구분없이 하나의 숫자 타입으로 존재한다.
String	모든 문자열을 나타낸다.
Boolean	논리적 참(true) 과 거짓(false)을 나타낸다.
undefined	변수를 선언하면 암묵적으로 할당되는 값, 변수에 값이 할당되지 않은 상태를 나타낸다.
null	값이 없다는 것을 의도적으로 명시할 때 사용한다.
symbol	ES6에서부터 사용했다, 고유하고 변경 불가능한 값으로 주로 객체 속성의 키로 사용된다.
Object	키-값 쌍으로 구성된 데이터를 나타낸다. 함수, 배열 등 다양한 형태로 표현 가능하다.
function	재사용 가능한 코드 블록을 나타낸다.

 

 

하지만 typeof 연산자를 사용하다 보면 위에 작성한 8개의 타입과 자기 타입이 정확하게 일치하지 않는 것을 볼 수 있습니다.

아래와 같이 예시를 보기 전에 알아야 할 것이라면 typeof 연산자를 사용하면 데이터 타입을 문자열로 반환해 줍니다.

 

typeof ''				    // → 'string'
typeof 1				    // → 'number'
typeof NaN					// → 'number'
typeof true					// → 'boolean'
typeof undefined			// → 'undefined'
typeof Symbol()				// → 'symbol'
typeof null				// → 'object'
typeof []				 	// → 'object'
typeof {}				 	// → 'object'
typeof new Date()			// → 'object'
typeof /test/gi				// → 'object'
typeof function() {}			// → 'function'

 

애플리케이션을 개발하다가 보면 매개변수 타입을 확인해야 할 때가 있을 텐데 typeof를 사용하면 이렇게 내가 원하는 데이터타입이 아닐 수 도 있으니 주의해야 한다.

 

 

 

Tip) null 타입인지 확인할 때는 typeof 연산자를 사용하지 말고 === 를 사용하여 확인하면 된다.

 

 

 

 

 

타입 변환

 

문자열 타입으로 변환

 

1. + 연산자와 '' 연결

// + 연산자와 '' 연결
let num = 0;
let str = num + '';
console.log(typeof str, str);         // 출력: string 0

let value = NaN;
let str = value + '';
console.log(typeof str, str);         // 출력: string NaN

let value = null;
let str = value + '';
console.log(typeof str, str);          // 출력: string null

 

2. String() 생성자 함수 사용

// String() 함수 사용
let str = String(0);
console.log(typeof str, str);              // 출력: string 0

let str = String(NaN);
console.log(typeof str, str);              // 출력: string NaN

let str = String(null);
console.log(typeof str, str);               // 출력: string null

 

3. 템플릿 리터럴 사용

// 템플릿 리터럴 사용
let num = 0;
let str = `${num}`;
console.log(typeof str, str);                // 출력: string 0

let value = NaN;
let str = `${value}`;
console.log(typeof str, str);                // 출력: string NaN

let value = null;
let str = `${value}`;
console.log(typeof str, str);                 // 출력: string null

 

4. Object.prototype.toString() 메서드 사용

// toString() 메서드 사용
let num = 0;
let str = num.toString();
console.log(typeof str, str);                    // 출력: string 0

let value = NaN;
let str = value.toString();
console.log(typeof str, str);                    // 출력: string NaN

let value = null;
let str = value.toString();
console.log(typeof str, str);                     // 출력: string null

 

 

 

 

숫자 타입으로 변환

 

1. Number() 생성자 함수 사용

// Number 생성자 함수를 new연산자 없이 호출하는 방법
Number('0');				              // 출력 : 0
Number(undefined);		              	// 출력 : NaN
Number(true);				              // 출력 : 1
Number(null);				              // 출력 : 0
Number('String');			               // 출력 : NaN
Number([]);				               // 출력 : 0
Number({});				               // 출력 : NaN
Number(function(){});		             	  // 출력 : NaN

 

2. +단항 산술 연산자를 이용

// + 단항 산술 연산자를 이용하는 방법
+'0';					         // 출력 : 0
+undefined;					// 출력 : NaN
+true;						// 출력 : 1
null;					         // 출력 : 0
+'String';				         // 출력 : NaN
+[];					         // 출력 : 0
+{};					         // 출력 : NaN
+function(){}					// 출력 : NaN

 

3. parseInt 함수사용 (문자열만 변환가능)

// parseInt 함수 사용
parseInt('0');				         // 출력 : 0
parseInt(undefined);				// 출력 : NaN
parseInt(true);				         // 출력 : NaN
parseInt(null);				         // 출력 : NaN
parseInt('String');			         // 출력 : NaN
parseInt([]);				         // 출력 : NaN
parseInt({});				         // 출력 : NaN
parseInt(function(){});				// 출력 : NaN

 

 

 

 

블리언 타입으로 변환

 

1. Boolean() 생성자 함수 사용

// Boolean 생성자 함수를 new연산자 없이 호출하는 방법
Boolean('0');				         // 출력 : true
Boolean('');				         // 출력 : false
Boolean(0);				         // 출력 : flase
Boolean(undefined);				// 출력 : false
Boolean(true);				         // 출력 : true
Boolean(null);				         // 출력 : false
Boolean('String');			         // 출력 : true
Boolean([]);				         // 출력 : true
Boolean({});				         // 출력 : true
Boolean(function(){});				// 출력 : true

 

2. 부정 논리 연산자 2번 사용 (!!)

// ! 부정 논리 연산자를 2번 사용하는 방법
!!'0';					         // 출력 : true
!!'';					         // 출력 : false
!!0;					         // 출력 : flase
!!undefined;					// 출력 : false
!!true;						// 출력 : true
!!null;						// 출력 : false
!!'String';				         // 출력 : true
!![];					         // 출력 : true
!!{};					         // 출력 : true
!!function(){};					// 출력 : true

 

데이터 타입을 바꿀 수 있는 방법도 많고 제가 예측할 수가 없을 것 같습니다...

그냥 타입스크립트를 공부하고 싶은 마음이 ㅎㅎㅎㅎ,,

 

 

 

 

단축 평가

 

JavaScript 객체

 

자바스크립트에서 객체는 키(key)-값(value)로 구성된 프로퍼티(property)의 집합이라고 합니다.
프로퍼티는 0개 이상 구성되어 있습니다.

 

 

 

 

문제) 객체를 할당할라는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

 

1. Person 변수에 null 값일 때 확인 해보자

let person = null;
let value = person.name;

// VM517:1 Uncaught TypeError: Cannot read properties of null (reading 'name') 
// at <anonymous>:1:20

 

person에 객체를 담은 것이 아닌 null을 담고 프로퍼티 키인 name을 이용해 해당 프로퍼티 값을 뽑아 낼라고 하였지만 오류가 발생하였다..     오류의 내용은 해당 프로퍼티가 없기 때문에 읽을 수 없다는 에러였다.

null과 같이 값을 할당 안되어서 person의 값이 undefined일 경우에도 동일한 오류가 발생한다.

 

다른 상황을 보도록 하자

 

2. Person 변수에 프로퍼티가 0개일 때 확인 해보자

let person = {};
let value = person.name;

console.log(value);
// 출력
// undefined

 

 

 

 

해결1) 에러 발생시키지 않는 단축평가

 

&& 연산자를 이용하여 에러를 방지하였다.

값이 없으면 null을 반환하게 되고 값이 있으면 해당 프로퍼티의 값을 반환하게 된다.

false로 평가되는 Falsy의 값들은 (false, undefined, null, 0, -0, NaN, '')들이 있고''은 객체로 평가 될 수 있으니 조심해야한다.

let person = null;
let value = person && person.name;

console.log(value);
// 출력
// null

let person = '';
let value = person && person.name;

console.log(value);
// 출력 (아래 값은 띄어쓰기도 없는 문자열)
// 

let person = {name :'aoxx'};
let value = person && person.name;

console.log(value);
// 출력 
// aoxx

 

 

 

 

해결2) 옵셔널 체이닝

 

ES11 버전부터 도입된 옵셔널 체이닝은 연산자 ?.를 사용하게 됩니다.

연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 값을 반환합니다.

let elem = null;

let value = elem?.value;
console.log(value);
// 출력
// undefined

 

하지만 해결1에서 말한 false로 평가되는 Falsy의 값들은 (false, undefined, null, 0, -0, NaN, '')들이 있지만 null, undefined가 아니면 우항의 프로퍼티 값을 반환하게 된다.

let str = '';

let length = str?.length;
console.log(length);
// 출력
// 0

 

보았는가? null, undefined는 ?. 연산자를 사용하면 undefined를 반환하였지만 다른 Falsy값을 넣으면 프로퍼티 참조 값을 반환하게 됩니다.

 

옵션널 체이닝을 사용하는 주요 이유는 프로퍼티나 메서드가 존재하지 않을 수 있으므로 객체 구조에서 안전하게 접근하기 위해 사용되었습니다.

 

그래서 저희 개발자분들도 코드도 더 간결하고 가독성 좋고 null 체크할 필요도 없는 옵셔널 체이닝 사용해 보는 게 어떨까요?

 

 

 

감사합니다.