JavaScript 배열과 메서드 3

배열을 변형하는 메서드

map

map은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환해준다.

let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환한다.
});

아래 예시에선 각 요소(문자열)의 길이를 출력해준다.

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

---

sort(fn)

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();

alert( arr );  // 1, 15, 2

arr.sort()는 배열의 요소를 정렬해준다. 배열 자체가 변경된다. 요소는 문자열로 취급되어 재 정렬된다.

기본 정렬 기준 대신 새로운 정렬 기준을 만들려면 arr.sort()에 새로운 함수를 넘겨줘야 한다.

인수로 넘겨주는 함수는 반드시 값 두 개를 비교해야 하고 반환 값도 있어야 한다.

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

화살표 함수를 사용하면 정렬 함수를 더 깔끔하게 만들 수 있다. 화살표 함수를 활용한 코드와 함수 선언문을 사용한 코드는 동일하게 작동한다.

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

---

reverse

arr.reverse는 arr의 요소를 역순으로 정렬시켜주는 메서드

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

alert( arr ); // 5,4,3,2,1

반환 값은 재 정렬된 배열이다.

---

split

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `${name}에게 보내는 메시지` ); // Bilbo에게 보내는 메시지
}

split 메서드는 두 번째 인수로 숫자를 받을 수 있다. 이 숫자는 배열의 길이를 제한해주므로 길이를 넘어서는 요소를 무시할 수 있다. 실무에서 자주 사용하는 기능은 아니다.

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

문자열을 글자 단위로 분리하기

split(s)의 s를 빈 문자열로 지정하면 문자열을 글자 단위로 분리할 수 있습니다.

let str = "test";

alert( str.split('') ); // t,e,s,t

---

join

인수 glue를 접착제처럼 사용해 배열 요소를 모두 합친 후 하나의 문자열을 만들어준다.

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 배열 요소 모두를 ;를 사용해 하나의 문자열로 합친다.

alert( str ); // Bilbo;Gandalf;Nazgul