스코프와 호이스팅 개념과 예시코드

스코프(Scope)란?

변수 혹은 상수에 접근할 수 있는 범위를 말한다.
모듈/함수 내 코드에서 동일한 변수 사용 시 간섭을 줄이는 용도로 사용한다.
스코프는 글로벌 스코프와 로컬 스코프의 타입으로 구분된다.
- 글로벌 스코프 : 전역에 선언되어 어디에서도 접근 가능하다.
- 로컬 스코프(Block, function level) : 특정 지역에 선언되어, 해당 지역 내에서만 접근 가능하다.

let x = 1;
let y = 2;
// 글로벌 스코프
console.log(x); // 1
console.log(y); // 2

{
  // 로컬 스코프(block)
  let x = 3;
  let y = 4;
  console.log(x); //3
  console.log(y); //4
}

function scope() {
  // 로컬 스코프(function)
  let x = 5;
  let y = 6;
  console.log(x); //5
  console.log(y); //6
}
scope();

// 글로벌 스코프
console.log(x); // 1
console.log(y); // 2

let index = 1000;

function local_func() {
  let index = 100;

  for (let index = 0; index < 10; index++) {
    console.log(index); // 블록 0 ~ 9
  }

  console.log(index); // 함수 100
}

local_func();
console.log(index); // 글로벌 1000

전역 객체

브라우저에서는 window가 전역 객체이다. 브라우저에서 console.log(window)를 하게 되면 수많은 웹 API와 document 객체가 있다. console.log(this)로 호출하면 똑같이 window 전역 객체를 볼 수 있다. node.js에서는 global이 전역 객체이다.

호이스팅

자바스크립트는 변수 선언을 끌어올린다. 이것을 호이스팅이라고 한다. 호이스팅을 막기 위해서는 let, const를 사용하면 된다. 내부적으로 호이스팅은 일어나지만 TDZ(임시적 사각지대)로 옮겨 에러를 보여준다.

function foo(){
	console.log(hoist); // undefined
    
    var hoist = "호이스팅";
    
    console.log(hoist); // 호이스팅
}

foo()

위와 아래랑 동일한 프로세스이다.

function foo(){
	var hoist
    console.log(hoist); //undefined
    
    hoist = "호이스팅";
    
    console.log(hoist); // 호이스팅
}

즉시 실행 함수 IIFE(Immediately Invoked Function Expression)

공간을 분리할 수 있기 때문에 즉시 실행 함수를 쓴다. var 키워드를 쓸 때 함수만을 스코프로 인정하며, 함수 내부 이외에 생성한 변수는 모두 전역 변수가 되는 문제가 발생한다.

if(true){

	var temp = "hello"

}

console.log(temp); // hello

위 코드처럼 if문 밖에서 temp가 전역 변수로 사용되는 걸 볼 수 있다. 이걸 막기 위해 나타난 것이 즉시 실행 함수이다.

if(true){
	(function(){
		var temp = "hello"    
        console.log(temp) // hello
    })()
}

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

let과 const를 쓰면 즉시 실행 함수 사용 빈도는 줄어들 수 있다. 숨겨진 데이터나 변수를 정의할 때 편리하다고 한다.

학습 회고

스코프를 알고 있음에도 다시 한번 학습하니까 이해가 더 잘 되는 것 같다. 학습을 하면서 전역 객체와 즉시 실행 함수에 대해서는 잘 몰랐는데 새로운 개념들을 알 수 있었다. 즉시 실행 함수는 개발을 하면서 접해보지 못했던 개념인데 언젠가 쓰일 수 있겠다는 생각이 들었다.

저작자표시 비영리 변경금지

지삶앎