JavaScript의 let과 var/ hoisting의 개념

1. Hoisting의 개념

Hoist는 공장에서 쓰는 중량물을 들어올려 옮길 때 사용하는 Lifting 장비인데, 여기서 이 개념이 쓰였다? 

조금더 쉽게 얘기하면, 이런 이야기이다. 

• 각 Function()을 코드페이지 위로 끌어올린다.
• 전역으로 선언된 변수들을 코드페이지 위로 끌어올린다.
• function()내 선언된 변수들은 함수내 최상단으로 끌어올린다.

변수나 함수를 끌어올린뒤 코드를 읽어내려가면서 수행하는 것.

 

하지만, 굵직한 것에서는 이러하고 예를 들어보면 이렇습니다.

 

1번예제 

 

noDefine();

function noDefine(){
console.log("undefined : "+name); // ㄱ
var name = "JAVA";
console.log("define : "+name);  // ㄴ
}

위 코드를 예상해볼 때, ㄱ은 undefined이라고 할 것이고

ㄴ은 JAVA를 찍어줄 것입니다. 

 

JAVA를 생각하면, 위 코드는 1행에서 에러를 띄워야 하지만, JavaScript는 Hoisting 이란 개념에 의해

에러를 띄우지 않음을 알수있습니다. 

 

대신 정의되지 않은 변수를 '정의되지 않음' 이라는 메세지를 띄워주고, 정의가 된 다음 값을 찍어줍니다.

 

Var 와 Let의 차이점

구분	var	let
범위	var는 마지막에 선언된 값으로 초기화 합니다.	let 명령문은 함수 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다.
	프로그램 최상위에서 사용할 경우 var는 전역 객체에 속성을 추가하지만 let은 추가하지 않습니다. 예시  var x = 'global'; let y = 'global'; console.log(this.x); // "global" console.log(this.y); // undefined

범위 예시_1

var a = 1;
var b = 2;

if (a === 1) {
  var a = 11; // 전역 변수
  let b = 22; // if 블록 변수

  console.log(a);  // 11
  console.log(b);  // 22
}

console.log(a); // 11
console.log(b); // 2

 

범위 예시_2

function varTest() {
  var x = 1;
  if (true) {
    var x = 2; // 같은 변수!
    console.log(x); // 2
  }
  console.log(x); // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2; // 다른 변수
    console.log(x); // 2
  }
  console.log(x); // 1
}

 

이상입니다. 부족한 부분 있으시면 댓글로 알려주세요!!

 

참고자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let