2rang25 - 스코프와 호이스팅을 맛보자

스코프(Scope)와 호이스팅(Hoisting)은 자바스크립트에서 중요한 개념이다. 이 두 개념을 잘 이해하면 자바스크립트의 실행 흐름과 변수, 함수의 유효 범위를 명확히 알 수 있다. 이제 각 개념을 더 자세히 살펴보겠다.

1. 스코프(Scope)

스코프는 변수나 함수가 "어디서 유효하고 접근 가능한지"를 결정하는 범위다. 자바스크립트에서 스코프는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있다. 함수 스코프(Function Scope)와 블록 스코프(Block Scope)도 중요하다.

전역 스코프 (Global Scope)

전역 스코프는 프로그램 전체에서 접근할 수 있는 범위이다. 함수 외부에서 선언된 변수는 전역에서 어디서든 접근 가능하다.
전역 변수는 프로그램 전체에서 사용될 수 있지만, 너무 남용하면 코드가 복잡해지고 예기치 않은 버그를 유발할 수 있다.

let globalNum = 100; // 전역 변수

const example = () => {
  console.log(globalNum); // 100
}

example();
console.log(globalNum); // 100

globalNum은 전역에서 선언되었기 때문에 example() 함수 내부와 외부 어디서든 접근할 수 있다.

지역 스코프 (Local Scope)

지역 스코프는 함수나 블록 내부에서 선언된 변수에 적용된다. 해당 변수는 그 범위 내에서만 유효하다.
지역 스코프 변수는 다른 함수나 블록에서 접근할 수 없으며, 범위를 벗어나면 사용할 수 없다.

const example = () => {
  let localNum = 50; // 지역 변수
  console.log(localNum); // 50
}

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

localNum은 example 함수 내에서만 유효한 변수이므로 함수 밖에서는 접근할 수 없다.

함수 스코프(Function Scope) 와 블록 스코프 (Block Scope)

자바스크립트에서 변수 선언 방식에 따라 동작이 달라진다.

함수 스코프는 var로 선언된 변수가 따르는 범위이다. var로 선언된 변수는 그 변수가 선언된 함수 내에서만 유효하며, 함수 외부에서는 사용할 수 없다.
블록 스코프는 let과 const로 선언된 변수가 따르는 범위로, 중괄호 {}로 구분된 블록 내에서만 유효하다. 예를 들어, if문이나 for문 내에서 선언된 변수는 해당 블록 내에서만 유효하고, 블록을 벗어나면 참조할 수 없다.

const example = () => {
  var funcVar = "함수 스코프 변수";
  let blockVar = "블록 스코프 변수";
  if (true) {
    console.log(funcVar); // "함수 스코프 변수"
    console.log(blockVar); // "블록 스코프 변수"
  }
}

example();
console.log(funcVar); // ReferenceError: funcVar is not defined
console.log(blockVar); // ReferenceError: blockVar is not defined

funcVar는 함수 스코프를 따르므로 example 함수 내부에서만 유효하다.
blockVar는 블록 스코프를 따르므로 if 문 내에서만 유효하다.

스코프 체인 (Scope Chain)

자바스크립트는 변수를 찾을 때 현재 스코프부터 시작해, 상위 스코프를 차례대로 탐색하는 스코프 체인을 사용한다.
스코프 체인은 변수나 함수가 선언된 위치에 따라 어떤 값을 찾을 수 있는지 결정한다. 현재 스코프에서 변수를 찾지 못하면, 상위 스코프를 검색하고, 최종적으로 전역 스코프에서 값을 찾게 된다.

let globalVar = "전역 변수";

const outer = () => {
  let outerVar = "외부 변수";
  
  function inner() {
    console.log(globalVar); // "전역 변수"
    console.log(outerVar);  // "외부 변수"
  }

  inner();
}

outer();

위 코드에서는 inner 함수가 outer 함수의 스코프를 참조하고, outer 함수는 전역 스코프를 참조한다. 자바스크립트는 이러한 스코프 체인을 따라 값을 찾는다.

이제 호이스팅으로 넘어가보자.

2. 호이스팅(Hoisting)

호이스팅은 자바스크립트에서 변수 선언과 함수 선언이 "최상단으로 끌어올려지는" 동작을 말한다. 자바스크립트는 코드 실행 전에 변수와 함수 선언을 최상단으로 이동시켜 처리한다. 하지만 변수 할당은 호이스팅되지 않기 때문에, 변수 선언 전에 접근하면 undefined가 출력된다.

함수 호이스팅(Function Hoisting)

함수 선언식은 호이스팅되며, 선언되기 전에 호출할 수 있다. 이는 함수 선언이 최상단으로 끌어올려지기 때문이다.

sayHello(); // 정상 실행

const sayHello = () => {
  console.log("Hello World!");
}

위 코드에서 sayHello() 함수는 선언되기 전에 호출되었지만, 정상적으로 실행된다.

변수 호이스팅(Variable Hoisting)

var로 선언된 변수는 선언만 끌어올려지고, 초기화는 끌어올려지지 않기 때문에, 선언 전에 변수에 접근하면 undefined가 출력된다.

console.log(num); // undefined
var num = 10;

위 코드에서 num은 최상단으로 끌어올려지지만, num = 10 할당은 그 자리에 남아 있으므로, 변수의 값은 undefined로 출력된다.

let 과 const의 호이스팅

let과 const도 호이스팅되지만, 이들은 TDZ(Temporal Dead Zone)에 의해 초기화되기 전에는 접근할 수 없다. 이 상태에서는 변수에 접근하면 ReferenceError가 발생한다.

console.log(num); // ReferenceError: Cannot access 'num' before initialization
let num = 10;

let과 const는 호이스팅되지만 초기화되기 전에는 참조할 수 없기 때문에 오류가 발생한다.

호이스팅을 고려한 코드 작성하기

호이스팅은 자바스크립트의 동작 방식을 잘 이해하고 코드를 작성할 때, 예기치 않은 동작을 방지할 수 있다. let과 const를 사용해 변수를 선언하고, 초기화는 가능한 한 변수 선언과 가까운 위치에서 하는 것이 좋은 습관이다.

3. 결론

자바스크립트에서 스코프와 호이스팅은 매우 중요한 개념이다. 이들 개념을 제대로 이해하고 활용하면 코드의 흐름을 명확하게 파악하고, 예기치 않은 동작을 방지할 수 있다. 자바스크립트의 스코프는 변수와 함수가 유효한 범위를 정의하며, 호이스팅은 변수와 함수 선언이 최상단으로 끌어올려지는 과정이다.

스코프는 변수와 함수가 유효한 범위를 설정하고, 그 범위 안에서만 접근할 수 있다.
호이스팅은 변수와 함수 선언이 코드 실행 전 최상단으로 끌어올려지는 과정을 설명한다.

이 개념들을 이해하면, 코드 작성 시 더 예측 가능하고 안전한 코드를 작성할 수 있다. 스코프와 호이스팅을 잘 활용하여 자바스크립트를 더 효율적으로 사용할 수 있다!

오늘은 여기까지!

스코프와 호이스팅을 맛보자

1. 스코프(Scope)

2. 호이스팅(Hoisting)

3. 결론

추천 글