Learning JavaScript - 배열 3편

이 포스팅은 Learning JavaScript의 8장(배열과 배열 처리)을 참고하여 작성 되었다.

삭제되거나 정의되지 않은 요소들

Array 메서드는 삭제되거나 정의되지 않은 요소들을 다룰 때 좀 당혹스럽게 동작하곤 한다. map과 filter, reduce는 삭제되거나 정의되지 않은 요소들에서 콜백 함수를 호출하지 않는다.
예를 들어 ES5에서 배열을 초기화할 때 다음과 같은 방법을 시도해 보고 실망했던 사람도 있을 것이다.

const arr = Array(10).map(function(x) { return 5 });

arr의 요소는 전부 undefined이다. 이와 비슷하게, 배열 중간의 요소를 삭제하고 map을 호출하면 배열 가운데 구멍이 생긴다.

const arr = [1, 2, 3, 4, 5];
delete arr[2];
arr.map(x => 0);  // [0, 0, undefined, 0, 0]

일반적으로 배열을 다룰 때는 모든 요소가 명시적으로 정의된 배열을 다루고, 의도적으로 배열안에 빈 부분을 만든다 하더라도 배열에 delete를 쓰지는 않을 테니 현실적으로는 이런 동작이 문제를 일으킬 가능성은 거의 없다.
하지만 알아둬서 나쁠 것은 없다.

문자열 병합

배열의 문자열 요소들을 몇몇 구분자로 합치려 할 때가 많다. Array.prototype.join은 개변수로 구분자 하나를 받고 요소들을 하나로 합친 문자열을 반환한다.
이 매개변수가 생략됐을 때의 기본값은 쉼표이며, 문자열 요소를 합칠 때 정의되지 않은 요소, 삭제된 요소, null, undefined는 모두 빈 문자열로 취급한다.

const arr = [1, null, 'hello', 'world', true, undefined];
delete arr[3];
arr.join();
// '1,,hello,,true'

arr.join('');
// '1hellotrue'

arr.join(' -- ');
// '1 -- -- hello -- -- true --'

문자열 병합과 Array.prototype.join을 함께 쓰면 HTML <ul>리스트 같은 것도 만들 수 있다. 이때 빈 배열에 사용하면 빈 <li>요소 하나만 나올 것이다.

const attributes = ['Nimble', 'Perceptive', 'Generous'];
const html = '<ul><li>' + attributes.join('</li><li>') + '</li></ul>';
// html: "<ul><li>Nimble</li><li>Perceptive</li><li>Generous</li></ul>"

요약

자바스크립트 Array 클래스에는 강력하고 유연한 메서드가 많지만, 때로는 어떤 메서드가 최선일지 판단하기 어려울 때도 있다. 다음 표들은 Array 메서드를 요약한 것이다.

콜백 함수를 받는 find, findIndex, some, every, map, filter, reduce에서 콜백 함수가 제공받는 매개변수는 아래와 같다.

배열 함수의 매개변수(순서대로)

콜백을 받는 메서드들은 또한 옵션으로 콜백을 호출할 때 this로 사용할 값을 받을 수 있다. 이 매개변수를 활용하면 콜백 함수를 메서드처럼 사용할 수 있다.

배열 콘텐츠 조작

배열 검색

배열 변형