자바스크립트에서 스코프와 호이스팅 이해하기

안녕하세요 찐망고입니다.

오늘은 스코프와 호이스팅에 대해서 포스팅 해보도록 할게요.

 

자바스크립트에서 스코프는 변수의 유효 범위를 말합니다.

즉, 변수가 어디에서 사용될 수 있는지를 결정하고, 변수가 선언된 위치와 관련이 있어요.

 

1. 전역 스코프(Global Scope): 전역스코프는 코드의 어디에서든 접근할 수 있는 가장 바깥쪽 스코프인데요

 전역 스코프에서 선언된 변수는 어디에서든 참조할 수 있습니다.

 

2. 함수 스코프(Function Scope): 함수 스코프는 함수 내에서 선언된 변수의 유효 범위를 나타내는데,

함수 스코프에 선언된 변수는 함수 내부에서만 접근 할 수 있으며, 함수 외부에선 접근 할 수 없습니다.

 

3. 블록 스코프(Block Scope): 블록 스코프는 중괄호({})로 둘러싸인 블록(ex: if문, for문)내에서 선언된 변수의 유효 범위를 나타내는데, 블록 스코프에 선언된 변수는 해당 블록 내부에서만 접근할 수 있으며, 블록 외부에서는 접근 할 수 없습니다.

 

예시를 볼까요?

// 전역 스코프
var globalVariable = "전역 변수";

function example() {
  // 함수 스코프
  var functionVariable = "함수 변수";

  if (true) {
    // 블록 스코프
    var blockVariable = "블록 변수";
    console.log(blockVariable); // 출력: "블록 변수"
  }

  console.log(blockVariable); // 출력: "블록 변수" (블록 스코프 외부에서도 접근 가능)
  // let으로 선언한 경우 출력 불가
  console.log(functionVariable); // 출력: "함수 변수"
  console.log(globalVariable); // 출력: "전역 변수"
}

example();
console.log(globalVariable); // 출력: "전역 변수"
console.log(functionVariable); // 에러 발생: 함수 스코프 외부에서는 접근 불가
console.log(blockVariable); // 에러 발생: 블록 스코프 외부에서는 접근 불가

 

호이스팅은 변수와 함수 선언이 스코프의 상단으로 "끌어올려지는" 동작을 말하는데

코드에서 변수나 함수 선언문이 실제 실행되기 전에 먼저 처리되는 현상입니다. 

호이스팅은 선언만 위로 끌어올려지며, 할당 부분은 원래 위치에 그대로 남아있는데요.

변수의 호이스팅과 함수의 호이스팅은 또 차이가 있어요.

 

 

변수 호이스팅: 'var'키워드로 선언된 변수는 스코프의 상단으로 호이스팅 되는데, 

변수 선언은 실제 실행 코드보다 앞서 처리되기 때문에, 변수를 선언하기 전에 해당 변수를 참조하더라도 에러가 발생하지 않습니다. 그러나 선언되기 전에 변수에 접근하면 갋은 'undefined'로 초기화 됩니다.

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

 

함수 호이스팅: 함수 선언문은 변수 선언과 마찬가지로 스코프의 상단으로 호이스팅 되는데

함수 선언문은 선언만을 끌어올리고, 함수의 정의는 그대로 유지되므로 함수 선언문을 호출하기 전에 사용해도 에러가 

발생하지 않습니다.

hello(); // 출력: "Hello, world!"

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

 

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

함수 표현식은 변수에 함수를 할당하는 형태인데,

변수 호이스팅 규칙에 따라 변수 선언은 호이스팅 되지만 함수 정의는 호이스팅 되지 않습니다.

hello(); // 에러 발생: hello is not a function

var hello = function() {
  console.log("Hello, world!");
};

 

스코프는 변수와 함수의 유효범위를 결정하는 개념이고, 

호이스팅은 변수와 함수 선언이 스코프의 상단으로 끌어올려지는 동작을 말합니다.

스코프는 변수와 함수가 어디서 접근 가능한지를 결정하고,

호이스팅은 선언부가 실행코드보다 먼저 처리되는 동작입니다. 

 

 

 

자바스크립트에서 변수 다루기: var, let, const 이해하기