자바스크립트 명시적 타입 변환 vs 암묵적 타입 변환

자바스크립트에서는 다양한 데이터 타입들이 자동으로 형변환이 일어나는 경우가 빈번한데요. 물론 자동으로 형변환이 되도록 작성하는 코드는 좋지 못한 코드입니다.(다른 사람들이 이해하기 어려운 코드는 좋지 못한 코드이기 때문) 그러나 타입 변환에 대해 알고 있어야 예기치 못한 오류를 발생시키지 않을 수 있기 때문에 꼭 알아둬야하는 부분입니다! 

특히나 자바스크립트는 다른 언어에 비해 굉장히 수용적인 아이(?)이기 때문에 타 언어에서는 허용되지 않는 부분이 자바스크립트에서는 허용이 되는 경우가 굉장히 많아서 이 참에 확실하게 알고 넘어가는 것이 좋습니다.

1. 명시적 타입 변환 (Explicit Conversion)

• 정의: 개발자가 의도적으로 직접 함수나 연산자를 사용해 변환하는 것. (함수나 메서드를 사용)
• 방법: String(), Number(), Boolean() 등을 사용.

1. 문자열로 변환

let age = 25; // 숫자
let str = String(age); // 숫자를 문자열로 변환
console.log(str); // "25" (문자열)
console.log(typeof str); // "string"

2. 숫자로 변환

let str = "123"; // 문자열
let num = Number(str); // 문자열을 숫자로 변환
console.log(num); // 123 (숫자)
console.log(typeof num); // "number"

⭐ 중요: 변환할 수 없는 문자열(예: "abc")은 NaN을 반환합니다.

let invalidNumber = Number("abc");
console.log(invalidNumber); // NaN, "abc"는 숫자로 해석할 수 없기 때문

3. 불리언으로 변환

let emptyStr = ""; // 빈 문자열
console.log(Boolean(emptyStr)); // false (빈 문자열은 falsy)

let filledStr = "hello"; // 채워진 문자열
console.log(Boolean(filledStr)); // true (채워진 문자열은 truthy)

 

4. !!를 이용한 불리언 변환

• !!는 값을 불리언으로 변환할 때 사용됩니다. 두 번의 부정을 통해 원래 값을 불리언으로 변환합니다.

console.log(!!0); // false
console.log(!!"hello"); // true

⭐ 중요: !!를 사용하면 값이 truthy인지 falsy인지 빠르게 확인할 수 있습니다.

      참고로 falsy의 기준은 아래와 같습니다.

1. 아무 글자도 없는 String = ''
2. 값이 없는 경우= undefined, null, fasle, NaN
3. 0

2. 암묵적 타입 변환 (Implicit Conversion)

• 자바스크립트 엔진이 자동으로 데이터 타입을 변환하는 것입니다. 주로 연산자나 비교 연산에서 발생합니다.
• 암묵적 타입 변환은 좋지 못한 방법이기 때문에 아래의 예시를 참고하여 가급적이면 사용하지 않는 것이 좋습니다.

1. 문자열로의 암묵적 변환 (+ 연산자)

let age = 30; // 숫자
let test = age + ""; // 숫자를 문자열로 변환
console.log(test); // "30" (문자열)
console.log(typeof test); // "string"

⭐ 중요: + 연산자는 문자열과 숫자를 만나면 문자열로 변환합니다.

console.log("hello" + 5); // "hello5" (5가 문자열로 변환됨)

2. 숫자로의 암묵적 변환 (-, *, / 연산자)

let str = "10"; // 문자열
let result = str - 5; // 문자열을 숫자로 변환 후 연산
console.log(result); // 5 (숫자)
console.log(typeof result); // "number"

⭐ 중요: -, *, / 연산자는 문자열을 숫자로 변환하여 연산합니다. (이 연산자들은 숫자에서만 사용이 가능하기 때문)

console.log("10" * "2"); // 20
console.log("abc" * 2); // NaN (문자열이 숫자가 아니기 때문에 숫자로 변환되지 않음)

3. 불리언으로의 암묵적 변환 (조건문)

let value = 0; // 숫자 0
if (value) {
  console.log("true");
} else {
  console.log("false"); // false (0은 falsy)
}

⭐ 중요: 0, "", null, undefined, NaN, false는 모두 falsy로 취급됩니다.

console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false

헷갈리기 쉬운 부분

• == vs ===

console.log(5 == "5"); // true (암묵적 변환으로 값 비교)
console.log(5 === "5"); // false (타입도 비교, 변환 없음)

• 빈 배열 []과 빈 객체 {}의 변환

console.log([] + []); // "" (빈 문자열, 배열이 문자열로 변환됨)
console.log({} + []); // "[object Object]" (객체가 문자열로 변환됨)