27. 배열

1. 배열이란?

배열은 여러 개의 값을 순차적으로 나열한 자료구조이다. 배열 안에는 요소들을 저장할 수 있으며, 요소들의 위치인 인덱스를 갖는다. 배열의 길이 length 프로퍼티를 갖는다.

 

2. JS 배열은 배열이 아니다

자료구조에서의 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조이다. 이라한 배열을 밀집 배열이라 한다.

 

JS의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다.

 

JS에서는 배열이라는 타입이 없으며 JS에서의 배열은 객체 타입이며 다른 객체와 달리 length 프로퍼티가 있다.

 

// "16.2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체" 참고
console.log(Object.getOwnPropertyDescriptors([1, 2, 3]));
/*
{
  '0': {value: 1, writable: true, enumerable: true, configurable: true}
  '1': {value: 2, writable: true, enumerable: true, configurable: true}
  '2': {value: 3, writable: true, enumerable: true, configurable: true}
  length: {value: 3, writable: true, enumerable: false, configurable: false}
}
*/

위의 코드에서 알 수 있듯이 JS의 배열은 배열을 따라한 객체이다.

 

JS배열은 인덱스로 배열 요소에 접근해 일반 배열보다 느리지만 삽입, 삭제를 하는 경우에는 더 빠르다. 인덱스로 배열 요소에 접근할 때 일반 배열보다 느린 점을 보완하기 위해 대부분의 JS엔진은 배열을 일반 객체와 구별해 좀 더 배열처럼 동작하도록 최적화를 진행했다.

const arr = [];

console.time('Array Performance Test');

for (let i = 0; i < 10000000; i++) {
  arr[i] = i;
}
console.timeEnd('Array Performance Test');
// 약 340ms

const obj = {};

console.time('Object Performance Test');

for (let i = 0; i < 10000000; i++) {
  obj[i] = i;
}

console.timeEnd('Object Performance Test');
// 약 600ms

 

 

 

3. length 프로퍼티와 희소 배열

JS의 배열의 length 프로퍼티는 0부터 2^32 - 1(4,284,967,295)까지의 값을 갖는 양의 정수이다.

 

length 프로퍼티 값 보다 큰 숫자가 length 프로퍼티에 할당되어도 length 프로퍼티 값만 변경될 뿐, 실제 배열의 길이는 늘어나지 않는다.

const arr = [1];

// 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당
arr.length = 3;

// length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
console.log(arr.length); // 3
console.log(arr); // [1, empty × 2]

 

empty * 2는 실제 추가된 배열의 요소가 아닐 뿐더러 메모리 공간 확보도 안되어있다.

 

이처럼 배열의 요소가 연속적으로 위치하지 않고 일부가 비어있는 배열을 희소 배열이라 하며 JS는 희소 배열을 문법적으로 허용한다.

// 희소 배열
const sparse = [, 2, , 4];

// 희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않는다.
console.log(sparse.length); // 4
console.log(sparse); // [empty, 2, empty, 4]

// 배열 sparse에는 인덱스가 0, 2인 요소가 존재하지 않는다.
console.log(Object.getOwnPropertyDescriptors(sparse));
/*
{
  '1': { value: 2, writable: true, enumerable: true, configurable: true },
  '3': { value: 4, writable: true, enumerable: true, configurable: true },
  length: { value: 4, writable: true, enumerable: false, configurable: false }
}
*/

 

일반적인 배열의 length는 배열의 길이와 언제나 같지만, 희소 배열의 length와 요소의 개수는 일치하지 않는다. 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 같거나 크다.

 

JS에서 희소 배열을 문법적으로 지원하지만, 연속적인 값의 잡합이라는 배열의 기본적인 개념과 맞지 않으며 성능적으로도 좋지 않아 희소 배열의 사용을 지양해야 한다.

 

 

4. 배열 생성

4-1. 배열 리터럴

const arr = [1, 2, 3];
console.log(arr.length); // 3

 

4-2. Array 생성자 함수

Array 생성자 함수는 new 연산자와 함께 호출하지 않아도 Array 생성자 함수 내부에서 new.target을 확인 하기 때문에 배열을 생성하는 생성자 함수처럼 동작한다. 

const arr = new Array(10);

console.log(arr); // [empty × 10]
console.log(arr.length); // 10

 

4-3. Array.of

ES6에 도입되었으며 전달된 인수를 요소로 갖는 배열을 생성한다.

// 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.
Array.of(1); // -> [1]

Array.of(1, 2, 3); // -> [1, 2, 3]

Array.of('string'); // -> ['string']

 

4-4. Array.from

ES6에 도입되었으며 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배욜로 변환하여 반환한다.

// 유사 배열 객체를 변환하여 배열을 생성한다.
Array.from({ length: 2, 0: 'a', 1: 'b' }); // -> ['a', 'b']

// 이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
Array.from('Hello'); // -> ['H', 'e', 'l', 'l', 'o']

// Array.from에 length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채운다.
Array.from({ length: 3 }); // -> [undefined, undefined, undefined]

// Array.from은 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다.
Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2]

 

 

5. 배열 요소의 참조

배열 요소를 참조할 때에는 대괄호( [] ) 표기법을 사용하며 대괄호 안에는 인덱스 값을 전달한다. 이때 인덱스는 객체의 프로퍼티 키와 같은 역활을 한다.

const arr = [1, 2];

// 인덱스가 0인 요소를 참조
console.log(arr[0]); // 1
// 인덱스가 1인 요소를 참조
console.log(arr[1]); // 2

 

이때 전달한 인덱스에 요소가 없는 경우 undefined를 반환한다.

 

 

6. 배열 요소의 추가와 갱신

배열에 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가되며 length 프로퍼티값이 자동 갱신된다. 

const arr = [0];

// 배열 요소의 추가
arr[1] = 1;

console.log(arr); // [0, 1]
console.log(arr.length); // 2

 

만약 현재 배열의 length 값 보다 큰 인덱스로 새로운 요소를 추가하면 요소가 연속되지 않은 희소 배열이 된다.

arr[100] = 100;

console.log(arr); // [0, 1, empty × 98, 100]
console.log(arr.length); // 101

 

이미 요소가 존재하는 요소에 값을 재할당하면 요소가 값이 갱신된다.

const arr = [];

// 배열 요소의 추가
arr[0] = 1;
arr['1'] = 2;

// 프로퍼티 추가
arr['foo'] = 3;
arr.bar = 4;
arr[1.1] = 5;
arr[-1] = 6;

console.log(arr); // [1, 2, foo: 3, bar: 4, '1.1': 5, '-1': 6]

// 프로퍼티는 length에 영향을 주지 않는다.
console.log(arr.length); // 2

 

 

7. 배열 요소의 삭제

배열은 사실 객체이기 때문에 배열의 특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있지만, 요소는 사라지지만 length값의 변화는 없기에 희소 배열이 되기 때문에 사용하지 않는것이 좋다.

const arr = [1, 2, 3];

// 배열 요소의 삭제
delete arr[1];
console.log(arr); // [1, empty, 3]

// length 프로퍼티에 영향을 주지 않는다. 즉, 희소 배열이 된다.
console.log(arr.length); // 3

 

희소 배열로 만들지 않기 위해서는 Array.prototype.splice 메서드를 사용하는 것이 더 좋다.

const arr = [1, 2, 3];

// Array.prototype.splice(삭제를 시작할 인덱스, 삭제할 요소 수)
// arr[1]부터 1개의 요소를 제거
arr.splice(1, 1);
console.log(arr); // [1, 3]

// length 프로퍼티가 자동 갱신된다.
console.log(arr.length); // 2

 

 

8. 배열 메서드

배열에는 원본 배열을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.

 

8-1. Array.isArray

전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

// true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());

// false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(1);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ 0: 1, length: 1 })

 

8-2. Array.prototype.indexOf

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

const arr = [1, 2, 2, 3];

// 배열 arr에서 요소 2를 검색하여 첫 번째로 검색된 요소의 인덱스를 반환한다.
arr.indexOf(2);    // -> 1
// 배열 arr에 요소 4가 없으므로 -1을 반환한다.
arr.indexOf(4);    // -> -1
// 두 번째 인수는 검색을 시작할 인덱스다. 두 번째 인수를 생략하면 처음부터 검색한다.
arr.indexOf(2, 2); // -> 2

 

8-3. Array.prototype.push

인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티값을 반환한다.

const arr = [1, 2];

// 인수로 전달받은 모든 값을 원본 배열 arr의 마지막 요소로 추가하고 변경된 length 값을 반환한다.
let result = arr.push(3, 4);
console.log(result); // 4

// push 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 2, 3, 4]

 

push 메서드는 원본 배열을 직접 변경하는 부수 효과가 있기 때문에 ES6의 스프레드 문법을 이용해 값을 추가하는 방법이 성능 면에서 더 좋고, 부수효과도 없다.

const arr = [1, 2];

// ES6 스프레드 문법
const newArr = [...arr, 3];
console.log(newArr); // [1, 2, 3]



const arr = [1, 2];

// arr.push(3)과 동일한 처리를 한다. 이 방법이 push 메서드보다 빠르다.
arr[arr.length] = 3;
console.log(arr); // [1, 2, 3]

 

8-4. Array.prototype.pop

원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.

const arr = [1, 2];

// 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.pop();
console.log(result); // 2

// pop 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1]

 

8-5. Array.prototype.unshift

인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.

const arr = [1, 2];

// 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값을 반환한다.
let result = arr.unshift(3, 4);
console.log(result); // 4

// unshift 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 4, 1, 2]

 

unshift 메서드 또한 push 메서드와 같이 부수효과를 발생시키기 때문에 ES6의 스프레드 문법을 이용하는 방법이 더 좋다.

 

8-6. Array.prototype.shift

원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.

const arr = [1, 2];

// 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.shift();
console.log(result); // 1

// shift 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [2]

 

8-7. Array.prototype.concat

인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.

const arr1 = [1, 2];
const arr2 = [3, 4];

// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다.
// 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다.
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]

// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다.
result = arr1.concat(3);
console.log(result); // [1, 2, 3]

// 배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다.
result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [1, 2]

 

이 메서드 또한 스프레드 문법을 이용해 대체할 수 있으며 일관성 있게 사용할 수 있기에 스프레드 문법의 사용이 권장된다.

 

8-8. Array.prototype.splice

push, pop, unshift, shift 메서드는 모두 원본 배열을 직접 변경하는 메서드이다. 원본 배열의 중간에 요소를 추가하거나 중간 요소를 제거하는 경우 splice 메서드를 이용한다.

const arr = [1, 2, 3, 4];

// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 20, 30);

// 제거한 요소가 배열로 반환된다.
console.log(result); // [2, 3]
// splice 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 20, 30, 4]

 

 

8-9. Array.prototype.slice

인수로 전달된 범위의 요소들을 복하애 배열로 반환하며 원본 배열은 변경되지 않는다.

const arr = [1, 2, 3];

// arr[0]부터 arr[1] 이전(arr[1] 미포함)까지 복사하여 반환한다.
arr.slice(0, 1); // -> [1]

// arr[1]부터 arr[2] 이전(arr[2] 미포함)까지 복사하여 반환한다.
arr.slice(1, 2); // -> [2]

// 원본은 변경되지 않는다.
console.log(arr); // [1, 2, 3]

 

전달되는 인수 중 첫 번째 인수가 음수라면 배열의 끝에서 부터 요소를 복사해 배열로 반환한다.

const arr = [1, 2, 3];

// 배열의 끝에서부터 요소를 한 개 복사하여 반환한다.
arr.slice(-1); // -> [3]

// 배열의 끝에서부터 요소를 두 개 복사하여 반환한다.
arr.slice(-2); // -> [2, 3]

 

 

8-10. Array.prototype.join

원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열로 연결한 문자열을 반환한다.

const arr = [1, 2, 3, 4];

// 기본 구분자는 ','이다.
// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 기본 구분자 ','로 연결한 문자열을 반환한다.
arr.join(); // -> '1,2,3,4';

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 빈문자열로 연결한 문자열을 반환한다.
arr.join(''); // -> '1234'

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 구분자 ':'로 연결한 문자열을 반환한다.ㄴ
arr.join(':'); // -> '1:2:3:4'

 

8-11. Array.prototype.reverse

원본 배열의 순서를 반대로 뒤집으며 이때 원본 배열이 변경된다.

const arr = [1, 2, 3];
const result = arr.reverse();

// reverse 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 2, 1]
// 반환값은 변경된 배열이다.
console.log(result); // [3, 2, 1]

 

8-12. Arrya.prototype.fill

인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다.

const arr = [1, 2, 3, 4, 5];

// 인수로 전달받은 값 0을 배열의 인덱스 1부터 3 이전(인덱스 3 미포함)까지 요소로 채운다.
arr.fill(0, 1, 3);

// fill 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 0, 0, 4, 5]

 

Array.from 메서드를 이용하며 두 번째 인수로 전달한 콜백 함수를 통해 요소값을 만들면서 배열을 채울 수 있다.

// 인수로 전달받은 정수만큼 요소를 생성하고 0부터 1씩 증가하면서 요소를 채운다.
const sequences = (length = 0) => Array.from({ length }, (_, i) => i);
// const sequences = (length = 0) => Array.from(new Array(length), (_, i) => i);

console.log(sequences(3)); // [0, 1, 2]

 

8-13. Array.prototype.includes

배열 내에 특정 요소가 포함되어 있는지 확인해 true 혹은 false를 반환한다.

const arr = [1, 2, 3];

// 배열에 요소 2가 포함되어 있는지 확인한다.
arr.includes(2); // -> true

// 배열에 요소 100이 포함되어 있는지 확인한다.
arr.includes(100); // -> false

 

8-14. Array.prototype.flat

ES10에서 도입되었으며 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.

// 중첩 배열을 평탄화하기 위한 깊이 값의 기본값은 1이다.
[1, [2, [3, [4]]]].flat();  // -> [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(1); // -> [1, 2, [3, [4]]]

// 중첩 배열을 평탄화하기 위한 깊이 값을 2로 지정하여 2단계 깊이까지 평탄화한다.
[1, [2, [3, [4]]]].flat(2); // -> [1, 2, 3, [4]]
// 2번 평탄화한 것과 동일하다.
[1, [2, [3, [4]]]].flat().flat(); // -> [1, 2, 3, [4]]

// 중첩 배열을 평탄화하기 위한 깊이 값을 Infinity로 지정하여 중첩 배열 모두를 평탄화한다.
[1, [2, [3, [4]]]].flat(Infinity); // -> [1, 2, 3, 4]

 

 

9. 배열 고차 함수

고차 함수는 함수를 인수로 전달 받거나 함수를 반환하는 함수를 말한다.

 

외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재한느 조건문과 반복문을 제거하여 코드의 복잡성을 해결하고 변수의 사용을 억제해 상태 변경을 피하려는 프로그래밍 패러다임이다.

 

9-1. Array.prototype.sort

배열의 요소를 정렬하고 원본 배열을 직접 변경하여 정렬된 배열을 반환한다.

const points = [40, 100, 1, 5, 2, 25, 10];

// 숫자 배열의 오름차순 정렬. 비교 함수의 반환값이 0보다 작으면 a를 우선하여 정렬한다.
points.sort((a, b) => a - b);
console.log(points); // [1, 2, 5, 10, 25, 40, 100]

// 숫자 배열에서 최소/최대값 취득
console.log(points[0], points[points.length]); // 1

// 숫자 배열의 내림차순 정렬. 비교 함수의 반환값이 0보다 크면 b를 우선하여 정렬한다.
points.sort((a, b) => b - a);
console.log(points); // [100, 40, 25, 10, 5, 2, 1]

// 숫자 배열에서 최대값 취득
console.log(points[0]); // 100

 

sort 메서드의 기본 정렬 순서는 유니코드 코드 포인트의 순서를 따른다.

const points = [40, 100, 1, 5, 2, 25, 10];

points.sort();

// 숫자 요소들로 이루어진 배열은 의도한 대로 정렬되지 않는다.
console.log(points); // [1, 10, 100, 2, 25, 40, 5]

 

9-2. Array.prototype.forEach

for 문은 반복을 위해 변수를 선언해야 하며, 조건식과 증감식으로 이루어져 있어 함수형 프로그래밍이 추구하는 바와 맞지 않다.

 

이러한 문제를 forEach 메서드를 이용해 함수형 프로그래밍을 만족할 수 있다.

 

또한 화살표 함수를 사용하면 함수 자체의 this 바인딩을 갖지 않으므로 콜백함수에서 this를 사용하고 싶다면 화살표 함수를 사용하는 것이 권장된다.

물론 forEach의 두번째 인수로 this 바인딩할 값을 전달해 화살표 함수를 사용하지 않고 바인딩 할 수 있지만, 가독성과 복잡도가 높아지기 때문에 화살표 함수의 사용이 권장된다.

class Numbers {
  numberArray = [];

  multiply(arr) {
    // 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다.
    arr.forEach(item => this.numberArray.push(item * item));
  }
}

const numbers = new Numbers();
numbers.multiply([1, 2, 3]);
console.log(numbers.numberArray); // [1, 4, 9]

 

또한 forEach에서는 break와 continue 문을 사용할 수 없다.

 

요소의 연속성이 보장되지 않는 희소 배열의 경우 요소가 없다면 순회 대상에서 탈락된다.

 

9-3. Array.prototype.map

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복해 호출하며 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.

const numbers = [1, 4, 9];

// map 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
// 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
const roots = numbers.map(item => Math.sqrt(item));

// 위 코드는 다음과 같다.
// const roots = numbers.map(Math.sqrt);

// map 메서드는 새로운 배열을 반환한다
console.log(roots);   // [ 1, 2, 3 ]
// map 메서드는 원본 배열을 변경하지 않는다
console.log(numbers); // [ 1, 4, 9 ]

 

 

9-4. Array.prototype.filter

호출한 배열의 모든 요소를 순회하며 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4, 5];

// filter 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
// 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
// 다음의 경우 numbers 배열에서 홀수인 요소만을 필터링한다(1은 true로 평가된다).
const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

 

 

9-5. Array.prototype.reduce

호출한 배열의 모든 요소를 순회하며 콜백 함수를 호출해 하나의 결과값을 만들어 반환한다.

// [1, 2, 3, 4]의 모든 요소의 누적을 구한다.
const sum = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0);

console.log(sum); // 10

 

 

9-6. Array.prototype.some

콜백 함수의 반환값이 단 하나라도 참이면 true를 반환한다.

// 배열의 요소 중에 10보다 큰 요소가 1개 이상 존재하는지 확인
[5, 10, 15].some(item => item > 10); // -> true

// 배열의 요소 중에 0보다 작은 요소가 1개 이상 존재하는지 확인
[5, 10, 15].some(item => item < 0); // -> false

// 배열의 요소 중에 'banana'가 1개 이상 존재하는지 확인
['apple', 'banana', 'mango'].some(item => item === 'banana'); // -> true

// some 메서드를 호출한 배열이 빈 배열인 경우 언제나 false를 반환한다.
[].some(item => item > 3); // -> false

 

 

9-7. Array.prototype.every

배열의 모든 요소를 순회하며 모든 콜백 함수의 반환값이 true일 때만 true를 반환하고 나머지는 false를 반환한다.

// 배열의 모든 요소가 3보다 큰지 확인
[5, 10, 15].every(item => item > 3); // -> true

// 배열의 모든 요소가 10보다 큰지 확인
[5, 10, 15].every(item => item > 10); // -> false

// every 메서드를 호출한 배열이 빈 배열인 경우 언제나 true를 반환한다.
[].every(item => item > 3); // -> true

 

 

9-8. Array.prototype.find

콜백함수의 반환값이 true인 첫 번째 요소를 반환한다. true인 요소가 없다면 undefined를 반환한다.

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// id가 2인 첫 번째 요소를 반환한다. find 메서드는 배열이 아니라 요소를 반환한다.
users.find(user => user.id === 2); // -> {id: 2, name: 'Kim'}

 

 

9-9. Array.prototype.flatMap

ES10에 도입됬으며 map 메서드를 통해 생성된 배열을 평탄화해 반환한다.

const arr = ['hello', 'world'];

// map과 flat을 순차적으로 실행
arr.map(x => x.split('')).flat();
// -> ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

// flatMap은 map을 통해 생성된 새로운 배열을 평탄화한다.
arr.flatMap(x => x.split(''));
// -> ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']