#Array 배열고차함수

●Array.prototype.sort

- sort 메서드는 배열의 요소를 정렬한다.

const fruits= ["Banana", "Orange", "Apple"];
fruits.sort();
// [ 'Apple', 'Banana', 'Orange' ]

const fruits = ["바나나", "오렌지", "사과"];
fruits.sort();
// [ '바나나', '사과', '오렌지' ]

- 하지만 sort 메서드는 숫자일 때 문제가 되는데, 숫자도 유니코드 포인트를 따라서 정렬되기 때문이다.

const points = [40, 100, 1, 5, 2, 25, 10];
points.sort();

// 원하는 배열
// [ 1, 2, 5, 10, 25, 40, 100 ]

// 하지만 콘솔 출력값
// [ 1, 10, 100, 2, 25, 40, 5 ]

- 따라서 sort 메서드는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야한다. 비교 함수는 양수나 음수 또는 0을 반환해야한다. 비교 함수의 반환값이 0보다 작으면 비교함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며, 0보다 크면 두 번째 인수를 우선하여 정렬한다.

const points = [40, 100, 1, 5, 2, 25, 10];
points.sort((a,b)=> a-b);
// [ 1,  2,   5, 10, 25, 40, 100 ]

points.sort((a,b)=> b-a);
// [ 100, 40, 25, 10, 5,  2,  1 ]

 

- 객체를 요소로 갖는 배열을 정렬하는 예제는 아래와 같다.

const program = [
  { id: 4, content: "JavaScript" },
  { id: 1, content: "HTML" },
  { id: 2, content: "CSS" },
];

// id를 오름차순으로 정렬하고 싶을 때
program.sort((a, b) => a.id - b.id);
//[
//  { id: 1, content: 'HTML' },
//  { id: 2, content: 'CSS' },
//  { id: 4, content: 'JavaScript' }/
// ]

const program = [
  { id: 4, content: "JavaScript" },
  { id: 1, content: "HTML" },
  { id: 2, content: "CSS" },
];


//content를 오름차순으로 비교하고 싶을 때
// 문자는 - 산술산자로 비교하면 NaN이 나오기 때문에,
// 문자는 비교연산을 사용한다.

function compare(key) {
  return (a, b) => (a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0);
}

program.sort(compare("content"));
//[
//  { id: 2, content: 'CSS' },
//  { id: 1, content: 'HTML' },
//  { id: 4, content: 'JavaScript' }
// ]

 

●Array.prototype.forEach

- forEach는 for문을 돌면서 배열을 꺼내야했던 방식을 대체할 수 있다. forEach는 배열의 요소값, 배열의 인덱스, 배열자체를 순차적으로 받을 수 있다.

[1, 2, 3].forEach((item, idx, arr) => {
  console.log(`요소값 : ${item}`, `인덱스 : ${idx}`, `배열 : ${arr}`);
});


//요소값 : 1 인덱스 : 0 배열 : 1,2,3
//요소값 : 2 인덱스 : 1 배열 : 1,2,3
//요소값 : 3 인덱스 : 2 배열 : 1,2,3

하지만 배열부분이 [ 1, 2, 3 ]이 아니라, 1,2,3으로 반환되고 있기 때문에 JSON포맷으로 변경해주어야한다.

[1, 2, 3].forEach((item, idx, arr) => {
  console.log(
    `요소값 : ${item}`,
    `인덱스 : ${idx}`,
    `배열 : ${JSON.stringify(arr)}`
  );
});

//요소값 : 1 인덱스 : 0 배열 : [1,2,3]
//요소값 : 2 인덱스 : 1 배열 : [1,2,3]
//요소값 : 3 인덱스 : 2 배열 : [1,2,3]

forEach에서 배열의 값을 수정하고 싶으면, 콜백함수 내에서 변수를 재할당해야한다.

let numberArray = [1,2,3,4,5,6];
numberArray.forEach((item, idx, arr) => item = item * 2);
console.log(numberArray);
// [ 1, 2, 3, 4, 5, 6 ]



numberArray.forEach((item, idx, arr) => (arr[idx] = item * 2));
console.log(numberArray);
// [ 2, 4, 6, 8, 10, 12 ]

 

●Array.prototype.map

- map은 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다.

[1, 2, 3].map((item, idx, arr) =>
  console.log(`요소값 : ${item}, 인덱스: ${idx}, 배열: ${arr}`)
);

//요소값 : 1, 인덱스: 0, 배열: 1,2,3
//요소값 : 2, 인덱스: 1, 배열: 1,2,3
//요소값 : 3, 인덱스: 2, 배열: 1,2,3

하지만 배열부분이 [ 1, 2, 3 ]이 아니라, 1,2,3으로 반환되고 있기 때문에 JSON포맷으로 변경해주어야한다. (forEach와 같다)

[1, 2, 3].map((item, idx, arr) =>
  console.log(`요소값 : ${item}, 인덱스: ${idx}, 배열: ${JSON.stringify(arr)}`)
);

//요소값 : 1, 인덱스: 0, 배열: [1,2,3]
//요소값 : 2, 인덱스: 1, 배열: [1,2,3]
//요소값 : 3, 인덱스: 2, 배열: [1,2,3]

const numbers = [1, 4, 9];
let array = numbers.map((a) => a * 2);

console.log(numbers);
// [ 1, 4, 9 ]
console.log(array);
//[ 2, 8, 18 ]

- forEach 메서드는 단순히 반복문을 대체하기 위한 반복함수이고, map메서드는 요소값을 다른 값으로 매핑한 새로운 배열을 생성하기 위한 고차함수이다.

 

●Array.prototype.filter

- filter 메서드는 자신이 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 배열을 반환한다.

[1, 2, 3].filter((item, idx, arr) =>
  console.log(`요소값 : ${item}, 인덱스: ${idx}, 배열: ${JSON.stringify(arr)}`)
);

//요소값 : 1, 인덱스: 0, 배열: [1,2,3]
//요소값 : 2, 인덱스: 1, 배열: [1,2,3]
//요소값 : 3, 인덱스: 2, 배열: [1,2,3]

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let array = numbers.filter((item) => item % 2 === 0;

console.log(array);
// [ 2, 4, 6, 8, 10 ]

 

●Array.prototype.reduce

- reduce는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 이때 원본 배열은 변경되지 않는다.

- 첫 번째 인수에는 누산기 / 두번째 인수에는 요소의값 / 세번째 인수에는 배열의 인덱스 / 네번째 인수에는 배열을 받을 수 있다.

const sum = [1, 2, 3, 4]
	.reduce((accumulator, currentValue, idx, arr) => accumulator + currentValue, 0);

console.log(sum);
// 10

초기값을 설정하지 않으면, 기본값인 0으로 설정된다.

const sum = [1, 2, 3, 4]
	.reduce((accumulator, currentValue, idx, arr) => accumulator + currentValue);

console.log(sum);
// 10

 

- 객체의 특정 프로퍼티 값을 합산하는 경우에는 반드시 초기값을 전달해야한다.

const products = [
  { id: 1, price: 1000 },
  { id: 2, price: 2000 },
  { id: 3, price: 3000 },
];

let result = products.reduce((acc, cur) => acc + cur.price, 0);
console.log(result);
// 6000

 

●Array.prototype.some

- some 메서드는 콜백함수의 반환값이 한번이라도 true이면 true, 모두 거짓이면 false를 반환한다. 즉, 배열의 요소 중에서 콜백함수를 통해 정의한 조건을 만족하는 요소가 1개 이상 존재하는지 확인하고 그 결과를 불리언 타입으로 반환한다.

const numbers = [0, 0, 0, 0, 0, 0, 0];
let answer = numbers.some((item) => item > 1);

console.log(answer);
// false

const numbers = [0, 0, 0, 0, 2, 0, 0];
let answer = numbers.some((item) => item > 1);

console.log(answer);
//true

 

●Array.prototype.every

- some 메서드는 콜백함수의 반환값이 모두 true이면 true, 하나라도 거짓이면 false를 반환한다. 즉, 배열의 요소 중에서 콜백함수를 통해 정의한 조건을 모두 만족하는지 확인하여 그 결과를 불리언 타입으로 변환한다. every 메서드를 호출한 배열이 빈배열이면 언제나 true를 반환한다.

const numbers = [1, 1, 1, 1, 1, 1, 1];

let answer = numbers.every((item) => item > 0);
console.log(answer);
// true

const numbers = [-1, 1, 1, 1, 1, 1, 1];

let answer = numbers.every((item) => item > 0);
console.log(answer);
// false

 

●Array.prototype.find

- 배열의 요소를 순회하면서 인수로 전달된 콜백함수를 호출하여 반환값이 true인 첫 번째 요소를 반환한다. 즉, 찾는 즉시 종료된다.

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

let answer = users.find((item, idx) => item.name === "Lee");
console.log(answer);

// { id: 1, name: 'Lee' }
// 즉, id : 4 인 Lee는 무시되고 있다.

 

●Array.prototype.findIndex

- 배열의 요소를 순회하면서 인수로 전달된 콜백함수를 호출하여 반환값이 true인 첫 번째 요소의 index를 반환한다. 즉, 찾는 즉시 종료된다.

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

let answer = users.findIndex((item, idx) => item.name === "Lee");
console.log(answer);
// 0
// 즉 3번째 index 가 무시되고 있다.

 

●Array.prototype.flatMap

- 중첩배열을 돌면서 평탄화하는데, 1단계 평탄화만 가능하다. flat 메서드로 그냥쓰는게 나은것 같다. 중첩배열만 flat 가능하기떼문에!

const arr = ["hello", "world"];
let array = arr.map((item) => item.split(""));

console.log(array);
// 중첩배열이 안에 생기고 있다.
// [ [ 'h', 'e', 'l', 'l', 'o' ], [ 'w', 'o', 'r', 'l', 'd' ] ]


let array = arr.map((item) => item.split("")).flat();
console.log(array);
// flat 메서드를 썼을 경우,
// [ 'h', 'e', 'l', 'l','o', 'w', 'o', 'r','l', 'd' ]


let array = arr.flatMap((item)=> item.split(''));
console.log(array);
// flatMap을 썼을 경우,
// [ 'h', 'e', 'l', 'l','o', 'w', 'o', 'r','l', 'd' ]