본문 바로가기
Frontend

자바스크립트 형 변환

by 신인프로그래머 2024. 3. 5.

 

자바스크립트 형 변환

 

자바스크립트의 형 변환(Type Conversion)은 변수나 값을 한 데이터 타입에서 다른 데이터 타입으로 변경하는 과정을 말한다

자바스크립트는 동적 타입 언어이기 때문에, 때로는 자동으로(암시적 형 변환) 타입을 변환하고, 때로는 개발자가 명시적으로 타입을 변환해야 한다(명시적 형 변환)

 

암시적 형 변환 (Implicit Type Conversion)

암시적 형 변환, 또는 타입 강제 변환(Type Coercion)은 자바스크립트 엔진이 예상되는 데이터 타입이 아닌 경우 자동으로 값의 타입을 변환하는 것을 말한다

이러한 변환은 주로 연산자를 사용할 때 발생한다

 

예시:

let result;

// 숫자와 문자열의 덧셈
result = '3' + 2; // '32' 문자열이 됨
result = '3' - 2; // 1 숫자가 됨

// 불리언과 숫자의 덧셈
result = true + 1; // 2 숫자가 됨

// 객체를 문자열로 변환
result = 'The date is ' + new Date(); // 날짜를 문자열로 변환

// 논리 연산자와 형 변환
result = '0' == 0;  // true, '0'이 숫자 0으로 변환
result = '0' === 0; // false, 타입도 비교

 

명시적 형 변환 (Explicit Type Conversion)

명시적 형 변환, 또는 타입 캐스팅(Type Casting)은 개발자가 코드를 통해 직접 데이터 타입을 변환하는 것을 말한다

이를 위해 자바스크립트는 다양한 내장 함수를 제공한다

 

예시:

let value;

// 문자열로 변환
value = String(123); // '123'

// 숫자로 변환
value = Number('123'); // 123
value = parseInt('123', 10); // 123, 정수 변환
value = parseFloat('123.45'); // 123.45, 부동소수점 변환

// 불리언으로 변환
value = Boolean(1); // true
value = Boolean(0); // false
value = Boolean(''); // false
value = Boolean('some text'); // true

// 객체를 숫자나 문자열로 변환하기
value = (new Date()).valueOf(); // 날짜를 숫자로 변환
value = (new Date()).toString(); // 날짜를 문자열로 변환

 

형 변환의 중요성

형 변환은 자바스크립트에서 흔히 발생하는 현상으로, 때로는 예기치 않은 결과를 초래할 수 있다

예를 들어, 암시적 형 변환은 코드의 의도를 명확히 하지 않아 혼란을 일으킬 수 있다

따라서, 가능한 명시적 형 변환을 사용하여 코드의 의도를 분명히 하는 것이 좋다

이렇게 하면 코드의 가독성이 향상되고, 버그 발생 가능성을 줄일 수 있다

'Frontend' 카테고리의 다른 글

자바스크립트의 프로토타입(Prototype)  (0) 2024.03.05
자바스크립트 데이터 타입  (4) 2024.03.05
실행 컨텍스트란  (1) 2024.03.04
렉시컬 환경이란  (0) 2024.03.04
함수 선언형과 함수 표현식의 차이  (0) 2024.03.04