[React] ES6에서의 변수 선언 let 키워드 - 가온 코딩

구문적인 변수 영역 규칙 lexical variable scoping 을 지원하는 let 키워드

 

구문적인 변수 영역이란?

자바스크립트에서는 중괄호 {} 를 사용해서 코드 블록을 만드는데, 이때 함수는 별도의 변수 영역을 이룬다.

하지만, if/else 문의 경우 예외적이다.

다른 언어에서는 if/else의 블록도 별도의 영역을 구성할 것으로 생각되겠지만 실제로 그렇지 않다.

if/else 블록 안에서 변수를 새로 만들면, 그 변수의 영역이 그 블록 안으로만 한정되지 않는다.

 

 

 

[그림1] if 안에 있는 topic 변수를 var로 바꾸었더니 if 밖에 있는 topic에도 영향을 미치는 경우

// Variables cannot be scoped to code blocks

var topic = "자바스크립트";

if (topic) {
  var topic = "리액트"
  console.log('블록', topic);   //블록 리액트
}

console.log('글로벌', topic);   //글로벌 리액트

 

[그림2] if 안에 있는 topic 변수를 let로 바꾸었더니 if 밖에 있는 topic에도 영향을 미치지 않는 경우

// Variables cannot be scoped to code blocks

var topic = "자바스크립트";

if (topic) {
  let topic = "리액트"
  console.log('블록', topic);   //블록 리액트
}

console.log('글로벌', topic);   //글로벌 자바스크립트

if 블록 안의 topic을 변경해도 if 블록 바깥의 topic 에는 아무런 영향이 없다.

중괄호가 새로운 영역을 만들어내지 못하는 다른 부분으로는 for 루프가 있다.

 

 

[그림3] for 안에 var 변수를 넣고 함수를 넣어 돌린 경우, 모든 박스가 같은 값으로 나온다.

 

// Problem, counters are not scoped to for loop blocks

var div, 
    container = document.getElementById('container')

for (var i=0; i<5; i++) {
  div = document.createElement('div')
  div.onclick = function() {
      alert('이것은 박스 #' + i + '입니다.')
   }
  container.appendChild(div)
}

[그림 4] for 안에 let 변수를 넣고 함수를 넣어 돌린 경우, 박스별로 다른 값으로 나온다.

// Solution, lexical variable scope

var div, 
    container = document.getElementById('container')

for (let i=0; i<5; i++) {
  div = document.createElement('div')
  div.onclick = function() {
      alert('이것은 박스 #' + i + '입니다.')
   }
  container.appendChild(div)
}

let으로 i의 영역을 제한하는 것이다.

 

참고자료

러닝 리액트(Learning React), 알렉스 뱅크스, 한빛미디어 (2021)