즉시 실행 함수


  • 즉시 실행 함수 패턴은 함수가 선언되자마자 실행되도록 하는 문법이다.
  • 즉시 싱행 함수 함수 패턴은 다음의 부분들로 구성된다.
  • 함수를 함수 표현식으로 선언한다. (함수 선언문으로는 동작하지 않는다.)
  • 함수가 즉시 실행될 수 있도록 마지막에 괄호쌍으로 추가한다.
  • 전체 함수를 괄호로 감싼다. (함수를 변수에 할당하지 않을 경우에만 필요하다.)
  • 즉시 실행 함수는 모든 코드를 지역 유효범위로 감싸고 어떤 변수도 전역 유효범위로 새어나가지 않게 한다.

(function(){
var days = ['sun', 'mon', 'tue', 'wed', 'the', 'fri', 'sat'],
today = new Date();
msg = 'today is ' + days[today.getDay()] + ', ' + today.getDate();

console.log(msg)

}()) // 'today is tue, 6'



즉시 실행 함수의 매개변수


즉시 실행 함수에 인자를 전달할 수도 있다.

// 출력결과:
// 'i met joe black on Tue Aug 06 2019 14:59:48 GMT+0900 (대한민국 표준시)'
(function(who, when){

console.log('i met ' + who + ' on ' + when);

}('joe black', new Date()));


전역 객체를 global로 참조가 가능하다.


(function(global){

// 전역 객체를 'global' 로 참조
}(this));



즉시 실행 함수의 반환 값


다른 함수와 비슷하게 즉시 실행 함수도 값을 반환할 수 있고 반환된 값은 변수에 할당될 수 있다.

var result1 = (function(){
return 1 + 1;
}());

// 괄호를 생략해서 같은 동작을 구현할 수 있다.
var result2 = function(){
return 2 + 2;
}();

// 즉시실행 함수에서 미리 계산하여 클로저에 저장해둔 res라는 값을 반환
var getResult = (function(){
var res = 2+2;
return function(){
return res;
}
}())

console.log(getResult());


즉시 실행 함수는 객체 프로퍼티를 정의할 때에도 사용할 수 있다.


var o = {
message : (function(){
var who = 'me',
what = 'call';
return what + ' ' + who;
}()),
getMsg : function(){
return this.message;
}
};

// 사용방법
o.getMsg(); // call me
o.message; // call me


저작자표시 (새창열림)

'개발 > dev-patterns' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 - 초기화 시점의 분기  (0) 2019.08.06
자바스크립트 코딩 기법과 핵심 패턴 - 즉시 객체 초기화  (0) 2019.08.06
자바스크립트 코딩 기법과 핵심 패턴 - 자기 자신을 정의하는 함수  (0) 2019.08.06
자바스크립트 코딩 기법과 핵심 패턴 - 콜백 패턴  (0) 2019.08.05
자바스크립트 코딩 기법과 핵심 패턴 - 함수  (0) 2019.08.05

자기 자신을 정의하는 함수


함수는 동적으로 정의할 수 있고 변수에 할당할 수 있다. 어떤 면에서는 이전의 함수 포인터가 새로운 함수를 가리키도록 재사용하는 것이다.

var scareMe = function(){
console.log("boo");
scareMe = function(){
console.log("double boo");
};
};

// 자기 자신을 정의하는 함수를 사용
scareMe(); // boo
scareMe(); // double boo


이 패턴은 함수가 어떤 초기화 준비 작업을 단 한 번만 수행할 경우 유용하다.


단점은 자기 자신을 재정의한 이후에는 이전에 원본 함수에 추가했던 프로퍼티들을 모두 찾을 수 없게 된다는 점이다. 또한 함수가 다른 이름으로 사용된다면 재정의된 부분이 아니라 원본 함수의 본문이 실행된다.

1. 새로운 프로퍼티가 추가된다.

2. 함수 객체가 새로운 변수에 할당된다.

3. 함수는 메서드로도 사용된다.


var scareMe = function(){
console.log("boo");
scareMe = function(){
console.log("double boo");
};
};

// 자기 자신을 정의하는 함수를 사용
// scareMe(); // boo
// scareMe(); // double boo

// 1. 새로운 프로퍼티가 추가된다.
scareMe.property = "property";

// 2. 함수 객체가 새로운 변수에 할당된다.
var prank = scareMe;

// 3. 함수는 메서드로도 사용된다.
var spooky = {
boo : scareMe
}

// 새로운 이름으로 호출한다.
prank(); // boo
prank(); // boo
console.log(prank.property); // property

// 메서드로 호출한다.
spooky.boo(); // boo
spooky.boo(); // boo
console.log(spooky.boo.property); // property

// 자기 자신을 재정의한 함수를 사용한다.
scareMe(); // 'double boo'
scareMe(); // 'double boo'
console.log(scareMe.property); // undefined


예제에서 보는 것처럼 함수가 새로운 변수에 할당되면 예상과 달리 자기 자신을 정의하지 않는다.

저작자표시 (새창열림)

'개발 > dev-patterns' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 - 즉시 객체 초기화  (0) 2019.08.06
자바스크립트 코딩 기법과 핵심 패턴 - 즉시 실행 함수  (0) 2019.08.06
자바스크립트 코딩 기법과 핵심 패턴 - 콜백 패턴  (0) 2019.08.05
자바스크립트 코딩 기법과 핵심 패턴 - 함수  (0) 2019.08.05
자바스크립트 코딩 기법과 핵심 패턴 - 에러 객체  (0) 2019.08.02

함수 반환하기


함수는 객체이기 때문에 반환 값으로 사용될 수 있다.

var setup = function(){
console.log(1);
return function(){ // => 클로저 함수
console.log(2);
}
}

// setup 함수를 사용
var my = setup(); // console 1 출력
my(); // 2출력


setup()은 반환된 함수를 감싸고 있기 때문에 클로저를 생성한다. 클로저는 반환되는 함수에서는 접근할 수 있지만 코드 외부에서는 접근할 수 없기 때문에 비공개 데이터 저장을 위해 사용할 수 있다. 카운터를 예제로 들 수 있다.

** 클로저는 함수 내에서 함수를 정의하고 사용하는 함수를 가르킨다.


var setup = function(){
var count = 0;
return function(){
return (count += 1);
}
}

// 사용방법
var next = setup();
console.log(next()); // 1
console.log(next()); // 2
console.log(next()); // 3


저작자표시 (새창열림)

+ Recent posts

티스토리툴바