프론트엔드 강사가 알려주는 스코프와 호이스팅

이번 글에서는 아래의 질문에 대해 작성해보겠습니다.

🙋 자바스크립트 호이스팅에 대해서 설명해주세요.

'호이스팅'은 자바스크립트를 배우는 사람이라면 필수적으로 알고 있어야하는 개념이죠. 호이스팅에 대해 이야기해보는 김에 자바스크립트의 또다른 필수 개념인 '스코프'에 대해서도 한 번 글을 작성해보겠습니다.

스코프

스코프는 '범위'를 의미하고, 자바스크립트에서 생성된 변수나 함수가 어디에서 접근 가능하고, 유효한지를 결정하는 규칙을 말합니다. 쉽게말해, 어떤 변수나 함수가 영향을 미칠 수 있는 범위를 스코프라고 부릅니다.

자바스크립트에는 여러 종류의 스코프가 존재하는데요, 순서대로 하나씩 배워봅시다.

전역, 지역 스코프

먼저 자바스크립트의 스코프는 크게 전역 스코프와 지역 스코프로 나눌 수 있습니다.
전역 스코프는 프로그램 전체에서 접근 가능한 변수의 범위를, 지역 스코프는 특정 함수나 블록 내부에서만 유효한 범위를 뜻합니다.

let globalNum = 100;

function example() {
    let localNum = 50;
    console.log(globalNum); //100
    console.log(localNum); //50
}

example();

console.log(globalNum); //100
console.log(localNum); //localNum is not defined

여기 코드에서는 globalNum과 localNum 변수가 서로 다른 스코프를 가지고 있습니다.
코드의 가장 바깥인 전역 공간에 선언된 globalNum 변수는 전역 스코프를 갖는 변수로, 프로그램 전체에서 접근할 수 있는 특징을 가지고 있습니다.

example 함수 내부에 선언된 localNum 변수는 지역 스코프를 갖는 변수로, example 함수 내부에서만 유효한 접근 범위를 갖기 때문에 함수의 바깥에서는 존재하지 않는 변수로 간주됩니다. 따라서 example 함수 바깥의 console.log(localNum)을 출력하면, localNum 변수에 접근이 불가능하며 오류가 발생하게됩니다.

함수, 블록 스코프

함수 스코프와 블록 스코프는 변수 선언 방식에 따라 동작 방식이 달라지며, 자바스크립트를 사용하는데 중요한 역할을합니다. 함수 스코프는 함수 내부에서 선언된 변수나 함수가 해당 함수 내에서만 유효한 범위를 가지는 스코프를 뜻합니다.

function example() {
    var funcVar = "나는 함수 스코프 변수!";
    console.log(funcVar); // "나는 함수 스코프 변수!"
}

example();

console.log(funcVar); // 오류: funcVar is not defined

funcVar 변수는 함수 내부에 선언되어 있기 때문에 함수의 외부에서는 funcVar 변수에 접근할 수 없습니다.

함수 스코프와는 다르게 블록 스코프는 중괄호({})로 감싸진 블록 내부에서만 유효한 범위를 가지며, let과 const 키워드는 블록 스코프를 다르며, 해당 블록을 벗어나면 변수에 접근할 수 없습니다.

if (true) {
    let blockVar = "나는 블록 스코프 변수!";
    console.log(blockVar); // "나는 블록 스코프 변수!"
}

console.log(blockVar); // 오류: blockVar is not defined

blockVar 변수는 let 키워드로 선언되어 있기 때문에 블록 스코프를 갖고, 블록 스코프는 중괄호로 감싸진 블록 내부에서만 유효하므로, 위의 코드에서는 if 문의 내부에서만 유효한 변수입니다.

호이스팅

스코프에 대해 배워보았으니, 이제 호이스팅에 대해서 배워보겠습니다. 호이스팅은, 변수와 함수의 선언문을 코드의 최상단으로 끌어올리는 자바스크립트의 동작 방식을 뜻합니다. 그리고 호이스팅을 사용하면 코드의 실행 순서와 작성 순서를 다르게 변경할 수도 있습니다.

함수 호이스팅

sayHello();

function sayHello() {
    console.log("hello world!");
}

자바스크립트에서는 호이스팅을 사용하면, 위와 같이 함수가 선언되기 전에 함수를 호출할 수 있습니다.

sayHello 함수가 선언되기 이전에 sayHello 함수가 호출되었지만, 실행 결과 코드가 정상적으로 실행됩니다. 이는 자바스크립트의 엔진이 실행 시점에 함수 선언을 코드의 최상단으로 끌어올리기 때문입니다.

변수 호이스팅

변수 선언 또한 호이스팅의 영향을 받습니다. var 키워드로 선언된 변수는 선언문만 끌어올려지고, 초기화는 호이스팅 되지 않기 때문에 다음과 같이 선언 전에 변수에 접근하면 undefined가 출력됩니다.

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

위의 코드를 자바스크립트 엔진이 해석하는 순서로 나타내보면, 다음과 같이 나타낼 수 있습니다.

var num; // 선언문이 끌어올려짐
console.log(num); //undefined
num = 10; //초기화는 나중에 이뤄짐

위의 코드와 같이, var num; 이라는 선언문은 코드의 최상단으로 끌어올려졌지만, num = 10; 초기화문은 최상단으로 끌어올려지지 않았기 때문에 undefined가 출력됩니다. 이러한 동작은 에기치 않은 결과를 유발할 수 있으므로, 변수를 선언하기 전에 사용하는 습관은 지양하는 것이 좋습니다.

정리 & 참고자료

이렇게 자바스크립트의 스코프와 호이스팅에 대해 알아보았습니다.

스코프와 호이스팅에 대한 더 자세한 설명, 그리고 스코프와 호이스팅과 관련있는 또다른 개념인 렉시컬 스코프, let과 var 에 대한 정보가 궁금하신 분들은 자바스크립트는 왜 이렇게 작동할까? 스코프와 호이스팅 개념 정리 글을 읽어보시는 것을 추천드립니다!