함수 표현식이며 즉시 호출 된 함수 표현식 (IIFE)을 나타냅니다. IIFE는 생성 된 직후 실행되는 기능입니다. 따라서 실행이 호출 될 때까지 기다려야하는 함수에 대해 IIFE가 즉시 실행됩니다. IIFE를 예로 들어 봅시다. add 함수가 두 개의 정수를 인수로 취하고 합을 리턴하여 add 함수를 IIFE로 만들 수 있다고 가정 해보십시오.
1 단계 : 함수 정의
function add (a, b){
return a+b;
}
add(5,5);
2 단계 : 전체 함수 선언을 괄호로 묶어 함수 호출
(function add (a, b){
return a+b;
})
//add(5,5);
3 단계 : 함수를 즉시 실행하려면 호출에서 'add'텍스트를 제거하십시오.
(function add (a, b){
return a+b;
})(5,5);
IFFE를 사용하는 주된 이유 는 함수 내에서 개인 범위를 유지하기 위해서입니다. 자바 스크립트 코드 내에서 전역 변수를 재정의하지 않아야합니다. 때로는 실수로 전역 변수를 대체하는 변수를 정의 할 수 있습니다. 예를 들어 봅시다. iffe.html이라는 html 파일이 있고 body 태그 안의 코드가
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
글쎄, 위의 코드는 질문없이 실행됩니다. 이제 우연히 또는 의도적으로 document라는 변수를 삭제했다고 가정합니다.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
구성 불가능한 전역 속성 문서를 다시 선언 하면 SyntaxError :에 선언됩니다.
그러나 변수 이름 문서를 지우려는 경우 IFFE를 사용하여 수행 할 수 있습니다.
<body>
<div id = 'demo'></div>
<script>
(function(){
const document = "hi there";
this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
console.log(document);
})();
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
산출:
다른 예제로 시도해 봅시다. 다음과 같은 계산기 객체가 있다고 가정합니다.
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
</script>
</body>
글쎄, 그것은 매력처럼 작동합니다. 우연히 계산기 객체의 값을 다시 할당하면 어떻게 될까요?
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
calculator = "scientific calculator";
console.log(calculator.mul(5,5));
</script>
</body>
예, TypeError로 끝날 것입니다 : calculator.mul은 함수가 아닙니다 iffe.html
그러나 IFFE의 도움으로 다른 변수 이름 계산기를 만들어 사용할 수있는 개인 범위를 만들 수 있습니다.
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
var cal = (function(){
var calculator = {
sub:function(a,b){
return a-b;
},
div:function(a,b){
return a/b;
}
}
console.log(this.calculator.mul(5,10));
console.log(calculator.sub(10,5));
return calculator;
})();
console.log(calculator.add(5,10));
console.log(cal.div(10,5));
</script>
</body>
산출:
