let과 var의 차이점과 활용도

변수선언 키워드

let과 var는 모두 변수를 선언할 때 사용하는 키워드이다.

변수란 어떠한 값을 저장하기 위한 데이터 공간에 이름을 붙인 것을 말하는데, 아래와 같이 선언 및 할당이 가능하다.

let a = 1;
var b = 2;

let 과 var의 차이점

let과 var는 크게 세가지 정도의 차이점이 있다.

1. 재선언

간단하게 말하자면 var는 재선언과 재할당이 모두 가능하고, let은 재할당만 가능하다. 재선언이 가능하다는 의미는 같은 이름의 변수를 다시 선언하고 할당하는 것이 가능하다는 이야기이다. 아래의 코드를 보자.

let a = 1;
let a = 2; // identifier error

let으로 같은 이름의 변수를 선언할 경우 에러를 마주하게 된다. 하지만 var로 선언하면 이야기가 다르다.

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

var는 재선언이 가능하기 때문에 위와 같은 코드가 성립된다. 만약 스크립트가 여러개일 경우를 생각해본다면 이는 코드의 심각한 문제를 일으킬 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
	<script src="script1.js"></script>
    <script src="script2.js"></script>
  </body>
</html>

위와 같을 떄, script1.js에서는 var a = 1, script2.js에서는 var a = 2로 되어있다면 최종적으로 var로 선언된 a변수에는 2라는 값이 담겨있을 것이다. 이렇게 개발자가 의도하지 않은 코드의 변화가 생길 수 있기 때문에 ES6는 let을 사용하는 것이 권장된다.

2. hoisting

hoisting이란?
변수/함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것을 의미한다.

자바스크립트에서는 모든 변수와 함수의 선언이 호이스팅된다. 그렇다면 let과 var는 어떠한 차이점이 있는 것일까?
var는 호이스팅이 되면 아래와 같은 결과가 나온다.

console.log(a); // undefined
var a = 1;

var는 선언과 동시에 초기화가 가능하다. 그렇기 때문에 선언하는 자체로 undefined가 할당이 된다. 호이스팅도 잘 되는 것을 확인할 수 있다.

반대로 let의 경우를 살펴보자.

console.log(a); // reference error
let a = 1;

문법적으로 오류가 나는 것을 확인할 수 있다. 모든 변수, 함수의 선언은 호이스팅이 된다고 했는데 let은 왜 안되는 것일까?
let과 const로 선언된 변수들은 TDZ(temporal dead zone)에 빠지게 된다. TDZ은 선언 전에 실행하는 것을 막는 영역이라고 생각하면 된다. 때문에 TDZ에 들어간 변수들은 선언이 되기 전에 실행이 불가능하고, reference error가 나는 것이다.

3. 스코프

functional level scope & block level scope
1. functional level scope
함수 레벨 스코프는 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이고 함수 외부에서 선언한 변수는 모두 전역 변수이다.
var는 functional level scope를 가진다. 블록스코프({}로 설정된 범위)는 영향을 받지 않는다.

var foo = 123;
console.log(foo); //123

{
  var foo = 456;
}
console.log(foo); //456

이렇게 var는 블록스코프 내에서 선언했다고 하더라도 위에서는 전역변수로 이해하기 때문에 위와 같은 결과가 나온다.

반면 let은 블록스코프의 영향을 받는다.

let foo = 123;
{
  let foo = 456;
}
console.log(foo); //123;

블록스코프 내부에서 선언된 변수는 외부에서 접근할 수 없기 때문에 위와같은 결과가 나오고, let과 const는 블록스코프의 영향을 받는다.

활용도

var는 let과의 차이점으로도 알 수 있듯이 개발자가 의도하지 않은 코드변화들이 많이 일어날 수 있다. 때문에 ES6에서는 let과 const를 사용하는 것이 장려되고, var사용은 많이 지양하고 있다.

let, var, const 정리

Author And Source

이 문제에 관하여(let과 var의 차이점과 활용도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@william9563/let과-var의-차이점과-활용도

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)