let , const , var

ES6버전에서 등장한 let과 const의 특징에 대해서 알아보는 페이지

var

수업때 사용한 var변수는 ES5에서 사용하던 변수로 다음과 같은 문제점들을 가지고 있다.

1. 함수 레벨 스코프

2. 변수명 중복 허용

3. 호이스팅

이 모든 문제점을 해결하기 위해 ES6버전에서 등장한 변수가 let과 const이다.

함수레벨 스코프

스코프(scope)는 변수의 유효범위를 의미한다. 즉 함수레벨 스코프라 함은 함수단위로 유효한 범위를 가진 변수를 의미한다. 아래 코드를 보자.

function testScope(){
    var foo = 1; // poo, bar는 이 위치까지 끌어올려진다.
    if(foo === 1){
        var poo = 2;
    }
    for(var bar = 3;true;){
        break;
    }
    console.log(foo,poo,bar); // 1, 2, 3     
}

위처럼 변수가 이상한 방식으로 동작하는 이유는 호이스팅과 관련이 있다. var 변수는 Execution Context에 의해 test과정에서 함수 최상단 으로 끌어올려 진다.

그 후 함수내에서라면 어느위치에서든 사용 가능하기 때문에 var는 함수 스코프를 가지고 있다고 표현한다.

블록레벨 스코프

var 처럼 함수 스코프를 가지고 있는 변수는 프로그래밍을 함에 있어서 혼동을 야기할 수 있다. 그 이유는 대부분의 프로그래밍 언어가 블록레벨 스코프를 가지고 있기 때문이다. 블록레벨 스코프를 가진 변수들은 생성된 블록에서만 유효하기 때문에 실행흐름을 읽기에 더 편하고 메모리 성능도 함수레벨 스코프보다 더 뛰어나다. 따라서 ES6에서는 블록레벨 스코프를 지원하는 let과 const가 추가되었다.

function testScope(){
    const foo = 1; 
    if(foo === 1){
        const poo = 2; // if 블럭 내부에서 생성후 소멸
    }
    for(let bar = 3;true;){ // for 블럭 내부에서 생성후 소멸
        break;
    }
    console.log(foo); // 1
    console.log(poo); // error
    console.log(bar); // error
}
.....
ReferenceError: poo is not defined

let vs const

let과 const는 둘다 블록레벨 스코프를 가진 변수이다. 둘 사이의 차이점은 한번 담아준 값을 바꿀 수 있느냐 없느냐이다.

let은 한번 담아준 값을 자주 바꿔 줘야하는 변수에 사용하는 가변(mutable)변수 키워드 이고

const는 한번 담긴 값이 바뀌면 안되는 변수에 사용하는 불변(immutable)변수 키워드이다.

const a = 1;
a = 2; // error

let b = 1;
b = 2; // ok

중복선언 해결

var 변수는 변수명이 중복되어도 에러를 발생시키지 않고 마지막으로 선언한 변수를 가르킨다.

var a= 1; // a == 1
var a= 2; // a == 2
var a= 3; // a == 3
console.log(a); // 3

위 코드를 단순히 자바스크립트의 유연함으로 치부하고 넘어갈 수도 있지만, 대규모 어플리케이션으로 개발시 이러한 문제점은 치명적으로 다가올 수 있다.

극단적인 예시로 라인수가 100~1000줄정도의 js파일을 관리한다면 변수명을 앞선 코드에서 이미 사용중인지 아닌지 충분히 파악이 가능하겠지만 10000~100000줄의 코드를 관리해야 한다면 해당 js파일에 변수가 뭐가 있는지 조차 파악하기 힘들 것이다.

따라서 이러한 문제를 해결해주는 let과 const를 사용하는게 좋다.

// 개발자 KH수달이 작성한 코드
var testScope = function(){
...
}

// 개발자 KH짱구가 작성한코드
var testScope = function(){
...
}
testScope(); // 정상
// 변수명이 중복되어도 에러를 발생시키지 않기 때문에 추후 비지니스 로직에서 문제가 발생할 수 있음

---

// 개발자 KH수달이 작성한 코드
const testScope = function(){
...
}

// 개발자 KH짱구가 작성한코드
const testScope = function(){ // 선언불가.
...
}
testScope(); 

// 출력결과
SyntaxError: Identifier 'testScope' has already been declared

마무리

그 밖에도 선언된 위치보다 더 높은 곳으로 끌어 올려지는 호이스팅 기능도 let과 const에는 적용이 안된다. 이는 코드의 흐름을 읽기 쉽게 만들어 유지보수를 용이하게 만들어 준다.

결론은

변수의 중복선언을 피하기 위해서 변수는 var 가 아닌 let,const 둘 중 하나만 사용하도록 하고

그중에서도 값이 바뀌면 안되는 핵심 함수나 값들은 전부 const를 사용하여 받아주고,

그 밖에 값이 바뀌어야 하는 경우는 let을 사용하도록 하자.