Back
Featured image of post let, const와 기존 var의 차이
Frontend

let, const와 기존 var의 차이

변수 관리를 더욱 효율적으로 해주는 let,const를 사용해보자

요즘 공부하고 있는 vue.js 프레임워크를 사용하다보면 자연스럽게 es6 이상의 트렌디한 자바스크립트 문법이 눈에 띈다. 🧐
물론 vue 코드를 빠르게 짤 수 있는 스니펫 플러그인에서도 기본적으로 es6+ 문법으로 안내해주기도하고.. vue를 사용해서가 아니라 이렇게 트렌디한~자바스크립트에서는 어떤 문법이 있는지 차례차례 짚고 넘어가고자 한다. (물론 내 기준 현업 또는 개인적으로 많이 쓰는 문법 위주로~ㅎㅎ)

블록범위

먼저 let과 const를 제대로 이해하려면 블록범위를 제대로 알고넘어가야한다!
블록범위 내에서 let과 const를 사용하면 해당 변수를 재할당할 수 없도록 지정할 수 있다. 자바스크립트에서의 블록유효범위는 if블록이나 for 반복문과 같이 중괄호로 둘러싸인 범위를 의미한다. 지금까지 사용했던 var로 변수를 선언하는 방식은, 중복되는 변수이어도 재할당을 하면서 코드가 많아질 경우 값이 바뀌는것을 파악해야하는 문제가 있었다.

var name = 'choi';
var name = 'kim';
console.log(name); //'kim'

const

값을 재할당할 수 없지만, 참조된 값을 변경할 수는 있다.

const name = 'choi';
const name = 'kim'; //error

const fruits = ['🍎', '🍌'];
fruits.push('🍓');
console.log(fruits); //'🍎', '🍌', '🍓'

let

기존 var과 유사한 점은 변수를 재할당할 수 있는 점이다. 하지만 var로 선언한 변수는 어휘적 유효범위(lexical sope) 를 따르지만, let은 블록 유효범위를 따른다. 아래 예제를 보면 아이템의 가격을 반환해주는 함수이다. 만약 정가(price)와 갯수(inventory)가 존재하면 정가를 반환하고, 세일 가격(salePrice)와 세일중인 아이템 갯수(saleInventory)가 존재하면 할인가격을 반환한다. 이 예제에서 핵심은 let임에도 불구하고 변수를 2번 재할당하고 있다. 블록 유효범위를 따르기때문에 가능한 일이다.

function getPriceOfItems(item) {
  let stack = item.inventory;
  let price = item.price;
  if (item.salePrice) {
    let stack = item.saleInventory; //다른 유효범위
    console.log(stack); //1
    if (stack > 0) {
      price = item.salePrice;
    }
  }
  if (stack) {
    console.log(stack); //3
    return price;
  }
  return 0;
}
getPriceOfItems({
  price: 3600,
  inventory: 3,
  salePrice: 1800,
  saleInventory: 1
});
//1800

반복문에서의 유효범위 충돌 방지

지난번 클로저를 소개할 때 사용했던 예제이긴하지만.. 어휘적 유효범위를 따르는 var로 선언한 변수 때문에 비동기 로직에서 마지막 값만 계속 참조되는 현상이 일어났던 코드이다.

function countSec(seconds) {
  for (var i = 1; i <= seconds; i++) {
    setTimeout(function () {
      console.log(i); //3..3..3..
    }, i * 1000);
  }
}
countSec(3);

아래처엄 클로저로 해결할 수 있었다.

function countSec(seconds) {
  for (var i = 1; i <= seconds; i++) {
    (function (curNum) {
      //즉시실행함수를 이용해 외부 변수 i를 복사하여 setTimout() 지역 변수로 끌어와 정상적으로 1,2,3 입력된다!
      setTimeout(function () {
        console.log(curNum);
      }, curNum * 1000);
    })(i);
  }
}

countSec(3);

let을 활용해서 더욱 간단히 해결할 수 있다.
블록유효범위를 따르기 때문에 해당 블록에서만 유효하다는 특징을 잊지말자!

function countSec(seconds) {
  for (let i = 1; i <= seconds; i++) {
    setTimeout(function () {
      console.log(i);
    }, i * 1000);
  }
}

countSec(3); //1..2..3..

정리

이렇게 기존 가장 많이 사용하였던 var과 const, let의 차이를 알아보았다.

  • var : 어휘적 유효범위 (코드를 작성한 위치 기준에서의 참조되고 있는 범위)를 따르는 변수, 재할당과 값수정 모두 제한이 없다.
  • const : 블록 유효범위를 따르며, 변수의 재할당 및 재선언이 불가능하다.
  • let : 블록 유효범위를 따르며, 변수의 재할당은 불가능하지만, 재선언은 가능하다!

최대한 const를 사용해 변수들을 선언하는것이 바람직하며, 재할당이 필요한 경우에만 let을 사용하는것을 추천한다.

참고자료

  • 자바스크립트 코딩의 기술 - 조모건 저
© 2020 - 2023 Jiny