스코프(scope)와 호이스팅(Hoisting)

본 게시글은 개인 공부를 하면서 기록 목적으로 작성하였습니다.
잘못된 내용이 있다면 제보 부탁드립니다. 감사합니다.🙇‍♂️

 

 

1. 스코프(scope)

스코프(scope) 란?

• 스코프(scope)는 변수나 매개변수를 참조할 수 있는(접근할 수 있는) 유효한 범위를 결정한다.
• 선언된 위치에 따라 유효 범위가 결정되며, 자바스크립트의 스코프는 블록과 함수 단위의 스코프로 나눌 수 있다.

 

블록 스코프

• 블록 스코프에서는 변수의 유효 범위를 블록({}) 단위로 제한하여 사용할 수 있다.
• 코드 블록 외부에서는 블록 내부의 변수를 참조할 수 없다.
• 코드 블록
  • {}
  • if() {}
  • for() {}
  • function() {}

{
  const name = 'Kyoo';
  console.log(name); // Kyoo
}
console.log(name); // ReferenceError: name is not defined

 

함수 스코프

• 함수 스코프는 선언된 함수 단위로 생성되는 스코프로, 함수 스코프 안에 선언된 변수나 함수들은 모두 함수 스코프에 포함된다.
• 함수 외부에서는 함수 내부의 변수를 참조할 수 없다.

function myName() {
  const name = 'Kyoo';
  console.log(name);
}
myName(); // Kyoo

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

• 함수 외부에서는 함수의 매개변수를 참조할 수 없다.

function sum(a, b) {
  console.log(a, b);
}
sum(1, 3);

console.log(a, b); // ReferenceError: a is not defined

 

스코프 참조 범위

• 블록 안에 있는 변수는 외부에서 참조할 수 없다.
• 블록이 중첩되어 있어도 자식 블록은 부모(상위)의 변수를 참조할 수 있다.

{
  const a = 1;
  {
    const b = 2;
    console.log(a); // 1
  }
  console.log(a); // 1
  console.log(b); // ReferenceError: b is not defined
}

• 스코프는 블록 안에서 유효 범위가 결정된다.
• 근접한 블록 안에 변수를 접근한다.

const text = "global"; // 전역 변수, 전역 스코프 (글로벌 변수, 글로벌 스코프)
{
	const text = "inside block"; // 지역 변수(로컬 변수), 지역 스코프(로컬 스코프)
  {
    console.log(text); // inside block
  }
}

const text = "global";
{
	// const text = "inside block";
  {
    console.log(text); // global
  }
}

 

2. 호이스팅(Hoisting)

호이스팅(Hoistiong) 이란?

• 자바스크립트 엔진이 코드를 실행하기 전 변수, 함수, 클래스의 선언문을 끌어 올리는 것을 말한다.
  (= 변수의 선언과 초기화를 분리한 후, 선언한 코드만 최상단으로 옮긴다.)

 

함수 호이스팅

• 함수의 호이스팅은 함수의 선언문 이전에도 호출이 가능하게 해준다.
• 함수의 선언문은 선언 이전에도 호출이 가능하다.

myName() // 선언문을 끌어올린다.

function myName() {
  console.log("Kyoo");
}

 

변수 호이스팅

• var 키워드로 선언한 변수는 선언과 초기화 단계를 한번에 실행한다.
  • 선언: 스코프에 변수를 선언한다.
  • 초기화: 변수의 값을 undefined로 초기화하며, 실제로 변수에 접근 가능한 단계를 말한다.
• 아래 예제와 같이 var 키워드로 선언한 변수는 선언과 초기화 단계를 한번에 실행하여 스코프 최상단으로
  끌어올려져 실행되기 때문에 선언하기 전에 변수에 접근하여도 이미 초기화가 되어 접근이 가능하다.

console.log(name); // undefined
var name = 'Kyoo';

// 스코프의 최상단에서 변수 name의 선언과 초기화가 한 번에 실행된다.
var name; // 선언 및 초기화
console.log(name); // undefined
name = 'Kyoo'; // 할당

 

• 함수 내에 선언된 변수는 함수 스코프 안에서 호이스팅이 발생한다.

function myName() {
    console.log(name);
    var name = 'Kyoo';
};

// 함수 스코프 내에 최상단에서 변수 name의 선언과 초기화가 한 번에 실행된다.

function myName() {
    var name;
    console.log(name);
    name = 'Kyoo';
};

 

• let과 const 키워드로 선언한 변수는 var 키워드와 다르게 선언과 초기화 단계가 분리되어 실행된다.
  • 변수(let, const)와 클래스는 선언만 호이스팅이 된다. (※ 초기화는 안된다.)
• 초기화 전, 변수에 접근하면 컴파일(빌드) 에러가 발생한다.

// 컴파일(빌드) 에러

let hi = 'hi';
let func1 = function() {};

const cat = new Cat();
class Cat {};

 

 

 

---

참 고

기초부터 완성까지, 프런트엔드 (이재성, 한정)