형 변환
01 묵시적 형 변환
const a = 10;
const b = "20";
console.log(a * b) // 200위 예시에서 문자열과 숫자를 곱했는데 숫자와 숫자의 곱셈 결과처럼 값이 나왔습니다. 이것은 javascript가 문자열 “20”을 자동으로 숫자 20으로 인식지해서 계산한 결과입니다. javascript코드를 읽고 해석하는것여 실행하는 javascript엔진은 다른 자료형간의 연산을 수행할때 이렇게 적절하게 자료형을 자동으로 변환해줍니다.
이렇게 값은 유지하면서 문자열 20을 숫자 20으로 자료형을 변환시키는 이런 기능들을 형 변환이라고 부릅니다.
그리고 위 예제에서 형 변환은 우리가 의도하지 않았죠? 이런식으로 자동적으로 형 변환이 일어났다는 것은 javascript엔진이 묵시적으로 즉 암묵적으로 알아서 해준다라는 뜻을 담아서 묵시적 형 변환이라고 부릅니다.
묵시적 형 변환의 다른 예시
const a = "10";
const b = "20";
const result = a + b;
console.log(result); // 1020
result = a - b;
console.log(result); // -10
result = a * b;
console.log(result); // 200
const c = "문자";
result = c - a; // NaNNaN(Not a Number)
정의되지 않은 값이나 표현할 수 없는 값이라는 의미입니다. 예를 들어 0을 0으로 나누거나, 숫자로 변환할 수 없는 연산을 시도하는 경우 반환됩니다.
객체
const foo = {};
console.log(1 + foo); //[object Object]위 예시에서 볼 수 있듯이 javascript에서 객체의 대부분의 묵시적 형 변환은 결과 값으로 [object Object]를 반환합니다.
그러면 왜 [object Object]가 반환이 될까요??
모든 자바스크립트 객체는 toString 메서드를 상속받습니다. 상속받은 toString 메서드는 객체가 문자열 타입으로 변해야 할 때마다 쓰입니다. toString의 반환 값은 문자열 합치기(string concatenation) 혹은 수학적 표현식(mathematical expressions)과 같은 연산에서 쓰이게 됩니다.
const foo = {}
foo.toString() // [object Object]
const baz = {
toString: () => "메서드를 바꿔보자"
}
baz + "!" // "메서드를 바꿔보자!"배열 객체
const arr = [1, 2];
console.log(1 + arr); // "11,2"11,2가 왜 나오게 되는 걸까요?? javascript에서는 배열도 객체입니다. 그러므로 toString 메서드를 묵시적으로 수행합니다. 하지만 배열에서 상속된 toString 메서드는 약간 다르게 동작합니다.
[1, 2, 3].toString() // "1,2"Falsy와 Truthy
모든 자바스크립트 값은 ture나 false로 변환될 수 있는 특성을 갖고 있습니다. true로 형변환을 강제하는 것을 truthy라고 합니다. 또 false로 형변환을 강제하는 것을 falsy라고 합니다.
다음은 자바스크립트에서 반환 시에 falsy로 취급되는 값들입니다.
console.log(false); // false
console.log(0); // false
console.log(null); // false
console.log(undefined); // false
console.log(""); // false
console.log(NaN); // false
console.log(-0); // false이 외에는 전부 truthy 로 취급합니다.
02 명시적 형 변환
묵시적 형 변환과 반대로 javascript엔진이 아닌 프로그래머가 의도적으로 형 변환을 하는 것을 명시적 형 변환이라고 부릅니다.
const a = "10";
const b = "20";
console.log(a * b) // 1020위의 예시에서 숫자로 바꾸어 계산하고 싶을땐 어떻게 할까요? 다음과 같이 해주면 됩니다.
const a = "10";
const b = "20";
console.log(parseInt(a) * parseInt(b)) // 200parseInt()는 문자를 int형으로 변환해줍니다. 만약 소수점까지 있다면 소수점을 다 자른후 정수만 반환합니다.
parseInt말고도 명시적 형변환을 위해 많은 메서드가 있습니다.
- Number( ) : 문자를 숫자로 변환한다.
- String( ) : 숫자나, 불린 등을 문자형으로 변환한다.
- Boolean( ) : 문자나 숫자 등을 불린형으로 변환한다. // 값이 0 이면 true, 1 이면 false
- Object( ) : 모든 자료형을 객체형으로 변환한다 // 하위에 값을 줄 수 있게 된다.
- parseInt( ) : 문자를 int형으로 변환한다. (정수) // 소수점 아래 숫자를 자른다.
- parseFloat( ) : 문자를 float형으로 변환한다. (소수) // 소수점 아래 숫자까지 살려준다.
참고자료
