JavaScript ES6 - let, const

들어 가기 전...

회사에서 Angular를 사용한 제품이 존재하여 해당 코드를 분석해야 했다. 하지만 Typescript나 Angular에 대한 지식이 없어 해당 내용에 대한 학습이 필요했다. 그래서 TS나 Angular를 공부하는 김에 ES6 문법도 다시 정비하려고 한다...

ES6

• ECMAScript의 약자이며, 자바스크립트 표준을 나타냄
• ES6는 2015년 발표된 자바스크립트 표준

---

let, const

기존에 사용하던 var 대신 사용할 수 있는 선언문
+ var는 같은 변수에 여러번 재사용 가능했으나 let, const는 불가능

ex)

// var
var num = 6;
var num = 5; // 정상적으로 동작 -> nun = 5

// let
let num2 = 6;
let num2 = 5; // error -> 같은 변수에 재선언 불가능
num2 = 5 // 정상적으로 동작 -> num2 = 5

//const
const num3 = 6;
const num3 = 5; // error -> 같은 변수에 재선언 불가능
num3 = 5; // error -> 같은 변수에 재할당 불가능 즉, 상수화 됨

Hoisting

• JS에서 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
• var의 경우 호이스팅이 적용돼 변수 선언 전에 사용하면 undefined가 초기화된다.
• let, const의 경우 공간은 할당받지만, 초기화는 이뤄지지 않는다.

ex)

// var
x = 3	// x가 선언 되어 있지 않다면, 선언하고 초기화. 단, 호이스팅은 발생하지 않는다.
console.log(`${x} + ${y}`) // 위에서 선언된 x와 호이스팅되어 초기화된 y를 출력 -> 3 + undefined
var y = 3 // y를 선언하고 3을 초기화. var를 사용하여 호이스팅 또한 이뤄짐

// let
console.log(z) // error -> z는 메모리에 공간은 할당 받았지만, 초기화 되어 있지 않아 사용할 수 없다.

let z = 3; // 호이스팅 발생으로 메모리 공간을 할당 받지만, 초기화는 이 라인에서 이뤄짐

Scope

변수에 접근할 수 있는 범위로 글로벌 스코프와 지역 스코프가 존재

• 함수 선언마다 새로운 스코프를 생성 → 함수 스코프
• ES6 전에는 함수 단위의 스코프만 지원했지만, ES6 이 후부터 Block 단위의 스코프를 지원한다. ( let 사용 )

ex)

function a() {
  var var_y = "func_vy";
 
  if(var_y === "func_vy"){
    let let_y = "block_ly";
    console.log(var_y); // func_vy -> 함수 단위 스코프로 var_y가 유효함
  	console.log(let_y); // block_ly
  }
  
  console.log(var_y); // func vy
  console.log(let_y); // error: let_y is not defined -> let의 경우 block 단위 스코프이기 때문에 if문을 나오면 해제됨
}
a();

Scope Chainning

• 스코프의 연결을 의미

• JS는 EC(execution context)를 통해 실행되는 데 EC는 글로벌과 함수 EC로 나뉜다.

• Global execution context

  • 코드 실행 전 생성되어 함수 내에 없는 코드는 모두 GEC에 존재
  • 하나의 GEC만 존재하며 App 종료까지 유지한다.

• Functional execution context

  • 함수가 호출될 때 마다 새로운 FEC가 작성된다.

• 전체 구조는 스택을 따르며 해당 스코프에 필요한 변수가 없을 경우 그 전에 있던 스코프를 참조한다.

  ex)

  var v = "전역 변수";
  
  function a() {
  //function a Execution Context(EC)
      var v = "지역 변수";
  
      function b() {
          //function b Execution Context
          console.log(v);
      }
  
      b();
  }
  
  //Global Execution Context
  a();

  이 코드를 보면 우선 GEC가 생성되고, a() 그리고 b()순으로 쌓이게 된다.

  하지만 이 때 b() 스코프에서는 v가 존재하지 않기 때문에 바로 상위 스코프인 a()에서 v를 참조하여 지역변수로 출력하게 된다.

  이 때 만약 a()에 v가 없다면 전역변수 v를 참조하게 되고, 전역변수 v마저 없다면 에러를 발생하게 된다.