JavaScript Tutorial.9

ansunny1170·2021년 12월 2일
0
post-thumbnail

JS LET

let 키워드는 아래 주소에서 소개하고있다.

(참고 : https://www.w3schools.com/js/js_es6.asp)

let으로 정의한 변수는 재선언이 불가하다.
let으로 정의한 변수는 사용되기 전에 꼭 선언되어야 한다.
let으로 정의한 변수는 Block Scope 성질이다.

block scopeglobal scope
{ }안에서 코드작성{ }밖에 바로 명령어와 값 할당
블럭 밖에서 블럭 안에 있는 코드 사용 불가어느곳에서나 접근 가능(블럭 안에서 바깥에 있는 아이 사용가능) 어플리케이션이 시작해서 끝날때까지 항상 메모리에 탑재되어 있기 때문에 최소한으로 쓰기 가능하다면 class나 함수 if/for 이용해서 필요한 부분에서만 정의해서 쓰기

출처 (참고 : https://blog.naver.com/uni_h/222097422790)

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 here

Block 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'을 공부하자

(참조 : https://www.w3schools.com/js/js_hoisting.asp)

profile
4년차 설비 개발 연구원에서 IT 웹 서비스 개발자로 경력 이전을 준비 중입니다. Node.js/Vue.js를 공부하고 있으며, 백엔드 기반 풀스택 개발자를 목표로 하고 있습니다.

0개의 댓글