JavaScript의 (function () {}) () 구조

 

질문 : JavaScript의 (function () {}) () 구조는 무엇입니까?

---

이게 무슨 뜻인지 알고 있었는데 지금은 힘들어 ...

이것은 기본적으로 document.onload 말하는 것입니까?

(function () {

})();

답변

---

즉시 호출 된 함수 표현식 또는 줄여서 IIFE 입니다. 생성 된 직후에 실행됩니다.

document.onload )에 대한 이벤트 핸들러와는 아무 관련이 없습니다.
첫 번째 괄호 쌍 안에있는 부분을 고려하십시오. ( function(){} )(); .... 정규 함수 표현식입니다. 그런 다음 마지막 쌍을보십시오 (function(){}) () ; , 이것은 일반적으로 함수를 호출하기 위해 표현식에 추가됩니다. 이 경우에는 이전 표현입니다.

이 패턴은 다른 일반 함수와 마찬가지로 IIFE 내부에서 사용되는 모든 변수가 해당 범위 외부에서 보이지 않기 때문에 전역 네임 스페이스를 오염시키지 않으려 고 할 때 자주 사용됩니다.
이것이 종종 다음과 같이 사용되기 때문에이 구성 window.onload 에 대한 이벤트 핸들러와 혼동 한 이유입니다.

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Guffa가 제안한 수정 사항 :

함수는 구문 분석 된 후가 아니라 생성 된 직후에 실행됩니다. 전체 스크립트 블록은 코드가 실행되기 전에 구문 분석됩니다. 또한 구문 분석 코드는 자동으로 실행된다는 것을 의미하지 않습니다. 예를 들어 IIFE가 함수 내부에 있으면 함수가 호출 될 때까지 실행되지 않습니다.

업데이트 이것은 꽤 인기있는 주제이기 때문에 IIFE는 ES6의 화살표 기능으로 도 작성할 수 있다는 점을 언급 할 가치가 있습니다 ( Gajus 가 주석에서 지적한 것처럼).

((foo) => {
 // do something with foo here foo
})('foo value')

출처 : https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript