JS LET
let 키워드는 아래 주소에서 소개하고있다.
let으로 정의한 변수는 재선언이 불가하다.
let으로 정의한 변수는 사용되기 전에 꼭 선언되어야 한다.
let으로 정의한 변수는 Block Scope 성질이다.
| block scope | global scope |
|---|---|
| { }안에서 코드작성 | { }밖에 바로 명령어와 값 할당 |
| 블럭 밖에서 블럭 안에 있는 코드 사용 불가 | 어느곳에서나 접근 가능(블럭 안에서 바깥에 있는 아이 사용가능) 어플리케이션이 시작해서 끝날때까지 항상 메모리에 탑재되어 있기 때문에 최소한으로 쓰기 가능하다면 class나 함수 if/for 이용해서 필요한 부분에서만 정의해서 쓰기 |
Cannot be Redeclared
let x = "John Doe";
let x = 0;
// SyntaxError: 'x' has already been declared
var x = "John Doe";
var x = 0;재선언 불가
위의소스 참조
Block Scope
{
let x = 2;
}
// x can NOT be used here
{
var x = 2;
}
// x CAN be used hereBlock Scope
ES6(2015) 이전에는 JS에 전역/함수 범위만 있었다.
ES6에는 두가지 새로운 키워드 let,const가 추가되었다. 이 두 키워드는 JS에 블록범위를 제공한다.
- { } 블록 내부에 선언된 변수는 블록 외부에서 접근 할 수 없다.
var키워드로 선언된 변수는 블록 범위를 가질 수 없다.
{ } 블록 내부에 선언된 변수는 블록 외부에서 접근 할 수 없다.
Redeclaring Variables
<!DOCTYPE html>
<html>
<body>
<h2>Redeclaring a Variable Using var</h2>
<p id="demo"></p>
<script>
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
변수 재선언
var키워드를 사용하여 변수를 다시 선언하면 문제가 발생할 수 있다.
※블록 내부의 변수를 재 선언하면 블록 외부의 변수도 다시 선언된다.
let키워드를 사용하여 변수를 다시 선언하면 이 문제를 해결할 수 있다.
※블록 내부의 변수를 다시 선언해도 블록 외부의 변수는 다시 선언되지 않는다.
Browser Support
let키워드는 인터넷 익스플로러 11 또는 이전 버전에서 지원되지 않는다.
다음 표는 let키워드 를 완벽하게 지원하는 첫 번째 브라우저 버전을 정의한다.
Redeclaring
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program:</p>
<p id="demo"></p>
<script>
var x = 2;
// Now x is 2
var x = 3;
// Now x is 3
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>var를 사용한 재선언은 어느 위치에서나 가능하다.
var x = 2; // Allowed
let x = 3; // Not allowed
{
let x = 2; // Allowed
let x = 3 // Not allowed
}
{
let x = 2; // Allowed
var x = 3 // Not allowed
}- 같은 블록에서
let을 사용한 재선언은 허락되지 않는다.
<html>
<body>
<h2>JavaScript let</h2>
<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>
<p id="demo"></p>
<script>
let x = 2; // Allowed
{
let x = 3; // Allowed
}
{
let x = 4; // Allowed
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
- 다른 블록에서
let으로 재선언 하는 것은 가능하다.
let Hoisting
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>var</b>, you can use a variable before it is declared:</p>
<p id="demo"></p>
<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>
<script>
try {
carName = "Saab";
let carName = "Volvo";
}
catch(err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
let hoisting
※var로 정의된 변수는 맨위로 올려지며 언제든지 초기화 가능하다. 즉, 선언하기 전에 변수를 사용 할 수 있다.
※ let으로 정의된 변수도 맨위로 올려지지만 초기화는 되지 않는다. 즉, 선언되기 전에 let변수를 사용하면 ReferenceError발생한다.
FOR HOISTING
Hoisting에 대해 더 알고 싶다면 'JavaScript Hoisting'을 공부하자
공정 설비 개발/연구원에서 웹 서비스 개발자로 경력 이전하였습니다. Node.js 백엔드 기반 풀스택 개발자를 목표로 하고 있습니다.