[JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 배열 Method 2

앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다.

이번 포스팅에서도 마찬가지로 나머지 배열 Method에 대해서 살펴보도록 하자.

1. arr.sort()

이 Method는 배열을 재정렬할 때 사용하는 메소드이다. 하지만 배열 자체가 변경이 되기 때문에 주의해야 한다.

let arr = [1,5,4,2,3];
let arr2 = ["a", "c", "d", "e", "b"];
let arr3 = [27, 8, 5, 13];

arr.sort();
arr2.sort();
arr3.sort();

console.log(arr);   // [1,2,3,4,5]
console.log(arr2);  // [a,b,c,d,e]
console.log(arr3);  // [13, 27, 5, 8]

위의 코드를 보면 이상한 점이 있다. arr3을 sort했는데 결과값이 정렬이 되지 않은 상태이다. 이유가 무엇일까? 바로 정렬할 때 요소를 문자열로 취급을 하기 때문이다. 그래서 1과 2로 시작하는 문자열이 맨 앞으로 오게 된 것이다!

제대로 된 정렬을 하고 싶다면 sort 메소드의 인수로 정렬 로직을 담은 함수를 받아야한다.

let arr = [27, 8, 5, 13];

arr.sort((a, b) => {
	return a - b;  
});

console.log(arr);

이렇게 sort에 정렬 로직을 담은 함수를 매개변수로 넣어주게 되면 제대로 정렬이 되는 것을 확인할 수 있다.

하지만 현업에서는 저런 함수를 만들기 보다는 Lodash라는 라이브러리를 사용한다고 한다. 이 라이브러리를 사용하게 되면 _.sortBy(arr);로 쉽게 정렬이 가능하다고 한다.
자세한 내용은 https://lodash.com/ 에서 확인해보자.

2. arr.reduce()

reduce도 마찬가지로 인수로 함수를 받는다.
배열의 모든 수를 합하는 코드를 작성해보자.
(누적 계산값, 현재값) => { return 현재값; }

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

let result = 0;
arr.forEach(num => {
	result += num;  
});
console.log(result);  // 15

위의 작업을 한번에 처리할 수 있는 Method가 reduce이다.

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

const result = arr.reduce((prev, cur) => {
	return prev + cur;	  
}, 0);   // 초기값 0으로 setting

console.log(result);  // 15

이제 조금 더 실용적인 예제를 확인해보자.

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;
}, []);   // 초기값은 빈 배열로

console.log(result);   // [Mike, Jane, Sue, Harry, Steve]

다음과 같이도 작성할 수 있다.

이전 포스팅과 이번 포스팅에서 배열의 Method들에 대해서 정리를 해보았다.
상황에 맞게 Method를 골라서 사용하는 것이 중요하다고 생각한다. filter, map, forEach, reduce 등.. 잘 익혀두고 사용해보도록 하자!!

(해당 포스팅의 내용은 유튜브 코딩앙마님의 영상을 참고했습니다)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4