자바스크립트는 다양한 웹 브라우저에서 광범위하게 지원되는 프로그래밍 언어로, 초보 개발자가 고려할 수 있는 훌륭한 옵션입니다.
자바스크립트는 다른 여러 최신 프로그래밍 언어와 마찬가지로 더 큰 프로그램 내에서 특정 코드 세그먼트를 캡슐화할 수 있는 기능을 포함하며, 이후 동일한 프로그램 또는 대체 프로그램 내의 다른 지점에서 재사용을 용이하게 합니다. 또한 변수에 함수를 할당하고 인자로 전송할 수 있으며, 본질적으로 다른 값과 유사하게 취급할 수 있습니다.
고차 함수란 무엇인가요?
고차 함수는 다른 함수를 인수로 받거나 반환하여 다른 함수에 대해 연산하는 함수로 정의할 수 있습니다. 이러한 함수의 활용은 함수형 프로그래밍 접근법의 필수적인 부분을 형성합니다. 그러나 이러한 함수를 이해하는 것은 특히 초보 자바스크립트 개발자에게는 어려울 수 있습니다.
function transform(fn) {
let resultArray = [];
return function (array) {
for (let i = 0; i < array.length; i++) {
resultArray.push(fn(array[i]))
}
return resultArray
}
}
제공된 코드는 `fn` 함수의 함수 변환을 구성하며, 이 작업에는 함수 매개변수를 받아들이고 입력 배열을 수신하는 이름 없는 함수를 산출하는 작업이 포함됩니다.
`transform` 함수의 목적은 배열 내의 구성 요소를 변경하는 것입니다. 처음에 이 코드는 `resultArray`라는 변수를 설정하고 그 값으로 빈 배열을 할당합니다.
transform 함수는 배열 내의 각 요소를 반복하는 익명 함수를 사용하고, 이후 해당 요소를 fn 함수에 전달하여 처리하고 결과값을 resultArray에 추가합니다. 반복이 끝나면 앞서 언급한 익명 함수가 결과 배열을 출력으로 반환합니다.
const function1 = transform((x) => x * 2)
console.log(function1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */
익명 함수를 ƒ로 표시하고, 반환값으로 할당된 변수를 function1이라고 합니다. 제공된 코드 블록은 ƒ가 x의 곱을 나타내도록 지정하며, 여기서 x는 인덱스 i에 있는 배열 내의 요소를 대신합니다.
함수 1은 배열을 인수로 사용하여 호출되며, 이 함수는 콘솔에 기록되는 값을 반환하기 전에 처리합니다.
console.log(transform((x) => x * 2)([ 2, 3, 4, 5, 6 ]))
JavaScript 프로그래밍 언어에는 변환 메서드와 유사한 연산을 수행하는 사전 정의된 고차 함수가 포함되어 있으며, 이 함수는 나중에 자세히 다룰 예정입니다.
자바스크립트 영역 내에서 고차 함수의 작동을 이해할 수 있습니다. 다음 함수를 자세히 살펴보고 그 목적을 추측할 수 있습니다.
function filterAndTransform(fn, arrayToBeFiltered, condition) {
let filteredArray = [];
for (let i = 0; i < arrayToBeFiltered.length; i++) {
if (condition(arrayToBeFiltered[i])) {
let y = transform(fn)([ arrayToBeFiltered[i] ])[0]
filteredArray.push(y)
} else {
filteredArray.push(arrayToBeFiltered[i])
}
}
return filteredArray
}
주어진 코드 블록은 transform() 메서드를 활용하여 특정 요구 사항을 충족하는 배열의 요소 모음에 대해 연산을 수행하는 함수를 설명합니다. 이 함수는 앞서 언급한 단계를 실행하여 사용할 수 있습니다.
filterAndTransform((x) => x * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 2 === 0)
`fn` 및 `condition`. 전자는 입력 배열의 각 요소에 변환을 적용하고, 후자는 입력 값이 짝수인지 여부를 평가하여 그에 따라 `true` 또는 `false`를 반환합니다.
조건이 충족되면 변환 함수가 호출됩니다. 이 접근 방식은 특정 요소의 변환을 허용하므로 배열을 다룰 때 유용할 수 있습니다. 웹 브라우저의 개발자 콘솔에서 실행하면 다음과 같은 출력을 얻어야 합니다:
[ 1, 4, 3, 8, 5 ]
주어진 함수는 특정 요구 사항을 충족하는 요소의 하위 집합에 대해 작동하며, 기준을 충족하지 않는 요소는 무시하고 변경되지 않은 상태로 보존합니다.
자바스크립트의 Array.map() 고차 함수
“map()”과 같은 배열 메서드의 활용은 배열의 조작을 용이하게 하는 고차 함수의 일종입니다. 이는 다음 프로세스를 사용하여 수행할 수 있습니다:
let array = [ 1, 2, 3, 4, 5 ];
let transformedArray = array.map((x) => x * 2);
브라우저 콘솔을 검사하여 ‘transformedArray’에서 상기 변환 메서드를 실행하면, 앞서 ‘transform’ 함수를 활용하여 얻은 것과 유사한 출력을 얻을 수 있을 것으로 예상됩니다.
[ 2, 4, 6, 8, 10 ]
두 개의 매개변수를 가진 `map()` 메서드의 활용은 자바스크립트 배열에서 흔히 볼 수 있는 방식입니다. 초기 매개변수는 배열의 개별 구성 요소를 암시하는 반면, 후속 매개변수는 컬렉션 내에서 해당 위치를 나타냅니다. map()` 함수만 사용하면 `filterAndTransform()` 메서드가 생성하는 것과 동일한 결과를 얻을 수 있습니다. 다음은 이러한 구현의 예입니다.
let array = [ 1, 2, 3, 4, 5 ];
let transformedArray = array.map((x) => x % 2 === 0 ? x * 2 : x);
앞서 언급한 코드 블록에는 현재 요소의 곱과 요소가 짝수인 경우 2를 반환하는 함수가 포함되어 있습니다. 반대로 홀수인 경우 이 함수는 요소의 변경되지 않은 상태를 유지합니다.
통합 매핑 기능을 활용하여 필요한 코드 줄 수를 크게 줄임으로써 오류 발생 가능성을 최소화하면서 보다 우아하고 간소화된 코드를 작성할 수 있습니다.
JavaScript의 Array.filter() 함수
배열에 필터 메서드를 사용하려면 전달되는 함수가 제공하는 반환값이 참 또는 거짓의 이진 진리를 준수해야 합니다.결과적으로 필터 메서드는 부과된 조건에 부합하는 요소로 구성된 배열을 생성합니다. 이는 다음 절차를 구현하여 수행할 수 있습니다.
function checkFirstLetter(word) {
let vowels = "aeiou"
if (vowels.includes(word[0].toLowerCase())) {
return word;
} else {
return;
}
}
let words = [ "Hello", "from", "the", "children", "of", "planet", "Earth" ];
let result = words.filter((x) => checkFirstLetter(x))
위의 코드 블록은 단어 배열을 반복하여 모음으로 시작하는 단어만 선택합니다. 프로그램을 실행하고 결과를 로깅하면 다음과 같은 출력을 얻을 수 있습니다:
[ 'of', 'Earth' ];
JavaScript의 Array.reduce() 함수
감소 함수와 누산기입니다. 전자는 여러 값을 하나로 결합하는 역할을 하고, 후자는 집계 프로세스의 현재 상태를 나타냅니다. 이러한 함수는 컬렉션의 각 요소가 모두 처리될 때까지 적용됩니다. 선택적 세 번째 인수를 제공하여 누적 프로세스의 시드 값을 지정할 수도 있습니다.
이 매개 변수는 함수의 시작 값으로 지정됩니다. 배열 내의 모든 구성 요소의 합계를 계산하려면 이 절차를 따를 수 있습니다:
let a = [ 1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < a.length; i++) {
sum = sum + a[i];
}
console.log(sum);
제공된 코드를 실행하면 `reduce` 함수를 사용하여 배열 요소를 결합할 때 예상되는 값인 “You”가 생성됩니다. ‘reduce’ 연산을 활용하는 다른 방법을 사용할 수도 있습니다.
let a = [ 1, 2, 3, 4, 5 ];
sum = a.reduce((c, n) => c + n);
console.log(sum);
이전 예제와 달리 제공된 코드 블록은 보다 체계적이고 간소화된 접근 방식을 보여줍니다. 감소 함수는 “c”와 “n”이라는 두 개의 매개변수를 허용하며, 여기서 “c”는 현재 요소를 나타내고 “n”은 배열 내의 후속 요소를 나타냅니다.
코드를 실행하는 동안 감속 함수는 배열을 정독하여 현재 요소를 이전 단계에서 도출된 결과에 통합합니다.
고차 함수의 힘
자바스크립트에서 고차 함수는 강력한 힘을 지니고 있으며, 그 활용도는 더욱 높아졌습니다. 이러한 함수는 함수형 프로그래밍에서 없어서는 안 될 필수 요소로, 배열을 손쉽게 필터링, 축소 및 매핑할 수 있게 해줍니다.
최신 고수준 프로그래밍 언어는 개발자가 소프트웨어 개발 중에 보다 모듈화되고 재활용 가능한 코드를 만들 수 있도록 다양한 내장 고차 함수를 제공하는 경우가 많습니다.