카테고리 없음

"let"와 "var"의 차이점은 무엇인가요?

스택큐힙리스트 2023. 3. 19. 17:45
반응형

ECMAScript 6는 the let statement을 소개했습니다.

로컬 변수로 표현된다고 들었는데, var 키워드와 어떻게 다르게 동작하는지 아직 잘 모르겠습니다.

어떤 차이점이 있나요? 언제 let 대신에 var을 사용해야 하나요?

답변 1

스코핑 규칙

주요 차이점은 스코핑 규칙입니다. var 키워드로 선언된 변수는 즉시 함수 본문에 스코프가 지정되며 (즉 함수 스코프), let 변수는 { }로 표시된 즉시 포함 블록에 스코프가 지정됩니다 (즉 블록 스코프).

function run() {

var foo = Foo;

let bar = Bar;

console.log(foo, bar); // Foo Bar

{

var moo = Mooo

let baz = Bazz;

console.log(moo, baz); // Mooo Bazz

}

console.log(moo); // Mooo

console.log(baz); // ReferenceError

}

run();

let 키워드가 언어에 소개된 이유는 함수 범위가 혼란스러워서 자바스크립트에서 버그의 주요 원인 중 하나였기 때문입니다.

another Stack Overflow question에서 다음 예시를 살펴보세요.

var funcs = [];

// let's create 3 functions

for (var i = 0; i < 3; i++) {

// and store them in funcs

funcs[i] = function() {

// each should log its value.

console.log(My value: + i);

};

}

for (var j = 0; j < 3; j++) {

// and now let's run each one to see

funcs[j]();

}

익명 함수가 같은 변수에 바인딩되어 있기 때문에 funcs[j]();이 호출될 때마다 콘솔에 My value: 3이 출력되었습니다.

사람들은 즉시 호출 함수를 만들어 루프에서 올바른 값을 포착해야 했지만 그것도 어려웠습니다.

호이스팅

var 키워드로 선언된 변수는 hoisted 되어 있으며 (코드 실행 전에 undefined로 초기화됨) 그것은 선언되기 전에도 해당하는 스코프에서 접근 가능한 것을 의미합니다.

function run() {

console.log(foo); // undefined

var foo = Foo;

console.log(foo); // Foo

}

run();

let 변수는 정의가 평가될 때까지 초기화되지 않습니다. 초기화가 처리되기 전에 액세스하면 ReferenceError 가 발생합니다. 변수는 블록의 시작으로부터 초기화가 처리될 때까지 시간 대에 죽은 존에 있다고 말합니다.

function checkHoisting() {

console.log(foo); // ReferenceError

let foo = Foo;

console.log(foo); // Foo

}

checkHoisting();

글로벌 객체 속성 생성하기

최상위 레벨에서 let는 전역 개체에 속성을 생성하지 않습니다. var와는 달리.

var foo = Foo; // globally scoped

let bar = Bar; // not allowed to be globally scoped

console.log(window.foo); // Foo

console.log(window.bar); // undefined

재선언

엄격 모드에서는 같은 범위 내에서 동일한 변수를 다시 선언할 수 있지만 let는 SyntaxError를 발생시킵니다.

'use strict';

var foo = foo1;

var foo = foo2; // No problem, 'foo1' is replaced with 'foo2'.

let bar = bar1;

let bar = bar2; // SyntaxError: Identifier 'bar' has already been declared

답변 2

let와 var의 차이점은 무엇인가요?

JavaScript에서 let과 var은 둘 다 변수를 선언하는 데 사용되는 키워드입니다. 그러나 두 키워드는 몇 가지 다른 동작을 합니다.

let은 블록 유효 범위(block scope)를 가집니다. 즉, 변수를 선언한 블록 내에서만 사용할 수 있습니다. 예를 들어, 만약 함수 내부에서 let으로 변수를 선언하면, 그 변수는 함수 외부에서는 액세스할 수 없습니다. 이는 변수의 범위를 제한함으로써 코드의 안정성과 예측 가능성을 높입니다.

반면에, var은 함수 유효 범위(function scope)를 가집니다. 즉, 변수를 선언한 함수 내에서만 사용할 수 있습니다. 하지만 변수를 함수 외부에서도 액세스할 수 있습니다. 이는 가끔 예상치 못한 결과를 초래할 수 있습니다. 변수의 범위가 너무 넓어져 코드를 이해하기 어려워지기 때문입니다.

또한, let은 동일한 이름을 가진 변수를 다시 선언할 수 없습니다. 반면에, var은 동일한 이름을 가진 변수를 다시 선언할 수 있습니다. 이는 var를 사용할 때 변수가 의도치 않게 새로운 값으로 덮어써지는 문제를 초래할 수 있습니다.

따라서, let을 사용하는 것이 일반적으로 더 안전하며, 코드를 더 예측 가능하게 만듭니다. var은 고전적인 방식의 변수 선언 방법이기 때문에 이전에 작성된 코드에서는 여전히 사용되고 있지만, 가능하면 let을 사용하는 것이 좋습니다.

요약하자면, let과 var은 변수를 선언하는 데 사용되는 키워드이지만, let은 블록 범위를 가지며 변수를 다시 선언할 수 없으며, var은 함수 범위를 가지며 변수를 다시 선언할 수 있으며 변수 범위가 너무 넓어져 코드를 이해하기 어려울 수 있습니다. 따라서 let을 사용하는 것이 일반적으로 더 안전하고 코드를 예측 가능하게 만듭니다.

반응형