[JavaScript] 배열 메소드(Array Method) - 2
지난 시간에 말했던 sort와 reduce에 대해 알아보도록 하자!
1. arr.sort( )
: 배열 재정렬하는 메소드이다.
배열 자체가 변경되기 때문에 주의해야 한다.
|
let arr = [1, 6, 2, 3, 4, 5];
arr.sort();
console.log(arr); // [1,2,3,4,5,6]
let arr2 = ['a','e','f','d','b','c']; arr2.sort();
console.log(arr2); //['a','b','c','d','e','f']
|
숫자나 문자열 모두 순서 없이 나열해도 sort( ) 를 사용하면 순서대로 잘 정렬이 되는 것을 볼 수 있다.
그런데!
아래와 같이 무작위의 숫자들을 정렬하면 순서 없이 무작위로 정렬되는 것이 아닌가?!
|
let arr3 = [27, 8, 5, 13];
arr3.sort();
console.log(arr3); // [13,27,5,8]
|
이유는 정렬할 때 요소를 문자열로 취급하기 때문에 1로 시작하는 13이 첫번째, 2로 시작하는 27이 두번째로 오게 되는 것이다.
그렇다면 정상적으로 정렬을 하려면 어떻게 해야될까??
인수로 정렬 로직을 담은 함수를 주면 된다!
|
let arr3 = [27, 8, 5, 13];
function fn(a, b){
return a - b;
}
arr.sort(fn);
// 화살표 함수를 사용
arr3.sort((a, b) => {
return a - b;
});
console.log(arr3); // [5,8,13,27]
|
a, b 두 요소를 전달받아서 a - b를 뺐는데 양수가 나오면 b가 앞으로 가고 음수가 나오면 a가 더 작다는 것으로 a가 앞으로 가고 이런 로직을 계속 반복해서 하는 것이다.
console로 찍어보면 비교하는 과정을 확인할 수 있다.
|
arr3.sort((a, b) => {
console.log(a,b);
/*
8 27
5 8
13 5 13 8
13 27
*/
return a - b;
});
|
8, 27, 5, 13
5, 8, 27, 13
5, 8, 13, 27
이런식으로 정렬이 되는 것이다!!!
그런데.. 사실 이 함수의 로직이 이해가 잘 된다면 문제가 없지만 조금 어렵기 때문에
이런 기능을 가지고 있는 Lodash라는 라이브러리를 사용한다고 한다.
_.sortBy(arr);
이 한줄만 사용하면 숫자, 문자, 객체에 상관없이 원하는 기준으로 정렬할 수 있다고 한다
역시 라이브러리가 최고구나.....
Lodash가 궁금하신 분들은 공식 홈페이지에 들어가서 조금 더 자세하게 공부해보면 좋을 것 같다!
Lodash
_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn
lodash.com
2. reduce( )
: 누적으로 계산할 수 있도록 하는 메소드이다.
reduce(누적 계산값, 현재값) => { return 계산값 };
sort와 마찬가지로 인수로 함수를 받는다!
아래에 배열이 있고 이 배열의 모든 수를 합하는 코드를 작성한다고 하면
reduce( ) 를 배우지 않았을 때 우리는 보통 for, for of, forEach 사용해서 값을 구할 것이다.
|
let arr4 = [1,2,3,4,5];
// forEach 사용 let result = 0;
arr.forEach(num => {
result += num;
})
console.log(result); // 15
|
하지만 reduce( )를 사용하면 이 작업을 간단하게 해결할 수 있다.
|
const result = arr.reduce((prev, cur) => {
return prev + cur;
}, 0);
|
prev는 현재까지 누적된 값을 말하고, cur 는 현재 값을 말한다.
0은 초기값을 설정해준 것이다. 초기값은 안써도 상관이 없다.
초기값을 정해주지 않으면 첫번째 요소부터 시작한다.
현재는 초기값을 0으로 주었기 때문에 0에서 시작하고 0에 1을 더하고 1을 반환해준다.
그리고 한번 돌아서 1에 2를 더해서 반환하고 1 + 2 인 3에 4를 더하고 한번 더 돌고 이런 식으로 for문, for of, forEach문처럼 배열의 길이만큼 반복하면서 누적으로 값들을 더해주는 것이다.
만약 초기값을 100으로 주었다면 100부터 시작해서 115가 계산값으로 반환된다.
사용자들을 담은 배열이 있고 성인인 사용자만 배열에 넣어주려고 한다면 어떻게 코드를 짜야될까?
|
let userList = [
{name: "Mike", age:30 },
{name: "Alex", age: 12 },
{name: "Jane", age: 28 },
{name: "Harry", age: 60 },
{name: "Jamie", age: 25 },
{name: "Tony", age: 47 },
{name: "Steve", age: 7 },
]
let result = userList.reduce((prev, cur) => {
if(cur.age > 19) {
prev.push(cur.name);
}
return prev;
}, [ ]);
|
1. 초기값을 빈 배열로 준다
2. 만약 현재 사용자의 나이가 19보다 크다면
3. 누적 계산값에 push해서 빈 배열에 담아주고
4. 그 값을 반환(return)한다
5. 다시 사용자 배열로 돌아가서 다음 요소의 나이를 19와 비교한다
6. 배열의 길이만큼 반복한 후 조건에 맞는 요소를 prev에 계속해서 push한다.
결과를 확인하면 아래와 같이 나이가 19세 보다 많은 사용자가 배열에 담겨있는 것을 볼 수 있다.
|
console.log(result);
/*
0: "Mike"
1: "Jane"
2: "Harry"
3: "Jamie"
4: "Tony"
*/
|
혹은 이름의 길이가 4글자인 사람만 배열에 담는다면 아래와 같이 코드를 작성하면 된다
|
let result = userList.reduce((prev, cur) => {
if(cur.name.length === 4) {
prev.push(cur.name);
}
return prev;
}, []);
console.log(result); // ["Mike", "Alex", "Jane", "Tony"]
|
지금까지 여러가지의 메소드를 배웠는데 배웠던 메소드를 잘 기억해서 상황에 맞는 메소드를 사용할 수 있는
자바스크립트마스터가 되길 바란다!! ( 우선 나 자신부터..!!!)
* 본 포스팅은 코딩앙마님의 자바스크립트 중급 강의를 기반으로 작성한 글입니다.