[러닝 자바스크립트] - 배열과 배열 처리

러닝 자바스크립트 8장에 해당되는 부분이며, 읽으면서 자바스크립트에 대해 새롭게 알게된 것과 기록하고 싶은 부분을 정리한 내용입니다.

배열

자바스크립트의 배열과 다른 언어들(특히 자바)의 배열과는 약간의 차이점이 존재한다.

• 자바스크립트의 배열은 비균질적이라 배열의 요소가 모두 같은 타입일 필요가 없다.
• 배열에 배열의 길이보다 큰 인덱스를 사용해 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며, 빈 자리는 undefined가 할당된다.

*
const arr = ['one',2,'three'];

*
const arr = [1,2,3];
arr[4] = 5;
arr; // [1,2,3,undefined,4];
arr.length; // 5

배열 요소 조작

자바스크립트의 배열 요소 조작 메서드에는 배열 자체를 수정하는 메서드와, 배열을 수정하지 않고 새 배열을 반환하는 메서드로 나뉜다. 메서드 이름에는 차이점에 대한 힌트가 전혀 없기 때문에 전부 기억하고 있어야 한다.

메서드의 종류 너무 많기 때문에 새롭게 알게된 점이 있는 메서드들만 정리한다.

Array.concat()

concat 메서드는 배열의 끝에 여러 요소를 추가한 사본을 반환한다. 주의할 점은 제공받은 배열은 한 번만 분해한다는 점이다.

const arr = [1,2,3];
arr.concat(4,5,6); // [1,2,3,4,5,6]
arr.concat([4,5],6); // [1,2,3,4,5,6]
arr.concat([4,[5,6]); // [1,2,3,4,[5,6]]

Array.copyWithin()

copyWithin은 ES6에서 도입한 새로운 메서드로 배열 요소를 복사해서 다른 위치에 붙여넣고, 기준의 요소를 덮어씌워 수정한다. 매개변수의 값은 차례대로 붙여넣을 위치, 복사를 시작할 위치, 복사를 끝낼 위치(생략가능)이다.

const arr = [1,2,3,4];
arr.copyWithin(1,2); // arr = [1,3,4,4]
arr.copyWithin(2,0,2); // arr = [1,3,1,3]
arr.copyWithin(0,-3,-1); // arr = [3,1,1,3]

배열 검색

Array.indexOf, Array.lastIndexOf

indexOf는 찾고자 하는 것과 정확히 일치(===)하는 첫 번째 요소의 인덱스를 반환하고, lastIndexOf는 배열의 끝에서부터 검색한다. 두 메서드 모두 배열의 일부분만 검색하기 위해 두 번째 매개변수의 값에 시작 인덱스를 지정할 수 있으며 생략도 가능하다. 일치하는 것을 찾지 못하면 -1를 반환한다.

Array.findIndex, Array.find

findIndex는 일치하는 것을 찾지 못했을 때 -1를 반환하는 점에서 indexOf와 같지만, 함수를 사용해 조건을 지정할 수 있다. 하지만 검색을 시작할 인덱스를 지정할 수 없고, 뒤에서부터 찾는 메서드도 존재하지 않는다.

const arr = [{ id: 5, name: "Judith"}, {id: 7, name: "Francis"}];
arr.findIndex(o => o.id === 5); // 0
arr.findIndex(o => o.name === "Hello"); -1

find는 조건에 맞는 인덱스가 아닌, 조건에 맞는 요소 자체를 반환한다. findIndex와 마찬가지로 함수를 사용해 조건을 지정할 수 있다. 조건에 맞는 요소가 없는 경우 undefined를 반환한다.

const arr = [{ id: 5, name: "Judith"}, {id: 7, name: "Francis"}];
arr.find(o => o.id === 5); // { id: 5, name: "Judith"}
arr.find(o => o.name === "Hello"); // undefined

find와 findIndex에서 전달하는 함수는 첫 번째 매개변수로 배열의 요소를 받고, 두 번째 매개변수에는 요소의 인덱스를 받는다. 따라서 다양하게 응용이 가능하다.

const arr = [1,17,16,5,4,16,10,3];
arr.find((x,i) => i>2 && Number.isInteger(Math.sqrt(x))); // 4

map과 filter

map은 배열 요소를 콜백함수의 조건에 맞게 변형해 반환하고, filter는 콜백함수의 조건에 맞는 요소들만 남겨 반환한다. 두 메서드의 콜백 함수에는 순서대로 요소, 인덱스, 배열 전체를 매개변수로 받는다.

reduce

reduce는 배열 자체를 변형한다. 보통 배열을 값 하나로 줄이는데 쓰이고 콜백 함수를 받는다.
하지만 콜백 함수의 첫 번째 매개변수에 배열의 요소가 아닌, 어큐뮬레이터(책에서는 누적값으로 의역한다)를 받는다. 또한 초깃값도 옵션으로 받을 수 있다.

const arr = [5,7,2,4];
const sum = arr.reduce((a,x) => a += x, 0); // 초깃값은 0이며 sum의 값은 18이 된다

누적값에 초깃값이 지정되지 않아 undefined로 시작한다면, 배열의 첫 번째 요소가 초깃값이 되고 두 번째 요소부터 함수가 호출된다.

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

Array 메서드는 삭제되거나 정의되지 않은 요소들에서 콜백 함수를 호출하지 않는다.

const arr = Array(10).map(function(x) {return 5}); // [undefined, ... x 10]

위 코드는 길이가 10인 배열에 요소를 5로 초기화하려는 코드 이지만, 실행되기 이전에 배열이 정의되지 않았기 때문에 arr의 요소는 전부 undefined이다.
배열을 특정 값으로 초기화하고자 할 때는 fill 메서드를 이용하면 된다.

const arr = new Array(10).fill(5); // [5,5,5, ... x 10];

문자열 병합

배열의 문자열 요소들을 구분자로 합치려면 join 메서드를 사용한다. join은 매개변수로 구분자 하나를 받고 요소를 하나로 합친 문자열을 반환한다. 매개변수가 생략됐을 때의 기본값은 쉼표이다. 문자열 요소를 합칠 때 undefined, 삭제된 요소, null은 모두 빈 문자열로 취급된다.

const arr = [1,null,"hello",true,undefined];
arr.join(); // "1,,hello,,true,"
arr.join(''); // "1hellotrue"