JS) 내장고차함수

백준우·2021년 10월 11일
0

JavaScript & TypeScript

목록 보기
10/15
post-thumbnail

1. 내장 고차함수

1.1 내장고차함수란

2. 3가지 JS array method

2.1 map
2.2 reduce
2.3 filter
2.4 forEach
2.5 sort
2.6 some
2.7 every
2.8 find
2.9 findIndex

1. 내장 고차함수

1.1 내장고차함수란

자바스크립트에는 기본적으로 내장된 고차함수가 여럿 있습니다.
그중에서 배열 메소드들 중 일부가 대표적인 고차함수에 해당합니다.

<function 함수형태>
  배열.method(function(변수){
  return 조건 })

<화살표 함수형태>
  배열.method((변수) => 조건))

데이터인 배열의 활용은 앞으로 많이 쓰일것으로 보인다. 따라서 이러한 배열을 활용한 method를 하나씩 학습하여 필요한 적재적소에 쓸수 있도록 해보자

2. 3가지 JS array method

2.1 map

  • map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
const array1 = [1, 4, 9, 16]
const map1 = array1.map(x => x * 2);

console.log(map1); // [2, 8, 18, 32] 각 index에 2가 곱해졌다.

const array2= [
  {name: 'baek',age: 26},
  {name: 'kim', age:30},
  {name: 'Pakr', age:23}
				]
map2 = array2.map(function(x){return x.name})
console.log(map2) //각 index객체의 key(name)값을 호출한다.

2.2 reduce

  • reduce() 메서드는 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용합니다.

reduce함수는 네 개의 인자를 가집니다.
1.누산기 (acc)
2.현재 값 (cur)
3.현재 인덱스 (idx)
4.원본 배열 (src)
reduce 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

const array = [0, 1, 2, 3, 4]
const result = array.reduce(function(acc, cur) {
  return acc + cur;});
result // 10
호출순서acccur반환값
1011
2123
3336
46410
const array = [0, 1, 2, 3, 4]
const result = array.reduce(function(acc, cur) {
  return acc + cur;},10); //초기값으로 10을 주었을 경우 
result // 20
호출순서acccur반환값
110111
211213
313316
416420

객체를 활용한 예시)

const array2= [
  {name: 'baek',age: 26},
  {name: 'kim', age:30},
  {name: 'Pakr', age:23}
				]
array2.reduce(function(el,ele){
return el + ele.age},0) // 0부터 각 객체의 age값을 전부 더한다.

2.3 filter

  • filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);//글자크기가 6이하면 버린다.

console.log(result); //["exuberant", "destruction", "present"]

각 요소를 함수를 통해 시험하고 true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.

const array2= [
  {name: 'baek',age: 26,gender:'male'},
  {name: 'kim', age:30,gender:'female'},
  {name: 'Pakr', age:23,gender:'male'}
				]
array2.filter((gender) => gender.gender === 'male')//gender의 값이 male이 아니면 버린다.
//{name: 'baek', age: 26, gender: 'male'}
//{name: 'Pakr', age: 23, gender: 'male'

2.4 forEach

  • forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.
let words = ['one', 'two', 'three', 'four']
words.forEach(function(word) {
  console.log(word)
  if (word === 'two') {
    words.shift()
  }
})

1. 0번째 index가 실행된다. 
2. 1번째 index가 if문을 실행시킨다.
3. words의 0번째 index를 지워 words를 ['two', 'three', 'four']로 만든다.
4. words의 index가 한자리씩 당겨진다.
5. 2번째 index자리에 'four'이 되어 console에 출력된다.

Tip) forEach와 map의 차이점

각각의 index들을 호출하여 callback함수를 적용하는 두 메서드들은 진행되는 방법은 비슷하나 차이점이 존재한다.

1. Map
!)새로운 배열(Array)을 리턴한다.
!!) 기존배열을 이용해 callback함수를 인자로받아 각 요소에 대해 실행한 값을 반환한다.

2. forEach
!) callback함수를 인자로 받아서 배열의 각 욧에 콜백함수를 실행한다. 값을 return하지않는다.
!!) 제공된 함수로 Array요소를 호출한다. 이 callback은 Array를 변경할수 있으며, forEach는 구문 밖으로 return 값을 받지 못한다.

결론)
1. map은 배열을 forEach는 undefined를 return 한다.
2. forEach는 Array를 변경할수 있으나 map은 안된다.

2.5 sort

  • sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.
    이 메서드는 두개의 변수를 입력받아 정렬을 합니다.

(Num1,Num2를 변수로 받은경우)
1)두개의 변수를 사용해 return 하는값이 0보다 작을 경우, Num1이 Num2보다 앞에 위치
2)두개의 변수를 사용해 return 하는값이 0보다 클경우 , Num2가 Num1보다 앞에 위치
3)두개의 변수를 사용해 return 하는 값이 0일경우 , 현재위치 유지 

const arr1 = [2, 1, 3];
arr1.sort(); // [1,2,3]

<오름차순 정렬>
const arr = [2, 1, 3, 4];
arr.sort(function(a, b)  {
  if(a > b) return 1;
  if(a === b) return 0;
  if(a < b) return -1;
}); //[1,2,3,4]

arr.sort(function(a, b)  {
  return a - b;
});//[1,2,3,4]

<내림차순 정렬>
arr.sort(function(a, b) {
  if(a < b) return 1;
  if(a > b) return -1;
  if(a === b) return 0;
});//[4,3,2,1]

2.6 some

  • some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다.
    해당하는 요소를 발견한 경우 some은 즉시 true를 반환합니다. 그렇지 않으면, 즉 모든 값에서 거짓을 반환하면 false를 반환합니다.
function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

2.7 every

  • every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. Boolean 값을 반환합니다. 해당하는 요소를 발견한 경우 every는 즉시 false를 반환합니다. 그렇지 않으면, 즉 모든 값에서 참을 반환하면 true를 반환합니다.
function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // false

Tip) some과 every 차이점

각각의 index들을 호출하여 callback함수를 적용후 Boolean값을 호출합니다.

1. some
!) true가 나올때까지 배열을 전부 확인합니다.
!!) 빈배열일 경우 false를 출력합니다.


2. every
!) false가 나올때까지 배열을 전부 확인합니다.
!!) 빈배열일 경우 true를 출력합니다.

결론)
1. 전체배열에 대한 확인 필요할 경우는 every를 찾고자하는 값이 있을경우는 some을 활용

2.8 find

  • find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
const array2= [
  {name: 'baek',age: 26},
  {name: 'kim', age:30},
  {name: 'Pakr', age:23}
				]
array2.find(function(el){
return el.age === 30 }) // {name: 'kim', age:30}

2.9 findIndex

  • findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.
const array2= [
  {name: 'baek',age: 26},
  {name: 'kim', age:30},
  {name: 'Pakr', age:23}
				]
array2.findIndex(function(el){
return el.age === 30 }) // 1
profile
백준우
이게 되네?
이전 포스트

JS) 얕은 복사, 깊은 복사

다음 포스트

JS) stack,Queue

0개의 댓글