-20210531
-
기명 함수표현식
-
익명 함수표현식
-
콜백함수
-
즉시실행함수
- 기명 함수표현식(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
}//매개변수의 함수변수에 ()를 붙이면 함수의 내용을 수행한다.
//함수변수만 입력할 경우 함수의 내용만 입력된다.
- 익명 함수표현식(Anonymous function expression)
자바에서는 메소드를 정의할 때 메소드의 이름을 반드시 써줬었다. 그래야 어플리케이션 내부에서 호출이 가능했기 때문이다. 하지만 자바스크립트는 함수명을 쓰지 않더라도 함수를 정의할 수 있다.
(1) 일반적인 함수 선언
function() {
//algorithm logic
}(2) 변수에 함수를 정의
var funcVari = function(){
//algorithm logic
}- 콜백 함수(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
}
);
- 즉시실행함수(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
}
}
}();