[JavaScript] 06. 스코프와 호이스팅

[JavaScript] 06. 스코프와 호이스팅

스코프와 호이스팅은 JavaScript의 동작 방식을 이해하는 데 중요한 개념이다. 변수와 함수가 어디에서 접근 가능한지, 그리고 코드 실행 전에 어떤 일이 일어나는지를 설명한다.

---

1) 스코프(Scope)란?

스코프는 변수에 접근할 수 있는 범위를 의미한다.

---

2) 전역 스코프

함수 밖에서 선언된 변수는 전역 스코프를 가진다. 어디에서든 접근할 수 있다.

let globalVar = "Hello";

function test() {
  console.log(globalVar);
}

test();

---

3) 지역 스코프

함수 안에서 선언된 변수는 해당 함수 내부에서만 사용할 수 있다.

function example() {
  let localVar = 10;
  console.log(localVar);
}

example();
// console.log(localVar); // 오류 발생

---

4) 블록 스코프

let과 const는 중괄호 { } 안에서만 유효하다.

{
  let blockVar = 5;
  console.log(blockVar);
}

// console.log(blockVar); // 오류 발생

반면 var는 블록 스코프를 따르지 않는다.

{
  var x = 10;
}

console.log(x); // 10

---

5) 호이스팅(Hoisting)이란?

호이스팅은 변수와 함수 선언이 코드 실행 전에 위로 끌어올려지는 것처럼 동작하는 현상이다.

console.log(a);
var a = 10;

위 코드는 오류가 아니라 undefined가 출력된다.

내부적으로는 아래와 같이 동작한다고 이해할 수 있다.

var a;
console.log(a);
a = 10;

---

6) let과 const의 호이스팅

let과 const도 호이스팅은 되지만, 선언 전에 접근하면 오류가 발생한다.

console.log(b);
let b = 20; // 오류 발생

이는 변수 선언 전에 사용할 수 없도록 동작이 제한되기 때문이다.

---

7) 함수 호이스팅

함수 선언식은 호이스팅이 가능하다.

sayHi();

function sayHi() {
  console.log("Hi");
}

하지만 함수 표현식은 호이스팅이 되지 않는다.

hello(); // 오류 발생

const hello = function() {
  console.log("Hello");
};

---

8) 정리

• 스코프는 변수의 유효 범위이다
• 전역 스코프와 지역 스코프가 있다
• let과 const는 블록 스코프를 따른다
• 호이스팅은 선언이 먼저 처리되는 현상이다
• 함수 선언식은 호이스팅이 가능하다

다음 글에서는 [JavaScript] 07. 클로저(Closure)를 정리할 예정이다.