[dream coding] 배열의 고차함수 11강 TIL

sohyun·2022년 7월 1일

고차함수 콜백함수

드림코딩 강의 정리

목록 보기

10/20

배열 고차함수

고차함수란 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수

✏️ sort( )

배열의 요소를 적절하게 정렬
원본배열 직접 변경하여 정렬된 배열 반환
숫자 정렬 시 Unicode 코드 포인트 순서에 따른다
`ex) 1, 10,2,25..

const fruits = ['Banana', 'Orange', 'Apple'];

// ascending(오름차순)
fruits.sort();
//// 알파벳순으로 정렬됨
console.log(fruits);  // [ 'Apple', 'Banana', 'Orange' ] 
// descending(내림차순)
fruits.reverse();
console.log(fruits); // [ 'Orange', 'Banana', 'Apple' ]

//숫자 주의 ‼️‼️
const points = [40, 100, 1, 5, 2, 25, 10];

points.sort();
console.log(points); // [ 1, 10, 100, 2, 25, 40, 5 ]

숫자 배열 오름차순 정렬
- arr.sort((a,b)=>{a -b ;});
- 비교 함수의 반환값이 0보다 작은 경우, a를 우선하여 정렬
숫자 배열 내림차순 정렬
- arr.sort((a,b)=>{b -a ;});
- 비교 함수의 반환값이 0보다 큰 경우, b를 우선하여 정렬

const numbers = [0, 5, 4, 2, 1, 10];
numbers.sort();
console.log(numbers); //[ 0, 1, 10, 2, 4, 5 ]
numbers.sort((a, b) => a - b);
console.log(numbers); //[ 0, 1, 2, 4, 5, 10 ]

🔒 forEach( )

for문 대신 사용 가능 , 가독성이 좋으므로!
단 forEach는 break 문을 사용할 수 없다
즉, 배열의 모든 요소 순회 시 중간에 순회를 중단 할 수 없음
배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백함수를 실행한다.
콜백함수의 매개변수를 통해 배열 요소의 값, 요소인덱스, forEach메서드를 호출한 배열, 즉 this를 전달 받음
forEach 메서드는 원본 배열을 변경하지 않고
콜백함수는 원본 배열을 변경할 수 있음

const numbers = [1, 3, 5, 7, 9];
let total = 0;
numbers.forEach(function (item, index, self) {
 
  console.log(`numbers[${index}] = ${item}`);
/* numbers[0] = 1
numbers[1] = 3
numbers[2] = 5
numbers[3] = 7
numbers[4] = 9 */
  total += item;
});

console.log(total); // 25
console.log(numbers); // [ 1, 3, 5, 7, 9 ]

🔒 map( )

배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수의 반환값으로 새로운 배열 생성하여 반환
forEach()는 요소 값을 참조하여 무언가를 하기 위한 함수이며,
map()은 배열을 순회하며 요소값을 다른 값으로 맵핑하기 위한 함수

const nums = [1, 2, 3, 4, 5];
result = nums.map((item) => item * 2);
console.log(result);  //[ 2, 4, 6, 8, 10 ]
result = nums.map((item) => {
  if (item % 2 === 0) {
    return item * 2;
  } else {
    return item;
  }
});
console.log(result);  //[ 1, 4, 3, 8, 5 ]

🔒 flatMap( )

중첩된 배열을 평탄화하여 새로운 배열 반환

result = nums.map((item) => [1, 2]);
console.log(result);  //[ [ 1, 2 ], [ 1, 2 ], [ 1, 2 ], [ 1, 2 ], [ 1, 2 ] ]

// Flatmap: 중첩된 배열을 쫘악 펴서 새로운 배열로!
result = nums.flatMap((item) => [1, 2]);
console.log(result);
// [
//   1, 2, 1, 2, 1,
//   2, 1, 2, 1, 2
// ]

let result2 = ['dream', 'coding'].flatMap((text) => text.split(''));
console.log(result2);
// [
//   'd', 'r', 'e', 'a',
//   'm', 'c', 'o', 'd',
//   'i', 'n', 'g'
// ]
//만약 flatMap이 아닌 map 이라면?
//[ [ 'd', 'r', 'e', 'a', 'm' ], [ 'c', 'o', 'd', 'i', 'n', 'g' ] ]

🔒 filter( )

if문을 대체 가능
배열을 순회하며 인자로 주어진 콜백함수의 실행결과가 true인 배열의 요소 값만 추출 후 새로운 배열 반환
특정 케이스만 필터링 조건으로 추출하여 만들고싶을 때

const item1 = { name: '🥛', price: 2 };
const item2 = { name: '🍪', price: 3 };
const item3 = { name: '🍙', price: 1 };
const products = [item1, item2, item3];

const result = products.filter((item) => item.name === '🍪');
console.log(result);  
//[{ name: '🍪', price: 3 } ]

🔒 reduce( )

배열을 순회하며 이전 콜백함수 실행 반환값을 전달하여
콜백함수를 실행하고 그 결과를 반환

const arr = [1, 2, 3, 4, 5];

/*
previousValue: 이전 콜백의 반환값
currentValue : 배열 요소의 값
currentIndex : 인덱스
array        : 메소드를 호출한 배열, 즉 this
*/
// 합산
const sum = arr.reduce(function (previousValue, currentValue, currentIndex, self) {
  console.log(previousValue + '+' + currentValue + '=' + (previousValue + currentValue));
  return previousValue + currentValue; // 결과는 다음 콜백의 첫번째 인자로 전달된다
});

console.log(sum); // 15: 1~5까지의 합
/*
1: 1+2=3
2: 3+3=6
3: 6+4=10
4: 10+5=15
15
*/

🔒 some( )

배열 내 일부 요소가 콜백함수 테스트를 통과하는지 확인
그 결과를 boolean으로 반환

// 배열 내 요소 중 10보다 큰 값이 1개 이상 존재하는지 확인
let res = [2, 5, 8, 1, 4].some(function (item) {
  return item > 10;
});
console.log(res); // false

res = [12, 5, 8, 1, 4].some(function (item) {
  return item > 10;
});
console.log(res); // true

// 배열 내 요소 중 특정 값이 1개 이상 존재하는지 확인
res = ['apple', 'banana', 'mango'].some(function (item) {
  return item === 'banana';
});
console.log(res); // true

🔒 every( )

배열 내 모든 요소가 콜백함수 테스트를 통과하는지 확인
그 결과를 boolean으로 반환

// 배열 내 모든 요소가 10보다 큰 값인지 확인
let res = [21, 15, 89, 1, 44].every(function (item) {
  return item > 10;
});
console.log(res); // false

res = [21, 15, 89, 100, 44].every(function (item) {
  return item > 10;
});
console.log(res); // true

🔒 find( )

배열을 순회하며 인자로 주어진 콜백함수를 실행하여 그 결과가 참인 첫번째 요소만 반환
filter()는 true인 배열 요소의 값만을 추출한 새로운 배열이며,
find()는 true인 첫 번째 요소만 반환하므로 결과값은 배열이 아닌 해당 요소 값
참인 요소 존재하지 않는다면 undefined 반환

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// 콜백함수를 실행하여 그 결과가 참인 첫번째 요소를 반환한다.
let result = users.find(function (item) {
  return item.id === 2;
});

// Array#find는 배열이 아니라 요소를 반환한다.
console.log(result); // { id: 2, name: 'Kim' }

// Array#filter는 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환한다.
result = users.filter(function (item) {
  return item.id === 2;
});

console.log(result); // [ { id: 2, name: 'Kim' },{ id: 2, name: 'Choi' } ]

🔒 findIndex( )

배열을 순회하며 콜백함수로 실행한 결과가 참인 첫 번째 요소의 인덱스 반환
존재하지 않는다면 -1 반환

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// 콜백함수를 실행하여 그 결과가 참인 첫번째 요소의 인덱스를 반환한다.
function predicate(key, value) {
  return function (item) {
    return item[key] === value;
  };
}

// id가 2인 요소의 인덱스
let index = users.findIndex(predicate('id', 2));
console.log(index); // 1

// name이 'Park'인 요소의 인덱스
index = users.findIndex(predicate('name', 'Park'));
console.log(index); // 3