Learning JavaScript - 배열 3편

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


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

Array 메서드는 삭제되거나 정의되지 않은 요소들을 다룰 때 좀 당혹스럽게 동작하곤 한다. mapfilter, 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에서 콜백 함수가 제공받는 매개변수는 아래와 같다.

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

메서드 설명
reduce에만 적용 누적값. 초깃값 또는 마지막 호출에서 반환한 값
모든 메서드 요소(현재 요소의 값)
모든 메서드 현재 요소의 인덱스
모든 메서드 배열 자체

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

배열 콘텐츠 조작

하고 싶은 일 사용할 메서드 수정 또는 사본
스택(후입 선출)을 만들 때 push(바뀐 길이 반환), pop 배열 수정
큐(선입 선출)를 만들 때 unshift(바뀐 길이 반환), shift 배열 수정
여러 요소를 배열 마지막에 추가할 때 concat 사본 반환
배열 일부가 필요할 때 slice 사본 반환
임의의 위치에 요소를 추가하거나 제거할 때 splice 배열 수정
배열 안에서 요소를 교체할 때 copyWithIn 배열 수정
배열을 채울 때 fill 배열 수정
배열을 반대로 정렬할 때 reverse 배열 수정
배열을 정렬할 때 sort(정렬 함수 사용 가능) 배열 수정

배열 검색

찾고자 하는 것 사용할 메서드
요소의 인덱스 indexOf(단순한 값), findIndex(복잡한 값)
인덱스를 뒤에서부터 찾을 때 lastIndexOf(단순한 값)
요소 자체 find
조건을 만족하는 요소가 들어있는지 확인할 때 some
모든 요소가 그 조건을 만족하는지 확인할 때 every

배열 변형

하고 싶은 일 사용할 메서드 수정 또는 사본
배열의 모든 요소를 변형할 때 map 사본 반환
조건에 맞는 요소만 남길 때 filter 사본 반환
배열 전체를 다른 데이터 타입으로 변형할 때 reduce 사본 반환
요소를 문자열로 바꿔서 하나로 합칠 때 join 사본 반환

2019

Back to Top ↑

2018

python borg(monostate) design pattern

특징 싱글톤(singleton)처럼 동작하나 단 하나의 인스턴스를 갖는 대신, 동일한 상태를 공유하는 인스턴스를 여러개 생성 할 수 있다. 즉, 인스턴스 ID를 공유하는 대신 상태를 공유하는 데 초점을 맞춘다.

Back to Top ↑