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

이 글은 자바스크립트를 저 나름대로 공부하고 작성하는 글로

잘못된 내용이 존재할 수 있습니다. 잘못된 내용을 발견하면 언제든 지적 부탁드립니다.

타입 변환이란?

자바스크립트의 모든 값은 타입이 존재한다. 이를 다른 타입으로 변경하는 것을 타입변환이라고 한다.

타입변환은 명시적 타입변환과 암묵적 타입변환 두 가지로 나뉘는데 명시적 타입변환은 개발자가 의도적으로 타입 변환을 진행하는 것이고, 묵시적 타입변환은 자바스크립트 엔진에 의해 자동적으로 변환되는 것이다.

문자열이 아닌 값을 문자열 타입으로 변경하는 방법 또한 명시적인 방법과 암묵적인 방법으로 나뉜다.

암묵적 변환으로는 템플릿 리터럴에 표현식을 삽입하는 것이 존재한다.

`1 + 2 = ${1 + 2}` // -> "1 + 2 = 3"

명시적인 형변환으로는

1. String 생성자 함수 호출

2. Object.prototype.toString 메서드 사용

3. 문자열 연결 연산자

String(1); // -> "1"

NaN.toString() // -> "NaN"

Infinity + ''; // -> "Infinity"

다른 타입의 값을 숫자 타입으로 변경하는 방법은

1. Number 생성자 함수를 호출

2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 가능)

3. + 단항 산술연산자 사용

4. * 산술 연산자 사용

Number('0') // 0

parseInt('0') // 0
parseFloat('10.53') // 10.53

+'0' // 0

'-1'*1 // -> -1

불리언 타입으로 변환하는 방법은

1. Boolean 생성자 함수 호출

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

Boolean(NaN) // false

!!null // false
!!1 // true

단축 평가는 or (||)연산자와 and(&&) 표현식 평가가 불리언 값이 아닌 어느 한쪽 값으로 평가되는 것이다.

or 연산자의 경우 a || b -> a가 Truthy한 값이라면 a Falsy할 경우 b를 반환한다.

and 연산자의 경우 a && b -> a가 참일 경우 b 거짓일 경우 a를 반환한다.

true || {} // -> {}
'' || {} // -> ''

'string' && [] // -> []
0 && true // -> 0

ES11부터 옵셔널 체이닝 연산자가 도입되었는데 null, undefined이 아닐 때 프로터피 참조를 이어가기 위해 도입되었다.

let obj = null;

let value = obj?.value // value = undefined

기존 or and 연산자의 경우 단축평가 이후 null값이나 undefined 값의 프로퍼티를 참조할 경우 에러가 발생했는데 옵셔널 체이닝 연산자를 사용하면 null, undefined일 경우 자동으로 해당 값을 undefined으로 반환한다.

?? 는 ES11부터 도입된 null 병합 연산자이다. 이는 연산자의 좌항의 값이 null, undefined일 경우 우항을 반환하고 아닐 경우 좌항을 반환하는 연산자 이다.

null ?? 'string' // -> string

'' ?? 'string' // -> ''