호이스팅과 스코프

호이스팅과 스코프

호이스팅(Hoisting)과 스코프(Scope)는 자바스크립트에서 중요한 개념으로 변수와 함수의 선언과 접근 가능성을 이해하는데 필수적이다.

 

이 두 개념은 서로 관련이 있지만, 각각 다르다.

 

스코프(Scope)

• 스코프는 변수와 함수가 접근 가능한 범위를 정의한다.
• 스코프는 크게 세 가지로 나눌 수 있다.

전역 스코프(Global Scope)

• 코드 어디서나 접근할 수 있는 변수와 함수이다.
• 전역 스코프에 선언된 변수는 'window' 객체의 속성이 된다.

var globalVar = "I am a global variable";
function globalFunction() {
	console.log(globalVar); // I am a global variable
}

 

함수 스코프(Function Scope)

• 함수 내에서 선언된 변수와 함수는 해당 함수 내부에서만 접근할 수 있다.
• 'var'로 선언된 변수는 함수 스코프를 가진다.

function myFunction() {
	var functionVar = "I am a function var";
    console.log(functionVar); // I am a function var
}
console.log(functionVar) // ReferenceError: functionVar is not defined

 

블록 스코프(Block Scope)

• 중괄호 '{}'로 둘러싸인 코드 블록 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있다.
• 'let'과 'const'로 선언된 변수는 블록 스코프를 가진다.

if(true) {
	lett blockVar = "I am a block var";
    console.log(blockVar); // I am a block var
}
console.log(blockVar); // ReferenceError: blockVar is not defined

 

 

호이스팅(Hoisting)

• 호이스팅은 자바스크립트의 변수와 함수 선언이 해당 범위의 맨 위로 끌어올려지는 동작을 의미한다.
• 이는 실제 코드 실행 전에 선언이 미리 처리되는 방식이다.
• 호이스팅에는 변수 호이스팅과 함수 호이스팅이 있다.

변수 호이스팅

• 'var'로 선언된 변수는 호이스팅 되어 해당 스코프의 맨 위로 올라간다.
• 하지만 초기화는 선언 위치에서 이루어진다.

console.log(hoistedVar); // undefiend
var hoistedVar = "I am hoisted";
console.log(hoistedVar); // I am hoisted

 

• 'let'과 'const'로 선언된 변수도 호이스팅 되지만, 초기화 전에 접근할 수 없으며, 이를 일시적 사각지대(TDZ)라고 한다.

console.log(hoistedLet); // ReferenceError: hoistedLet is not defined
let hoistedLet = "I am hoisted";
console.log(hoistedLet); // I am hoisted

 

함수 호이스팅

• 함수 선언은 완전히 호이스팅 되어 함수가 선언되기 전에 호출할 수 있다.

console.log(hoistedFunction()); // I am a hoisted Function
function hoistedFunction() {
	return "I am a hoisted Function";
}

• 함수 표현식은 변수 호이스팅과 비슷하게 동작한다.

console.log(notHoistedFunction()); // TypeError: notHoistedFunction is not a function
var notHoistedFunction = function() {
    return "I am not hoisted";
};

 

 

요약

• 스코프(Scope)
  • 변수가 접근할 수 있는 유효범위
  • 종류: 전역 스코프, 함수 스코프, 블록 스코프
• 호이스팅(Hoisting)
  • 변수와 함수 선언이 해당 범위의 맨 위로 끌어올려지는 동작
  • 변수 호이스팅: 'var'는 선언만, 'let'과 'const'는 TDZ 발생
  • 함수 호이스팅: 함수 선언은 완전히 호이스팅, 함수 표현식은 변수 호이스팅과 유사

 

이 두 개념을 이해하면 자바스크립트 코드가 어떻게 실행되고, 변수에 어떻게 접근가능한지를 이해하는데 큰 도움이 된다.