[자바스크립트] -함수 표현식 > 익명함수, 즉시실행함수

함수표현식

일반 함수 정의문의 경우 함수명을 선언하고 그 이름을 사용해서 호출한다. 이 방법은 함수 이름만 알고 있으면 어디서나 함수를 실행할 수 있어서 많이 사용한다. 
이 밖에 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 함수도 있다.

함수 중 1. 익명함수나 2. 즉시실행함수를 모두 함수 표현식이라고 한다. 

---

1. 익명함수 

 

익명함수는 이름이 없는 함수를 말한다. 익명함수를 선언할 때에는 이름을 붙이지 않는다. 

변수에 넣어 사용하기 때문에 익명함수를 호출할 때에는 변수명을 이용해 호출할 수 있다. 

 

일회용 기능들을 익명함수로 많이 쓴다. 

호이스팅 X  재사용 O

[기본형]

let 변수명 = function(){
      자바스크립트 코드;
}
        
변수명();

 

     

    //sum(1,2); 함수보다 먼저 호출하면 오류난다. sum은 선언된 적이 없다는 오류가 남. 호이스팅이 안되기 때문에

      //변수 sum은 익명함수를 참조하고 있다. 그래서 참조변수라고도 한다. 

      let sum = function (a, b) {

        document.write(a + b, "<br>");

      };

      sum(2, 3);

 

 

---

2. 즉시실행함수

 

브라우저가 로딩되자마자 바로 실행해버리는 함수

일반적으로 함수는 선언하고 필요할 때마다 호출해서 실행하는 방법을 많이 사용한다. 
한 번만 실행하는 함수라면 즉시실행함수를 사용하여 함수를 정의하면서 동시에 실행할 수도 있다.
즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다. 
재사용 X  일회성       

[기본형]
 
(function(매개변수){자바스크립트 코드;})(인수);

[매개변수랑 인수가 필요없을 때] 
(function(){})();

뒤에 ()가 함수호출문이 들어가있는 것이다.

매개변수랑 인수가 필요없을 경우엔 그냥 ()로 남겨둔다.   

 

 

  (function () {

        let userName = prompt("이름을 입력해주세요");

        document.write("안녕하세요. 제 이름은" + userName + "입니다");

      })();

 

---

< 즉시실행함수로 지역함수를 안전하게 보관하면서 함수를 실행시키는 방법 >

 

 /*즉시실행함수로 지역함수를 안전하게 보관하면서 함수를 실행시키는 방법*/

      //개발자A의 함수

      (function () {

        let num = 100;

        function menu() {

          num += 100;

          document.write(num, "<br>");

        }

        menu(); //지역함수 호출

      })();

      //개발자B의 함수

      (function () {

        let num = 100;

        function menu() {

          num -= 50;

          document.write(num, "<br>");

        }

        menu();

      })();

 

 

예시를 보면 개발자 A,B 모두 동일한 이름의 변수와 함수를 선언했다. 

하지만 각각 즉시 실행함수로 감싸놓았기 때문에 각 변수와 함수는 즉시실행함수 안의 블록 스코프(유효범위)를 가진다. 

즉, 개발자A 함수에 있는 num과 menu()는 개발자B가 선언한 num과 menu()와 각각 다른 함수와 변수로 취급된다. 

각 스코프가 다르기 때문에 변수나 함수의 충돌 없이 함수가 정상 실행된다. 

스코프가 달라서 함수 이름이 같아도 서로 충돌나지 않는다. 

브라우저에 충돌없이 각각 실행되는 것을 볼 수 있다.