Notice
Recent Posts
Recent Comments
Link
솔미는 성장중
[JS] 즉시 실행 함수 (IIFE) 본문
728x90
즉시 실행 함수 (IIFE)
Immediately-Invoked Function Expression
별도의 호출 없이 바로 실행되길 바랄 때 사용
주로 변수를 전역으로 선언하는 것을 피하기 위해 사용
내부에서 선언한 변수는 외부에서 접근 불가
사용 패턴
1번째 방식 (화살표 함수)
(F) ( )
(() => {})()
2번째 방식 (일반 함수)
(F) ( )
(function() {})()
3번째 방식
(F( ) )
((function() {})())
4번째 방식
! F ( )
!function() {}()
5번째 방식
+ F ( )
+function() {}()
const a = 5
const double = () => {
console.log(a*2)
}
(() => {console.log(a*2)})(); //1번째 방식
(function() {console.log(a*2)})(); //2번째 방식
((function() {console.log(a*2)})()); //3번째 방식
!function() {console.log(a*2)}(); //4번째 방식
+function() {console.log(a*2)}() //5번째 방식
예시
const a = 5;
const double = () => {
console.log (a*2)
}
double(); //10 기존에 호출하던 방식
//(함수 내용)()
(() => {
console.log (a*2)
})() //10 즉시 실행 함수
(function(a,b)){
return console.log(a-b);
})(1,2);
그럼 뒤쪽 괄호에는 뭐가 들어가는 거죠?
- (함수내용) (즉시 실행함수의 매개변수에 들어갈 인자) 형태로 사용 가능하다.
- 난독화 할때 사용 (하단 예시)
(a,b) => {
console.log(a.innerWidth)
console.log(b.body)
}(window, document)
728x90
'JavaScript > 함수' 카테고리의 다른 글
[JS] 함수 : 재귀 (0) | 2023.07.18 |
---|---|
[JS] 콜백 (callback) 함수 (예시 포함) (0) | 2023.07.18 |
[JS] 함수 선언 : 화살표 함수 (0) | 2023.07.18 |
[JS] 함수 : 구조 분해 할당 (0) | 2023.07.18 |
[JS] 함수 : 호이스팅 (함수 선언문, 함수 표현식) (0) | 2023.07.18 |