자바스크립트 개발자가 알아야할 33가지 #4 암묵적 타입 변환

이번에도 역시 도입부분의 대해 생략하겠다.

이전에 #3에서 마지막 부분의 정리했던 부분과 일치하고 혼란을 불러일으킬 요소가 있어 (MDN기준으로 자료를 판단) 생략한다 도입부가 궁금하다면 jake-seo님의 블로그를 참조하길 바란다.

객체

• 자바스크립트에서 객체의 대부분의 암묵적 형변환은 결과 값으로 [object object]를 반환한다.

"name" + {} // "name[object Object]"

• 모든 자바스크립트 객체는 toString을 메소드를 상속받는다.
• toString의 반환 값은 문자열 합치기(string concatencation)혹은 수학적 표현식 (mathematical expressions)와 같은 연산에서 쓰이게 된다.

const foo = {}
foo.toString() // [object Object]

const baz = {
	toString: () => "I'm object baz"
}

baz + "!" // "I'm object baz!"

객체가 수학적 표현식 사이에 들어갔을 때는, 자바스크립트는 반환 값을 숫자로 변환하려 할것이다.

const foo = {
	toString: () => 4
}

2 * foo // 8
2 / foo // 0.5
2 + foo // 6
"four" + foo // "four4"

const baz = {
	toString: () => "four"
}

2 * baz // NaN
2 + baz // 2four

const bar = {
	toString: () => "2"
}

2 + bar // "22"
2 * bar // 4

배열 객체

배열에서 상속된 toString 메소드는 약간 다르게 동작한다. 이것은 배열에서 아무런 인자도 넣지 않은 join 메소드를 호출한 것과 비슷한 방식으로 작동 한다.

[1, 2, 3].toString() // "1,2,3"
[1, 2, 3].join() // "1,2,3"
[].toString() // ""
[].join() // ""

"me" + [1,2,3] // "me1,2,3"
4 + [1,2,3] // "41,2,3"
4 * [1,2,3] // NaN

배열을 어딘가로 넘길 때는 언제나 toString 메소드를 거치면 어떻게 되는지를 생각해보자.

숫자로 변할지 문자열로 변할지 말이다.

4 * [] // 0
4 / [2] // 2

4 * Number([].toString()) //0
4 * Number("") //0
4 * 0 //0

4 / Number([2].toString()) // 2
4 / Number("2") // 2
4 / 2 // 2

ValueOf 메소드

문자열이나 숫자가 올 곳에 객체를 넘길 때마다 자바스크립트 엔진에 의해 사용될 valueOf 메소드를 정의하는 것도 가능하다.

const foo = {
	valueOf: () => 3
}

3 + foo // 6
3 * foo // 9

객체에 toString과 valueOf 메소드가 전부 정의되어 있을 때는 자바스크립트 엔진은 valueOf메소드를 사용한다.

const bar = {
	valueOf: () => 5,
	toString: () => 2
}

"sa" + bar // "sa5"
3 * bar // 15
2 + bar // 7

Object.prototype.valueOf()

• valueOf() 메서드는 특정 객체의 원시 값을 반환한다.

const two = new Number(2)
two.valueOf() // 2

• 기본적으로 object의 모든 후손객체는 valueOf를 상속받는다.
• 내장된 핵심 객체는 모두 valueOf를 재정의해 적합한 값을 반환한다.
• 어떤 객체가 원시 값을 가지고 있지 않다면, valueOf는 객체 스스로를 반환한다.

Falsy와 Truthy

• 모든 자바스크립트 값은 true나 false로 변환될 수 있는 특성을 갖고있다.
• true로 강제 현변환 하는 것을 truthy라고 한다.
• false로 강제 형변환 하는 것을 falsy라고 한다.

Falsy

Truthy

    if (true)
    if ({})
    if ([])
    if (42)
    if ("0")
    if ("false")
    if (new Date())
    if (-42)
    if (12n)
    if (3.14)
    if (-3.14)
    if (Infinity)
    if (-Infinity)

NAN

• 전역 NaN 속성은 Not-A-Number(숫자가 아님)을 나타낸다.

NAN은 전역 객체의 속성이다. 즉 전역 스코프의 변수

NaN을 반환하는 연산에는 다섯 가지 종류가 있다.

• 숫자로서 읽을 수 없음 (parseInt("블라블라"), Number(undefined))
• 결과가 허수인 수학 계산식 (Math.sqrt(-1))
• 피연산자가 NaN (7 ** NaN)
• 정의할 수 없는 계산식 (0 * Infinity)
• 문자열을 포함하면서 덧셈이 아닌 계산식 ("가" / 3)

NAN 판별

• NAN은 다른 문자 값과 비교 (==,≠, ===, ≠=)했을 때 같지 않으며, 다른 NAN과도 같지않다.
• NaN의 판별은 Number.isNAN() 또는 isNAN()을 사용하면 제일 분명하게 수행할 수 있다.

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

function valueIsNaN(v) { return v !== v; }
valueIsNaN(1);          // false
valueIsNaN(NaN);        // true
valueIsNaN(Number.NaN); // true

Reference

https://velog.io/@jakeseo_me/자바스크립트-개발자라면-알아야-할-33가지-개념-4-암묵적-타입-변환-번역

자바스크립트 개발자라면 알아야 할 33가지 개념 #4 암묵적 타입 변환(implicit coercion) (번역)

https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion

Type coercion - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf

Object.prototype.valueOf() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN

NaN - JavaScript | MDN