[JavaScript] 타입 변환과 단축 평가

모든 언어가 그러하듯, 자바스크립트도 여러 변수 타입을 갖고있습니다.

그 사이에서 개발자가 원하는 대로 변수의 타입을 변환하는 것이 가능하도록 해주는 것이 타입 변환입니다.

 

타입변환의 유형에는 명시적 타입변환과 암묵적 타입 변환이 있습니다 :)

 

간단한 예로, integer타입의 변수를 string으로 변환하는 것을 예로 들어보겠습니다.

const num=1234;

//toString 매서드를 이용하면, 문자열로 타입을 변경할 수 있다.
const first=num.toString();

//다른 타입의 변수에 string문자열을 + 해주면, 자동으로 string으로 형 변환이 된다.
const second=num+"";

console.log(typeof first);
console.log(typeof second);

toString이라는 내부 매서드를 사용하거나, 더 간단하게 정수타입 변수인 num에 문자열을 더해주는 연산만 하더라도

형 변환을 시킬 수 있습니다. 

 

이 두 방법의 차이는, 첫번째 toString은 개발자가 의도적으로 "나 얘 string으로 바꿀거에요~"하고 선언하여 타입을 바꾸는 방식이기 때문에 명시적 타입변환이고, 두번째 방법은 직접적으로 형변환을 한다는 어떠한 의도 없이, JS엔진이 자체적으로 형태를 변환시켜주기 때문에 암묵적 타입 변환이라고 부르는겁니다! 

 

1.암묵적 타입 변환

---

앞서 말했듯이 암묵적 타입 변환은 JS엔진이 자동으로 타입을 변환시켜주는 것을 말합니다. 

우선, 문자열로의 암묵적 타입 변환에 대해 이야기 해봅시다.

 

문자열 타입으로 변환

아래는 문자열로의 암묵적 타입 변환에 대한 다양한 예시입니다.

'5' + 12  //"512"
1 + ''	//"1"
-1 + ''	//"-1"
NaN + '' //"NaN"
undefined + '' //"undefinded"
({}) + '' // "[object Object]"
[10,20] + '' // "10,20"

 보시면, 모두가 문자열과의 + 연산을 통해 암묵적인 타입 변환이 이루어지는 것을 보실 수 있습니다.

정말 간단하게 이야기 하자면, string타입으로의 암묵적 형 변환은, 문자열과의 + 연산을 통해 이루어진다~ 라고 기억해두셔도 충분하실겁니다! 실제 개발에서도 암묵적인 문자타입으로의 변환은 + '' 정도밖에 쓰지 않습니다 :)

---

 

숫자 타입으로 변환

이번에는 숫자타입으로의 암묵적 타입변환입니다. 

문자열로의 변환이 + 연산자를 통한 문자열과의 연산을 통해 형변환이 이루어졌다면, 숫자 타입은 - , * , / 연산자 즉, 산술 연산자와의 연산을 통해 형태가 변한다는 뜻입니다!

 

아래는 숫자타입으로의 암묵적 타입 변환 예시입니다.

25 - '3'	// 22
3 * '12'	// 36
10 / 'hello'	// NaN

예시와 같이, 숫자 타입과의 산술연산을 통해 자동으로 문자열타입이 숫자 타입으로 변환되어 실행된 연산의 결과를 반환합니다. 

숫자로 타입변환이 가능한 타입은 숫자로 타입을 변환하여 연산을 진행하고, 숫자 타입으로 변환이 불가능한 내용은 NaN을 반환해줍니다.

 

그런데, "+ 연산자도 산술 연산자인데 왜 형변환에 사용할 수 없을까?" 라는 의문점이 들으실 수 있습니다. 

물론 당연하게도 + 연산자를 통한 숫자타입으로의 타입변환도 가능합니다 ㅎ 다만 형태가 조금 특이하게 느껴지실 수 있습니다.

+ '12'	// 12
+ '5'	// 5
+ 'hello'	//NaN
+ true	// 1
+ false	// 0
+ null	// 0

위의 경우와 같이 +를 붙이고 타입변환이 가능한 내용에서만 암묵적 타입 변환이 작동하고, 배열, 객체, undefined, 변환불가능한 문자열과 같은 내용은 NaN을 반환하게 됩니다!  저는 거의 사용하지 않는 타입변환 방식이네요 ㅎ

---

불리언 타입으로 변환

불리언 타입으로의 변환은 실제로 제가 가장 많이 사용하는 타입변환이라고 봐도 무방합니다.

0, null, undefined, NaN 등과 같은 값은 false로, 나머지는 true로 생각하시면 편합니다.

직접 boolean값으로 변환하는 간단한 방법은 두가지로, Boolean(값)과 !!가 있습니다.

Boolean(1);	// true

//헷갈리기 쉽지만, false를 인식하는것이 아닌, 문자열이 존재하는가 에 대한 판단을 근거로 true를 반환한다.
Boolean('false');	// true
Boolean(NaN);	// false

//배열과 객체는 값이 없더라도 true이다
Boolean({});	// true
Boolean([]);	//true


// 부정 논리 연산자(!)를 두개 붙이면, 간단하게 boolean값으로 형변환이 가능하다.
!!'123'	// true
!!NaN	// false

실제로 개발에서 사용하는 비중은, 이중 부정 논리연산자를 사용합니다.

예시로는, api에서 받아온 response값이 존재하는 경우에만 특정 로직을 실행하는 경우, if( !!resopnse ) 이런식으로 사용하곤 합니다.

 

보통 불리언값을 사용하는 경우는, if를 사용하는 경우가 많기 때문에 왠만한 경우에는 임의로 형변환을 해주지 않더라도 알아서 타입변환을 한 뒤 체크하기 때문에 실제로 사용하는 경우가 많지는 않은 경우가 많습니다.

 

 

여기까지 자바스크립트의 타입변환에 대해 알아봤습니다. 저는 실제로 개발에서 사용하실 때에는 String(), Boolean()과 같이 형변환을 사용하기 보다는, + ''과 !!를 많이 사용하는 편입니다. 이상으로 타입변환에 대해 설명해봤습니다~