즉시실행함수 패턴 (IIFE Patterns)


발생일: 2012.07.15

키워드: 즉시실행함수, IIFE

문제:
즉시실행함수의 패턴에 대한 글인데,

예전에 팀 메일로 공유하려고 정리해뒀던 건가보다.


지금은 익숙한 코드라 대수롭게 보이지 않지만,

다른 누군가에겐 생소할 수도 있을만한 내용이라 옮겨둔다.


(메일로 보냈던 내용을 그대로 옮긴 거라 어투가 평소 포스트 스타일과 다르다.^^;;

  대신 실명만 이니셜로 변경~! 그 때 팀 사람들이 보고 싶넹~ ㅠ_ㅠ)



해결책:

즉시실행함수 표현식(IIFE, Immediately-Invoked Function Expression) 패턴



오전에 차트 수정할 게 좀 있어서 라파엘 코드를 들춰보다가, 

표현식으로 함수를 정의한 케이스가 있어서 공유드려요.


지난 번에 S의 코드리뷰 할 때에도 비슷한 얘기가 나왔었고,

얼마 전에 트위터 부트스트랩 코드를 보다가도 비슷한 게 있었는데, 그 중 하나가 아래 같은 코드예요.


  !function () { ... }();


요게 뭔가... 하고 봤더니, 우리가 흔히 쓰는 즉시실행함수와 동일하더라고요-


  (function () { ... }()); 또는

  (function () { ... })(); 



!function () {}(); 이 괄호 없이 실행되는 이유는,

! 때문에 그 뒤 함수 선언을 표현식으로 간주해 함수의 연산 순위가 더 높아졌기 때문이었어요-


즉시실행하는 건 동일하지만,

후자의 것이 1바이트를 절약할 수 있다는 장점(?-_-)이 있다는군요.



사실, 괄호로 함수를 묶는 방식도 함수 선언을 표현식으로 바꾸는 목적이었는데,

습관적으로 쓰다보니 딱히 깊이 고민해본 적은 없던 것 같아요.




여튼, 비슷한 맥락으로,


  true && function () { ... } ();

  0, function () { ... } ();

  ~function () { ... } ();


도 함수 선언과 동시에 바로 실행할 수 있습니다.



라파엘에서는


  window.Raphael.svg && function (R) {

    ... (이 코드 내에서 R.svg를 할당)

  }(window.Raphael); 


이런 식으로 활용하고 있구요-



요새는 (function () {}(); 대신 !function () {} (); 스타일이 인기라는 얘기도 있고,

위와 같이 표현식을 문장으로 사용하는 게 가독성이 떨어진다는 논란이 있더군요.


개인적으론, 즉시실햄함수의 케이스에 대해 팀이나 프로젝트 단위에서 컨벤션을 맞추면

어떤 방식이든 큰 문제는 없을 거란 생각이예요.


좀 더 나아가선, 컨벤션을 아주 디테일하게 적용할 수 있는 소규모 팀이라면,

아래처럼 활용해보는 것도 좋겠네요.


  자, 즉시실행함수가 뭔가 리턴하는 경우에만,

    (function () { ... }()); // 함수가 return 하는 값을 받음

  를 쓰고,


  단순 실행만 하는 케이스라면,

    !!function () { ... }();

  를 쓰는 거야. 얘가 뭐 리턴할 지, 스크롤 내릴 필요 절대 없어!



좀 오덕 같긴 하네요... -_-a ㅋㅋㅋ

B 과장님한테 한 소리 들을 코드군요.... 없던 얘기로 하고.ㅋㅋㅋ



여튼. 다들 아실 것 같지만,

요새 몇몇 오픈 소스에서 저런 패턴으로 사용하는 경우가 보여서 공유드려봤어요~~



아래 코드들의 스타일 한 번 살펴보는 것도 나쁘지 않을 것 같아요.

  - 트위터 부트스트랩 코드 : https://github.com/twitter/bootstrap/blob/master/js/bootstrap-button.js

  - 라파엘 코드 : https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js



즉시실행함수 패턴을 잘 정리해 놓은 포스트: http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife



스택오버플로우: http://stackoverflow.com/questions/7586870/in-javascript-what-is-the-advantage-of-function-over-function



카테고리

분류 전체보기 (710)
About me. (6)
Daylogs (675)
영어공부 (0)
My works - 추억 (29)
비공개 (0)