JavaScript 에서 var, let, const의 차이

코딩배우기

JavaScript 에서 var, let, const의 차이

탁이 2021. 6. 28. 09:50

JavaScript 로 변수를 선언할 때 써왔던 var 그런데 최근 var 뿐만 아니라 let 과 const 이라는 코드도 많이 눈에 띠게 됐는데요. let이나 const 는 ECMAScript2015에서 채택 된 새로운 선언의 방법입니다.

그렇다면 지금까지 사용하던 var와 어떤 차이가 있는지, 이번 시간에는 JavaScript 에서 var, let, const의 차이 · 구분에 대해서 알기쉽게 설명합니다.

var, let, const 란
let, const는 새로운 기법
var, let, const의 차이
var, let, const의 구분

var, let, const 란

JavaScript는 변수나 상수 (이하 총칭하여 "변수"라고 표기합니다) 를 사용할 때 변수 이름을 선언하도록 되어 있습니다. 그리고 var, let, const는 모든 JavaScript에서 변수를 선언 할 때 사용하는 키워드입니다. 예를 들어, 다음과 같이 작성하여 변수를 선언 할 수 있습니다.

var fruit = '사과';
let fruit = '사과';
const fruit = '사과';

let, const는 새로운 기법

3 개의 선언 키워드 중 let과 const는 ECMAScript2015에서 채택 된 선언 방법입니다. ECMAScript2015 는 JavaScript의 표준 사양입니다. 현재는 국제 단체에 의해 표준화 되어 Google Chrome 또는 Internet Explorer 11 이상 브라우저에서 널리 사용되고 있습니다. 도입 5 년 이상이 경과하고 있기 때문에 (이 글을 쓰는 시점) 개발 현장에는 이미 널리 사용되는 사양입니다.

var, let, const의 차이

변수 선언의 기술로 사용되는 var, let, const 3 가지 요소의 차이점에 대해 살펴 보도록 하겠습니다.

첫번째 차이 : 다시 대입, 다시 선언 할 수 있는지 여부

다시 대입이란 한 번 선언 한 변수에 대해 값을 다시 할당하는 것을 의미합니다. 이에 반해 다시 선언은 한 번 선언 한 변수의 이름을 키워드와 함께 통째로 선언 다시 덮어 쓰기하는 것을 말합니다. 다음에서 자세히 살펴 보도록합니다.

다시 할당

var 를 사용하여 다시 대입을하면 다음과 같은 설명이 가능합니다.

var fruit = '사과';
fruit = '배';
console.log(fruit)

>> 배

let 도 방법은 동일합니다.

let fruit = '사과';
fruit = '배';
console.log(fruit)

>> 배

하지만 const 만 다시 할당하려고하면 오류가 발생합니다.

const fruit = '사과';
fruit = '배';
console.log(fruit)

>> TypeError: Assignment to constant variable.

const 만 다시 할당 할 수 없다는 사양은 본 기사 중에서도 매우 중요한 포인트입니다. 다시 대입을 최소화하면 변수의 내용이 명확한 가독성이 좋은 코드를 구현할 수 있습니다. const 는 상수 constant 로 부터 왔다고 생각하면 좋습니다. 상수의 상은 항상상자로 항상같은 (변하지 않는) 수를 의미하죠. 최근 개발 현장에서는 재 할당이 필요한 경우를 제외하고 가능한 const를 사용하고 있습니다.

다시 선언

선언 덮어 쓰기를하기 위해 JavaScript로 다시 선언을 해 버리면 예상치 못한 버그를 초래합니다. 코드의 가독성을 저하시키기 때문에 일반적으로 피할 수 있습니다. var, let, const에서 다시 선언 할 수있는 것은 var뿐입니다.

var fruit = '사과';
var fruit = '배';
console.log(fruit);

>> 배

let, const로 같은 일을하려고 하면 에러가 나오기 때문에 다시 선언을 예방할 수 있습니다. 이 점은 let, const 를 사용하는 하나의 장점이라고 할 수 있습니다.

두번째 차이 : 범위

범위는 간단하게 말하면 "변수의 범위"입니다. 선언한 변수는 코드의 어디에서나 사용할 수있는 것은 아니고,이 범위에 따라 사용할 수있는 범위가 정해져 있습니다.

var는 함수 범위

var는 let, const에 비해 넓은 범위를 가지고 있습니다. 이름 그대로 함수 내에서 var를 이용하여 선언 된 변수는 그 함수를 어디서나 호출 할 수 있습니다.

function test() {
    if (true) {
        var fruit = '사과';
    }
    console.log(fruit);
}

let, const는 블록 범위

블록은 {}로 둘러싸인 범위입니다. let, const를 사용하면 같은 함수에도 블록 외부에서 변수를 호출 할 수 없습니다.

function test() {
    if (true) {
        let fruit = '사과';
        const fruit1 = '배';
    }
    console.log(fruit);
    console.log(fruit1);
}

범위가 다른 경우

기본적으로는 더 좁은 범위에서 변수가 어디서 온 것인지 어떻게 사용되고 있는지가 명확하다면, 버그를 일으키기 어려운 코드를 작성할 수 있습니다. 따라서 범위 내에서 let, const를 사용하는 것이 바람직하다고 할 수 있습니다.

var, let, const의 구분

JavaScript 언어 사양이라는 관점에서 var, let, const의 차이점을 설명했습니다. 큰 차이는 다시 대입 재 선언 할 수 있는지 여부 범위의 차이 부분입니다. 그리고 본 기사의 요약하면 3 가지 키워드의 실천적인 구분에 대해 설명합니다.

const를 기본으로 사용

결론부터 말하면 상수를 선언할 때는 const를 항상 사용하는 것이 좋습니다. 다시 선언 재 할당을 모두하지 못할뿐만 아니라, 범위도 좁은 const 가장 제약이 많기 때문에 의도하지 않은 구현을 방지 = 안전한 키워드라고 할 수 있습니다.

let은 const를 사용할 수 없을 때 사용

기본은 const를 사용하는 것이 바람직하지만, let을 사용할 필요가 있는 경우도 있습니다. 예를 들어, 반복되는 작업이 있고 총 몇 번 반복됐는지 카운트를 하고 싶다면, let 이 가진 재할당 사양을 활용해야 합니다.

let totalClicked = 0;
// 페이지를 클릭할 때마다 수행
window.addEventListener('click', () => {
    totalClicked++;
    console.log(totalClicked); 
})

>>1
>>2 
...

위와 같은 설명을 해두면 페이지를 클릭 할 때마다 totalClicked 변수의 값이 1 씩 증가 (여기가 재 할당) 여러 번 클릭했는지는 정보를 유지할 수 있습니다. 변수의 내용을 업데이트 할 필요가있는 경우에는 let을 사용합시다.

결론 var는 사용하지 않아도 된다.

위의 내용대로 3 개의 키워드 중 가장 고참의 var를 사용해야 케이스는 거의 없어져 버렸습니다. 그러나 인터넷에서 코드를 설명하는 기사에는 아직도 var를 사용한 것이 많기 때문에, 최소한의 내용만 알아두도록 합니다.

저작자표시 비영리 변경금지

현재글JavaScript 에서 var, let, const의 차이

탁이로그