[Javascript] 함수의 정의 및 종류

1. 일반함수

function 함수명() {

     //자바스크립트 코드문

}

function addFnc(x, y) {

     return x+y;

}

- 파싱하는 단계에서 함수 변수인 addFnc가 정의되고 함수를 호출하면 런타임에 x, y가 정의됩니다.

- 자바스크립트를 처음 읽을 때만 해석됩니다.

- 호출문이 다른 함수보다 앞에 있더라도 호출이 가능합니다. 

 

 

 

2. 익명함수

var addFnc function(x, y) {

     return x+y;

}

addFnc(x, y);

- 이름이 없기 때문에, 접근할때 비로소 해석되고, 실행될때 함수 몸체가 해석됩니다.

- 실행코드 블록을 갖는 함수를 정의해 addFnc라는 변수에 할당하고 있습니다.

 이렇게 정의된 함수는 이름이 없다. 이름 대신에 변수로 호출을 할 수 있습니다.

 실행코드로써 런타임에 함수가 제공된다.

- 다음과 같이 함수 리터럴(변수)을 이용해 정의된 함수를 이야기 한다.

 익명함수는 주로 이름이 없거나 주로 변수에 할당되거나 함수 인자의 값 또는 반환값으로 사용

 됩니다.

 

1) 함수 리터럴을 사용하여 함수를 생성한 예

function otherFunction(x, y, z) {

    // 함수 본문

}

// 여기서, 함수 리터럴은 'function(x, y) { ... }' 부분을 말한다.

var param = function(x, y) { //  함수 본문 };

// 여기서, param은 함수 리터럴에 의해 정의되어 할당된 변수(함수 표현식)

otherFunction(param, a, b);

 

2) 함수 객체 생성자의 의한 함수 생성 방법

 ex1)

  var square = new Function("x", "return x * x");

  square(5);  //숫자 25 출력

 ex2)

  var functionName = new Function (x, y, functionBody);

  functionName(a, b); // 호출시에 Function 함수 객체에서 두 인수 a, b를 처리하게 됨.

 

 

 

3. 중첩함수 (Nested Function)

function fstFncExample () {

     var a = 1;

     function secondFncExample () {

          return a * 2;

     }

     return secondFncExample();

}

- 다른 함수 내부에서 정의되는 함수를 의미합니다.

  특정 함수에서만 사용할 기능이라면 외부에 노출시키지 않고 내부에 정의해서 사용할 수 있는

 것이다. 지역변수의 스코프가 함수 단위로 이루어지기 때문에 내부 함수에서는 내부에 정의된

 변수를 참조할 수 있습니다. 확장할수록 객체지향의 캡술화와 정보은닉으로 연결될 수 있습니다.

 

 

 

4. 콜백함수 (Callback Function)

function MainFnc {

     var arg;

     // 콜백함수를 익명으로 전달하는 구조

     LibraryFunction(arg, function(result){

             // result를 사용한 연산

     });

}

- 라이브러리를 가지고 있는 함수가 라이브러리를 호출하고 라이브러리에서 실행을 마치고

 다시 측정함수를  호출하는 구조를 이야기합니다. 이때 다시 호출하는 특정함수를 콜백함수

 라고 합니다. 

 

 

 

5. 로드함수

//페이지 로드시 호출될 콜백 함수

window.onload = function() {

     alert('This is the callback function.');

}

- 페이지의 모든 요소들이 로드된 이후에 호출됩니다.

- html의 로딩이 끝난 후에 시작됩니다.

- 화면에 필요한 모든 요소(css, js, image 등등)들이 웹브라우저 메모리에 모두 올려진 다음에

 실행이 됩니다.

 

 

 

6. $(document).ready()

$(document).ready(function(){

    //자바스크립트 코드문

});

- DOM(document object model) 트리들이 모두 로드된 시점에 호출이 됩니다.

- window.onload 함수의 문제점을 해결하기 위해 사용 되었고 window.onload보다 훨씬 빠릅니다.

- $(function(){})이랑 같)습니다. 하지만 다음 도큐먼트 레디 함수를 사용하는 것을 권장합니다. 그

 이유는 $(window).load() 함수와 확실하게 구분 지어주기 때문입니다.

 

 

 

7. 즉시 실행함수 (immediate function)

(function (name) {

     console.log('This is the immediate function --> ' + name);

})('foo');

- function 부분을 괄호로 감싼 다음 바로 호출될 수 있게 () 괄호 쌍을 추가합니다.

- 괄호안에 값을 추가하여 인자로 넘길 수 있습니다.

 

 

 

출처 : https://diaryofgreen.tistory.com/96d

출처2 : https://asfirstalways.tistory.com/190