data types, let vs var, hoisting

1. 변수(Variable)

• 변경될 수 있는 값
• Mutable data type
• let (added in ES6) 키워드를 사용하여 선언
• block scope({ })내: 지역 / block scope 외: 글로벌
• rw(read/write)

1-1. var

• 더 이상 사용하지 말 것
• 값을 선언하기도 전에 사용할 수 있다.
• block scope가 없다.

1-2. hoisting 

• 어디에 선언했냐에 따라 상관없이, 항상 선언을 제일 위로 끌어올려주는 것
• move declaration from bottom to top
• var로 선언한 표현식이나 function 선언문 등을 실행 단계에서 해당 scope의 맨 위로 옮기는 것
  • 변수가 함수 내에서 정의된 경우: 선언이 함수의 최상위로 hoist
  • 변수가 함수 바깥에서 정의된 경우: 선언이 전역 컨텍스트의 최상위로 hoist
• hoisting된 변수의 경우 선언이 할당과 동시에 일어나는 것이 아니라, 선언부만 유효 범위의 최상단으로 hoist되어 가장 먼저 해석된다
  • var는 block scope가 아닌, function scope에서 유효하다!
• 원인: js 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문

 

2. 상수(Constant)

• 한 번 할당하면, 값이 절대 바뀌지 않는 것
• pointer가 잠겨있어서, 할당 후 값 변경 불가
• Immutable data type
• const 키워드를 사용하여 선언
• r(read only)

 

3. Variable types

• primitive: 더 이상 작은 단위로 나누어질 수 없음, single item
  • number, string, boolean, null, undefined, symbol
• object: single item들을 여러 개 묶어서 한 단위(box)로 관리
• function

3-1. Number

• js는 숫자의 크기와 상관없이, number type을 이용해서 숫자를 쓸 수 있다.
  • let a = 12; let b = 1.2;
  • 위와 같이 number이라는 data type을 선언하지 않아도 된다.
  • js에서는 type이 dynamic하게 결정되기 때문이다.
• Special numeric values
  • infinity: 양수를 0으로 나눈 것
  • negativeInfinity(-infinity): 음수를 0으로 나눈 것
  • NaN: 숫자가 아닌 경우, string을 숫자로 나눈 것

3-2. String

• js에서는 문자든 문자열이든 모두 string type으로 할당된다.
• template literals(string): `string ${value}`

  • const brendan = 'brendan';
    const helloBob = `hi ${brendan}!`; //template literals(string)
    console.log(`value: ${helloBob}, type: ${typeof helloBob}`);

3-3. Boolean

• false: 0, null, undefined, NaN, ' '
• true: false 이외의 모든 값

3-4. null과 undefined

let nothing = null; // null
let x; // undefined

null은 null로 값이 할당된 상태이고, undefined는 선언은 되었으나 아무런 값이 지정되지 않은 상태이다.

3-5. Symbol

• map이나 다른 자료구조에서 고유한 식별자가 필요할 때
• 동시다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 경우 고유한 식별자가 필요할 때

• const symbol1 = Symbol('id');
  const symbol2 = Symbol('id');
  console.log(symbol1 === symbol2); // false
  
  const gSymbol1 = Symbol.for('id');
  const gSymbol2 = Symbol.for('id');
  console.log(gSymbol1 === gSymbol2); // true
  
  console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

• Symbol은 바로 출력 시 에러가 발생하므로, .description을 이용해서 string 변환 후 출력해야 한다.

3-6. Object

• 물건, 물체들을 대표할 수 있는 box 형태

• const ellie = { name: 'ellie', age: 20 } // const -> 다른 object로 변경 불가
  ellie.age = 21;

 

4. Dynamic typing

• js는 선언할 때 어떤 type인지 선언하지 않고, 프로그램이 동작할 때(runtime) 할당된 값에 따라서 type이 변경될 수 있다.

• let text = 'hello';
  console.log(`value: ${text}, type: ${typeof text}`); // string
  
  text = 1;
  console.log(`value: ${text}, type: ${typeof text}`); // number
  
  text = '7' + 5;
  console.log(`value: ${text}, type: ${typeof text}`); // string
  
  text = '8' / '2';
  console.log(`value: ${text}, type: ${typeof text}`); // number

 

 

 

 

참고:

- youtube 드림코딩 by 엘리

https://www.youtube.com/watch?v=OCCpGh4ujb8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=3

- https://m.blog.naver.com/tcloe8/221549773024