타입 변환과 단축 평가

기존 블로그에 작성한 내용을 velog로 이전한 글입니다

1. 타입 변환

기존 값의 타입을 다른 타입으로 변환하는 것.
명시적 타입 변환과 암시적 타입 변환이 있다.

• 명시적 타입 변환

  개발자가 명시적으로 타입을 변환하는 것.

  var num = 10;
  var str = num.toString(); // str 값은 '10'이 된다.

• 암묵적 타입 변환

  개발자의 의도와 상관 없이 자바스크립트 엔진이 타입을 바꾸는 것.

  var num = 10;
  var str = x + ""; // str 값은 '10'이 된다.

  위 예제에서 암묵적 타입 변환의 경우 '10'이 메모리에 새로 할당 되고(x)
  '10'+''이 평가된다. 이후 새로 할당 되었던 '10'(x)은 가비지 컬렉터가 정리한다.

2. 암묵적 타입 변환

자바스크립트 엔진은 문맥에 맞게 암묵적 타입 변환을 한다.

"20" + 4; // '204'
5 * "50"; // 250
!0; // true

2.1. 문자열 타입으로 변환

연산자는 하나 이상의 피연산자가 문자열일 경우 문자열 연결 연산자로 동작한다.

암묵적 타입 변경을 활용할 때 문자열이 아닌 타입 + '' 형식을 활용하여 숫자를 문자열로 바꿀 수 있다.

0 + '' // '0'
NaN + '' // 'NaN'
true + '' // 'true'

({}) + '' // '[object Object]'
Math + '' // '[object Math]'
[] + '' // ''
[40, 50] + '' // '40,50'

2.2. 숫자 타입으로 변환

산술 연산자를 쓸 때는 문맥상 피연산자가 모두 숫자여야 하므로,
문자열 타입인 숫자형태의 문자인 경우 숫자로 변환하여 연산한다.

1 * "10"; // 10

2.3. 불리언 타입으로 변환

자바스크립트 엔진은 Truthy한 값을 true로, Falsy한 값을 false로 암묵적 변환 한다.

• Falsy
  false, undefined, null, 0, -0, NaN, ''(빈문자열)

• Truthy
  Falsy 하지 않은 값

3. 명시적 타입 변환

3.1. 문자열 타입으로 변환

방법은 String(), .toString(), 문자열 연결 연산자를 이용하는 방법이 있다.

String(1)(
  // '1'
  1
).toString(); // '1'
1 + "1"; // '11'

3.2. 숫자 타입으로 변환

방법은 Number(), parseInt, parseFloat, + 단항 산술 연산자, * 산술 연산자를 이용하는 방법이 있다.

Number("0"); // 0
parseInt("0") + // 0
  "0" + // 0
  true; // 1
"0" * 1; // 0

3.3. 불리언 타입으로 변환

방법은 Boolean(), !!을 사용하는 방법이 있다.

Boolean("X"); // true
Boolean(0); // false
!!"x"; // true
!!Nan; // false

4. 단축 평가 <- 굉장히 중요하고 자주 쓰임

||, && 연산자를 이용하여 단축 평가를 이용할 수 있다.

"Cat" && "Dog"; // 'Dog'
"Cat" || "Dog"; // 'Cat'

위 예제에서 && 연산자는 피연산자 양쪽 모두가 True가 나오는지 평가해야 하므로

'Cat'이 true더라도 Dog을 평가하여 'Dog'을 그대로 반환한다.

|| 연산자는 한쪽만 참이어도 True 이므로 'Cat'이 True인 시점에서 연산을 멈추가 'Cat'을 반환한다.

참고자료: poiemaweb.com