20-3 배열과 메서드 3 (map, sort, reverse, split, join)

 - 지금부터 알아볼 메서드는 배열을 변형하는 기능이 있다.

 

map()

 - 유용성과 사용 빈도가 아주 높은 메서드 중 하나다. 배열 요소 전체를 대상으로 함수를 호출하고, 결과를 배열로 반환한다.

 arr.map(callback(currentValue[, index[, array]])[, thisArg])

• callback - 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
  • currentValue - 처리할 현재 요소.
  • index - 처리할 현재 요소의 인덱스.
  • array - map()을 호출한 배열.
• thisArg - callback을 실행할 때 this로 사용되는 값.

예)

let arr = [1, 2, 3, 4, 5, 6];
arr.map(e => e * 2); // [2, 4, 6, 8, 10, 12];

 

---

 

sort()

 - 배열의 요소를 정렬한다. 단 배열을 새롭게 생성하는 것이 아닌 배열 자체가 변경이 된다.

arr.sort([compareFunction])

• compareFunction - 정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다.

let arr = [1, 3, 12, 2];

arr.sort(); //[1, 12, 2, 3]

  특이하게 우리가 생각한 정렬 방식과 다르다. 

  그 이유는 요소를 문자열로 취급하여 제 정렬하기 때문이다. 그래서 "2" > "12"이렇게 된다.

  기본 정렬 기준 대신 새로운 정렬 기준을 만들려면 arr.sort()에 새로운 함수를 넘겨줘야 한다. 인수로 넘겨주는 함수는 반드시 값 두 개를 비교해야 하고 반환 값도 있어야 한다.

function compare(a, b) {
  if (a > b) return 1; // 첫 번째 값이 두 번째 값보다 큰 경우
  if (a == b) return 0; // 두 값이 같은 경우
  if (a < b) return -1; //  첫 번째 값이 두 번째 값보다 작은 경우
}

let arr = [1, 3, 12, 2];

arr.sort(compare); //[1, 2, 3, 12] 오름차순 정렬됨

 

  포괄적인 정렬 알고리즘을 이용해 구현된다. 대개 최적화된 퀵 소트(quicksort)를 사용하는데, arr.sort(fn)는 주어진 함수를 사용해 정렬 기준을 만들고 이 기준에 따라 요소들을 재배열하므로 개발자는 내부 정렬 동작 원리를 알 필요가 있지만 지금은 아닌 것 같다... 우선 정렬 함수를 만들어 원하는 형태롤 정렬이 우선으로 생각하자!!

  그래서 저는 대부분 화살표 함수를 이용해 코드를 구성한다.

 

let arr = [1, 3, 12, 2];

arr.sort((a, b) => a - b); // [1, 2, 3, 12] 오름차순 정렬
arr.sort((a, b) => b - a); // [12, 3, 2, 1] 내림차순 정렬

 

문자열엔 localeCompare를 사용하세요.

 - strings에서 배운 비교 알고리즘이 기억나시나요? 이 알고리즘은 유니코드를 기준으로 글자를 비교한다.  Ö같은 문자가 있는 언어에도 대응하려면 str.localeCompare 메서드를 사용해 문자열을 비교하는 게 좋다. 독일어로 나타낸 국가가 요소인 배열을 정렬하면!

let countries = ['Österreich', 'Andorra', 'Vietnam'];

countries.sort((a, b) => a > b ? 1 : -1); // Andorra, Vietnam, Österreich (제대로 정렬이 되지 않았습니다.)

countries.sort((a, b) => a.localeCompare(b)); // Andorra,Österreich,Vietnam (제대로 정렬되었네요!)

 

---

 

reverse()

 - arr의 요소를 역순으로 정렬시키는 메서드이다.

arr.reverse();

예)

let arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]

 

---

 

공부한 곳!! 모던 JavaScript 튜터리얼

바로가기!!