let , const , var
ES6버전에서 등장한 let과 const의 특징에 대해서 알아보는 페이지
var
수업때 사용한 var변수는 ES5에서 사용하던 변수로 다음과 같은 문제점들을 가지고 있다.
함수 레벨 스코프
변수명 중복 허용
호이스팅
이 모든 문제점을 해결하기 위해 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 definedlet 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을 사용하도록 하자.
Last updated