๐พ ๊ณ ์ฐจํจ์(higher order function)๋?
๊ณ ์ฐจ ํจ์๋ โ ํจ์๋ฅผ ์ ๋ฌ์ธ์(argument)๋ก ๋ฐ์ ์ ์๊ณ , โก ํจ์๋ฅผ ๋ฆฌํดํ ์ ์๋ ํจ์์ด๋ค.
โ๏ธ 1. ๋ค๋ฅธ ํจ์๋ฅผ ์ธ์๋ก ๋ฐ๋ ๊ฒฝ์ฐ
๋ค๋ฅธ ํจ์(caller)์ ์ ๋ฌ์ธ์(argument)๋ก ์ ๋ฌ๋๋ ํจ์๋ฅผ ์ฝ๋ฐฑํจ์๋ผ๊ณ ํ๋ค. ์ฝ๋ฐฑํจ์๋ ์ฃผ๋ก ์ด๋ค ์์ ์ด ์๋ฃ๋์์ ๋ ํธ์ถํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
์ฝ๋ฐฑ ํจ์๋ฅผ ์ ๋ฌ๋ฐ์ ๊ณ ์ฐจ ํจ์(caller)๋, ํจ์ ๋ด๋ถ์์ ์ด ์ฝ๋ฐฑ ํจ์๋ฅผ ํธ์ถ(invoke)ํ ์ ์๊ณ , ์กฐ๊ฑด์ ๋ฐ๋ผ ์ฝ๋ฐฑ ํจ์์ ์คํ ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ ์๋ ์๋ค. ์์ ํธ์ถํ์ง ์์ ์๋ ์๊ณ , ์ฌ๋ฌ ๋ฒ ์คํํ ์๋ ์๋ค.
function double(num) {
return num * 2;
}
// doubleNum์ ๋ค๋ฅธ ํจ์๋ฅผ ์ธ์๋ก ๋ฐ๋ ๊ณ ์ฐจ ํจ์
// doubleNum์ ์ฒซ ๋ฒ์งธ ์ธ์ func์ ํจ์๊ฐ ๋ค์ด์ฌ ๊ฒฝ์ฐ ํจ์ func๋ ํจ์ doubleNum์ ์ฝ๋ฐฑ ํจ์
function doubleNum(func, num) {
return func(num);
}
// ํจ์ double์ ํจ์ doubleNum์ ์ฝ๋ฐฑ ํจ์
console.log( doubleNum(double, 4) )
โ๏ธ 2. ํจ์๋ฅผ ๋ฆฌํดํ ์ ์๋ ํจ์
‘ํจ์๋ฅผ ๋ฆฌํดํ๋ ํจ์'๋ ์ด๋ฅผ ๊ณ ์ํด ๋ธ ๋ ผ๋ฆฌํ์ ํ์ค์ผ ์ปค๋ฆฌ(Haskell Curry)์ ์ด๋ฆ์ ๋ฐ ์ปค๋ง ํจ์๋ผ๊ณ ํ๋ค. ๋ฐ๋ก ์ปค๋ง ํจ์๋ผ๋ ์ฉ์ด๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์๋, ๊ณ ์ฐจ ํจ์๋ผ๋ ์ฉ์ด๋ฅผ 'ํจ์๋ฅผ ์ ๋ฌ์ธ์๋ก ๋ฐ๋ ํจ์'์๋ง ํ์ ํด ์ฌ์ฉํ๊ธฐ๋ ํ๋ค. ๊ทธ๋ฌ๋ ์ ํํ๊ฒ ๊ตฌ๋ถํ์๋ฉด, ๊ณ ์ฐจ ํจ์๊ฐ ์ปค๋ง ํจ์๋ฅผ ํฌํจํ๋ค.
// adder๋ ๋ค๋ฅธ ํจ์๋ฅผ ๋ฆฌํดํ๋ ๊ณ ์ฐจ ํจ์
/* adder๋ ์ธ์ ํ ๊ฐ๋ฅผ ์
๋ ฅ๋ฐ์์ ํจ์(์ต๋ช
ํจ์)๋ฅผ ๋ฆฌํดํ๊ณ ,
๋ฆฌํด๋๋ ์ต๋ช
ํจ์๋ ์ธ์ ํ ๊ฐ๋ฅผ ๋ฐ์์ added์ ๋ํ ๊ฐ์ ๋ฆฌํด */
function adder(added) {
return function (num) {
return num + added;
};
}
console.log( adder(5)(3) ); // 8
const add3 = adder(3);
console.log( add3(2) ); // 5
โ๏ธ 3. ํจ์๋ฅผ ์ธ์๋ก ๋ฐ๊ณ , ํจ์๋ฅผ ๋ฆฌํดํ๋ ํจ์
// double์ ํจ์ doubleAdder์ ์ฝ๋ฐฑ์ผ๋ก ์ ๋ฌ
function double(num) {
return num * 2;
}
// doubleAdder๋ ๊ณ ์ฐจ ํจ์
// doubleAdder์ ํจ์ func๋ doubleAdder์ ์ฝ๋ฐฑ ํจ์
function doubleAdder(added, func) {
const doubled = func(added);
return function (num) {
return num + doubled;
};
}
// doubleAdder(5, double)๋ ํจ์์ด๋ฏ๋ก ํจ์ ํธ์ถ ๊ธฐํธ '()'๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
console.log( doubleAdder(5, double)(3) ) // 13
// doubleAdder๊ฐ ๋ฆฌํดํ๋ ํจ์๋ฅผ ๋ณ์์ ์ ์ฅํ ์ ์๋ค. (์ผ๊ธ ๊ฐ์ฒด)
const addTwice3 = doubleAdder(3, double);
console.log( addTwice3(2) ) // 8
๐พ ๋ด์ฅ๊ณ ์ฐจํจ์
์๋ฐ์คํฌ๋ฆฝํธ์๋ ๋ค์ํ ๋ด์ฅ ๊ณ ์ฐจ ํจ์๊ฐ ์์ผ๋ฉฐ, ๋ด์ฅ ๊ณ ์ฐจ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝ๋๋ฅผ ๊ฐ๊ฒฐํ๊ณ ์ ์ฐํ๊ฒ ์์ฑํ ์ ์๋ค. ๋ํ์ ์ธ ๊ณ ์ฐจ ํจ์ ์ค์๋ ๋ฐฐ์ด ๋ฉ์๋๋ค ์ค ์ผ๋ถ๊ฐ ์๋ค.
ex. map
filter
reduce
forEach
sort
...
๐พ ๊ณ ์ฐจํจ์์ ์ถ์ํ
• ์ถ์ํ(abstraction) : ๋ณต์กํ ์ด๋ค ๊ฒ์ ์์ถํด์ ํต์ฌ๋ง ์ถ์ถํ ์ํ๋ก ๋ง๋๋ ๊ฒ.
ํ๋ก๊ทธ๋จ์ ์์ฑํ ๋, ๋ฐ๋ณตํด์ ์ฌ์ฉํ๋ ๋ก์ง์ ๋ณ๋์ ํจ์๋ก ์์ฑํ๋ ๊ฒ๋ ์ถ์ํ์ ์ฌ๋ก์ด๋ค. ์ถ์ํ์ ๊ด์ ์์ ํจ์๋ฅผ ๋ฐ๋ผ๋ณด๋ฉด, ํจ์๋ ์ฌ๊ณ (thought)๋๋ ๋ ผ๋ฆฌ(logic)์ ๋ฌถ์์ด๋ค. ์ถ์ํ๋ฅผ ์ด์ฉํ๋ฉด ๋ณต์กํ ๋ก์ง์ ์ ๊ฒฝ ์ฐ์ง ์์๋ ํจ์จ์ ์ผ๋ก ๊ฐ์ ์ป์ ์ ์๋ค.
ํจ์๋ฅผ ํตํด ์ป์ ์ถ์ํ๋ฅผ ํ ๋จ๊ณ ๋ ๋์ธ ๊ฒ์ด ๊ณ ์ฐจ ํจ์์ด๋ฉฐ, ๊ณ ์ฐจ ํจ์๋ฅผ ํตํด ๋ณด๋ค ๋์ ์์ค(higher order)์์ ์๊ฐํ ์ ์๋ค.
โ๏ธ ๊ณต๋ถํ๋ฉฐ ์ ๋ฆฌํ ๋ด์ฉ์ ๋๋ค. ์๋ชป๋ ์ ๋ณด๋ ๋ ๊ณต์ ํ ๋ด์ฉ์ด ์์ผ๋ฉด ๋๊ธ๋ก ์๋ ค์ฃผ์ธ์!
์ฝ์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค ๐
'Frontend Dev > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๊ฐ๋จํ๊ฒ ์์๋ณด๋ Fetch API (0) | 2023.05.18 |
---|---|
ES8, ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํ async / await ๊ธฐ๋ณธ ๋ฌธ๋ฒ (0) | 2023.05.17 |
ES6, ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํ ํ๋ก๋ฏธ์ค (Promise) (0) | 2023.05.17 |
์๋ฐ์คํฌ๋ฆฝํธ์ ํ๋กํ ํ์ (prototype) (0) | 2023.05.15 |
ES6, ์๋ฐ์คํฌ๋ฆฝํธ์ ํด๋์ค(class) ๊ธฐ๋ณธ ๋ฌธ๋ฒ๊ณผ ํด๋์ค ์์ (0) | 2023.05.14 |