JavaScript ES6 정리 - Variable, Block Scope

이전 JavaScript 핵심 개념 정리 포스팅에서는 ES6 이전의 문법과 활용 방법에 대해 정리하였다.

하지만 나와 내 글을 읽어주시는 분들은 JS ES6를 더 많이 사용할테니 ES6도 강의를 보며 공부한 것을 정리하여 올리기로 맘 먹었다!

이번 포스팅에서는 JS ES6의 새로운 변수인 let, const와 Block Scope에 대해 알아보자!

들어가기 전 ES6의 목표를 알고 가자!

ES6는 JavaScript를 알아야만(Hoisting 등등) 이해할 수 있는 코드를 최대한 배제하는 것을 목표로 한다.

let / const

ES6 이전의 변수라고 한다면 모두 var를 떠올릴 것이다.

전역 변수인 var를 선언하고 사용하는 것은 유지보수 측면에서 좋지 않다.

var에 대한 문제는 계속 제기되어 왔고 해결책으로 드디어 ES6부터 새로운 변수 let, const가 등장하였다.

바로 코드를 보자.

{
  const test1 = "hi";
  let test2 = "hello";
  console.log(test1, test2); //hi hello
}
console.log(test1, test2); //Error: not defined

const와 let 대신 var로 선언했다면 아래의 출력 또한 문제가 없었을 것이다.

이처럼 const, let은 정해진 영역(Block Scope) 안에서만 활동할 수 있는 지역변수이다.

var는 함수 스코프, const, let은 블록 스코프 영역안에서만 활동할 수 있다.

함수 스코프 : 함수에 의해서 생기는 범위, 변수의 유효 범위
블록 스코프 : 블록에 의해 생기는 유효 범위 -> { }에 의해 변수의 유효 범위가 결정된다!

let a = 1;
a = 2;
console.log(a); //2

const b = 3;
b = 4; //TypeError
console.log(b);

const는 constant의 줄임말로 상수를 뜻한다.

따라서 선언과 동시에 변하지 않는 값을 할당해야한다.

let은 const와 반대로 여러 번 재할당이 가능하다.

const로 할당한 object의 내부 값은 어떻게 작동할까?

아래 코드를 보며 확인해보자!

const OBJ = {
  prop1: 1,
  prop2: 2,
};
OBJ.prop1 = 3; //O
console.log(OBJ.prop1);

const ARR = [0, 1, 2];
ARR.push(3); //O
delete ARR[1]; //O
console.log(ARR);

const를 사용한 목적과 다르게 const object 내부 값은 추가 할당 및 삭제가 가능하다..

이를 해결하기 위한 방안은 Object.freeze(), Object.defineProperty()가 있다.

const OBJ = {};
Object.defineProperty(OBJ, "prop1", {
  value: 1,
  writable: false,
  configurable: false,
});

const OBJ2 = {
  prop1: 1,
};
Object.freeze(OBJ2);
//하지만 property도 참조형 데이터일 경우, 얼릴 수 없다..

const OBJ = {
  prop1: 1,
  prop2: [2, 3, 4],
  prop3: { a: 1, b: 2 },
};
Object.freeze(OBJ);
OBJ.prop1 = 3; //X
OBJ.prop2.push(5); //O
OBJ.prop3.b = 3; //O
console.log(OBJ);

Object.freeze(OBJ.prop2); //참조형 데이터인 prop2를 얼린다.
OBJ.prop2.push(6); //X
console.log(OBJ);

Block Scope

모든 코드는 값, 식, 문으로 이루워져있으며 그 중 값과 식은 동일하게 간주한다.

특정한 상황이 아니라면 문은 결과를 return하지 않는다.

블록 스코프는 if문, for문, while문, switch문에 적용되며 문 자체가 하나의 블록 스코프이다.

function { } <= 함수의 스코프

예제

var sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
  if (i == 10) {
    let sum_temp = sum;
    console.log(sum_temp); //55
  }
  console.log(sum_temp); //ReferenceError
}
console.log(i); //ReferenceError

{
  console.log(test1); //undefined
  console.log(test2); //Reference Error
  console.log(test3); //Reference Error
  var test1 = "hi1";
  let test2 = "hi2";
  const test3 = "hi3";
}

const, let도 var와 마찬가지로 Hoisting이 가능하지만 선언되어서 초기화되기 전까진 TDZ(임시 사각 지대)에 속하게 된다.

/*Node 환경이 아닌 Browser 환경에서 실행해보자!*/
var a = 10;
console.log(window.a); //10
console.log(a); //10
delete a; //false
console.log(window.a); //10
console.log(a); //10

window.b = 20;
console.log(window.b); //20
console.log(b); //20
delete b;
console.log(window.b); //undefined
console.log(b); //undefined

위 코드는 이해도 잘 안 되고.. 그냥 이상하다!

var는 전역변수인 관계로 global 객체인 window 내부에 할당된다..

var로 선언하면 삭제 불가.. 무조건 const / let을 쓰자!

🧐개발을 하며 값을 재할당하는 경우는 드물다.. 그러므로 const를 더 많이 사용해보자!🧐

마무리

JS가 다른 언어보다 쉽다고 생각했었는데, JS에만 있는 개념, ES6 등에 대해 공부하다 보니 그런 생각이 싹 사라졌다..🤣🤣

본 포스팅은 인프런 강의 Javascript ES6+ 제대로 알아보기를 공부하며 정리한 포스팅입니다!

JS ES6의 새로운 변수인 let, const와 Block Scope에 대해 알아보자!