Modern Javascript 230214

variables는 메모리에 주소를 만들고...

1. 선언 : 변수 이름 - 주소를 정의 (ex 서울)
2. 초기화 : undefined - 공간확보 (ex 실제 땅)
3. 할당 : value - 실제데이터 (ex 집을 짓는다)

Javascript is Lexical Scope is Static Scope (참조)

Lexical Scope : 변수를 정의한 곳이 범위(not 호출한 곳)

var lexical_var = 10;

function foo() {
  var lexical_var = 20;
  bar();
}

function bar() {
  console.log(lexical_var);
}

foo();
bar();

ES6에는 왜 Let, const 가 들어왔나

호이스팅 (참조)

호이스팅(Hoist 끌어올리다) : function, var, let, const

• 자바스크립트는 순차적으로 실행되지만 메모리에 올릴 대상들은 미리 훑어보고 할당해준다 (ex 땅 선점?)

function은 우선 순위가 가장 높다

var는 끌어올려져 선언과 동시에 초기화(undefined)

console.log(var_hoisting); //undefined var변수는 초기화까지 되었음
var var_hoisting; //undefined

let, const는 끌어올려져 선언만

console.log(let_hoisting); // ReferenceError let변수는 주소만 있는 상태 Temporal Dead Zone(TDZ)
let let_hoisting; //undefined

중복선언

중복선언 가능, 업데이트 가능 : var

var variables = 5;
var variables = "a";
variables = true;

중복선언 안됨, 업데이트 가능 : let

let letvar = 5;
let letvar = "a"; //SyntaxError

let letvar2 = true;
letvar2 = {1:2};

중복선언 안됨, 업데이트 안됨 : const

• 변수명은 구분하기위해 대문자로 하자
• 원시(순수 raw) 데이터 값 재할당(업데이트)만 안되는거고 나머지(객체 프로퍼티 생성, 삭제, 변경)는 다 됨

const PI = 3.14;
const PI = 3; //SyntaxError

const ROOT_TWO = 1.414;
ROOT_TWO = 1; //TypeError

const CONST_PROP = { A: 3.14 };
console.log(CONST_PROP.A);
CONST_PROP.B = CONST_PROP.A;
CONST_PROP.B = 3;
delete CONST_PROP.A;
console.log(CONST_PROP.B);

scope 범위

함수 레벨 스코프 var : 함수만 local scope

var function_level_scope = 1;
if(true) {
	var function_level_scope = 20;
}
console.log(function_level_scope);

블록 레벨 스코프 let, const : { } 블록이 있으면 local scope

let block_level_scope = 1;
if(true) {
	let block_level_scope = 20;
}
console.log(block_level_scope);

global object & let

global object is window properties

  var global_var = 1;
  let global_let = 2;
  implicit_global = 3;

  {
    console.log(window.global_var); // window의 프로퍼티
    console.log(window.global_let); // 전역이 아니라 블록안에서는 할당안된 상태
    console.log(window.implicit_global); // 암묵적으로 선언한 변수는 window의 프로퍼티
  }