JavaScript 고차 함수

Javascript 코딩은 언어에 대해 더 많이 배우면 매일 점점 더 쉬워집니다. 저는 개인적으로 코딩 여정에서 이것을 경험했습니다. 나는 일반적인 for 및 while 루프로 시작했습니다. Javascript 고차 함수를 발견하기 전까지는 그렇습니다. 고차 함수는 다른 함수를 인수로 취하거나 결과로 함수를 반환하는 함수입니다. JavaScript의 고차 함수는 실제로 이해하기 매우 쉽습니다. 또한 코드를 작성하기 위한 깨끗하고 간단한 구문을 제공하므로 훨씬 적은 코드로 더 많은 것을 달성하는 데 도움이 됩니다.

이 기사에서는 일반적으로 사용되는 몇 가지 고차 함수에 대해 설명합니다. for, while 루프 및 if 문을 사용하여 구현을 보여주고 고차 함수로 이를 단순화하려고 합니다.

const  footballers=[
{name:'Brian',position:'midfield',number:22},{name:'james',position:'midfield',number:44},{name:'Bruno',position:'keeper',number:1},{name:'Ramos',position:'defender',number:2},{name:'martinez',position:'forward',number:7},{name:'ozil',position:'midfield',number:10},{name:'emery',position:'striker',number:9},{name:'John',position:'defender',number:5},{name:'evra',position:'defender',number:3},{name:'sane',position:'forward',number:13},{name:'sandro',position:'midfield',number:14},{name:'Emerik',position:'keeper',number:100},{name:'brent',position:'midfield',number:22}
]

나는 가지고 놀기 위해 위에 몇 가지 데이터를 추가했습니다. 첫 번째 예에서 모든 이름의 목록을 출력하고 이름이라는 새 배열에 저장해 보겠습니다.

1. 각

let names=[]

for (let i=0;i<footballers.length;i++){
names.push(footballers[i].name)
}
console.log(names)
//name array includes
//[
//     'Brian',    'james',
//     'Bruno',    'Ramos',
//     'martinez', 'ozil',
//     'emery',    'John',
//     'evra',     'sane',
//     'sandro',   'Emerik',
//     'brent'
//   ]

위의 결과는 아래와 같이 forEach 루프를 한 줄로 사용하여 동일한 작업을 수행할 수 있습니다.

let names=[]

 footballers.forEach(footballer => names.push(footballer.name))
//names array returned will have
//[
//     'Brian',    'james',
//     'Bruno',    'Ramos',
//     'martinez', 'ozil',
//     'emery',    'John',
//     'evra',     'sane',
//     'sandro',   'Emerik',
//     'brent'
//   ]

2. 필터

연령 배열이 있고 필터링하고 13-20세 사이의 연령만 포함하고 싶다고 가정합니다.

const ages =[20,15,14,12,8,9,3,21,40,51,35,17,19,17,12,18]
const teen =[]
for(let i=0;i<ages.length;i++){
    if(ages[i]> 13 && ages[i] <= 20){
        teen.push(ages[i])
    }

}
console.log(teen)
//teen array after loop
// [
//     20, 15, 14, 17,
//     19, 17, 18
//   ]

그러나 필터 기능을 사용할 때 코드는 다음과 같습니다.

let teen = ages.filter(age =>{
    if(age >=13 && age<= 20 ){
        return true
    }
})
console.log(teen)
//teen constant
// [
//     20, 15, 14, 17,
//     19, 17, 18
//   ]

//another example("return forwards only")
let forwards =footballers.filter(footballer => footballer.position === 'forward')
// forwards
// [
//     { name: 'martinez', position: 'forward', number: 7 },
//     { name: 'sane', position: 'forward', number: 13 }
//   ]


//another example("return nonMidfielders only")

let nonMidfielder =footballers.filter(footballer => footballer.position !== 'midfield')

// [
//     { name: 'Bruno', position: 'keeper', number: 1 },
//     { name: 'Ramos', position: 'defender', number: 2 },
//     { name: 'martinez', position: 'forward', number: 7 },
//     { name: 'emery', position: 'forward', number: 9 },
//     { name: 'John', position: 'defender', number: 5 },
//     { name: 'evra', position: 'defender', number: 3 },
//     { name: 'sane', position: 'forward', number: 13 },
//     { name: 'Emerik', position: 'keeper', number: 100 }
//   ]

필터 기능을 사용하는 두 번째 구현에서는 새 배열을 만들고 푸시할 필요가 없습니다.

3. 지도

Map 함수는 일대일 관계를 제공하므로 이 관계를 사용하여 원하는 방법으로 데이터를 변경하거나 조작할 수 있습니다.

//using a for loop
let positions =[]
for(let i = 0;i<footballers.length;i++){
    positions.push(footballers[i].position)


}


// positions array 
//[
//     'midfield', 'midfield',
//     'keeper',   'defender',
//     'forward',  'midfield',
//     'forward',  'defender',
//     'defender', 'forward',
//     'midfield', 'keeper',
//     'midfield'
//   ]

//using a map function
let positions = footballers.map(footballer => footballer.position)

// positions array 
//[
//     'midfield', 'midfield',
//     'keeper',   'defender',
//     'forward',  'midfield',
//     'forward',  'defender',
//     'defender', 'forward',
//     'midfield', 'keeper',
//     'midfield'
//   ]


console.log(positions)

다시 for 루프를 사용할 때 위치 배열을 먼저 생성한 다음 루프 내부에서 모든 반복 후에 배열로 푸시해야 합니다. 그러나 지도 기능을 사용할 때 지도 기능의 결과는 일정한 위치로 설정됩니다. 맵 기능을 사용하면 더 적은 수의 코드 행과 더 적은 단계로 동일한 결과를 얻을 수 있습니다. 즉, 새 배열을 만들고 푸시할 필요가 없습니다. 선택적 인덱스 인수를 두 번째 인수로 map 함수에 전달할 수도 있습니다.

let positions = footballers.map((footballer,index) => `${index}: ${footballer.position}`)

 // the following is logged on the console with the index on the left
//  [0: midfield
// 1: midfield
// 2: keeper
// 3: defender
// 4: forward
// 5: midfield
// 6: forward
// 7: defender
// 8: defender
// 9: forward
// 10: midfield
// 11: keeper
// 12: midfield]

4. 정렬

정렬 기능은 단순히 데이터를 가장 낮은 것에서 가장 큰 것 또는 가장 큰 것에서 가장 작은 것으로 정렬합니다. 배열을 정렬하기 위해 비교를 위해 위아래로 이동하는 두 개의 위치 인수가 필요합니다.

const sortedFootballers =footballers.sort((a,b) =>(a.number >b.number? 1 :-1))


// sorted by number from smallest to highest
//[
//     { name: 'Bruno', position: 'keeper', number: 1 },
//     { name: 'Ramos', position: 'defender', number: 2 },
//     { name: 'evra', position: 'defender', number: 3 },
//     { name: 'John', position: 'defender', number: 5 },
//     { name: 'martinez', position: 'forward', number: 7 },
//     { name: 'emery', position: 'forward', number: 9 },
//     { name: 'ozil', position: 'midfield', number: 10 },
//     { name: 'sane', position: 'forward', number: 13 },
//     { name: 'sandro', position: 'midfield', number: 14 },
//     { name: 'brent', position: 'midfield', number: 22 },
//     { name: 'Brian', position: 'midfield', number: 22 },
//     { name: 'james', position: 'midfield', number: 44 },
//     { name: 'Emerik', position: 'keeper', number: 100 }
//   ]


//other examples


let sortedAges =ages.sort((a,b)=> a-b)

//arranged from smallest to highest
// [
//     3,  8,  9, 12, 12, 14,
//    15, 17, 17, 18, 19, 20,
//    21, 35, 40, 51
//  ]

 sortedAges =ages.sort((a,b)=> b-a)

//arranged from highest to smallest
//  [
//     51, 40, 35, 21, 20, 19,
//     18, 17, 17, 15, 14, 12,
//     12,  9,  8,  3
//   ]


console.log(sortedAges)

5. 감소

reduce 함수는 두 개의 위치 인수를 취합니다. 첫 번째는 누산기이고 다른 하나는 반복된 값이고 누산된 값을 반환합니다.

// the total of all the ages array
//using a for loop 
let total = 0
for(let i=0;i<ages.length;i++){
    total+=ages[i]
}
console.log(total)
//total
// 311

//using reduce 
// last argument is zero ("the starting value of total")

let agesTotal = ages.reduce((total,age)=> total+age,0)

console.log(agesTotal)
// 311

let names = footballers.reduce((start,footballer) => start + " " + footballer.name ,"")

console.log(names)
// names combined , this is to show reduce can also be used on strings
// Bruno Ramos evra John martinez emery ozil sane sandro brent Brian james Emerik

결론
JavaScript Higher Order 함수와 사용법에 대한 통찰력을 얻는 데 도움이 되었기를 바랍니다.