[9장 타입 변환과 단축 평가] 명시적/암시적 타입 변환

kelly09 2024. 6. 1. 15:45

🍰 타입 변환

: 값의 타입을 변환하는 것.

개발자가 의도적으로 타입 변환 - 명시적 타입 변환(explicit coercion)
자바스크립트 엔진이 표현식 평가 시 코드 문맥을 고려해 암묵적으로 타입 강제 변환 - 암묵적 타입 변환(implicit coercion)

// 명시적 변환
let str = "123";
console.log(Number(str)); // 123(숫자)
console.log(typeof str); // string

// 암시적 변환
let x = 10;
let value = x + "문자열";
console.log(value); // 10문자열
console.log(typeof value); // string

두 방식 모두 기존 원시 값을 직접 변경하는 것은 아님
원시 값은 변경 불가능한 값(immutable value)
타입 변환 -> 기존 원시 값을 사용해 다른 타입의 새로운 원시 값 생성
위 예제에서 암묵적으로 생성된 문자열 '10'은 x 변수에 재할당되지 않음

🍰 암묵적 타입 변환을 꼭 사용해야 할까?

타입 변환 결과를 예측하기 어려우니까 명시적 타입 변환만 사용하고 암묵적 타입 변환은 발생하지 않도록 코드를 짜면 안 되는지?
암묵적 타입 변환이 가독성 측면에서 더 좋을 수도 있음
코드를 예측할 수 있어야 하는 게 중요!

(10).toString();

10 + '';

🍰 암묵적 타입 변환

🍴 문자열 타입으로 변환

12 + '12' // '1212'

피연산자 중 하나 이상이 문자열 -> '+'가 문자열 연결 연산자로 동작
문자열 연결 연산자의 역할 : 문자열 값을 만드는 것
=> 코드 문맥상 모두 문자열 타입이어야 함

/* 숫자 타입 */
1 + '' // "1"
NaN + '' // "NaN"
Infinity + '' // "Infinity"

/* 불리언 타입 */
true + '' // "true"
false + '' // "false"

/* null, undefined */
null + '' // "null"
undefined + '' // "undefined"

/* 객체 타입 */
Math + '' // "[object Math]"
[] + '' // ""
[1, 2] + '' // "1, 2"

🍴 숫자 타입으로 변환

산술 연산자의 역할 : 숫자 값 만드는 것
산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 함
피연산자를 숫자 타입으로 변환 못 할 경우 -> NaN

/* 문자열 타입 */
+'' // 0
+'0' // 0
+'10' // 10
+'value' // NaN

/* 불리언 타입 */
+true // 1
+false // 0

/* null, undefined */
+null // 0
+undefined // NaN

/* 객체 타입 */
+{} // NaN
+[] // 0
+[1, 2] // NaN

🍴 불리언 타입으로 변환

if문, 삼항 조건 연산자의 조건식 -> 논리적 참/거짓으로 평가돼야 하는 표현식
자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 변환
이 때 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분함
Truthy -> true, Falsy -> false로 암묵적 타입 변환
- Falsy 값: false, undefined, NaN, null, 0, -0, ''(빈 문자열)

🍰 명시적 타입 변환

: 표준 빌트인 생성자 함수를 new 연산자 없이 호출하기, 빌트인 메서드 사용하기, 암묵적 타입 변환이용하기

🍴 문자열 타입으로 변환

문자열이 아닌 값을 문자열 타입으로 변환하는 법

String 생성자 함수를 new 연산자 없이 호출
Object.prototype.toString 메서드 사용
문자열 연결 연산자 이용

// 1. String constructor function 호출
/* 숫자 -> 문자열 */
String(1); // "1"
String(undefined); // "undefined"
String(NaN); // "NaN"

/* 불리언 -> 문자열 */
String(true); // "true"
String(false); // "false"

// 2. Object.prototype.toString 메서드 사용
/* 숫자 -> 문자열 */
(1).toString(); // "1"
(undefined).toString(); // "undefined"

/* 불리언 -> 문자열 */
(true).toString(); // "true"
(false).toString(); // "false"

// 3. 문자열 연결 연산자
/* 숫자 -> 문자열 */
2 + ''; // "2"
NaN + ''; // "NaN"

/* 불리언 -> 문자열 */
true + ''; // "true"
false + ''; // "false"

🍴 숫자 타입으로 변환

Number 생성자 함수 new 연산자 없이 호출
parseInt, parseFloat 함수 사용(문자열만 숫자로 변환 가능)
+단항 산술 연산자 이용
*산술 연산자 이용

// 1. Number constructor function 호출
// 문자 -> 숫자
Number('1'); // 1
Number(true); // 1

// 2. parseInt, parseFloat 함수 사용
// 문자열 -> 숫자
parseInt('1'); // 1
parseFloat('20.23'); // 20.23

// 3. + 단항 산술 연산자 이용
// 문자열 -> 숫자
+'0'; // 0

// 불리언 -> 숫자
+true; // 1
+false; // 0

// 4. * 산술 연산자 이용
// 문자열 -> 숫자
'0' * 1; // 0

// 불리언 -> 숫자
true * 1; // 1
false * 1; // 0

🍴 불리언 타입으로 변환

Boolean 생성자 함수를 new 연산자 없이 호출
!부정 논리 연산자 두 번 사용

/* 1. Boolean constructor function 호출 */
// 문자열 -> 불리언
Boolean('a'); // true
Boolean(''); // false(빈 문자열)
Boolean(' '); // true(공백 문자열)

// 숫자 -> 불리언
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true

// null, undefined -> 불리언
Boolean(null); // false
Boolean(undefined); // false

// 객체 -> 불리언
Boolean({}); // true
Boolean([]); // true

/* ! 부정 논리 연산자 두 번 사용 */
// 문자열 -> 불리언
!!'a'; // true
!!''; // false

// 숫자 -> 불리언
!!0; // false
!!NaN; // false

// null, undefined -> 불리언
!!null; // false
!!undefined; // false

// 객체 -> 불리언
!!{}; // true
!![]; // true