자바스크립트 - 배열 메소드2(sort, reduce)

sort()

arr.sort()는 배열을  재정렬 해줍니다. 

배열 자체가 변경되니 주의해야합니다. 

 

 

let arr = [27, 8, 5, 13] 배열을 sort함수를통해 정렬을 실시하면 이상한값이 정렬됩니다 왜그럴까요? 

 

정답은 문자열 취급으로 정렬되기 때문에 그렇습니다. 따라서 sort안에 함수를 

a가 b보다 크면 양수를 리턴할 것 이고 같으면 0 

a가 b보다 작으면 음수를 리턴합니다.

즉 a와 b를 비교해서 a가작으면 앞으로 보내줍니다. a가크면 b가 더작은거니까 b를 앞으로보냅니다. 

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

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

 

자세히 살펴보면 처음에 8과 27을 비교합니다. 8<27 이므로 8이 앞으로 갑니다. 결과는 8,27,5,13

그리고 8과 5를 비교합니다. 8>5 이므로 5가 앞으로 갑니다. 결과는 5,8,27,13

그리고 13과 5를 비교합니다. 근데 13에서 5를빼면 양수니까 아무일도 발생하지 않습니다. 결과는 5,8,27,13

다음 13과 8을 비교합니다.  마찬가지로 자리는 안 바뀝니다. 

마지막으로 13과 27을 비교해봅니다. 13이 더작으니까 결과는 5,8,13,27이 됩니다.

 

위의 같은 과정은 복잡하고 어려울 수 있습니다. 그래서 Loadsh 라는 라이브러리를 사용하는 것이 편리합니다. 

Lodash를 사용하면 _.sortBy(arr); 을 통해서 정렬할 수 있습니다. 

 

 

 

reduce()

arr.reduce()는 배열의 값을 모두 더해줍니다. 원래는 아래 코드 처럼 for를 돌면서 값을 더해 주었는데 

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

//for , for of , forEach

let result = 0;
arr.forEach((num)=>{
	result += num;
});

console.log(result); // 15

 

reduce를 사용하면 편하게 배열의 값을 모두 더할 수 있습니다.

 

const result = arr.reduce((prev,cur)=>{
	return prev + cur;
}, 0); // 0은 초기값 , prev는 누적값

인수로 함수를 받는데 (누적 계산값, 현재값) => { return 계산값 }; 입니다, 함수를 돌면서 누적값 + 현재값을 통해 총 값을 구해줍니다. 

 

다른 코드를 보겠습니다. 

let userList= [
  {name :"Mike", age:30},
  {name :"Tom", age:10},
  {name:"Jane", age:27},
  {name:"Sue", age:26},
  {name:"Harry", age:43},
  {name:"Steve", age:60},
];

let result = userList.reduce((prev,cur)=>{
  if(cur.age>30){
    prev.push(cur.name);
  }
  return prev;
}, []);

console.log(result);

나이가 30이상인 요소를 모아 새로운 배열을 만들었습니다.

다른 코드도 보겠습니다. 

let userList= [
  {name :"Mike", age:30},
  {name :"Tom", age:10},
  {name:"Jane", age:27},
  {name:"Sue", age:26},
  {name:"Harry", age:43},
  {name:"Steve", age:60},
];

let result = userList.reduce((prev,cur)=>{
  if(cur.age>30){
    return prev=prev+cur.age;
  }
  return prev;
},0);

console.log(result);