🌿 Primitive types

2019. 04. 06

권기웅

Contents

1. 값
2. 연산자
3. Boolean
4. 숫자
5. 문자열

🌈 Value [값]

🌈 Value [값]

자바스크립트의 값은 여섯가지 기본 자료형과 Object로 구성됩니다

🌈 Value [값]

🌈 Value [값]

객체는 고유하기 때문에, 자신과의 비교에서만 일치 합니다

🌈 Value [값]

반면, 원시값은 값이 같으면 같은 것으로 평가합니다

🌈 Value [값]

원시값은 값을                          하며, 항상 불변입니다

"값으로 비교"

🌈 Value [값]

"정보가 없음"을 나타내는 값

undefined, null

🌈 Value [값]

가 자연 발생하는 경우

undefined, null

🌈 Value [값]

의 역사

undefined, null

원시 값 / 객체 값 으로 분리하는 Java 의 접근법을 차용 했습니다

그리고 "객체 아님" 을 표현하는 값인 null 또한 도입 했습니다

하지만, C 언어 계통의 JavaScript 는 null 을 숫자로 강제하면 0이 됩니다

🌈 Value [값]

의 역사

undefined, null

undefined 는 null 이후에 추가 되었습니다

null 로 "초기화 되지 않은 변수" 또는 "존재하지 않는 프로퍼티" 에 대한 처리를 했지만

null 은 하나의 값이고, null 이라는 값은 NULL Pointer 의 reference 입니다

따라서, 브랜던 아이크는 아래의 경우를 피하고 싶었습니다

• null 은 객체 이상의 의미가 있으므로, null 을 참조하는 듯한 뉘앙스는 안된다
• Number(null) 과 같이 값이 0으로 강제되면 안된다

그리하여, "초기화 되지 않은 변수" 또는 "존재하지 않는 프로퍼티" 는

생성(접근) 시점에 undefined가 할당됩니다

🌈 Value [값]

여담

undefined, null

1. undefined는 ECMAScript5 이후 읽기 전용으로 재 할당이 불가합니다

(ECMAScript3 에서는 undefined 값을 덮어쓸 수 있습니다)

2. undefined는 전역 객체의 프로퍼티이며, undefined 원시 값을 가집니다

3. void 0 는 항상 undefined 를 반환합니다

4. 보다 자세한 내용은 아래 링크들을 참고하세요

    → ECMAScript 1.3

    → The history of "typeof null" 

    → V8 Document

🌈 Value [값]

원시 값의 래퍼 객체

🌈 Value [값]

쓰지마세요

🌈 Value [값]

래퍼 객체는 원시 값과 다릅니다

🌈 Value [값]

원시 값은 래퍼 객체와 prototype 체인을 공유합니다

🌈 Value [값]

래퍼 객체를 원시 값으로, 원시 값을 래퍼 객체로 바꾸기

PrimitiveWrapper(primitiveValue)

PrimitiveWrapper.valueOf()

🌈 Value [값]

그 전에, falsy 한 값을 알아야 합니다

undefined, null, false, 0, NaN, '' (빈 문자열)

🌈 Value [값]

객체를 원시 값으로 변환하기

🌈 Value [값]

valueOf - 래퍼 객체를 원시 값으로 변환하기

🌈 Value [값]

falsy 값을 Boolean, Number, String 으로 바꿀 경우

🌈 Value [값]

ToPrimitive 와 그 동작 이해하기

ToPrimitive 는 추상 연산자(Abstract Operations) 로 input 을 non Object 유형으로 변환하여 반환합니다

signature

🌈 Value [값]

ToPrimitive 와 그 동작 이해하기

ToPrimitive 는 모든 형 변환 동작의 추상이며

parseInt, .toJSON 등 여러 형 변환 동작의 조상입니다

🐶 관련 문서 같이 보기

1. Date.prototype.toJSON(key)

2. parseInt()

3. v8 Document > Internals

🌈 Value [값]

형 변환이 될 때는 아래 순서대로...

1. input 이 원시 값이면 그대로 반환합니다

2. input 이 객체라면, input.valueOf 를 호출하여 원시값이면 반환합니다

3. valueOf 의 값이 원시값이 아니라면, toString 을 호출합니다. 원시값이면 반환합니다

4. 2-3번 과정에서 return 이 일어나지 않으면, TypeError를 throw 합니다

1. input 이 원시 값이면 그대로 반환합니다

2. input 이 객체라면, input.valueOf 를 호출하여 원시값이면 반환합니다

3. valueOf 의 값이 원시값이 아니라면, toString 을 호출합니다. 원시값이면 반환합니다

4. 2-3번 과정에서 return 이 일어나지 않으면, TypeError를 throw 합니다

🎁 OPERATOR [연산자]

자바스크립트의 모든 연산자는 피연산자를 적절한 타입으로 강제합니다

Operand

Primitive Value

🎁 OPERATOR [연산자]

왜냐면, 자바스크립트의 연산자는 대부분 원시값으로 조작되거든요

Primitive Value

🎁 OPERATOR [연산자]

🐶 TL; DR

1. 자바스크립트의 연산자는 피 연산자의 값을 원시값으로 가정한다

2. 원시값이 아닐 경우, 원시값으로 바꾼다

3. 원시값의 타입을 맞춘다!

🎁 OPERATOR [연산자]

감사합니다

🎁 OPERATOR [연산자]

이렇게 끝내고 싶지만...

오늘은 야크털 깎기의 진수

🎁 OPERATOR [연산자]

연산자로 객체도 다룰 수 있는 언어도 있습니다

PHP

C++

🎁 OPERATOR [연산자]

아무튼 자바스크립트는 안됩니다. 해 볼까요?

🎁 OPERATOR [연산자]

연산자의 종류는 이렇게 많습니다 🤔

대입 연산자, 비교 연산자, 산술 연산자, 비트단위 연산자, 논리 연산자, 문자열 연산자, 조건 (삼항) 연산자, 콤마 연산자, 단항 연산자, 관계 연산자

🎁 OPERATOR [연산자]

🎁 OPERATOR [연산자]

연산자의 종류는 이렇게 많습니다 🤔

대입 연산자, 비교 연산자, 산술 연산자, 비트단위 연산자, 논리 연산자, 문자열 연산자, 조건 (삼항) 연산자, 콤마 연산자, 단항 연산자, 관계 연산자

🎁 OPERATOR [연산자]

대입 연산자

[ = ]

🎁 OPERATOR [연산자]

대입 연산자   [ = ]

대입 연산자를 설명하기 전에

자바스크립트의 문(Statement)과 식(Expression) 에 대해서 알고 계시나요?

📖 MDN Expression and operators 

🔗 문서 보기  

An expression is any valid unit of code that resolves to a value.

식이란  값으로 해석(resolves)될 수 있는 유효한 어떤 코드의 단위 입니다

Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects

(for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.

모든 구문적으로 유효한 식은 값으로 해석(resolves) 되고, 개념적으로는 두 종류의 식이 존재합니다:

side effects(변수에 값을 할당하는 표현식) 와 평가하여 값으로 해석되는 값

The expression x = 7 is an example of the first type.

This expression uses the = operator to assign the value seven to the variable x. The expression itself evaluates to seven.

x = 7 이라는 식은 첫 번째(side effect) 예시 입니다

이 식은 " = " 연산자를 사용하여 7이라는 값을 x 라는 변수에 할당했습니다. 이 식은 이것 자체로 7 로써 평가됩니다

The code 3 + 4 is an example of the second expression type.

This expression uses the + operator to add three and four together without assigning the result, seven, to a variable.

3 + 4 라는 코드는 두 번째(some sense evaluate and therefore resolve to a value) 예시 입니다

이 식은 " + " 연산자를 사용하여 3과 4를 서로 더했지만, 7 이라는 결과를 할당 하지는 않았습니다

🎁 OPERATOR [연산자]

대입 연산자   [ = ]

식과 문에 대한 이해를 하도록 도와주신 코드댕댕이 선생님의 좋은 글

글 보러 가기  👉

🎁 OPERATOR [연산자]

대입 연산자   [ = ]

연산자를 사용하면, 식으로 평가된다고 하니

대입 연산자 또한 하나의 식이자 값 입니다

🎁 OPERATOR [연산자]

대입 연산자   [ = ]

할당 자체만으로는 하나의 문이 아닌 식이라는 의미!

🎁 OPERATOR [연산자]

대입 연산자   [ = ]

let, const, var 라는 키워드는

if, else, for 등과 같이 문으로 만들어 주는 Keyword 입니다

🎁 OPERATOR [연산자]

대입 연산자   [ = ]

대입 연산자는 식 (Expression) 이기 때문에

이런게 가능했던 것이져 ㅇㅅㅇ

혹시 다 아셨던건 아니죠...?

🎁 OPERATOR [연산자]

복합 대입 연산자

[ OP= ]

🎁 OPERATOR [연산자]

복합 대입 연산자   [ OP= ]

복합 대입 연산자는 대입 연산자에 감미료를 추가했습니다 (Syntactic Sugar)

🎁 OPERATOR [연산자]

복합 대입 연산자   [ OP= ]

Syntactic Sugar 라는 의미는, 단순한 축약 구문 이라는 의미 입니다!

(뱀이 마스코트인 어떤 언어처럼 상황에 따라 할당이 다르지 않습니다)

🎁 OPERATOR [연산자]

복합 대입 연산자   [ OP= ]

[ OP= ] 이라는 의미는 = 앞에 [산술, 비트] 연산자를 쓸 수 있다는 뜻

[산술] 복합 대입 연산자

덧셈 대입
→ (x += y) == (x = x + y)
뺄셈 대입
→ (x -= y) == (x = x - y)
곱셈 대입
→ (x *= y) == (x = x * y)
나눗셈 대입
→ (x /= y) == (x = x / y)
나머지 연산 대입
→ (x %= y) == (x = x % y)

[비트] 복합 대입 연산자

왼쪽 이동 연산 대입
→ x <<(x <<= y) == (x = x << y)
오른쪽 이동 연산 대입
→ (x >>= y) == (x = x >> y)
부호 없는 오른쪽 이동 연산 대입
→ (x >>>= y) == (x = x >>> y)
비트 단위 논리곱 연산 대입
→ (x &= y) == (x = x & y)
비트 단위 배타적 논리합 연산 대입
→ (x ^= y) == (x = x ^ y)
비트 단위 논리합 연산 대입
→ (x |= y) == (x = x | y)

🎁 OPERATOR [연산자]

복합 대입 연산자   [ OP= ]

🎁 OPERATOR [연산자]

동등 비교 연산자

[ ==, !=, ===, !== ]

🎁 OPERATOR [연산자]

동등 비교 연산자   [ ==, !=, ===, !== ]

설명이 길어질 것 같아서...

3줄 요약 ✅

1. == 연산자와 === 연산자의 동작 방식의 가장 큰 차이점은 타입을 변환하는가 입니다

2. === 연산자는 값과 타입까지 같아야 합니다

3. == 연산자는 값의 타입이 다르면 맞춘 후 비교합니다

🎁 OPERATOR [연산자]

동등 비교 연산자   [ ==, !=, ===, !== ]

3줄도 길다면 1줄 요약

==, != 는 쓰지 마세요 (진지함)

🎁 OPERATOR [연산자]

동등 비교 연산자   [ ==, !=, ===, !== ]

매번 책에서 쓰지 말라고 하는데 왜 그런지 봅시다

🎁 OPERATOR [연산자]

동등 비교 연산자   [ ==, !=, ===, !== ]

== 연산자와 === 연산자가 어떻게 동작하는지

뭐가 얼마나 달라서 쓰지 말라는 건지 너무 궁금해 졌습니다

그래서 오랜만에 엄청난 야크털 깎기 ㅇㅅㅇ

사진] '야크도 더워요~' 털 깎는 주민들 | JTBC 뉴스 

야크털을 깎...을수 있을까요?

🎁 OPERATOR [연산자]

동등 비교 연산자   [ ==, !=, ===, !== ]

제가 가져온 야크털 선물은 두 개 입니다

🎁 v8/tags/4.3.18/src/runtime.js

→ V8 엔진 소스코드

🎁 ECMAScript Equality Operators

→ ECMAScript 명세

🎁 OPERATOR [연산자]

Abstract Equality Comparison [ == ]

The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows:

1. If Type(x) is the same as Type(y), then

    a. Return the result of performing Strict Equality Comparison x === y.
2. If x is null and y is undefined, return true.
3. If x is undefined and y is null, return true.
4. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ! ToNumber(y).
5. If Type(x) is String and Type(y) is Number, return the result of the comparison ! ToNumber(x) == y.
6. If Type(x) is Boolean, return the result of the comparison ! ToNumber(x) == y.
7. If Type(y) is Boolean, return the result of the comparison x == ! ToNumber(y).
8. If Type(x) is either String, Number, or Symbol and Type(y) is Object, return the result of the comparison x == ToPrimitive(y).
9. If Type(x) is Object and Type(y) is either String, Number, or Symbol, return the result of the comparison ToPrimitive(x) == y.
10. Return false.

🎁 OPERATOR [연산자]

Abstract Equality Comparison [ == ]

== 연산 하는데 저렇게 많은 일을 하고 있습니다 🤔

🎁 OPERATOR [연산자]

Strict Equality Comparison [ === ]

1. If Type(x) is different from Type(y), return false.
2. If Type(x) is Number, then
    a. If x is NaN, return false.
    b. If y is NaN, return false.
    c. If x is the same Number value as y, return true.
    d. If x is +0 and y is -0, return true.
    e. If x is -0 and y is +0, return true.
    f. Return false.
3. Return SameValueNonNumber(x, y).

Number 비교가 아닌 경우에는 이 함수를 쓰더라구요! 대박 신기쓰

1. x, y 는 같은 타입이라고 가정한다

2. null, undefined, Symbol, String, Boolean, Object 값 비교를 하여 true || false 를 반환

🎁 OPERATOR [연산자]

Strict Equality Comparison [ === ]

→ return 까지 min(1) ~ max(3) 단계

Abstract Equality Comparison [ === ]

→ return 까지 min(1) ~ max(10) 단계

심지어 내부적으로 Strict Equality Comparison 호출

🎁 OPERATOR [연산자]

정말 이렇게 복잡한지 소스코드 확인 👀

🎁 OPERATOR [연산자]

Equality Comparison [ ==, === ]

만약 == 연산자를 쓰고 싶으시면, 몇 가지 예외 케이스를 외우시면 됩니다!

1. undefined == null

2. string - number 간 비교는 문자열을 숫자로 바꿔서 비교

3. bool - number (or string) 비교는 bool 을 숫자로 바꾼 뒤 비교

  1. bool 과 string 비교는 둘 다 숫자로 변형하지만

  2. 비어 있지 않은 문자열이 모두 true 는 아니다 ('0' == true)

4. object - number (or string) 비교는 객체를 원시 값으로 바꾼 뒤 비교

5. 그 외는 모두 false

🎁 OPERATOR [연산자]

아! 이런것도 외워 두셔야 합니다 히히 호호

이걸 외우느니 그냥 === 을 씁시다...

🎁 OPERATOR [연산자]

Equality Comparison [ ==, === ]

뭔가 유용해 보이는 함정들에 속지 마세요!

🎁 OPERATOR [연산자]

비교 연산자

[ >, <, >=, <= ]

🎁 OPERATOR [연산자]

비교 연산자 [ >, <, >=, <= ]

비교 연산자는 다음과 같은 순서를 거칩니다

1. 피 연산자 모두를 원시 값으로 바꿉니다 (ToPrimitive)

2. 두 피 연산자가 모두 문자열이면 해당 문자열의 자바스크립트 문자인 16비트 코드 단위를 사전 순서로 비교합니다

3. 그렇지 않으면 두 피연산자를 모두 숫자로 바꿔 비교합니다

소스 코드 잠깐 볼까요?

🎁 OPERATOR [연산자]

비교 연산자 [ >, <, >=, <= ]

그냥 넘어가면 아쉬우니까

소스코드 잠깐 확인 👀

🎁 OPERATOR [연산자]

산술 연산자

[ +, -, *, /, % ]

🎁 OPERATOR [연산자]

산술 연산자 [ +, -, *, /, % ]

산술 연산자에도 몇가지 예외가 있습니다 (예외의 언어 자바스크립트 😭)

1. + 를 제외한 연산자의 숫자 OP [숫자가 아닌 값] 의 결과는 NaN 이다

  → 엄청 흔한 오류

2. 0으로 나누어도 오류가 없다 (Infinity)

3. + 연산은 조건이 다음 알고리즘에 따릅니다

  1. 두 피연산자를 모두 원시값으로 바꿉니다 (ToPrimitive)

  2. 원시값 중 하나라도 문자열이면 다른 하나도 문자열로 변환하여 합친 결과를 반환합니다

  3. 그렇지 않으면 두 피연산자 모두 숫자로 반환하고 더한 결과를 반환합니다

🎁 OPERATOR [연산자]

산술 연산자 [ +, -, *, /, % ]

TMI: 0으로 나누면 안되는 이유

1. 나눗셈은 피연산자와 제수의 뺄셈연산

2. 제수는 0이므로 영원히 빼야 함

3. 오류

To be continued...

다음에 할거: 산술 연산자 (추가), 불리언 연산자, 비트 연산자, 특수 연산자, void, typeof, instanceof, 객체 연산자 (new, delete, in)