[JavaScript 주요 배열 함수] sort / forEach / map / filter / reduce

주요 배열 함수 ㅣ sort / forEach / map / filter / reduce 사용법, 차이점

 

sort() - 배열 요소 정렬

 

기본적으로 오름차순 정렬

내림차순은 오름차순으로 정렬 후 reverse() 사용

문자열일 경우 이대로 사용하면 되지만,

 

숫자 요소일 경우! 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다.

-> 숫자 타입 정렬 시 일시적으로 문자열 변환 후 유니코드 코드 포인트의 순서를 기준으로 정렬하기 때문

 

const numbers = [66, 30, 5, 18]

numbers.sort((a, b) => a - b); // 오름차순
console.log(numbers); // [5, 18, 30, 66] 

numbers.sort((a, b) => b - a); // 내림차순
console.log(numbers); // [66, 30, 18, 5]

 

 

---

forEach() - 모든 배열 요소 순회

 

for문을 대체할 수 있는 함수

단, break나 continue 문을 사용하여 중간에 순회를 중단할 수 없고 모든 요소를 순회한다.

 

const numbers = [1, 2, 3]
const result = [];

numbers.forEach(item => result.push(item * item));
console.log(result); // [1, 4, 9]

 

또한, 위 코드처럼 별도로 새로운 배열을 만들고 push 하는 과정 없이 바로 값을 반환하면 undefined가 나온다.

아래의 map()과 큰 차이점은 forEach의 반환값은 항상 undefined 라는 점!

 

const numbers = [1, 2, 3]

const result = numbers.forEach(item => (item * item));
console.log(result); // undefined

 

forEach의 콜백 함수는 1. 배열의 요소값 2. 인덱스 3. 배열(this)을 전달한다.

 

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

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

 

---

map() - 모든 배열 요소를 순회하면서 반환값으로 구성된 새로운 배열을 반환

 

바로 새로운 배열로 반환할 수 있다.

 

const numbers = [1, 2, 3]

const result = numbers.map(item => (item * item));

console.log(numbers); // [1, 2, 3]
console.log(result); // [1, 4, 9]

 

map()에서 반환되는 새로운 배열의 길이는 map을 호출한 배열의 길이와 같다. ( 1 : 1  매핑 )

 

---

filter() - 모든 배열 요소를 순회하면서 반환값이 true인 요소만 추출한 새로운 배열을 반환

 

특정 요소만 추출하여 새로운 배열을 만들 때 사용한다.

 

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

const odds = numbers.filter(item => item % 2); // 1은 true
console.log(odds); // [1, 3, 5]

 

---

reduce() - 모든 배열 요소를 순회하면서 하나의 결과값을 반환

 

위의 다른 함수와의 큰 차이점은 누적 + 하나의 결과값을 반환한다는 점이다.

 

아래의 코드는 콜백 함수 인자와 초기값 0을 받아 배열의 모든 요소를 누적한 결과를 반환한다.

 

const sum = [1, 2, 3].reduce((acc, cur, idx, arr) => acc + cur, 0);

console.log(sum); // 6

 

* 예제

 

const numbers = [1, 2, 3, 3]

// 평균 구하기
const avg = numbers.reduce((acc, cur, i, { length }) => {
	return i === length - 1 ? (acc + cur) / length : acc + cur;}, 0);

// 중복 횟수 구하기
const max = numbers.reduce((acc, cur) => {
	acc[cur] = (acc[cur] || 0) + 1;  // acc[cur]값이 undefined면 0을 반환
	return acc;}
, {});