javascript - 함수와 콜백

Front-End/javascript 2019. 6. 12. 22:34
728x90
반응형

javascript에서는 함수도 객체이다.

 

다시 말해서 일종의 값이고, javascript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

 

 

-예시-

 

  var a = function( ){ }    // a라는 변수안에 함수function( )을 넣을 수 있다.

 

 

또한 함수는 객체의 값으로 포함될 수 있다.

이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method) 라고 부른다.

 

 

-예시-

 

  
  a = {  // a라는 변수 안에 객체를 생성
        b : function( ) {  // 객체 안에 b라는 키(key)값에 function( ) 함수를 생성한다. 이러한 함수를 메소드라고 부른다.
        }
  };

 

참고 : key는 속성이나 property 라고 부르기도 한다.

 

 

함수는 값이기 때문에 다른 함수의 인자(매개값) 으로 전달 될수도 있다.

 

 

-예시-

1
2
3
4
5
6
7
8
9
10
function a (cal, num){
return cal(num) //a라는 함수는 cal과 num을 매개값으로 받고 cal이라는 함수에 num을 매개값으로 준 값을 리턴
}
 
function increase (num){
return num*2 //increase이라는 함수는 num을 매개값으로 받고 num*2를 리턴한다.
}
 
console.log(a(increase,5)); //함수 a의 매개값으로 increase함수와 5를 매개값으로 주고, increase함수가 실행되서 num*2의 값인 10이 리턴된다.
10
cs

 

 

변수, 매개변수, 리턴값과 같이 다양한 용도로 사용될 수 있는 데이터를 first-class citizen (object)라고 한다.

javascript에서 function(함수)는 first-class에 해당이 된다.

 

 

함수는 함수의 리턴 값으로도 사용할 수 있다.

 

-예제-

1
2
3
4
5
6
7
8
9
function cal (mode) {
    var funcs = {
        'plus' : function(left,right){return left + right},
        'minus' : function(left,right){return left - right}
    }
    return funcs[mode];    
}
alert(cal('plus')(2,1)); //cal함수에 'plus'값을 메소드로 주면 funcs의 객체중 'plus'와 맞는 키가 실행되고 그 안에 있는 함수가 실행되서 3이 리턴된다.
alert(cal('minus')(2,1)); //cal함수에 'minus'값을 메소드로 주면 funcs의 객체중 'minus'와 맞는 키가 실행되고 그 안에 있는 함수가 실행되서 1이 리턴된다.
cs

 

 

또한 함수는 배열의 값으로도 사용할 수 있다.

 

-예제-

1
2
3
4
5
6
7
8
9
10
11
12
var process = [
    function(input) {return input + 10;} //input가 1이므로 11이 리턴
    function(input) {return input * input;}, //input가 11이므로 121이 리턴
    function(input) {return input / 2;} //input가 121이므로 60.5가 리턴
];
 
var input = 1;
for (var i = 0; i < process.length; i++){ 배열의 길이는 0~2까지 이므로 length=0,1,2까지
    input = process[i](input); //함수가 한번 호출될때마다 input값이 변화됨
}
 
alert(input);
cs

 

 

콜백

 

처리의 위임

 

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수를 전달할 수 있다.

 

값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다.

 

인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

728x90
반응형

'Front-End > javascript' 카테고리의 다른 글

null 체크 함수 (공통함수)  (8) 2020.11.11
javascript - 유효범위 (전역변수, 지역변수)  (0) 2019.06.11
javascript - 정규표현식  (0) 2019.06.11
javascript - UI와 API  (0) 2019.06.10
javascript - 라이브러리 (jQuery)  (0) 2019.06.09
: