[Javascript] 타입 변환

 

📌타입변환

타입 변환에는 두가지 종류가 있다. 

 

1. 명시적 타입 변환(타입 캐스팅)

= 개발자가 의도적으로 타입을 변환하는 것

const num = 1;
const str = num.toString();
console.log(typeof str, str);  // string 1
console.log(typeof num, num);  // number 1

 

 

2. 암묵적 타입 변환(타입 강제 변환)

= 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것

const num = 1;
const str = num + " ";
console.log(typeof str, str); // string 1
console.log(typeof num, num); // number 1

여기서 자바스크립트 엔진은 num + " "를 평가하기 위해 num값을 바탕으로 새로운 문자열 값 '1'을 생성하고 평가
이 때 임의로 만든 '1'은 암묵적으로 타입을 변화시켜 사용한 후, 한번만 쓰고 버린다.

 

하지만 두가지 방법 모두 기존 값의 타입을 직접 변경하는 것은 아님

타입 변환은 기존의 원시값을 이용해 다른 타입의 새로운 원시 값을 생성하는 것이기 때문이다.

 

• 암묵적 타입 변환은 개발자의 의지가 보이지 않기 때문에 오류를 생산할 가능성이 있다
• 하지만, 가독성 측면에서는 명시적보다 좋을 수 있다 (예: (10).toString()보다는 10 + ' '이 더 간결)
• 가장 좋은 건 코드를 예측할 수 있고, 다른 사람이 보기에도 이해하기가 쉬워야한다.

 

 

---

🤐 암묵적 타입 변환

암묵적 타입 변환은 문자열, 숫자, boolean으로 타입을 자동 변환 시킨다.

 

1. 문자열로 변환

1 + "2"  // "12"

JS Is Weird에 있는 문제중에 이런게 있다..

이 문제의 답은 "33"인데, 암묵적 타입 변환에 따라서 1 + 2는 우선 3이고, 3 + "3"이 되므로 "33"이 되는 것이다..

근데 여기서 문자열이 중간에 들어가면 이런식으로 "123"이 되어버린다.

"1" + 2 + 3; // -> "123"
1 + "2" + 3; // -> "123"

 

 

그리고, 이런 연산자 표현식에서만 암묵적 타입 변환이 일어나는 건 아니다.

ES6에서 사용되는 템플릿 리터럴에서의 표현식 삽입도 문자열로 타입변환을 일으킨다.

`1 + 1 = ${1 + 1}`  // "1 + 1 = 2"

 

추가적인 예시들

// 숫자
0 + " "  // "0"
-1 + " "  // "-1"
NaN + " " // "NaN"
Infinity + " " // "Infinity"

// boolean 타입
true + " "   // "true"

// etc
null + " "    // "null"
undefined + " "   // "undefined"
(Symbol()) + " "  // TypeError: Cannot convert a Symbol value to a string

// 객체
({}) + " "           // "[object Object]"
Math + " "           // "[object Math]"
[] + " "             // ""
[10, 20] + " "       // "10, 20"
(function(){}) + " " // "function(){}"
Array + " "          // "function Array() { [native code] }"

 

여기서 Symbol()은 뭐지?

ES6에서 도입된 7번째 원시 타입으로

고유한 키를 가지며 설명을 추가할 수 있다.

const sym = Symbol("설명")
console.log(sym.description)  // "설명"

 

객체의 고유한 프로퍼티 키를 생성하는 것에 사용할 수 있다.

const MY_KEY = Symbol();
const obj = {
  [MY_KEY]: "비밀 값"
};

console.log(obj[MY_KEY]);  // "비밀 값"
Object.keys(obj);  // [] - Symbol 키는 일반적인 순회에서 제외됨

 

 new Symbol()로는 사용할 수 없고, Symbol의 특별한 용도를 보호하기 위해 암묵적 타입 변환은 제한된다.

 

2. 숫자열로 변환

1 - "1"       // 0
1 * "10"      // 10
1 / "one"     // NaN

산술 연산자를 사용하는 식에서 문자열을 숫자로 바꿀 수 있다면 숫자 타입으로 변화시켜서 계산이 진행된다.

이때 만약 문자열을 숫자로 변화시킬 수 없다면 결과값은 NaN이 된다.

 

산술 연산자뿐만 아니라 비교연산자도 크기를 비교하기 위해서 숫자 타입으로 변화시킨다.

"1" > 0   // true

 

자바스크립트는 + 단항 연산자를 사용하면 숫자가 아닌 값을 숫자 타입으로 암묵적 타입변화를 시킨다.

1 + " "  // "1" -> 이건 문자열
+ "1"    // 1 -> 이건 숫자

이렇게 되는 이유는

첫번째 +는 이항 연산자로 피연산자 중 하나가 문자열이면 문자열로 연결하는 연산을 하고,

두번째 +는 단항 연산자로 피연산자를 숫자로 변환을 시도하는 연산자이기 때문이다.

 

이 외의 숫자열로 변환하는 예시

+" "       // 0
+"글자"    // NaN
+true      // 1
+null      // 0
+undefined // NaN
+{}        // NaN
+[]        // 0

빈 문자열, 빈 배열, null, false는 0으로, true는 1로 변환되고 나머지는 NaN이 된다.

여기서 +{}와 +[]가 서로 다른 이유

+{}  // NaN

// 내부 변환 과정
// 1. {}를 원시값으로 변환 (ToPrimitive)
//    - valueOf() 호출 -> 객체 자신 반환
//    - toString() 호출 -> "[object Object]" 반환
// 2. "[object Object]"를 숫자로 변환 -> NaN

 

+[]  // 0

// 내부 변환 과정
// 1. []를 원시값으로 변환 (ToPrimitive)
//    - valueOf() 호출 -> 배열 자신 반환
//    - toString() 호출 -> "" 반환
// 2. ""를 숫자로 변환 -> 0

 

3. 불리언 타입로 변환

JS 엔진은 불리언 타입이 아닌 값을 Truthy값( = 참으로 평가되는 값)과 Falsy 값(= 거짓으로 평가되는 값)으로 구분한다.

 

Falsy로 평가되는 값들

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

Falsy로 평가되는 값들 이외에는 Truthy값이다.

if ("0") console.log("빈문자열이 아니면 True");
if ({}) console.log("객체도 true 1");
if ([]) console.log("객체도 true 2");

위의 예시 모두 출력되므로, Truthy값을 가짐을 알 수 있다.

---

😯 명시적 타입 변환

개발자의 의도에 따라서 명시적으로 타입을 변화하는 방법은 여러가지가 있다. 생성자 함수(String, Number, Boolean)를 new없이 호출하는 방법, 빌트인 메서드(toString 등)을 이용하는 방법, 암묵적 타입 변환을 활용하는 방법 등이 있다.

 

1. 문자열로 변환하는 방법

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

// String 생성자 함수 사용
String(1)         // "1"
String(Infinity)  // "Infinity"

// toString 메서드 사용
(1).toString()    // "1"
(true).toString() // "true"

// 문자열 연결 연산자 사용
1 + " "      // "1"
false + " "  // "false"

 

2. 숫자로 변환하는 방법

• Number 생성자 함수를 new 연산자 없이 호출
• parseInt, parseFloat 함수를 사용
• + 단항 산술 연산자 사용
• * 산술 연산자 사용

// Number 생성자 사용
Number("1")    // 1
Number(true)   // 1

// parseInt, parseFloat 사용
parseInt("23")      // 23
parseFloat("11.7")  // 11.7

// + 단항 산술 연산자 사용
+"1"     // 1
+true    // 1

// * 산술 연산자 사용
"0" * 1    // 0
"-1" * 1   // -1
true * 1   // 1

 

3. boolean으로 변환하는 방법

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

// Boolean 연산자 사용
Boolean("x")   // true
Boolean(" ")   // false(빈문자열)
Boolean(NaN)   // false
Boolean({})   // true
Boolean([])    // true

// ! 부정 논리 연산자 두 번 사용
!!"x"      // true
!!""       // false
!!NaN      // false
!!null     // false
!!{}       // true
!![]       // true

 

 

---

 

여기까지 하고나서 JS Is Weird의 문제를 다시 풀어보자

이건 답이 뭐가 나올까

 

 

 

정답은 1이다..

왜냐하면 !![]가 true이고, 앞에 +가 붙는건 + 단항 연산자이므로, +true가 되어서 1이 된다.....와아

출처

모던 자바스크립트 Deep Dive(이웅모, 위키북스)