JavaScript - 타입 변환
안녕하세요, JavaScript 개발자 지망생 여러분! 오늘은 JavaScript에서의 타입 변환에 대해 흥미로운 세상으로 안내해 드리겠습니다. 프로그래밍 초보자라도 걱정하지 마세요; 이 길을 단계별로 안내해 드릴게요. 수년 동안 수많은 학생들을 가르쳐온 경험을 바탕으로 말이죠. 따뜻한 커피 한 잔을 마시며(또는 좋아하는 음료를 마시며), 시작해 보세요!
JavaScript 타입 변환
정밀한 내용에 들어가기 전에, 타입 변환의 의미를 이해해 보겠습니다. 레고 상자를 가지고 있다고 가정해 봅시다. 하지만 일부 조각이 나무로 만들어져 있다고 치면, 레고 성을 짓기 위해서는 그 나무 조각을 레고 블록으로 변환해야 합니다. 이게 바로 JavaScript에서의 타입 변환입니다 - 하나의 데이터 타입을 다른 타입으로 변환하는 것입니다.
JavaScript에서는 두 가지 주요 변환 유형이 있습니다:
- 묵시적 변환 (Type Coercion)
- 명시적 변환 (Type Casting)
이 두 가지를 자세히 탐구해 보겠습니다.
묵시적 타입 변환
묵시적 변환은 JavaScript가 다른 타입의 값들에 대해 연산을 수행할 때 자동으로 일어납니다. 마치 JavaScript가 " 걱정 마, 나한테 맡겨!" 하고 배경에서 타입을 변환하는 것처럼입니다.
문자열로 변환 (묵시적 변환)
JavaScript는 문자열로 변환하는 데 매우 친절합니다. 마치 누구와나 쉽게 대화를 나눌 수 있는 친구처럼!
let num = 5;
let str = "The number is: " + num;
console.log(str); // Output: "The number is: 5"
console.log(typeof str); // Output: "string"이 예제에서, JavaScript는 문자열과 + 연산자를 사용할 때 숫자 5를 자동으로 문자열로 변환했습니다. 마치 숫자 주위에 따라다니는 인용符처럼입니다.
숫자로 변환 (묵시적 변환)
숫자에 대해선, JavaScript는 최선을 다해 이를 이해하려고 합니다. 마치 수학 선생님이 학생의 지저분한 글씨를 해독하려는 것처럼.
let str = "10";
let num = str - 5;
console.log(num); // Output: 5
console.log(typeof num); // Output: "number"이 예제에서, JavaScript는 - 연산자를 보고 "아! 수학을 하자!"라고 생각하여 문자열 "10"을 숫자 10으로 변환한 후 5를 뺐습니다.
부울로 변환 (묵시적 변환)
JavaScript는 일부 값이 "참"이고 다른 값이 "거짓"으로 간주됩니다. 마치 학생들을 "출석"과 "결석"으로 분류하는 것처럼.
if ("Hello") {
console.log("This will run because 'Hello' is truthy");
}
if (0) {
console.log("This won't run because 0 is falsy");
}이 예제에서, JavaScript는 "Hello"를 true로와 0을 false로 묵시적으로 변환합니다.
null을 숫자로 변환 (묵시적 변환)
null은 조금 특별한 케이스입니다. 숫자로 변환되면 0이 됩니다. 마치 숙제를 제출하지 않은 학생이 아직도 0점을 받는 것처럼.
let x = null;
console.log(+x); // Output: 0단일 양수 연산자는 null을 숫자로 변환하려고 시도하여 0이 됩니다.
undefined과 숫자 및 부울로 변환 (묵시적 변환)
undefined는 더욱 복잡합니다. 숙제를 제출하지 않은 학생이 반 명부에도 없는 것처럼.
let x;
console.log(+x); // Output: NaN (Not a Number)
console.log(Boolean(x)); // Output: false숫자로 변환할 때 undefined는 NaN이 되고, 부울로 변환할 때 false가 됩니다.
명시적 타입 변환
명시적 변환은 우리, 프로그래머들이 JavaScript에게 정확히 어떤 타입으로 변환하고 싶은지 명확히 알려주는 것입니다. 마치 연극의 감독이 배우들에게 정확히 어떤 역할을 맡겨야 하는지 말하는 것처럼.
문자열로 변환 (명시적 변환)
문자열로 변환하는 데 사용할 수 있는 몇 가지 방법이 있습니다:
let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";
console.log(str1, typeof str1); // Output: "123" string
console.log(str2, typeof str2); // Output: "123" string
console.log(str3, typeof str3); // Output: "123" string이 모든 방법은 동일한 결과를 얻지만, String()과 toString()은 우리의 의도를 더 명확하게 표현합니다.
숫자로 변환 (명시적 변환)
숫자로 변환하는 데도 비슷한 옵션이 있습니다:
let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;
console.log(num1, typeof num1); // Output: 456 number
console.log(num2, typeof num2); // Output: 456 number
console.log(num3, typeof num3); // Output: 456 numberNumber()과 parseInt()는 우리의 의도를 더 명확하게 표현하며, 단일 양수 연산자는 단축 형태로 사용됩니다.
부울로 변환 (명시적 변환)
부울로 변환은 간단합니다:
let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;
console.log(bool1, typeof bool1); // Output: true boolean
console.log(bool2, typeof bool2); // Output: true booleanBoolean() 함수는 명확하고 읽기 쉬우며, 이중 부정(!!)은 초보자에게 혼란을 줄 수 있지만 단축 형태로 사용됩니다.
날짜를 문자열/숫자로 변환
날짜는 특별한 케이스입니다. 문자열과 숫자로 모두 변환할 수 있습니다:
let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);
console.log(dateString); // Output: "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // Output: 1684154096000 (milliseconds since January 1, 1970)날짜를 문자열로 변환하면 인간이 읽을 수 있는 형식이 되고, 숫자로 변환하면 Unix 시간戳이 됩니다.
JavaScript 변환 표
우리가 배운 모든 변환 방법을 요약한 표를 아래에 제시합니다:
| 원래 값 | 문자열로 변환 | 숫자로 변환 | 부울로 변환 |
|---|---|---|---|
| false | "false" | 0 | false |
| true | "true" | 1 | true |
| 0 | "0" | 0 | false |
| 1 | "1" | 1 | true |
| "0" | "0" | 0 | true |
| "1" | "1" | 1 | true |
| NaN | "NaN" | NaN | false |
| Infinity | "Infinity" | Infinity | true |
| -Infinity | "-Infinity" | -Infinity | true |
| "" | "" | 0 | false |
| "20" | "20" | 20 | true |
| [ ] | "" | 0 | true |
| [20] | "20" | 20 | true |
| [10,20] | "10,20" | NaN | true |
| ["twenty"] | "twenty" | NaN | true |
| ["ten","twenty"] | "ten,twenty" | NaN | true |
| function(){} | "function(){}" | NaN | true |
| { } | "[object Object]" | NaN | true |
| null | "null" | 0 | false |
| undefined | "undefined" | NaN | false |
이제 JavaScript 타입 변환의 세상을 여행한 것입니다. 연습이 완벽을 이루는 열쇠이니, 이 개념들을 실험해 보지 마세요. 누구 knows? 레고 블록을 나무 조각으로 변환하고 다시 돌려보는 과정을 즐기실지도 모릅니다!
미래의 JavaScript 마스터 여러분, 행복하게 코딩하세요!
Credits: Image by storyset