본문 바로가기

Web/Frontend 기본 CS 정리

자바스크립트에서 일어나는 데이터 형 변환에 대해 설명해주세요.

728x90

답변

자바스크립트에서 데이터 형 변환에는 크게 명시적 변환과 암시적 변환이 있습니다.

명시적 변환은 개발자가 직접 데이터의 타입을 변환하는 방식이고, 암시적 변환은 자바스크립트가 해당 데이터의 타입을 유추하여 자동으로 타입을 변환하는 방식입니다.

명시적 변환

프로그래머가 직접 함수를 호출하거나 코드를 작성해서 데이터 타입을 변환하는 방식

숫자(Number)로 변환

  • Number()를 사용하여 다른 데이터 타입을 숫자로 변환
javascript
코드 복사
Number("123"); // 123 (문자열 → 숫자)
Number(true);  // 1   (불리언 → 숫자)
Number(false); // 0   (불리언 → 숫자)
Number("abc"); // NaN (문자열이 숫자로 변환 불가)

문자열(String)로 변환

  • String()을 사용하여 다른 데이터 타입을 문자열로 변환
javascript
코드 복사
String(123);   // "123" (숫자 → 문자열)
String(true);  // "true" (불리언 → 문자열)
String(null);  // "null" (null → 문자열)
String(undefined); // "undefined"

불리언(Boolean)로 변환

  • Boolean()을 사용하여 값을 참(true) 또는 거짓(false)으로 변환
javascript
코드 복사
Boolean(1);    // true
Boolean(0);    // false
Boolean("");   // false (빈 문자열)
Boolean("abc");// true (문자열 존재)
Boolean(null); // false

암시적 변환

자바스크립트 엔진이 코드 실행 중 자동으로 타입을 변환하는 방식

문자열로 변환

  • 숫자 또는 불리언과 문자열이 결합될 때, 다른 데이터 타입이 문자열로 변환
javascript
코드 복사
"123" + 4;    // "1234" (숫자가 문자열로 변환됨)
"Hello " + true; // "Hello true" (불리언이 문자열로 변환됨)

숫자로 변환

  • 산술 연산자(+, , , /)를 사용할 때 숫자로 변환.
javascript
코드 복사
"5" - 2;    // 3 ("5"이 숫자로 변환됨)
"10" * "2"; // 20 (문자열이 숫자로 변환됨)
"abc" - 2;  // NaN ("abc"는 숫자로 변환 불가)

불리언으로 변환

  • 조건문에서 값이 true 또는 false로 암시적으로 변환
javascript
코드 복사
if ("abc") { console.log("참입니다!"); } // true (문자열이 참으로 평가됨)
if (0) { console.log("거짓입니다!"); }  // false (0은 거짓으로 평가됨)


3. 특수한 형 변환

==의 느슨한 동등 비교

  • 두 값의 타입이 다를 경우, 자바스크립트가 형을 변환하여 비교
javascript
코드 복사
123 == "123"; // true (문자열이 숫자로 변환)
true == 1;    // true (불리언이 숫자로 변환)
false == 0;   // true
null == undefined; // true (특별 규칙)

===의 엄격한 동등 비교

  • 타입 변환 없이 값과 타입을 그대로 비교합니다.
javascript
코드 복사
123 === "123"; // false (타입이 다름)
true === 1;    // false