[Js] 형(Type) 변환 총 정리(+그림&코드)

✅  참고

형 변환에 대해 정확하게 이해하려면 JavaScript의 자료형에 대한 이해가 필요합니다.
JavaScript의 자료형에 대해 잘 모르신다면 🔗그림과 코드로 아주 쉽게 정리한 JavaScript의 자료형(Data Type)을 참고해 주세요.

 

---

 

JavaScript는 동적 타입 언어

typeof

typeof 메서드는 변수의 자료형(Data Type)을 반환하는 메서드입니다.

 

JavaScript는 Java와는 다르게 변수 선언시에 변수의 자료형을 선언하지 않습니다.

따라서 변수의 자료형이 동적으로 변경이 가능합니다.

 

---

 

형 변환

어떤 값의 타입을 다른 타입으로 변경하는 것을 말합니다.
 
아래와 같이 Number Type의 값인 1234를 String Type의 값인 '1234'로 변경하는것 입니다.

 

---

 

형 변환의 종류

1. 묵시적 형 변환
   개발자가 직접 설정하지 않아도 알아서 자바스크립트 엔진이 형 변환 하는 것을 말합니다.
2. 명시적 형 변환
   개발자가 직접 함수 등을 이용해 형 변환을 일으키는 것을 말합니다.

묵시적 형 변환

num1 변수는 10인 숫자 값입니다. num2는 "20"인 문자 값입니다.

number type 과 string type은 서로 다른 자료형이기 때문에 연산자를 사용할수 없습니다.

 

하지만 result1를 계산할 때 num1 변수를 자바스크립트 엔진이 string type으로 변환을 하여,

"10" 문자 값과 "20" 문자 값을 더한 문자 값 "1020"을 result1에 반환합니다.

 

명시적 형 변환

 

Number

Number 메서드는 number type이 아닌 변수를 number type으로 반환하는 메서드입니다.

 

---

 

Number → String 형 변환

 

String

String 메서드는 string type이 아닌 변수를 string type으로 반환하는 메서드입니다.

 

num1 변수는 20인 숫자 값입니다. String 메서드를 통해 명시적 형 변환을 진행하였으며,

numToStr1 변수는 "20"인 문자 값입니다.

 

---

 

형 변환시 주의 사항

parseInt

parseInt 메서드는 number type이 아닌 변수를 number type으로 반환하는 메서드입니다.

Number 메서드 보다 더 다양한 변수의 형 변환을 지원합니다.

 

1. 문자열 값의 마지막에 숫자가 아닌 문자가 들어가 있는 경우에는 Number 함수로 형 변환이 불가합니다.
   따라서 parserInt 함수를 사용합니다.
2. 문자열 값의 처음에 숫자가 아닌 문자가 들어가 있는 경우에는 형 변환이 불가합니다.

참고: parseInt는 정수값을 반환하기 때문에, 소수점 까지 반환하고 싶으면 parseFloat 메서드를 사용하시면 됩니다.