자바 스크립트가 함수형 프로그래밍을 지원하는데 함수형 프로그래밍이 뭘까 그중에서 일급 함수라는 단어가 있다 함수가 마치 변수처럼 다른 함수의 인자처럼 전달되거나 다른 함수로 반환되거나 변수의 값으로 할당될 수 있다는 뜻입니다
변수에 할당
변수의 할당은 우리가 앞에서 보았다
1
2
3
4
const alert_print_helllo = () => alert('hello')
alert_print_helllo();
마치 함수를 변수에 담아 놓은 것은 앞부분에서 보았는데 이처럼 일급 함수는 함수 자체를 변수에 심을 수 있는 특징이 있습니다
함수를 인자로 전달
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
이 함수는 하나의 인자를 받아서 특정 문자열에 넘어오는 인자를 포함해서 주는 함수입니다
*/
function greeting(name){
return "Hello, " + name + "!";
}
/*
이 함수는 인자를 2개를 받는데 두개중 첫번째 인자는 다시 한번 인자로 받은 함수를 호출하게 되는데 이때 2번째로 넘어오는 인자를 파라미터로 담아서 호출합니다
*/
function processGreeting(processFunction, name) {
return processFunction(name);
}
function clickEvent(){
alert('자바 스크립트 공부 Click');
console.log(processGreeting(greeting, "time"));
}
이것이 일급 함수의 특징 중 첫 번째 함수의 인자로 들어갈 수 있는 것이 첫 번째 특징입니다 이때는 함수 호출식 () 을 쓰는 게 아니라 변수처럼 파라미터를 받고 그 파라미터에 할당된 함수를 넣어서 호출하게 됩니다
함수를 인자로 전달 다른 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function applyFunctiontoElement(array , func){
return array.map(x => func(x));
}
function double(x){
return x * 2
}
function toUpperCase(x){
return x.toUpperCase();
}
function clickEvent(){
const numbers = [1 , 2, 3, 4, 5, 6];
const alpahbet = ['a' , 'b' , 'c' , 'd' , 'e' , 'f'];
console.log(applyFunctiontoElement(numbers , double));
console.log(applyFunctiontoElement(alpahbet , toUpperCase));
}
이번엔 다른 예제를 보게 되면 applyFunctiontoElement 2개의 인자를 받는데 첫 번째 인자는 배열이고 두 번째 인자는 함수를 받을 것이다 그리고 이 함수를 호출하면 map 패턴에 맞는 정말 새로운 배열을 만들어서 return 할 것이다 그러면 double를 호출하게 되면 값이 2배 이상인 새로운 배열을 호출하게 되고 그리고 toUpperCase를 담아서 호출하게 되면 이때는 소문자 애들을 대문자로 바꾼 배열을 받아보게 됩니다
함수 반환
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function calualateArea(x){
return function(width , heigth){
return x * width * heigth;
}
}
function clickEvent(){
const calualateAreaOfTriangle = calualateArea(0.5);
const calualateAreaOfSquare = calualateArea(1);
console.log(calualateAreaOfTriangle(10 , 5))
console.log(calualateAreaOfSquare(10 , 5))
alert('자바 스크립트 공부 Click');
}
일급 함수의 특징 중 하나는 함수를 반환한다는 것이다 예를 들어서 위와 같은데 지금 보면 calualateArea는 인자 하나를 받고 함수를 return 하는 모습을 볼 수 있습니다 이때 return 되는 함수는 인자 2개를 받고 앞의 앞의 인자를 포함해서 총 3개의 값을 곱한 것을 return 하게 됩니다
1
2
3
4
const calualateAreaOfTriangle = calualateArea(0.5);
const calualateAreaOfSquare = calualateArea(1);
이 둘은 지금 calualateArea() 호출하면서 첫번쨰 인자만 받아서 각 변수에 할당을 하고 있습니다 그러면 지금 이 변수들의 상태는 이런 형태입니다
const calualateAreaOfTriangle = (a , b) => {return x * width , * heigth} 이때 중요한 로직이 하나 있는데 지금 보면 인자는 a , b 만 받지만 x 까지 같이 곱하고 있는 모습을 볼 수 있습니다
이런 형태는 클로저라는 개념인데 이 클로저는 다음에 한번 자세히 다루는 것으로 하고 클로저란 함수가 선언될 당시 상태를 기억하고 그 변수에 접근하는 것을 말하는데 그러면 이때 함수가 생성된 원본은 첫 번째 파라미터 x가 존재하는 것으로 이때 x는 현재 스코프 내에서 포함이 되어서 각자 선언된 값을 가지고 있는 상태입니다 그래서 지금 0.5를 보관을 하고 있는 것입니다 이런 형태가 바로 일급 함수의 특징 중 함수를 반환하는 특징입니다