티스토리 뷰
발생일: 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