[프론트엔드 예상 면접] 호이스팅, 스코프

[프론트엔드 예상 면접] 호이스팅, 스코프

 

💡스코프 정리
전역 스코프: 전역 범위에서 선언된 변수들은 어디에서나 접근 가능합니다.
함수 스코프: 함수 내부에서 선언된 변수들은 해당 함수 내에서만 접근 가능합니다.
블록 스코프: {}로 감싸진 블록 내부에서 선언된 변수들은 그 블록 내에서만 접근 가능하며, let과 const 키워드로 선언된 변수들이 블록 스코프를 따릅니다.

 

호이스팅

자바스크립트에서 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 현상입니다. 그러나 변수의 경우 선언만 호이스팅되고, **초기화(값의 할당)**는 호이스팅되지 않습니다.

console.log(hoistedVar); // undefined
var hoistedVar = 'This is hoisted!';

console.log(hoistedFunc()); // 'This function is hoisted!'
function hoistedFunc() {
    return 'This function is hoisted!';
}

변수 호이스팅

1. var hoistedVar = 'This is hoisted!';라는 코드에서 변수 hoistedVar의 선언(var hoistedVar)은 코드의 최상단으로 호이스팅됩니다. 하지만, 변수에 값이 할당되는 부분(= 'This is hoisted!')은 호이스팅되지 않습니다.
2. 그래서 console.log(hoistedVar);를 호출할 때, 자바스크립트는 이미 hoistedVar가 선언된 것을 알고 있지만, 아직 값이 할당되지 않았기 때문에 undefined를 출력합니다.
3. 자바스크립트 내부적으로는 아래처럼 동작합니다.

var hoistedVar;  // 호이스팅된 변수 선언
console.log(hoistedVar); // undefined (변수는 존재하지만, 아직 값이 없음)
hoistedVar = 'This is hoisted!'; // 이제 값이 할당됨

 

함수 호이스팅

1. function hoistedFunc() { ... }라는 함수 선언은 호이스팅되며, 함수의 전체 정의(내용까지)가 코드의 최상단으로 끌어올려집니다.
2. 그래서 console.log(hoistedFunc());가 실행될 때 함수 호출이 문제없이 작동하며, 'This function is hoisted!'라는 값이 출력됩니다.
3. 자바스크립트 내부적으로는 아래처럼 동작합니다.

function hoistedFunc() {  // 호이스팅된 함수 정의
    return 'This function is hoisted!';
}

console.log(hoistedFunc()); // 'This function is hoisted!'

 

스코프

스코프는 변수나 함수가 접근할 수 있는 범위를 의미합니다. 자바스크립트에서 스코프는 코드가 실행되는 환경에 따라 달라지며, 크게 전역 스코프(Global Scope), 함수 스코프(Function Scope), 그리고 ES6 이후 도입된 **블록 스코프(Block Scope)**로 나뉩니다.

전역 스코프(Global Scope)

전역 스코프는 코드 어디에서나 접근할 수 있는 범위를 의미합니다. 전역 스코프에 선언된 변수는 프로그램 전체에서 사용할 수 있습니다.

let globalVar = 'I am a global variable';

function foo() {
    console.log(globalVar); // 'I am a global variable'
}

foo();
console.log(globalVar); // 'I am a global variable'

 

globalVar는 전역 스코프에 선언된 변수입니다. 따라서 foo 함수 내부에서도, 함수 외부에서도 접근할 수 있습니다.

함수 스코프(Function Scope)

함수 스코프는 함수 내에서 선언된 변수들이 해당 함수 내부에서만 접근 가능함을 의미합니다. 함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없습니다.

javascript코드 복사
function foo() {
    let localVar = 'I am a local variable';
    console.log(localVar); // 'I am a local variable'
}

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

localVar는 foo 함수 내부에서 선언된 변수로, 함수 스코프에 속합니다. 따라서 foo 함수 내부에서만 접근할 수 있고, 함수 외부에서는 localVar에 접근할 수 없습니다.

블록 스코프(Block Scope)

ES6에서 도입된 let과 const 키워드는 변수를 블록 스코프에 선언할 수 있게 해줍니다. 블록 스코프는 중괄호 {}로 감싸진 코드 블록 내에서만 변수가 유효함을 의미합니다. if, for, while 같은 제어문이나 함수 내부의 블록이 대표적인 예입니다.

if (true) {
    let blockVar = 'I am a block-scoped variable';
    console.log(blockVar); // 'I am a block-scoped variable'
}

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

`blockVar`는 `if` 문 블록 내에서 선언된 변수로, **블록 스코프**에 속합니다. 따라서 이 변수는 블록 바깥에서는 접근할 수 없습니다.

`var`와 블록 스코프의 차이

`var` 키워드로 선언된 변수는 블록 스코프를 따르지 않고, 가장 가까운 함수 스코프를 따릅니다. 이는 `let`과 `const`와의 중요한 차이점입니다.

if (true) {
    var functionScopedVar = 'I am function scoped';
}

console.log(functionScopedVar); // 'I am function scoped'

functionScopedVar는 블록 내에서 var로 선언되었지만, 블록 스코프를 따르지 않고 전역 스코프(여기서는 가장 가까운 함수 스코프)에서 유효합니다. 따라서 블록 바깥에서도 접근할 수 있습니다.

if (true) {
    let blockScopedLet = 'I am block scoped';
    const blockScopedConst = 'I am also block scoped';
}

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

blockScopedLet과 blockScopedConst는 블록 내부에서만 유효하며, 블록 바깥에서는 접근할 수 없습니다.