javascript - 함수와 콜백
Front-End/javascript 2019. 6. 12. 22:34javascript에서는 함수도 객체이다.
다시 말해서 일종의 값이고, 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의 동작방법이 완전히 바뀌게 된다.
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'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 |