[JavaScript] let,var,const 의 유효범위와 호이스팅 (+ 함수선언식)

JavaScript 의 변수와 유효범위- 호이스팅

• var, const, let
• 이때 함수 선언문은 함수 전체가 호이스팅
• var 변수는 저장시 undefined로 초기화 => ⛔️ 그 외 값 할당은 호이스팅되지 않는다!

1️⃣ JavaScript의 변수

• let, const, var ⇒ let 은 가변변수 , const는 불변변수!
• 대신 const로 선언한 데이터가 객체혹은 배열이라면 그안의 값은 변경 가능하다!

Name	Scope	재정의	재선언
var	Function Scoped	변경 가능	변경 가능
let	Block Scoped	변경 가능	변경 불가능
const	Block Scoped	변경 불가능	변경 불가능

let x = 1;
const y = 2;
var z = 3;
console.log(x); 1
console.log(y); 2
console.log(z); 3

x = 12;
y = 43;
console.log(x); 12
console.log(y); // error

let x = 3;
const y = 8;
// both error
var z = 54;
console.log(x); // error
console.log(y); // error
console.log(z); // 54

💡 const 로 선언된 배열 또는 객체는 내용을 바꿀 수 있다

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // ERROR

// You can change an element:
cars[0] = "Toyota";

// You can add an element:
cars.push("Audi");

2️⃣ 변수의 유효범위(Variable Scope)

• let, const 는 블록레벨 ({}, 중괄호)의 범위를 가진다.

const a = 7

function scope() {
  if (true) {
    console.log(a) //undefined
    const b = 123 
    var c = 456
		//a는 if문의 지역변수
    //블록레벨의 범위를 가진다. 
  } 
  console.log(b) //scope 에러 
  console.log(c) //456
}
scope()

• var (되도록 사용 X), let, const

🚫 var 비권장이유는 ?

• => 함수레벨의 범위를 가지기 때문에 메모리 누수가 발생할수도 있음,
• 최신 프론트엔드 개발에선 비권장!

function scope2() {
  if (true) {
		console.log(a) //undefined
    var a = 123 
  } 
  **console.log(a) //123**
}
console.log(a) //함수범위의레벨이 아니기때문에 에러

scope2()

3️⃣ 호이스팅 (hoisting)

• 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
• var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
  • var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.🚫
    

        function scope2() {
          **a = 123;**
          if (true) {
            console.log(a) //123
            **var a; 
        		//var 변수선언으로 호이스팅 되었음**
          } 
          console.log(a) //123
        }
        //==================================================

        b = 345
        console.log(b) //345
        var b

        //==================================================

        // ***할당은 끌어 올려지지 않는다 -> 따라서 undefined***
        console.log(c) //undefined
        c = 345
        var c

• let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다

const a = 7

double() //14

//함수호이스팅이발생 윗줄에서 
//함수호출해도 실행된다.

// 함수선언문
function double() { 
  console.log(a*2)
}

const a = 7

double() //error

//함수호이스팅이 발생안하므로 에러

//함수표현식
const double = function() { 
	console.log(a*2)
}

💡 Q. 호이스팅은 언제 유용할까?

• 전체적인 로직으로 보았을때, 만약 함수내부의 로직이 매우 길다면,
• 어디에서 실행되는지 찾기전에 긴로직의 함수를 지나서 함수 실행 부분을 확인 가능
  ⇒ 따라서 가독성을 위해 최하단부에 적음

💡 var 변수선언으로 호이스팅 발생
⇒ 변수에 선언을 먼저 하지 않아도 할당이 되기때문에 복잡한 상황 발생할 가능성 높다. 🚫🚫🚫🚫
⇒ 웬만하면 var 사용을 주의하기

📍 참고자료 : 코어자바스크립트,정재남