중급 기본 정리 (with 앙마코딩) 배열 매서드 Array 2탄

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)
문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

sort() : 배열 재정렬

배열을 재정렬할 때 사용한다. 단 배열 자체가 변하니 주의해야 한다
정렬 방식은 크기 순서로 사용하게 된다.

let a = [1,3,2,5,4];
a.sort(); // [1,2,3,4,5]

let b = [ 'a', 'c', 'b', 'e', 'd'];
b.sort(); // ['a','b','c','d','e']

/* 숫자가 2자리 수일 때 */

let c = [ 27, 8, 5, 13];
c.sort(); // [13,27,5,8]

앞선 예제처럼 크기 순서대로 배열을 재 정렬하게 된다.
그런데 숫자가 2자리 수인 배열은 정렬이 이상하다. 그 이유는 배열을 정렬할 때 문자열로 사용하기 때문에 숫자 13이 아닌 문자열 "13"에서 1만 확인하고 넘어갔기 때문이다.
이를 제대로된 정렬을 하고 싶다면 함수를 이용하면 된다.

sort()는 인수를 함수로 받기 때문에 숫자를 비교하는 함수를 사용하여 정렬을 할 수 있다.

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

function fn(a,b){
  return a - b;
}

c.sort(fn); // [5,8,13,27]

위 예제를 통해 원하는 배열의 재정렬을 할 수 있다.
함수 내용을 간단하게 설명하면 두 수를 인수로 받아 양수, 0 , 음수를 반환하여 값을 비교한다.

이런 항수를 사용하기도 하지만 "Lodash"라는 라이브러리를 사용한다.

reduce() : 배열을 순회하며 값을 계산

인수로 함수를 받는다.

배열의 모든수를 합치는 방법은 여러 방법이 있었다. 그 중 reduce()를 이용하는 방법도 있다.

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

const result = arr.reduce((prev, cur) => { // prev는 누적된 계산값, cur은 현재값으로 배열의 요소를 순차적으로 받는다.
    return prev + cur;
}, 0);
// 결과값은 15 ( 0 + 1+ 2 + 3 + 4 + 5)


/*
let result = 0;

arr,forEach((num)=>{
    result += num;  // 이 forEach()와 동일 
}); 
*/

forEach()를 사용하는 코드보다 reduce() 코드가 간편해 보인다.
reuduce()에서 함수 다음에 나오는 값은 초깃값을 나타낸다.
그 밖에 for, for of 등을 사용 할 수도 있다.

reduceRight(); reduce()와 동일하다. 다만 배열의 끝부터 실행한다는 점이 다르다.