[JS] 배열에서 사용하는 메서드 (2)

1) Array.sort

배열의 요소를 정렬한다. 원본 배열을 직접 변경하여 정렬된 배열을 반환한다.

기본적으로 오름차순으로 요소를 정렬한다.

내림차순으로 정렬하려면 reverse 메서드를 사용한다.

const fruits = ['Banana', 'Orange', 'Apple']

fruits.sort() // [ 'Apple', 'Banana', 'Orange' ]

// 한글 문자열도 오름차순 정렬
const fruits2 = ['바나나', '오렌지', '사과']

fruits2.sort() // [ '바나나', '사과', '오렌지' ]

// 내림차순 정렬
fruits.reverse() // [ 'Orange', 'Banana', 'Apple' ]

 

sort메서드는 배열 요소가 숫자형이라 하더라도 일시적으로 문자열로 변환한 후 문자열을 비교하여 순서를 결정한다.

따라서 숫자 요소를 정렬할 때는 sort 메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다.

비교함수는 양수나 음수 또는 0을 반환해야 한다. 비교 함수의 반환값이 0보다 작으면 비교 함수의 첫번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며 0보다 크면 두번째 인수를 우선하여 정렬한다.

 

const arr = [40,100,1,5,2,25,10]

arr.sort((a,b)=>a-b) // [1,2,5,10,25,40,100] 오름차순 정렬

arr.sort((a,b)=>b-a) // [100,40,25,10,5,2,1] 내림차순 정렬

 

객체값을 가지는 배열 정렬은 배열값에 대한 메서드를 사용할 때 하위 객체값으로 접근해서 비교하여 정렬한다.

const todos =[
    {id : 4, content : '밥 먹기'},
    {id : 2, content : '손 씻기'},
    {id : 3, content : '양치하기'},
    {id : 1, content : '세수하기'},
]

function compare(key) {
    return (a,b) => (a[key] > b[key] ? 1 : (a[key] < b[key] ? -1 : 0))
}

todos.sort(compare('id')) // id 기준으로 정렬
/*
[
  { id: 1, content: '세수하기' },
  { id: 2, content: '손 씻기' },
  { id: 3, content: '양치하기' },
  { id: 4, content: '밥 먹기' }
]
*/

 

2) Array.map

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다(원본 배열 변경 X)(배열을 이용해서 새로운 배열 만들기)

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

const newArr = arr.map(num => num * 2) // [2,4,6,8,10]

 

3) Array.filter

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

콜백 함수의 반환값이 true 인 요소로만 구성된 새로운 배열을 반환한다.

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

const odd = numbers.filter(num => num % 2)
// [1,3,5]
const even = numbers.filter(num => num % 2 === 0)
// [2,4]

 

4) Array.find

자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true 인 첫 번째 요소를 반환한다.

const users = [
    { id : 1, name : '망곰이'},
    { id : 2, name : '미니'},
    { id : 3, name : '용감한 쿠키'},
    { id : 4, name : '미니언즈'}
]

users.find(user => user.id === 2) // { id: 2, name: '미니' }

※ filter 와의 차이점

-> filter 메서드는 true 요소만 추출한 '배열'을 반환한다. / 반환값은 언제나 배열이다

-> find 메서드는 반환값이 true 인 첫 번째 '요소'를 반환한다. / 반환값은 언제나 요소값이다.

// filter 
[1,2,2,3].filter(item=>item === 2) // [2,2] -> 배열을 반환

// find
[1,2,2,3].find(item=>item === 2) // 2 -> 요소를 반환

 

5) Array.reduce

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다.

// 1부터 4까지의 숫자 더하기
const numbers = [1,2,3,4]

const sum = numbers.reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0)
// 10

// 평균 구하기
const values = [1,2,3,4,5,6]

const average = values.reduce((acc,cur, i, {length})=> i === length - 1 ? (acc + cur) / length : acc + cur, 0)
// 3.5

 

 

6) Array.concat

원본 배열을 변경하지 않고, 주어진 배열이나 값들을 새로운 배열로 결합하여 반환

push() 메서드와 비슷하지만 원본 배열에 값을 추가하는 push() 메서드와 다르게 새로운 배열로 반환하는 것이 다르다.

const arr1 = [1,2,3];
const arr2 = [5,6,7];
const arr3 = arr1.concat(arr2); // [1,2,3,5,6,7]

 

 

Reference

모던 자바스크립트 Deep Dive

http://product.kyobobook.co.kr/detail/S000001766445?LINK=NVB&NaPm=ct%3Dlwt20us8%7Cci%3D3eeae87413d188962c2189bfc03af972cec288fd%7Ctr%3Dboksl1%7Csn%3D5342564%7Chk%3D0a86971807241e21311b2f82ad997d61e4c24ab4

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고