TIL 12 | JavaScript data types

https://youtu.be/OCCpGh4ujb8
드림코딩 by 엘리 님의 유튜브 강의를 보며 정리한 내용입니다.

1. Variable types

• primitive value, single item : number, string, boolean, null, undefined, symbol
  → primitive type : 더 이상 작은 단위로 나눠질 수 없는 한가지 아이템(single item)을 말한다.

• object, box container
  → object type : single item 들을 여러 개 묶어서 한 단위로, 한 박스로 관리할 수 있게 해준다.
  

• function, first-class function
  → 자바스크립트에서는 function 도 data type 중 하나이다.
  = 이말은 function 도 다른 데이터 타입처럼 변수에 할당이 가능하고, parameter 로도 전달이 되고, 함수에서 return 이 되는 것도 가능하다는 뜻이다. 이를 first-class function 이라고 한다.
  

2. Primitive value

오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다.

① Number

자바스크립트에서는 integer 이든 decimal number 상관없이 number type 으로 할당된다.

• integer 정수 (ex const count = 17; )

• decimal number 소수점 숫자 (ex const size = 17.1; )

☁️ number - special numeric values: infinity, -infinity, NaN

• infinity = 1 / 0
• negative infinity = -1 / 0
• NaN = 'not a number' / 2

const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;

console.log(infinity); // Infinity
console.log(negativeInfinity); // -Infinity
console.log(nAn); // NaN (숫자가 아닌 string을 숫자로 나누면 NaN가 나온다)

💡 이게 중요한 이유는 
   나중에 JavaScript를 이용해 DOM요소의 position을 바꾸는 등 다양한 계산을 해야 될 때! 
   나누고자 하는 값이 0인지 아닌지, 숫자인지 아닌지 확인하지 않고 연산을 바로 해버리면, 
   숫자가 아닌 infinity나 NaN(not a number)를 받을 수 있기 때문에 에러가 발생할 수 있다. 
   그래서 항상 연산을 할 때에는 그 값을 꼭 확인해보고 연산을 하는 것이 중요하다!

☁️ bigInt (fairly new, don't use it yet 🤚🏻) 🆕 (only chrome, fire fox 지원_2020,nov)

JavaScript 에서의 number은 -2의 53승 부터 2의 53승 까지의 범위의 숫자만 표현이 가능한데, 최근 bigInt 라는 타입이 추가되었다. 그래서 숫자 제일 마지막에 n만 붙여주면, bigInt로 간주되어진다.

const bigInt = 1234567890123456789012345678901234567890n; // over (-2**53) ~ (2*53)
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);
// value: 1234567890123456789012345678901234567890, type: bigint

② String

string은 텍스트 데이터를 나타낸다.

🎄 string 연결 가능 🎄

const brendan = 'brendan';
const greeting = 'hello' + brendan;

console.log(`value: ${greeting}, type: ${typeof greeting}`);
// value: hello brendan, type: string

🎄 template literals (string) 🎄 백틱기호이용

const helloBob = `hi ${brendan}!`;

console.log(`value: ${helloBob}, type: ${typeof helloBob}`);
// value: hi brendan!, type: string

🚨 JavaScript의 문자열은 immutable 하다. (= 변경불가능)

• 한 번 문자열이 생성되면, 그 문자열을 수정할 수 없다.
  (ex 'apple' 에서 'e' '를 빼고 다른 알파벳으로 변경 ... 불가)

• 그러나 원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다.
  (ex 메모리에 있는 'apple' 통째로 빼고 다시 다른 string 으로 변경은 ... 가능)

③ boolean

• false : 0, null, undefined, NaN, ' '(empty string)
• true : any other value (ex: 1, string ... )

🎄 true나 false 그 자체로도 할당 가능 🎄

const canRead = true;
const hadDinner = fale;

console.log(`value: ${canRead}, type: ${typeof canRead}`);
// value: true, type: boolean

🎄 expression은 evaluation되어 할당 🎄

const test = 3 < 1;

console.log(`value: ${test}, type: ${typeof test}`);
// value: false, type: boolean

④ null

null 타입은 딱 한가지 값인 null 을 갖으며, 비어있음 을 나타낸다.
* boolean 타입에서 null 은 false로 반환한다.

⑤ undefined

undefined 는 선언은 되었지만, 아무것도 값이 할당되지 않은것이다.

let x; // let x = undefined; 라고 명확히 할당해도 된다. 👌🏻

console.log(`value: ${x}, type: ${typeof x}`);
// value: undefined, type: undefined

⑥ symbol

"create unique identifiers for objects"
symbol 은 나중에 map이나 다른 자료구조 에서 고유한 식별자가 필요하거나, 아니면 concurrent(동시 다발적) 하게 일어날 수 있는 코드에서 우선순위를 주고 싶을 때! 쓰여진다.

간혹 식별자를 string 을 이용해서 쓰는 경우도 있는데, 이 string은 다른 모듈이나 파일에서 동일한 string을 썼을 때 동일한 식별자로 간주된다.

하지만 symbol 의 경우에는 동일한 id를 이용해서 만들었지만 아래 두 symbol은 다른 경우이다.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');

console.log(symbol1 === symbol2); // false

→ 즉, symbol 은 동일한 string 작성을 했어도 다른 symbol로 만들어지기 때문에 주어지는 스트링에 상관없이 고유한 식별자를 만들 때 사용된다.

🤔 만약 동일한 symbol을 만들고 싶다면?
symbol.for('id') 를 이용하기!

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');

console.log(gSymbol1 === gSymbol2); // true

🚨 symbol은 그냥 바로 출력하면 안된다!
→ .description 이용해서 string으로 변환하여 출력해야한다!

console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

3. Object

object real-life object data structure

object 는 박스형태이고, 데이터 구조를 나타내준다.

const james = {name: 'james', age: 24};

4. Primitive vs Object 🔥

메모리에 값이 저장되는 방법은 두 가지가 있다.

• primitive type
• object type

4-1. primitive type

값(value) 자체가 메모리에 저장된다. 💾

4-2. object type

object는 너~무 커서 메모리에 한번에 다 올라갈 수 가 없기 때문에 object를 가리키는 reference가 메모리에 저장된다. 💾

✨ 이렇게 const james 라고 선언하고 object를 할당하게 되면, 이 james 가 → 가리키고 있는 곳에는 reference가 있다. (reference는 실제로 object를 가리키고 있는 곳이다. 즉 이 reference를 통해서 실제로 object가 담겨져 있는 메모리를 가리킨다.)
그래서 const james 를 선언하게 되면 이 james가 가리키고 있는 포인터만 잠겨서 🔒 james가 다른 object로 변경이 불가능하지만, james의 name(이름)과 age(나이)는 계속 변경이 가능한거다.