01. Variable

• App이 실행되면 memory를 할당 받는다
• 메모리에 Variable이나 다양한 Value가 저장된다
• 값이 변경 가능(재할당), 값은 언제나 할당이 되어도 상관없다
• Mutable type(가변성)

let (added in ES6)

• ES6에 추가된 변수의 종류로 var 변수를 대처하기 위해 개발 됨
• 지금은 var Type을 사용하지 않고 let Type만 사용한다(var은 권장X)
• Block Scope
  • { }괄호 내부에 Declaration이 되었을 경우 블럭 외부에서는 접근이 불가
• Global Scope
  • JS안에서 { }괄호 외부에서 Declaration이 되어 JS File 어디에서든지 접근 가능
  • JS가 Executing이 되고 ending이 될 때 까지 memory에 할당이 되기 때문에 최소화를 해주는게 좋다

var

• 선언이 되기 전부터 할당이 가능하다
• 재선언이 가능하다(중복 선언)
• 권장X
• Function Scope(has no block scope, 블록을 철저히 무시)
  • Function 내부에 Declaration이 되었을 경우에만 외부에서 접근이 불가

02. Constant

const

• 값이 할당되면 절대 바뀌지 않음
• 선언과 동시에 초기화를 진행
• Immutable Type(불변성)
• favor Immutable data type always for a few reasons(왠만하면 값을 할당하고 나서 변경되지 않는 데이터 타입을 이용해라)
  • Security(보안성)
  • Thread Safety(쓰레드에서의 동시 값 변경 진행을 막아줘서 문제점을 방지)
  • Reduce human mistakes(어떤 사용자가 사용하더라도 문제를 방지가능)

03. Variable Types

• Primitive Type, Object(Reference) Type

Primitive Type

• Passed by value
• 더 이상 작은 단위로 나누어 질 수 없는 Single Item
  • Number, String, Boolean, null, undefined, Symbol(added in ES6)

1. Number

• C data type for Number

  int main() {
  		short a = 12; // 2bytes
  		int a= 12;  // 4bytes
   	long b = 1234;  // 8bytes
   	float d = 1.2f; // 4bytes
  		double e = 8.2;  // 16bytes
  }

• Java data type for Number

  class main {
  	public static void main(string[] args) {
   		byte a = 12; // 1bytes
       		short b = 12; // 2bytes
          	int c = 12;  // 4bytes
          	long d = 1234;  // 8bytes
          	float e = 1.2f; // 4bytes
          	double f = 8.2;  // 16bytes
      	}
  }

• JS data type for number

  let a = 12;
  let b = 1.2;

  • JS에서는 'Number'로 숫자 정의 가능(Size 상관없음)
  • JS에서는 타입을 선언하지 않아도 Dainamic하게 자동적으로 타입이 지정된다
• TypeScript data type for number

  let a:number = 12;
   let b:number = 1.2;

  • JS, TS 둘다 숫자는 number 단일 타입이다
• Infinity, -Infinity, NaN
  • Infinity : number에 0을 나눌 때 생기는 Error
  • -Infinity : -number에 0을 나눌 때 생기는 Error
  • NaN(Not a Number) : Number가 아닌 값일 경우에 생기는 Error
• BigInt(fairly new, do not use it yet)
  • number size is (-2**53) ~ (2**53)
  • bigInt get a big size than number, over (-2**53) ~ (2**53) size
  • const bigInt = 1231646136149843249879147979179176719897198178791798171917n;
    • just writing 'n' for back ; position and end value position

2. String

• other languge have char type and String type but JS only have String type
  • 다른 프로그래밍 언어에서는 한가지 문자를 가진 char type이 있지만 JS에서는 문자 갯수 상관없이 String으로 선언
• if use + key can connect string to string( 'a' + 'b' => 'ab')
• template literal(string) use `` backtic and ${}
  • let a = 'hi', b = 'abcdefg', c = 'aaa';
  • old version : result ('hi abcdefg aaa') = a+' '+b+' '+c;
  • template literal : result ('hi abcdefg aaa') = ${a} ${b} ${c};

3. Boolean

• true & false
• falsy : 0, null, undefined, NaN, ''
• truthy : any other values
• expression also return true & false (a<b, 13 > 435)

4. null

• 내가 명확하게 너는 텅텅 빈 empty 값이야, 너는 아무것도 아니야라고 명시

5. undefined

• 선언은 되었지만 아무것도 지정되어 있지 않음, 텅텅빈것도 아무것도 없음

6. Symbol(added in ES6)

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
symbol1 === symbol2 // false
// string이 동일하다면 동일한 심볼을 만들어 주고 싶다면
const symbol1 = Symbol.for('id');
const symbol2 = Symbol.for('id');
symbol1 === symbol2 // true
// print
// error, cannot convert a symbol value to a string
`value : ${symbol1}, type ${typeof symbol1}`
// .description을 통해 string으로 변환시켜 출력을 해야한다
`value : ${symbol1.description}, type ${typeof symbol1}`

• create unique identifiers for Objecs
• 나중에 map이나 자료구조에서 고유한 식별자가 필요하거나 동시에 다발적으로 concurrent에서 우선순위를 정해줄 때 사용
• 간혹 식별자를 String을 사용하는 경우도 있지만 다른 모듈이나 다른 파일에서 동일한 string을 사용했을 경우 동일한 식별자로 판단됨

Object Type

• Passed by reference
• single Item을 여러개 묶어서 한 단위로 한 박스(box container)로 관리 해줌
  • Object, Function, Array ...
• function, first-class function(function or method도 다른 data처럼 variable에 할당이 가능)
• 세상에 존재하는 모든 건 Object화 할 수 있다

const user = {name : 'a'};
// object user have a not value
// that has Reference so cannot change Ref but can chage in value of ref
user.name = 'b'; 

04. Dynamic Typing

• JS is dynamically typed language (미리 선언한게 아닌 할당 된 값에 따라 타입이 변동 됨)
• c, java는 statically typed language라고 한다
• 변수를 선언 할 때 어떤 타입인지 결정하고 할당하는것에 비해
• js는 run time 중에 값에 따라 타입이 지정이 된다

let text = 'hello';
text.charAt(0); // h
`value : ${text}, type : ${typeof text}` // string
text = 1;
`value : ${text}, type : ${typeof text}` // number
text = '7' + 5;
`value : ${text}, type : ${typeof text}` // string
text = '8' / '2'
`value : ${text}, type : ${typeof text}` // number, /는 숫자 연산자라서 number로 인식
text.charAt(0); // error, type Error

정리

1. variable, r/w(read/write)
   : 메모리에 값을 읽고 쓰는게 가능하다

2. constant, r(read)
   : 값을 처음에 초기화 후 변경이 불가능하다

3. primitive
   : vlue 값 자체가 저장 됨
   let ellie = 'ellie';
   ellie라는 변수명에 ellie라는 값이 메모리에 저장

4. objec
   : 크기가 커서 메모리에 한번에 다 올라갈 수 없다
   objec를 가리키는 ref가 메모리에 저장 된다
   const ellie = {
   name : 'ellie',
   age : 20
   }
   ellie는 reference(object를 가리킴)가 있고 ref를 통해서 실제로 objecr가 담긴
   메모리를 가리킴
   그래서 주소인 ref(ellie)는 못 바꾸지만 내부의 name과 age의 값은 변경할 수 있다

5. data type
   5-1. Immutable type(불변)
   : primitive types, frozen objects (i.e. object.freeze())
   5-2. Mutable type(가변)
   : all object by default are mutable in JS
   5-3. favor immutable data type always for a reasons :
   - security
   - thread safety
   - reduce human mistakes

!NOTE
- Immutable data types : primitive types, frozen objecs (i.e. obejct.freeze())
: 데이터 자체를 절대 변경이 불가능 한것, ellie의 이름으로 선언하면 ellie라는 것은 변경이 불가능하다
- Mutable data types : all objecs by default are mutable in JS
: object, ellie 안에 있는 값을 변경 할 수 있다, JS의 대부분의 objec는 Mutable 타입이다!

05. Hoisting

• 끌어올리다는 뜻으로 JS에 선언된 변수와 함수를 최상단으로 끌어올려지는 현상이다
• 모든 함수가 Hoisting되는 것이 아닌 선언식 함수만 Hoisting이 되며 표현식 함수는 Hoisting이 안된다
• 변수는 var, let, const 구분 없이 Hoisting이 되지만 조금 다르다(TDZ 개념이 중요)
  • var은 hoisting 되지만 할당 된 값까지 hoisting되지는 않는다 그렇기에 undefined가 된다
  • let과 const도 hoisting이 되지만 TDZ로 인해서 ReferenceError가 발생한다
  • let/const 변수는 스코프에 진입할 때 변수가 만들어지고 TDZ가 생성되지만, 코드 실행이 변수가 실제 있는 위치에 도달할 때 까지 액세스할 수 없는것
  • let/const 변수가 선언된 시점에서 제어흐름은 TDZ를 떠난 상태가 되며, 변수 사용할수 있게 된다.

TDZ(Temporal Dead Zone)

• TDZ 시맨틱은 선언 전에 변수에 접근하는 것을 금지한다
• TDZ는 징계를 내린다(변수 선언 전에 어떤것도 사용하지 않는다)
• ReferenceError 발생

TDZ 영향을 받는 구문

• const 변수
  • 선언 및 초기화 전까지 TDZ에 있다
  • 선언과 초기화 후 사용
• let 변수
  • 선언 및 초기화 전까지 TDZ에 있다
  • 선언 후 사용
• class 구문
  • 선언 전까지 TDZ에 있다
  • 선언 후 사용
• constructor() 내부의 super()
  • 부모 클래스를 상속받았다면, 생성자 안에서 super()를 호출하기 전까지 this 바인딩은 TDZ에 있다
  • 인스턴스를 초기화하기 위해 부모 클래스 생성자를 호출할 것을 제안
  • 부모 클래스의 생성자를 호출하고 인스턴스 준비가 되면 자식 클래스에서 this값 변경 가능
• 기본 함수 매개변수(Default Function Parameter)
  • 글로벌과 함수 스코프 사이의 중간 스코프(intermidiate scope)에 위치
  • 기본 매개변수 또한 TDZ제한이 있다, 기본 매개변수는 선언 및 초기화 다음에 사용

    const a = 2;
    function square( a = a ) {
    	return a * a;
    }
    // Dose not work!
    square();

    const init = 2;
    function square( a = init ) {
    	return a * a;
    }
    // Dose not work!
    square();

var, function, import 구문

• var, function 선언은 TDZ에 영향을 받지 않는다, 현재 스코프에서 호이스팅이 된다
  • var 변수는 선언하기 전에 접근하면 undefined를 얻게 된다
  • 함수는 선언된 위치와 상관없이 동일하게 호출
  • import module 역시 호이스팅이 된다, JS 파일 시작부분에 디펜던시 모듈을 가져오는 것이 좋다

TDZ에서 typeof 연산자의 동작

• typeof 연산자는 변수가 현재 스코프 안에 선언되었는지 확인할 때 유용

// notDefined 변수는 선언되지 않아서 undefined가 발생한다
typeof notDefined; // => 'undefined'

// TDZ 변수인 경우에는 ReferenceErrorrk qkftod
typeof variable; // throws 'ReferenceError'
let variable;

결론

• TDZ는 const, let, class 구문의 유효성에 영향을 미치는 중요한 개념
• TDZ는 선언 전에 변수를 사용하는 것을 허용하지 않는다
• var 변수는 선언 전에도 사용할 수 있기 때문에 var사용은 피하는 것이 좋다
• TDZ는 언어 스펙에 맞도록 좋은 코딩 습관을 만들어주기 때문에 좋다

  TDZ 설명 : https://ui.toast.com/weekly-pick/ko_20191014/