배열 메소드2 (sort, reduce)

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

arr.sort() 은 배열을 재정렬 합니다. 기존 배열 자체가 변경되니 주의해야 합니다.

let arr = [1, 5, 4, 2, 3]
art.sort();
console.log(arr); // [1, 2, 3, 4, 5]

// 아래와 같은 경우 13의 1과 27의 2만 보고 정렬되니 주의합니다.

let arr = [27, 8, 5, 13]
art.sort();
console.log(arr); // [13, 27, 5, 8]

// 이럴 때는 값을 비교해주는 함수를 사용합니다.

arr.sort(fn) // 함수를 인수로 받음

let arr = [27, 8, 5, 13]
arr.sort((a, b) => {
	return a - b;  
})
console.log(arr); // [5, 8, 13, 27]

현업에서는 이런 방법보다 Lodash 라는 라이브러리를 많이 사용합니다.

arr.reduce() 은 인수로 함수를 받고, 배열안의 값을 더해줍니다. (누적 계산값, 현재값) => {return 계산값}

// 일단 forEach 를 사용한다면,

let arr = [1, 2, 3, 4, 5];
let result = 0;
arr.forEach((num) => {
	result += num;
})
console.log(result); // 15

// 위 코드를 reduce 로 바꾸어 보면

let arr = [1, 2, 3, 4, 5];
const result = arr.reduce((prev, cur) => {
	return prev + cur // 누적된 계산값에 현재값을 더한다.
}, 0) // 초기값 0 세팅
console.log(return); // 15

map 이나 filter 없이 reduce 로 배열을 반환해보면,

let userList = [
	{ name: "Mike", age: 30 },
	{ name: "Tom", age: 10 },
	{ name: "Jane", age: 27 },
	{ name: "Sue", age: 26 },
	{ name: "Harry", age: 42 },
	{ name: "Steve", age: 60 },
];

let result = userList.reduce((prev, cur) => {
	if(cur.age > 19){
		prev.push(cur.name);  
	}
	return prev;
}, []) // 빈배열에서 시작

// 이렇게 하면 19세 이상 성인들의 이름만 뽑힌다.
// 나이의 합을 구하고 싶다면

let result = userList.reduce((prev, cur) => {
	return (prev += cur.age); 
}, 0) // 0 이상부터 시작

// 이름이 3자인 사람만 찾아본다면

let result = userList.reduce((prev, cur) => {
	if(cur.name.length === 3){
		prev.push(cur.name); // 빈배열에 넣어주기
	}
	return prev;
}, []) // 빈배열 설정

상황에 맞게 메소드를 잘 찾아서 쓰는 게 실력입니다.