(자바스크립트) function() 함수에 대해서 알아보자.

나는 자바를 기반으로 프로그래밍을 배웠다.

 

그렇기에 캡슐화에 대한 공부를 하였고, 프론트엔드 단에서 자바스크립트를 이용하여 객체를 만들고자 했을 때 자바스크립트는 어떻게 만들 수 있는지 알게 되어 그 부분을 공유하려고 한다. 

 

이번에 기재할 내용은 함수 function()이다. 

자바스크립트에서는 function()을 어떤식으로 취급하는 지 알아보자.

 

1. 기명 함수표현식

2. 익명 함수표현식

3. 콜백함수

4. 즉시실행함수

 

 

1. 기명 함수표현식(Named function expression)

여러 프로그래밍 언어에서 사용하는 개념과 유사하지만 다른 게 있다.

바로 function()은 자바스크립트에서 객체로 취급이 가능하다. 

때문에 함수의 매개변수로 함수를 입력할 수 있다. 

 

(1) 일반적인 함수 선언

function testFunc(){

// algorithm logic

}

 

(2) 변수에 함수를 정의

var funcVariable = function testFunc(){

// algorithm logic

}

 

//funcVariable 입력시 testFunc()의 내용이 보여진다.

//funcVariable() 입력시 testFunc()의 algorithm logic이 수행된다. 

 

(3) 함수의 매개변수에 함수를 입력

function paramTest(testFunc(), funcVariable()){

//algorithm logic

}

 

//매개변수의 함수변수에 ()를 붙이면 함수의 내용을 수행한다.

//함수변수만 입력할 경우 함수의 내용만 입력된다. 

 

 

2. 익명 함수표현식(Anonymous function expression)

자바에서는 메소드를 정의할 때 메소드의 이름을 반드시 써줬었다. 그래야 어플리케이션 내부에서 호출이 가능했기 때문이다. 하지만 자바스크립트는 함수명을 쓰지 않더라도 함수를 정의할 수 있다. 

 

(1) 일반적인 함수 선언

function() {

//algorithm logic

}

 

(2) 변수에 함수를 정의 

var funcVari = function(){

//algorithm logic

}

 

 

3. 콜백 함수(Callback function)

자바스크립트에서 함수의 매개변수를 자세히 관찰해 보면 매개변수에 변수와 함께 익명 함수표현식이 같이 있는 경우가 있다. 이 때 입력되는 익명 함수표현식이 콜백함수이다. 

 

콜백함수의 사전적인 정의를 확인해보면 아래와 같다. 

 

프로그래밍에서 콜백(callback)은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할수도 있다. 

 

(출처: https://ko.wikipedia.org/wiki/%EC%BD%9C%EB%B0%B1)

 

즉, 사용자의 콜백함수는 사용자에 의해 호출되는 것이 아닌 시스템에 의해 호출되는 함수인 것이다. 비동기 프로그래밍에서 많이 사용된다.

 

(1) 콜백함수의 예시

나는 콜백을 jquery를 이용해서 프론트엔드 이벤트 핸들링 혹은 ajax 통신을 할 때 많이 사용한다. 

 

/*

*     document event handling

*     click 함수의 매개변수로 입력되는 것이 콜백함수

*/

 

$(".button").click(function(){ 

//event logic

});

 

/* 

*    ajax async handling

*    비동기 통신이 완료되고 response를 성공적으로 받았을 경우 success 콜백함수를

*    수행하고, 통신에 실패할 경우 error 콜백함수가 호출된다. 

*/

 

$.ajax(

url : url,

params : params,

success : function(){

//algorithm logic

},

error : function(){

//algorithm logic

}

);

 

 

4. 즉시실행함수(Immediately-invoked function expression)

js파일이 로드되자마자 실행되는 함수를 일컫고, 자바스크립트로 객체를 생성할 때 사용되는 방식이기도 하다. 

 

(1) 기본적인 형태

// 일반적인 표기법

(function(){

// algorithm logic

})();

 

//Javascript의 대가인 더글라스 클락포트의 권장 표기법

(function() {

// algorithm logic

}()); 

 

(2) 즉시실행함수 객체를 생성하는 방법

/*

*    ABC.aaa(), ABC.bbb()의 형태로 객체의 함수를 호출할 수 있다.

*/

var ABC = function() {

return {

aaa : function() {

//algorithm logic

},

bbb : function() {

//algorithm logic

}

}

}();

 

 

(참고: http://www.nextree.co.kr/p4150/)