웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > etc

자바스크립트에서 즉시호출함수를 사용하여 블록 스코프처럼 사용하기

Last Modified : 2017-06-01 / Created : 2017-03-23
3,294
View Count
자바스크립트는 C++ 또는 Java와 다르게 블록스코프가 존재하지 않습니다. 하지만 자바스크립트 역시 블록스코프가 있는 것처럼 사용할 수 있을까요?

만약 IIFE, 즉시호출함수를 사용한다면 마치 블록스코프처럼 동작하게 하는 것이 가능합니다. 아래 예제를 봐주세요.

 

# 자바스크립트 블록스코프처럼 동작하는 예제

아래 예제를 봐주세요. 아래 예제는 블록스코프가 없는 일반적인 스크립트 코드입니다.
test = function() {
  if (true) {
    var i=1;
  }
// if 내부 블록에 변수 i를 선언

  return i;
};

위 코드를 실행하면 당연히 i의 값 1이 출력됩니다.

test();

1 // i의 값인 1을 출력

만약 즉시호출함수를 사용하면 결과는 어떻게 될까요? if 블록문에 즉시호출함수 코드를 추가합니다.
 
test = function() {
  (function() {
    var i=1;
  })();

  return i;
};

이제 위 결과는 어떻게 나타날까요?

test();

undefined // i값으로 undefined를 출력

여기서는 익명함수에 선언된 변수 i는 즉시실행함수로 호출된 뒤 바로 파괴되어 변수 i의 값을 가지지 않아 undefined가 출력되게 됩니다.


# 블록스코프 활용하기

이처럼 함수 내부에 즉시실행함수를 사용하면 몇 가지 장점이 있습니다. 어떤 장점이 있을까요?

​​​​​​​만약 하나의 함수 내부에 복잡하게 엃혀있는 다수의 내부함수가 동작한다고 가정할 경우 스코프 체이닝에 따른 동일한 변수명이 사용, 참조될 수 있습니다. 블록스코프는 이런 문제를 제거할 수 있습니다.

또한, 함수가 실행되면서 생성되는 활성화 객체의 변수 범위를 줄임으로써 메모리를 더 적게 차지할 수도 있게됩니다.

Previous

ngRepeat 디렉티브에서 $index를 사용해 ng-if로 추가하는 방법은?

Previous

객체 생성시 팩토리 패턴과 생성자 패턴의 방법 및 차이점은?