[mjt] 자바스크립트의 형 변환에 대해 알아보자
자바스크립트의 형 변환에 대해 알아보자
자바스크립트에서 데이터는 다양한 타입이 있다. 하지만 종종 자동으로 변환(암시적 형 변환)하거나 명시적으로 변환이 필요할 때가 있다. 형 변환(Type Conversion)은 자바스크립트의 핵심 개념 중 하나로 무엇이 있는지 알아보자.
암시적 형 변환
자바스크립트는 다양한 데이터 타입 간의 호환성을 보장하기 위해 자동으로 타입을 변환한다. 하지만 이 과정이 예상치 못한 결과를 초래할 수 있다.
1-1) 문자열과 숫자의 연산
- string + number = string
- string - number = number
- string * number = number
- string / number = number
- string % number = number
"5" + 2; // "52"
"5" - 2; // 3
"5" * "2"; // 10
"10" / 2; // 5
"10" % 3; // 1
1-2) 불리언과 숫자
true는 1 false는 0으로 계산된다.
true + 1; // 2
false - 1; // -1
1-3) Falsy와 Truthy 값
- if(0) ->
false - if(“”) ->
false - if(“hello”) ->
true
명시적 형 변환
명시적 형 변환은 의도적으로 값을 특정 데이터 타입으로 변환한다.
2-1) 숫자로 변환
자주 사용했던 건 Number와 parseInt 였던 것 같다.
Number("123"); // 123
+"123"; // 123
parseInt("123px"); // 123
2-2) 문자열로 변환
Number와 마찬가지로 String을 자주 사용했는데, toString이 더 많이 사용하는 것 같은..
String(123); // "123"
(123).toSTring(); // "123"
2-3) 불리언으로 변환
사용하지도 않았고 본 적도 없는데 불리언을 사용할 때 주로 if문을 사용해서가 아닐까.. 싶은
Boolean(1); // true
Boolean(0); // false
Boolean("hello"); // true
Boolean(""); // false
형 변환 주요 메서드
자주 사용했던 기억이 없는데, 찾아보다가 있어서 정리해봤다.
3-1) JSON.stringify()와 JSON.parse()
객체를 문자열로, 문자열을 다시 객체로 변환하는 방법이다.
const obj = { key: "value" };
const str = JSON.stringify(obj); // '{"key" : "value"}'
const parsed = JSON.parse(str); // {key: "value"}
3-2) isNaN()과 Number.isNaN()
-
isNaN()은 형 변환 후 체크함 -
Number.isNaN()은 정확히 NaN인 경우만 체크함
isNaN("123abc"); // true
Number.isNaN("123abc"); // false
3-3) typeof와 instanceof의 차이
-
typeof는 데이터 타입 확인 -
instanceof는 특정 객체인지 확인
typeof []; // "object"
[] instanceof Array; // true
3-4) Object.prototype.toString()
- 객체의 정확한 타입을 확인하는 방법이다.
Object.prototype.toString.call([]); // [object Array]
Object.prototype.toString.call({}); // [object Object]
자주 겪는 실수
형 변환에서 헷갈리는 부분을 정리해봤다.
4-1) null과 undefined의 특성
null == undefined; // true
null === undefined; // false
4-2) 배열과 객체
실제로 사용해보거나 본 적은 없는데 엥? 해서 가져옴
[1, 2] == "1,2"; // true 엥?
[] == ""; // true
{
}
+{}; // NaN(런타임 상황에 따라 다르다함) 이건 무ㅓ..?
4-3) NaN의 특성
NaN은 웃긴게 서로도 같지 않음
NaN === NaN; // false
회고
자바스크립트는 매우 유연한 언어다. 매우 유연한.. 너무 유연한.. 언어..