[JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?

반응형

JavaScript에서 호이스팅과 스코프는 변수와 함수의 동작을 이해하는데에 아주 중요한 개념이다. 

코딩을 하기전에 한번쯤 생각 해봤으면 좋겠다 . (나포함) 

 

우선 호이스팅부터 알아보자. 

호이스팅(Hoisting) 
- Hoisiting은 자바스크립트에서 변수 선언과 함수 선언이 실행 Context의 상단으로 끌어올려지는 현상을 말함.
- 변수와 함수 선언이 코드의 실행 전에 메모리로 올라가면서 발생함.

동작 방식은 변수와 함수에서 다름.

 

변수선언 Hoisting

변수 선언의 호이스팅:

• 변수 선언은 코드의 상단으로 끌어올려지지만, 변수 초기화는 원래 코드에서의 위치에 남아 있음.
• 변수 선언 전에 그 변수에 접근하면 undefined가 반환됌.

console.log (a); // undefined (호이스팅으로 인해 선언은 상단으로 끌어올려졌지만 초기화는 여기서 아직 안 됨)
var a = 5;
console.log(a); // 5 (초기화 이후)

 

let과 const의 호이스팅:

• let과 const도 호이스팅되지만, Temporal Dead Zone (TDZ) 때문에 초기화되기 전에는 접근할 수 없음.
• TDZ(Temporal Dead Zone)는 변수 선언 전의 접근을 방지하여 예기치 않은 동작을 방지함.

console.log(b); // ReferenceError: Cannot access 'y' before initialization
let b = 10;
console.log(b); // 10 (초기화 이후)

console.log(c); // ReferenceError: Cannot access 'z' before initialization
const c = 15;
console.log(c); // 15 (초기화 이후)

 

함수선언 Hoisting

함수 선언의 호이스팅 

• 함수 선언은 전체 함수의 정의가 코드의 상단으로 끌어올려지기 때문에, 함수 정의 전에 함수를 호출할 수 있음.

test(); // "hoisting Test!!" (호이스팅 덕분에 함수 정의 전에 호출 가능)

function test() {
  console.log("hoisting Test!!");
}

 

함수 표현식의 호이스팅

• 함수 표현식(변수에 할당된 함수)은 호이스팅되지 않으며, 함수 선언 전에 호출하면 TypeError가 발생함.

test2(); // TypeError: test2 is not a function

var test2 = function() {
  console.log("hoisting Test2!!");
};

 

 

스코프(Scope)
- 스코프는 변수와 함수의 유효 범위를 정의함.
- 스코프에는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope), 블록 스코프(Block Scope)가 있음.

 

전역 스코프 (Global Scope)

• 전역 스코프는 코드의 최상위 레벨에서 선언된 변수와 함수가 포함됌.
• 전역 스코프에서 선언된 변수는 모든 함수와 블록에서 접근할 수 있음.

var testVar = "I am Test";

function globalScope() {
  console.log(testVar); // "I am Test" (전역 변수에 접근 가능)
}

globalScope();

 

 

함수 스코프 (Function Scope)

• 함수 내부에서 선언된 변수는 해당 함수의 유효 범위 내에서만 접근할 수 있음.
• var로 선언된 변수는 함수 스코프를 가짐.

function functionScope() {
  var testVar = "I am Test";
  console.log(testVar); // "I am Test"
}

functionScope();
console.log(testVar); // ReferenceError: testVar is not defined

 

블록 스코프 (Block Scope)

• 블록 스코프는 {}로 정의된 블록(if, for 등) 내에서 변수를 선언하고 사용할 수 있는 범위다.
• let과 const로 선언된 변수는 블록 스코프를 가집니다.

if (true) {
  let testBlock = "I am in block";
  console.log(testBlock); // "I am in block"
}

console.log(testBlock); // ReferenceError: testBlock is not defined

 

for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}

console.log(i); // ReferenceError: i is not defined

 

 

호이스팅(Hoisting)과 스코프(Scope) 요약

호이스팅(Hoisting)
- var: 선언은 호이스팅되지만 초기화는 원래 코드 위치에서 이루어짐.
- let과 const: 호이스팅되지만 TDZ 때문에 초기화 전에는 접근할 수 없음.
- 함수 선언: 전체 함수가 호이스팅되어 정의 전에 호출 가능.
- 함수 표현식: 호이스팅되지 않음.

스코프(Scope)
- 전역 스코프: 코드의 최상위에서 선언된 변수와 함수가 포함됨.
- 함수 스코프: 함수 내부에서 선언된 변수는 함수 내에서만 접근 가능.
- 블록 스코프: {}로 감싸진 블록 내에서 선언된 변수는 해당 블록 내에서만 접근 가능.

 

TDZ라는 용어가 많이 나왔을 것이다 다음번에는 TDZ에 대해서 다음에는 알아보겠다 ! 

2024.08.26 - [JavaScript] - [JavaScript] TDZ(Temporal Dead Zone)란?

[JavaScript] TDZ(Temporal Dead Zone)란?

 

var let const 변수 선언 차이 

2024.08.28 - [JavaScript] - [JavaScript] const, var , let 변수 선언 차이점

[JavaScript] const, var , let 변수 선언 차이점