자바스크립트 기본 문법 – 변수와 상수 – 1 – 스코프와 호이스팅

작성자 wooah

자바스크립트 기본 문법 – 변수와 상수 – 1 – 스코프와 호이스팅

스코프: 변수의 유효 범위를 정하는 영역

스코프는 변수의 유효 범위를 결정하는 영역입니다. 쉽게 말해서, 변수가 어디에서 사용될 수 있는지를 정의합니다. 자바스크립트에서는 블록 스코프(Block Scope)와 함수 스코프(Function Scope) 두 가지 주요한 스코프 유형이 있습니다.

블록 스코프 (Block Scope)

블록 스코프는 중괄호({})로 둘러싸인 코드 블록 내에서 변수가 유효한 범위를 가집니다. 주로 if, for, while 등의 제어문이나 함수 내부에서 사용됩니다.

예를 들어, 다음과 같은 코드를 보겠습니다:

function example() {
  if (true) {
    var x = 10;  // 블록 스코프가 아닌 함수 스코프를 가집니다.
    let y = 20; // 블록 스코프를 가집니다.
    const z = 30; // 블록 스코프를 가집니다.
    console.log(x, y, z); // 출력: 10 20 30
  }
  console.log(x); // 출력: 10 (블록 내부에서 선언한 변수이므로 접근 가능합니다.)
  console.log(y); // ReferenceError: y is not defined (블록 외부에서는 y에 접근할 수 없습니다.)
  console.log(z); // ReferenceError: z is not defined (블록 외부에서는 z에 접근할 수 없습니다.)
}

example();

위의 코드에서 x는 if 블록 내에서 var 키워드로 선언되었으므로, 함수 스코프를 가집니다. y와 z는 let과 const 키워드로 선언되었으므로, 블록 스코프를 가집니다. 따라서, x는 블록 외부에서도 접근할 수 있지만, y와 z는 블록 외부에서 접근할 수 없습니다.

함수 스코프 (Function Scope)

함수 스코프는 함수 내에서 선언된 변수가 유효한 범위를 가집니다. 함수 스코프를 가진 변수는 함수 내에서만 접근 가능하고, 함수 외부에서는 접근할 수 없습니다.

예를 들어, 다음과 같은 코드를 보겠습니다:

function greet() {
  var message = "안녕하세요!"; // 함수 스코프를 가집니다.
  console.log(message); // 출력: 안녕하세요!
}

greet();
console.log(message); // ReferenceError: message is not defined (함수 외부에서는 message에 접근할 수 없습니다.)

위의 코드에서 message 변수는 greet 함수 내에서 선언되었으므로, 함수 스코프를 가집니다. 따라서 greet 함수 내부에서는 message에 접근할 수 있지만, 함수 외부에서는 접근할 수 없습니다.

호이스팅(Hoisting): 변수 선언의 끌어올림

호이스팅은 자바스크립트에서 변수 선언이 해당 스코프의 최상단으로 끌어올려지는 동작을 의미합니다. 이는 변수가 선언되기 전에도 참조할 수 있다는 점에서 유용한 특징입니다.

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

위의 코드에서 var x = 10; 문장이 변수 x의 선언과 할당을 동시에 하고 있습니다. 그러나 첫 번째 console.log(x); 문장에서는 변수 x가 선언되기 전에 참조되었습니다. 이 때문에 undefined라는 결과가 나오게 됩니다.

이러한 이유는 자바스크립트 엔진이 코드를 실행하기 전에 변수 선언문을 먼저 처리하기 때문입니다. 변수 선언은 실제로 선언된 위치에서 시작되지만, 선언문 이전에도 참조할 수 있다는 특성을 가지게 됩니다. 이런 동작 방식 때문에 호이스팅이라는 용어가 사용되었습니다.

그러나 호이스팅은 변수의 선언만을 끌어올리며, 변수의 할당은 끌어올려지지 않습니다. 따라서, 변수를 선언하기 전에 값을 할당하면 선언 이전에는 값이 존재하지 않습니다.

console.log(x); // ReferenceError: x is not defined
let x = 10;
console.log(x); // 10

위의 코드에서는 변수 x를 let 키워드로 선언하였습니다. let과 const 키워드로 선언한 변수는 호이스팅이 발생하지만, 초기화 전까지 접근할 수 없습니다. 따라서 첫 번째 console.log(x); 문장에서는 ReferenceError가 발생하게 됩니다.

주의해야 할 점

  1. 변수를 사용하기 전에 선언해야 합니다. 호이스팅은 변수의 선언을 끌어올리지만, 할당은 끌어올려지지 않으므로, 변수를 사용하기 전에 선언되어 있어야 합니다.
  2. var 키워드로 선언된 변수는 함수 스코프를 가지고 있으므로, 블록 스코프처럼 사용하는 것에 주의해야 합니다. 블록 스코프를 사용하려면 let이나 const 키워드를 사용해야 합니다.
  3. 호이스팅은 코드의 가독성과 유지 보수성을 저하시킬 수 있으므로, 변수 선언을 코드의 최상단에 명시하는 것이 좋습니다.

변수와 상수에 대한 스코프와 호이스팅에 대해 알아보았습니다. 이해하기 쉽게 설명드렸는지 모르겠지만, 추가로 궁금한 내용이 있다면 언제든지 물어보세요!

답글 남기기