[리액트 기초 스터디] JavaScript 형변환

목차 (OPEN)

• 🔄 JavaScript 형변환(Type Casting) 정리
• 🤐 묵시적 형변환 (Implicit Casting)
• ✍🏻 명시적 형변환 (Explicit Casting)
• 📚 결론

 

 

 

 

 

🔄 JavaScript 형변환(Type Casting) 정리

자바스크립트에서는 변수를 사용할 때 자료형이 자동으로 변환되기도 하고, 개발자가 직접 변환하기도 하는데,

이를 우리는 형변환(Type Casting)이라고 부른다.

 

 

이러한 형변환은 크게 아래의 두 가지로 나뉜다.

• 묵시적 형변환 (Implicit Casting) 👉🏻 자바스크립트 엔진이 자동으로 변환
• 명시적 형변환 (Explicit Casting) 👉🏻 개발자가 직접 변환

 

 

---

🤐 묵시적 형변환 (Implicit Casting)

묵시적 형변환은 개발자가 별도로 지정하지 않아도 자바스크립트 엔진이 알아서 타입을 변환하는 경우이다.

let num = 10;
let str = "20";

const result = num + str;
console.log(result); // "1020"

 

위의 코드 예시에서는 숫자 10이 문자열 "10"으로 자동 변환되어 "1020"이 출력된다.

즉, 숫자와 문자열 중에서 문자열 우선 규칙이 적용된 것이다.

 

 

❓ 궁금증) 서로 다른 타입이 3개 이상 섞이면 어떻게 될까?

이 궁금증을 해결하기 위해 나는 10 + true + "5"를 예시로 실행해보았고,

결과로 "115"가 나오는 것을 확인할 수 있었다.

 

그 이유는 먼저 10 + true에서 Boolean이 Number로 변환되어 10 + 1이 수행되어 11이 나오고,

다음으로 이 11 + "5"에서 Number가 String으로 변환되어 "11" + "5"가 수행되어 "115"가 나오기 때문이다.

 

 

이처럼 여러 타입이 섞여도 자바스크립트 엔진이 정해진 규칙에 따라서 순차적으로 묵시적 변환을 진행하게 된다고 한다.

 

 

---

✍🏻 명시적 형변환 (Explicit Casting)

명시적 형변환은 개발자가 함수 등을 이용해서 직접 원하는 타입으로 변환하는 방법이다.

 

 

1) 문자열을 숫자로

let str1 = "10";
let strToNum = Number(str1);
console.log(10 + strToNum); // 20

 

이처럼 Number( )는 문자열 전체가 숫자여만 변환이 가능하다고 한다.

 

 

2) parseInt 사용

let str2 = "10개";
let strToNum2 = parseInt(str2);
console.log(strToNum2); // 10

 

이처럼 parseInt( )는 문자열 앞부분의 숫자만 읽어서 반환한다고 한다.

 

 

❓ 궁금증) "숫자10"도 parseInt( )로 바꿀 수 있을가?

결론부터 말하면 안되는데,

그 이유는 parseInt( )는 반드시 숫자가 가장 앞쪽에 위치해야만 동작이 가능하기 때문이라고 한다.

console.log(parseInt("숫자10")); // NaN

 

 

3) 숫자를 문자열로

let num1 = 20;
let numToStr1 = String(num1);
console.log(numToStr1 + "입니다."); // "20입니다."

 

이처럼 String( )을 쓰면 숫자가 문자열로 변환된다고 한다.

 

 

---

📚 결론

자바스크립트에서 타입 캐스팅은 꼭 이해하고 넘어가야 하는 핵심 개념이다.

 

예전에 C언어를 배울 때도 접했던 내용이지만,

어느 순간부터 그냥 당연하게 여겨 대수롭지 않게 넘겼던 것 같다.

하지만 이번에 자바스크립트를 기초부터 다시 공부하며 타입캐스팅을 다시 정리해보니, 그 중요성을 새삼 느낄 수 있었다.

 

특히, 묵시적 형변환은 편리하지만 의도치 않은 결과를 초래할 수 있기 때문에

앞으로는 명시적 형변환을 습관적으로 활용하는 방향으로 코드를 작성하도록 다시금 머리에 새겨야겠다.