[JS] Array 관련 method 정리 - sort(), reduce(), map(), filter()

 

sort(), reduce(), map(), filter()
ES6 문법으로, Array 내 모든 요소를 반복해서 가공시키는 메소드이다.

 

 

 

 

📌 sort()

Array의 요소들을 sort 함수 내용대로 재정렬하여 반환한다.

기본 sort()

const fruits = ['Banana', 'Apple', 'Grape', 'Cherry']
fruits.sort();
//output : ['Apple', 'Banana', 'Cherry', 'Grape']​

sort()의 파라미터 값에 아무것도 넣지 않으면 문자열로 취급되어 유니코드 값 순서대로 아이템을 정렬한다.

const number = [1, 8, 100, 33, 5]
number.sort();
//output : [1, 100, 33, 5, 8]

그래서 숫자도 위와 같이 맨 앞의 숫자만을 기준으로 문자열처럼 반환한다.

파라미터를 활용해서 아래와 같이 오름차순 정렬시킬 수 있다.

const number = [1, 8, 100, 33, 5]
number.sort(function(a, b) {
  return a - b;
});
//output : [1, 5, 8, 33, 100]​

• a - b 가 음수인 경우 a를 더 낮은 수로 정렬 (a를 왼쪽에 정렬)
• a - b 가 양수인 경우 a를 더 높은 수로 정렬 (a를 오른쪽에 정렬)
  : 더 작은 수를 왼쪽으로 보내는 식으로 각 아이템을 모두 연산해서 반환한다.
  : 내림차순은 b - a

Array내에 있는 object 자료는 아래와 같이 정렬시킬 수 있다.

const product = [
  {name : Candy, price : 500},
  {name : Soda, price : 1000},
  {name : Jelly, price : 800}]​

product.sort(function(a, b) {
  if (a.name > b.name) {
    return 1;
  }
  if (a.name < b.name) {
    return -1;
  }
  return 0; //a와 b가 같으면 0을 반환 (순서변경X)
});​

👆🏻 오브젝트 내 name의 data를 오름차순 정렬했다.
(내림차순은 부등호 방향만 바꿔주면 됨)

product.sort(function(a, b) {
  return a.price - b.price;
});​

👆🏻 숫자 데이터 정렬 시에는 이렇게만 적어줘도 된다.

 

 

 

📌 reduce()

Array의 각 요소를 누적 계산해서 하나의 결과값을 반환한다.
Araay를 변형시키는 것이므로 새로 선언해서 써줘야한다.

데이터의 총 합 구하기

const number = [1, 2, 3, 4, 5];
const sum = number.reduce(function(a, b){
  return a + b;
}, 0);
console.log(sum); //output :15​

기본값은 위와 같은 형태로 각 파라미터 값은 아래와 같다.

const sum = number.reduce(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
}, initialValue);​

- accumulator : 누적값
- currentValue : 해당요소 (계산할 차례인 데이터)
- currentIndex : 해당요소의 index (필수X)
- array : reduce()를 호출한 원본 배열 (필수X)
- initialValue : 초기값 (누산을 시작할 값, 보통 0)

 

다양한 활용이 있는 것 같은데.. 지금 완벽 파악하기엔 오래걸릴듯 하므로.. 필요할 때 찾아보고 추가하는 것으로.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

 

 

 

📌 map()

Array의 모든 요소 각각에 map함수 내용을 실행한 결과를 모아 새로운 Array로 만들어 반환한다.
Araay를 변형시키는 것이므로 새로 선언해서 써줘야한다.

const number = [1, 2, 3, 4, 5];
const mapping = number.map(function(a){
  return a * 2;
}, 0);
console.log(mapping); //output : [2, 4, 6, 8, 10]​

이 함수에도 다양한 파라미터 값들이 있는데, 필수값이 아닌 것들이므로 생략했다.
섭씨 > 화씨 변환이나, 숫자 > 문자 변환 등 일괄적으로 함수를 적용하고 싶을때 사용한다.

map()과 forEach()의 차이

• map() : 각 요소에 map에 들어간 콜백함수를 실행해서 얻은 값을 모아 새로운 Array를 생성하여 리턴값을 출력할 수 있다.
• forEach() : forEach에 들어간 콜백함수를 요소마다 한번씩 실행시킨다. 기존의 Array를 변경시키며, 리턴값을 출력할 수 없다.
  https://pewww.tistory.com/12
  두 함수를 비교분석한 엄청난 글 발견...멋있다 😳

 

 

 

📌 filter()

Array의 각 요소에 대해 함수의 결과값이 true인 요소를 모아 새로운 배열로 반환한다.
Araay를 변형시키는 것이므로 새로 선언해서 써줘야한다.

const fruits = ['Banana', 'Apple', 'Grape', 'Cherry'];
const fruitFilter = fruits.filter(function(a){
  return a.length > 5;
})
console.log(fruitFilter); //output : ['Banana','Cherry']​

이 함수에도 다양한 파라미터 값들이 있는데, 필수값이 아닌 것들이므로 생략했다.
true로 나오는 요소가 없으면 빈 배열을 반환한다.

 

 

 

위 내용들은 모두 화살표 함수로 적으면 훨씬 간결한데.. 그게 나한테 아직 익숙하지 않고, 일단 지금 확실한 개념정리를 하기위해 사용하지 않았다. 얼른 익숙해져서 코드를 더 깐지나게 적고 싶다.