Primitive Types

내일 면접이 있지만 ㅠ.. (어차피 글 안써도 이직 첫 면접이라 망할거 같습니다...)
오늘은 해당 카테고리의 글을 쓰는 날이구요! 원시자료형을 작성하는 날입니다!!!!! 와 너무 재밌다!!!!!!!(* 정말입니다!)
오늘도 머릿속에 지식을 넣고, 잠깐만 봐도 기억나기 위해 작성을 시작합니다.
(*글의 내용은 다른 분들의 글을 보고 제가 읽기 편한 순서로 정리하거나, 이해한 부분에 한해서만 작성합니다.)

---

원시자료형의 종류

숫자(number)
문자열(string)
불린(boolean)
null
undefined
Symbol(ES6)

---

원시자료형의 특징

1.원시자료형은 통상 리터럴로 작성하며, 다른 방식으로도 사용가능합니다!
(* 리터럴(literal)이란 확실히 고정된 값을 의미하는 것이라 생각되며, 상수(constant)와는 다르다고 알고 있습니다. 해당 글은 리터럴과 상수를 다루는 것이 아니라 추가 설명을 적지는 않겠습니다. :-( )

"foo";
typeof String("foo");    // "string"
typeof "foo";    // "string"
typeof new String("foo");    // "object"
1023;
typeof Number(1); // "number"
typeof 1;    // "number"
typeof new Number(1); // "object"
true;
typeof Boolean(true); // "boolean"
typeof true;    // "boolean"
typeof new Boolean(true); // "object"
null;
typeof null;    // "object" 밑에서 다루겠습니다.
undefined;
typeof undefined;    // "undefined"

2.Warpper Object!

new String("foo");  // String을 프로토타입으로 가지는 객체 리턴 String {"foo"}
new Number(0.143);    // Number를 프로토타입으로 가지는 객체 리턴 Number {0.143}
new Boolean(true);    // Boolean을 프로토타입으로 가지는 객체 리턴 Boolean {true}
Symbol("foo"); // new Symbol()은 에러를 반환합니다.

3.autoboxing????

// Warpper Object가 존재할 경우.
const foo = "미나리";
foo.length; // 3
const bar = 0.343;
bar.toPrecision(); // "0.343"
const bae = true;
bae.valueOf(); // true

// Warpper Object가 존재하지 않는 경우.
const baz = null;
baz.toString();    // Uncaught TypeError: Cannot read property 'toString' of null
const foz = undefined;
foz.toString(); // Uncaught TypeError: Cannot read property 'toString' of undefined

어째서 이런게 가능한걸까요. 위와 같은 코드를 가능하게 만들어주는게 autoboxing입니다.
원시자료형에서 autoboxing은 위에 있는 Wrapper Object가 존재하는 경우만 가능하며,
null, undefined의 경우는 위와 같습니다.
(* 따로 뭔가 호출을 하게 없어서 가장 자주 쓰는.toString()으로 한 것이니 오해하시면 안되요.)
Wrapper Object가 존재하는 경우는 해당 원시자료형은 autoboxing되어 해당 Wrapper Object의 함수를 사용할 수 있게 됩니다.

---

각 자료형의 특징

그럼 각 자료형의 특징을 확인해보겠습니다. : )

* number

ECMAScript has two built-in numeric types: Number and BigInt (see below).
The Number type is a double-precision 64-bit binary format IEEE 754 value (numbers between -(253 -1) and 253 -1). In addition to being able to represent floating-point numbers, the number type has three symbolic values: +Infinity, -Infinity, and NaN (not-a-number).

ECMAScript에는 숫자와 BigInt (아래 참조)의 두 가지 기본 숫자 유형이 있습니다. 숫자 유형은 배정도 64 비트 이진 형식 IEEE 754 값 (-(253-1)과 253-1 사이의 숫자)입니다. 부동 소수점 숫자를 나타낼 수있을뿐만 아니라 숫자 유형에는 + Infinity, -Infinity 및 NaN (숫자가 아님)의 세 가지 기호 값이 있습니다.
(* 언급된 BigInt에 대해서 자세히 다루지 않습니다. 다른 유형입니다.)

"Javascript에서 숫자(Number)는 64bit의 부동 소수점으로 구현되며 내부에는 2진수로 저장되지만 실제 외부 개발자에게는 10진수로 보여진다." 라고 저는 정의를 했습니다. (double-precision 64-bit binary format IEEE 754 value)

const foo = 3.14;
const bar = 7;
foo + bar; 10.14;

const nmBaz = Number(3);    // 3
const bigBaz = BigInt(3);    // 3n  bigInt는 끝에 n이 붙습니다. 더 정밀도 높은 연산을 위해서 사용한다고 합니다!
nmBaz === bigBaz;    // false
nmBaz == bigBaz;    // true

typeof nmBaz;    // "number"
typeof bigBaz;    // "bigint"

number와 BigInt는 이 정도면 될 것 같습니다.

근데! 공부하다보니 내부 2진수가 재미있었는데 학부생때 배웠던게 생각이 났습니다. 아래 코드를 console에 넣어보시죠!

function to64bitFloat(number) {
    var i, result = "";
    var dv = new DataView(new ArrayBuffer(8));

    dv.setFloat64(0, number, false);

    for (i = 0; i < 8; i++) {
        var bits = dv.getUint8(i).toString(2);
        if (bits.length < 8) {
            bits = new Array(8 - bits.length).fill(`0`).join("") + bits;
        }
        result += bits;
    }
    return result;
}

to64bitFloat(1); // "0011111111110000000000000000000000000000000000000000000000000000"

왜? 1의 값이 위와 같이 나왔는지에 대해서 궁금하다면 사실 이 글에서 다루기 보다는 아래 링크로 가보시는게 더욱 즐거운 공부가 될 것 같습니다. 위 코드도 해당 페이지에서 소개하는 코드입니다.

부동소수점 IEEE 754

* string

JavaScript's String type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it.

위와 같이 설명이 되어있는데 구글번역기의 힘을 빌리자면, Javascript에서의 string은 텍스트 데이터를 나타내는 자료형이며, 각각의 요소들은 16bit를 지니며 index는 0부터 값 하나씩 들어있다고 되어있습니다.

const foo = "bomi";
foo.length; // 4
foo.indexOf("b"); // 0

위 코드처럼 되어있다는 것 같아요. UTF-16으로 인코딩되기 때문에 16bit를 가지는 것 같습니다.

string의 재미난 점은 또 하나 있는데 아래 코드를 보시죠 : )

const foo = "hello";
const bar = "thiporia";
foo + " " + bar; // "hello thiporia"
const baz = 3;
foo + baz; // "hello3"

string을 다른 문자열과 + 연산으로 묶어버리면 자동으로 뒤에 따르는 값을 string으로 변환하여 더해줍니다.

(* 와우! 저는 이렇게 자동으로 string으로 변환해서 더해주는게 사실 java를 사용하다 넘어와서 그런지 편했습니다.
java에서면.. StringBuilder sb = new StringBuilder();.. append.. append 으.. 또 length 초기화도 그렇고..)

* boolean

Boolean represents a logical entity and can have two values: true, and false.

위와 같이 설명이 되어있습니다. 마찬가지로 쓱 훑어보면 boolean은 true, false 두 값을 가지며 논리 값을 표현한다. 정도인 것 같습니다.

const foo = true;
const bar = new Boolean(true);
foo === bar; // false;
foo === bar.valueOf(); // true;
const baz = Boolean(true);
foo === baz; // true

boolean은 위 코드 정도만 보면 정리가 될 것 같습니다.
Warpper Object로 만들었을 경우의 문제 정도만 고민하면 어떨까 생각해봤습니다.

* null

The Null type has exactly one value: null.

Null 타입은 정확히 하나의 값 null을 가진다. null 자체는 값이 없음을 의미합니다. 아예 값이 존재하지 않는 거에요!

* undefined

A variable that has not been assigned a value has the value undefined.

변수가 값이 할당되지 않았을때 변수는 undefined이다. 초기화가 되지 않은 변수를 지칭한다고 저는 생각합니다.
보통 저는 코드를 작성하다보면 let a; 로 두는 경우가 있는데, 이 때가 a라는 변수에 undefined가 할당되어 있는 것으로 이해합니다.

// null, undefined 비교시 주의 사항
typeof undefined; // "undefined" OK!
typeof null; // "object" ??!!? 
const bar = null;
bar === null;    // true 그래서 null은 그냥 이렇게 비교합니다.

* Symbol

Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a unique and immutable primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called atoms.

Symbols은 ECMAScript 2015에서 JavaScript에 새로 도입되었습니다. Symbol은 고유하고 변경 불가능한 원시 값이고 객체 속성의 키로써 사용 될 수 있습니다. 몇몇 프로그래밍 언어에서는 Symbols은 atoms로도 불린다.

사실 Symbol을 제가 지금 다루는 것을 무리인 듯 하여 몇몇 참고 페이지를 남기고자 합니다. (* 확실히 사용해보고 이해를 하면 추가로 수정해서 글을 남기겠습니다.)
Symbol

---

마치며.

어쩌다보니 두번째 글을 올리게 되었습니다. 제가 어느정도 이해해야 글을 쓰는데, 다른건 참 잘 이해가 되서 좋은데, Symbol은 아직 확실히 사용해보지 않아서 그런지 쓰기가 뭐하군요.. 그냥 있는 설명만 쓸 수도 있지만, 그건 아닌 것 같아서요.
모쪼록 부족한 글 읽어주셔서 언제나 감사합니다.( _ _ )
글의 내용에 문제가 있으면 꼭 댓글 달아주세요! 그런 댓글 정말 감사합니다!!!

참고한 글

33-js-concepts
부동소수점 IEEE 754
MDN-primitive Types