FrontEnd/ES6

02. const & let

hanseom 2021. 9. 4. 10:35
반응형

  const & let은 새로운 변수 선언 방식입니다. ES5는 Hoisting으로 인해 변수의 유효범위(Scope)가 {}에 상관 없이 설정되지만, ES6는 {} 단위로 변수의 유효범위(Scope)가 설정됩니다.

1. const

  const는 한번 선언한 값에 대해서 변경할 수 없는 상수입니다. 하지만, 객체나 배열의 내부는 변경할 수 있습니다. 아래 코드의 obj 객체의 num이란 속성 추가가 가능하며, arr 배열에 요소를 추가(push)하거나 빼낼(pop) 수 있습니다.

const

2. let

  let은 값 변경이 가능한 변수입니다. 다만, 한번 선언한 값에 대해서 다시 선언할 수 없습니다.

let

3. ES5 Hoisting

  Hoisting(끌어 올리기)이란 js해석기가 코드의 라인 순서와 관계 없이 함수선언식과 변수를 위한 메모리 공간을 먼저 확보함으로 가장 상단에 있는 것처럼 인식하는 것입니다.

hoisting()이란 function을 Overriding하기 전 호출을 했음에도 Overriding한 함수의 결과 출력

  단, 함수표현식은 대상이 아닙니다.

함수 선언식(function statement)과 함수 표현식(function expression)의 차이

원본 코드 실행 순서
var num1 = 10;

function sum() {
  num1 = num1 + num2;
}

var num2 = 20;
var num1;
function sum() {
}
var num2;

num1 = 10;
num1 = num1 + num2;
num2 = 20;

 

4. ES5 vs ES6

  ES5 변수의 유효범위(Scope)는 {}에 상관없이 설정됩니다.

for문 안에 선언된 i변수가 for문 밖에서도 값을 출력한다.

  ES6 변수의 유효범위(Scope)는 다른 언어와 통일성을 유지하기 위해 {}에 제한됩니다.

for문 안에 선언된 x변수는 for문 밖에서 인식할 수 없다.

 

반응형
댓글수0