[자바스크립트 중급] array method 배열 메소드2 (sort, reduce)

1. arr.sort(fn) : 배열 재정렬 (이거 대신, Lodash 라이브러리 사용해라)

• 복사가 아닌 배열 자체를 재정렬함
• 기본적으로 숫자는 1,2,3, 문자열은 a,b,c 순서로 자동으로 재정렬

// arr.sort() 재정렬

const arr = [1,7,5,4,2]

console.log(arr);

arr.sort();

console.log(arr);

const arr2 = ['b','g','r','c','s','a']

console.log(arr2);

arr2.sort();

console.log(arr2);

[ 1, 7, 5, 4, 2 ]

[ 1, 2, 4, 5, 7 ]

[ 'b', 'g', 'r', 'c', 's', 'a' ]

[ 'a', 'b', 'c', 'g', 'r', 's' ]

• 그런데, 두자리수가 되니 정렬이 뒤죽박죽됨.
• 정렬할때 요소를 문자열로 취급하기 때문

const arr = [13,75,52,433,22]

console.log(arr);

[ 13, 75, 52, 433, 22 ]

• 제대로된 정렬을 하기 위해선 인수에 함수를 넣어줘야 함.

// arr.sort(fn) 제대로 재정렬

const arr = [13,75,52,433,22]

arr.sort((a,b)=>{

    return a-b;

})

console.log(arr); // [ 13, 22, 52, 75, 433 ]

const arr2 = ['abv','rr','sdw','vav'];

arr2.sort((a,b)=>{

    return a-b;

})

console.log(arr2); // [ 'abv', 'rr', 'sdw', 'vav' ]

*이런 방식으로 하는데 번거로워서 라이브러리 사용

• Lodash 라이브러리
• _.sortBy(arr); 하면 문자던 숫자던 객체던 제대로 정렬해 줌
• lodash.com.

 

 

2. arr.reduce(fn) : 배열 순회하며 원하는 작업을 하고 최종 값을 반환

• arr.reduce((a, b)=>{},c)
• a = 지금까지 누적된 값, b = 현재 값, c= 초기값 (초기값은 옵셔널)
• return 을 잘 정해주자.

📌예제1: 만약 배열의 모든 수를 더하고 싶다면?

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

 

// arr.forEach(fn) 사용

let result = 0;

arr.forEach((num)=>{

    result += num;

})

console.log(result); // 15

//for() 사용해서 다 더하는 법

let result2 = 0;

for(let i = 0; i < arr.length; i++){

    result2 += arr[i];

}

console.log(result2); // 15

//for of 사용해서 다 더하는 법

let result3 = 0;

for(let num of arr){

    result3 += num

}

console.log(result3); // 15

• arr.reduce((a,b)=>{},c) 로 배열 숫자 다 더하는 법

// arr.reduce(fn) 사용

let result4 = arr.reduce((prev, curr)=>{

    return prev + curr;

},0)

console.log(result4); // 15

 

📌예제2: map 대신 reduce 써서 배열 반환

// 리스트에서 성인만 뽑아서 재배열

let userList = [

    {name: "Sam", age: 10},

    {name: "Nick", age: 15},

    {name: "Bono", age: 20},

    {name: "Kodo", age: 25},

    {name: "Corner", age: 30},

    {name: "Karl", age: 35},

]

// arr. map() 사용

const newUserList = []

userList.map((user, index) => {

    if (user.age > 19) {

        newUserList.push(`name: ${user.name}, age: ${user.age}`);

    }

})

console.log(newUserList);

//reduce() 사용

let newUserList2 = userList.reduce((prev, curr) => {

    if (curr.age > 19) {

        prev.push(`name: ${curr.name}, age: ${curr.age}`);

    }

    return prev;

}, [])

console.log(newUserList2);

[

  'name: Bono, age: 20',

  'name: Kodo, age: 25',

  'name: Corner, age: 30',

  'name: Karl, age: 35'

]

[

  'name: Bono, age: 20',

  'name: Kodo, age: 25',

  'name: Corner, age: 30',

  'name: Karl, age: 35'

]

📌나이만 골라 더하고 싶다?

let userAgeAdd = userList.reduce((prev, curr)=>{

    return prev + curr.age; // === prev += curr.age;

},0)

console.log(userAgeAdd); // 135

📌이름이 3자인 사람만 골라 배열하고 싶다?

// 이름이 3자인 사람만 뽑아 배열

let renameBy3 = userList.reduce((prev, curr)=>{

    if(curr.name.length === 3){

        prev.push(curr.name);

    } return prev;

},[])

console.log(renameBy3);