[JavaScript] 24. 배열

📖 모던 자바스크립트 교재 27장. 배열

01. 배열이란?

여러 개의 값을 순차적으로 나열한 자료구조

사용 빈도가 매우 높은 가장 기본적인 자료구조이므로 잘 알아두기로 하자.

const arr = ['apple', 'banana', 'orange'];

🔹 요소 (Element) : 배열이 가지고 있는 값

🔹 인덱스 (Index) : 배열에서 배열의 요소의 위치 (0 이상의 정수)

 

🔹 대괄호 표기법을 통해 요소에 접근한다.

arr[0] // -> 'apple'
arr[1] // -> 'banana'
arr[2] // -> 'orange'

🔹 length 프로퍼티 : 배열의 길이(요소의 개수)를 나타내는 프로퍼티

arr.length // -> 3

🔹배열은 객체 타입이다.

 

❓배열을 생성하려면

🔹배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성

const arr = [1, 2, 3];

arr.constructor === Array // -> true
Object.getPrototypeOf(arr) === Array.prototype // -> true

🔹일반 객체와의 차이점

➡️ 일반 객체와 달리, 배열은 값의 순서, length 프로퍼티가 존재

---

02. 자바스크립트 배열은 배열이 아니다

희소 배열(spares array) : 메모리 공간 동일하지 않아도 됨 / 배열의 요소가 연속적으로 이어져 있지 않는 배열

🆚 일반적인 의미의 배열인 밀집 배열(dense array)은 동일한 크기의 메모리 공간이 연속적으로 나열됨 / 하나의 데이터 타입으로 통일

 

➡️ 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수의 객체이므로, '자바스크립트 배열은 배열이 아니다' 라고 표현하고 있다.

---

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

💡 length 프로퍼티

배열의 길이를 나타내는 0 이상의 정수값

 

🔹배열에 요소를 추가/삭제하면 자동 갱신된다.

🔹length 프로퍼티 값보다 작은 숫자 값 할당 : 배열의 길이가 줄어듦

🔹length 프로퍼티 값보다 큰 숫자 값 할당 : 값은 변경 O / 실제로 배열의 길이 늘어나지 X

➡️ 이런 경우, 배열의 요소 중 일부가 비어있게 됨 -> 이것을 희소 배열이라고 한다.

➡️ 희소 배열 : length > 배열의 실제 요소 개수

⚠️ 희소 배열을 생성하지 않도록 주의하자.

---

04. 배열 생성

1) 배열 리터럴

🔹가장 일반적이고 간편한 배열 생성 방식

🔹요소를 쉼표로 구분하고, 대괄호로([]) 묶어서 표현한다.

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

---

2) Array 생성자 함수

💡 전달된 인수의 개수에 따라 다르게 동작함

🔹전달된 인수가 1개이고 숫자인 경우) length 프로퍼티 값이 인수인 배열 생성

const arr = new Array(10);

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

🔹전달된 인수가 없는 경우) 빈 배열 생성

new Array(); // -> []

🔹전달된 인수가 2개 이상이거나 숫자가 아닌 경우) 인수를 요소로 갖는 배열 생성

// 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열을 생성한다.
new Array(1, 2, 3); // -> [1, 2, 3]

// 전달된 인수가 1개지만 숫자가 아니면 인수를 요소로 갖는 배열을 생성한다.
new Array({}); // -> [{}]

---

3) Array.of

💡 전달된 인수를 요소로 갖는 배열을 생성한다.

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

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

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

---

4) Array.from

💡 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열을 생성한다.

// 유사 배열 객체를 변환하여 배열을 생성한다.
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]

---

05. 배열 요소의 참조

💡 대괄호([ ]) 에 인덱스를 넣어 배열의 요소를 참조한다.

const arr = [1, 2];

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

🔹 존재하지 않는 요소에 접근하면 undefined가 반환된다.

---

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

🔹존재하지 않는 인덱스를 통해 값을 할당하면 새로운 요소가 추가되고,

🔹동시에 length 프로퍼티의 값이 자동 갱신된다.

const arr = [0];

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

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

---

07. 배열 요소의 삭제

🔹 배열은 객체이기 때문에 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

---

08. 배열 메서드

원본 배열을 직접 변경하는 메서드 (mutator method) 보다,

원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드 (accessor method) 를 사용하는 것이 좋다.

---

1) Array.isArray

💡 전달된 인수가 배열인지 여부를 boolean으로 반환하는 메서드

---

2) Array.prototype.indexOf

💡원본 배열에서 인수로 전달된 요소의 인덱스를 반환하는 메서드

 

🔹 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다는 점을 이용하여

➡️ 배열에 특정 요소가 존재하는지 확인할 수 있다.

const foods = ['apple', 'banana', 'orange'];

// foods 배열에 'orange' 요소가 존재하는지 확인한다.
if (foods.indexOf('orange') === -1 {
    // foods 배열에 'orange' 요소가 존재하지 않으면 'orange' 요소를 추가한다.
    foods.push('orange');
}

console.log(foods); // ["apple", "banana", "orange"]

---

3) Array.prototype.push

💡인수를 배열의 마지막 요소로 추가하고, 변경된 length 프로퍼티 값을 반환하는 메서드

 

💡 push 메서드 보다는 length 프로퍼티로 마지막에 직접 추가하는 것이 더 성능적으로 좋다.

const arr = [1, 2];

// arr.push(3)과 동일한 처리를 한다. 이 방법이 push 메서드보다 빠르다.
// arr 배열에 추가하려는 인덱스 값이 length, 즉 2이므로 -> length 프로퍼티를 이용하여 배령ㄹ의 마지막에 요소 추가 가능
arr[arr.length] = 3;
console.log(arr); // [1, 2, 3]

---

4) Array.prototype.pop

💡 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환하는 메서드

💡 빈 배열이면 undefined를 반환하며, 원본 배열을 직접 변경한다.

 

💡 pop 메서드와 push 메서드를 통해 스택을 구현할 수 있다.

➡️ 스택은 후입 선출 방식의 자료구조이므로, 스택에 데이터를 밀어 넣는 push와 스택에서 데이터를 꺼내는 pop 활용.

---

5) Array.prototype.unshift

💡 인수를 원본 배열의 선두에 추가하고, 변경된 length 프로퍼티 값을 반환하는 메서드 

---

6) Array.prototype.shift

💡 원본 배열에서 첫 번째 요소를 제거하고 제거된 요소를 반환하는 메서드

 

💡 shift 메서드와 push 메서드를 통해 큐를 구현할 수 있다.

➡️ 큐는 선입 선출 방식의 자료구조이므로, 큐에 데이터를 밀어 넣는 push와 큐에 가장 먼저 밀어 넣은 데이터를 꺼내는 shift 활용.

---

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]

💥 원본 배열을 변경하지 않고 새로운 배열을 반환하기 때문에, 반환값은 반드시 변수에 할당해야 한다.

 

💥 push/unshift 메서드와 concat 메서드를 사용하는 대신 ES6의 스프레드 문법을 일관성 있게 사용하는 것 권장.

-> "스프레드 문법"에서 살펴보도록 하자.

---

8) Array.prototype.splice

 💡원본 배열의 중간에 있는 요소를 추가 또는 제거할 경우 사용.

🔹 3개의 매개변수 ('원본 배열의 요소를 제거하기 시작할 인덱스', '제거하기 시작할 인덱스부터 제거할 요소의 개수', '제거한 위치에 삽입할 요소들의 목록')

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]

🔹 특정 요소를 제거하려면 -> indexOf 메서드를 통해 특정 요소의 인덱스를 취득하여 가능

 

🔹 중복된 특정 요소를 전부 제거하려면 ->  filter 메서드를 통해 가능

---

9) Array.prototype.slice

💡 인수로 전달된 범위의 요소들을 복사하여 배열로 반환하는 메서드

⚠️ splice 메서드와 달리 원본 배열은 변경되지 않는다.

 

🔹 2개의 매개변수 ('복사를 시작할 인덱스', '복사를 종료할 인덱스(이 인덱스에 해당하는 요소는 복사X)')

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]

🔹 얕은 복사를 수행한다.

---

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'

---

11) Array.prototype.reverse

💡 원본 배열의 순서를 반대로 뒤집고, 변경된 배열을 반환하는 메서드

🔹 원본 배열 변경 O

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

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

---

12) Array.prototype.fill

💡 인수로 전달받은 값으로 배열의 처음부터 끝까지 변경하는 메서드

🔹 원본 배열 변경 O

const arr = [1, 2, 3];

// 인수로 전달 받은 값 0을 배열의 처음부터 끝까지 요소로 채운다.
arr.fill(0);

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

 

🔹 두 번째 인수 -> 요소 채우기 시작할 인덱스 전달

🔹 세 번째 인수 -> 요소 채우기 멈출 인덱스 전달

---

13) Array.prototype.includes

💡 배열 내에 특정 요소가 포함되어 있는지 여부에 따라 true 또는 false 반환하는 메서드

🔹 첫 번째 인수 -> 검색할 대상 지정

🔹 두 번째 인수 -> 검색을 시작할 인ㄷ게스 전달(생략할 경우 기본값은 0)

---

14) Array.prototype.flat

💡 인수로 전달한 깊이 만큼 재귀적으로 (중첩)배열을 평탄화.

[1, [2, 3, 4, 5]].flat(); // -> [1, 2, 3, 4, 5]

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

🔹 중첩 배열을 평탄화할 깊이를 인수로 전달 (생략할 경우 기본값 1 / Infinity 전달하면 모두를 평탄화)

---

09. 배열 고차 함수

고차 함수(Higher-Order Function, HOF)란, 함수를 인수로 전달받거나 함수를 반환하는 함수

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

1) Array.prototype.sort

💡 배열의 요소를 정렬하고, 정렬된 배열을 반환하는 메서드

🔹 원본 배열을 직접 변경 O

 

🔹 기본 : 오름차순으로 요소 정렬 

🔹 내림차순 정렬 : sort 메서드 사용 후, reverse 메서드 사용하면 가능

---

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

➡️ 숫자 요소로 이루어진 배열을 정렬할 때 -> 배열의 요소를 문자열로 변환하고, 유니코드 코드 포인트의 순서를 기준으로 정렬하여 -> 의도치 않은 결과가 나올 수 있다.

 

➡️ 숫자 요소를 정렬할 때) 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다.

<비교 함수의 반환값>

🔹 양수 -> 두 번째 인수를 우선시

🔹 음수 -> 첫 번째 인수를 우선시

🔹 0 -> 정렬하지 않는다.

---

2) Array.prototype.forEach

💡 for 문을 대체할 수 있는 고차 함수

🔹 내부에서 반복문을 통해 자신을 호출한 배열을 순회한다.

🔹 수행해야 할 처리를 콜백 함수로 전달받아 반복적으로 호출한다.

(ex. 배열의 요소가 3개이면, 콜백 함수도 3번 호출됨)

const numbers = [1, 2, 3];
let pows = [];

// forEach 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
numbers.forEach(item => pows.push(item ** 2));
console.log(pows); // [1, 4, 9]

 

🔹 forEach 메서드의 콜백 함수는 forEach 메서드를 호출한 배열의 요소값, 인덱스, forEach 메서드를 호출한 배열(this)를 순차적으로 전달받는다.

 

🔹 forEach 메서드의 반환값은 항상 undefined다.

 

🔹 forEach 메서드 내부에서는 for 문을 통해(내부로 은닉해서) 배열을 순회하는데, for 문과는 달리 break, continue 문을 사용할 수 없어서 배열의 모든 요소를 모두 순회하고 중간에 중단할 수 없다.

🔹 희소 배열의 경우, 존재하지 않는 요소는 순회 대상에서 제외된다.

 

💡 for 문에 비해 가독성이 좋아, 높은 성능이 필요한 경우가 아니라면 forEach 메서드 사용 권장

---

3) Array.prototype.map

💡 자신을 호출한 배열을 순회하면서 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.

🔹 원본 배열 변경 X

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 ]

 

💡 map 메서드가 반환한 새로운 배열은 map 메서드를 호출한 기존의 배열과 반드시 1대1 매핑된다.

// map 메서드는 콜백 함수를 호출하면서 3개(요소값, 인덱스, this)의 인수를 전달한다.
[1, 2, 3].map((item, index, arr) => {
  console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
  return item;
});
/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

🔹 map 메서드의 콜백 함수는 map 메서드를 호출한 배열의 요소값, 인덱스, map 메서드를 호출한 배열(this)를 순차적으로 전달받는다.

 

---

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]

🔹 map 메서드와 달리 filter 메서드가 반환한 새로운 배열은 기존의 배열과 길이가 다를 수 있다.

 

🔹 filter 메서드를 호출한 배열의 요소값, 인덱스, filter 메서드를 호출한 배열(this)을 순차적으로 전달받는다.

 

🔹 자신을 호출한 배열에서 특정 요소를 제거하기 위해 사용할 수도 있다.

---

5) Array.prototype.reduce

💡 자신을 호출한 배열을 순회하면서 콜백 함수를 호출한다.

 

🔹 콜백 함수의 반환값은 다음 순회에서의 콜백 함수의 첫 번째 인수로 전달된다.

🔹 이런식으로 순회하면서 최종적으로는 하나의 결과값을 반환한다.

🔹 원본 배열은 변경 X

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

console.log(sum); // 10

<reduce 메서드의 다양한 활용법>

1. 평균 구하기

const values = [1, 2, 3, 4, 5, 6];

const average = values.reduce((acc, cur, i, { length }) => {
  // 마지막 순회가 아니면 누적값을 반환하고 마지막 순회면 누적값으로 평균을 구해 반환한다.
  return i === length - 1 ? (acc + cur) / length : acc + cur;
}, 0);

console.log(average); // 3.5

2. 최댓값 구하기 (reduce 메서드보다 Math.max 메서드를 사용하는 방법이 더 직관적)

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

const max = values.reduce((acc, cur) => (acc > cur ? acc : cur), 0);
console.log(max); // 5

3. 요소의 중복 횟수 구하기

const fruits = ['banana', 'apple', 'orange', 'orange', 'apple'];

const count = fruits.reduce((acc, cur) => {
  // 첫 번째 순회 시 acc는 초기값인 {}이고 cur은 첫 번째 요소인 'banana'다.
  // 초기값으로 전달받은 빈 객체에 요소값인 cur을 프로퍼티 키로, 요소의 개수를 프로퍼티 값으로
  // 할당한다. 만약 프로퍼티 값이 undefined(처음 등장하는 요소)이면 프로퍼티 값을 1로 초기화한다.
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});

// 콜백 함수는 총 5번 호출되고 다음과 같이 결과값을 반환한다.
/*
{banana: 1} => {banana: 1, apple: 1} => {banana: 1, apple: 1, orange: 1}
=> {banana: 1, apple: 1, orange: 2} => {banana: 1, apple: 2, orange: 2}
*/

console.log(count); // { banana: 1, apple: 2, orange: 2 }

4. 중첩 배열 평탄화 (redude 메서드보다 Array.prototype.flat 메서드 사용이 더 직관적)

const values = [1, [2, 3], 4, [5, 6]];

const flatten = values.reduce((acc, cur) => acc.concat(cur), []);
// [1] => [1, 2, 3] => [1, 2, 3, 4] => [1, 2, 3, 4, 5, 6]

console.log(flatten); // [1, 2, 3, 4, 5, 6]
[1, [2, 3, 4, 5]].flat(); // -> [1, 2, 3, 4, 5]

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

5. 중복 요소 제거 (reduce 메서드보다 filter 메서드 사용이 더 직관적)

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

const result = values.reduce(
  (unique, val, i, _values) =>
    // 현재 순회 중인 요소의 인덱스 i가 val의 인덱스와 같다면 val은 처음 순회하는 요소다.
    // 현재 순회 중인 요소의 인덱스 i가 val의 인덱스와 다르다면 val은 중복된 요소다.
    // 처음 순회하는 요소만 초기값 []가 전달된 unique 배열에 담아 반환하면 중복된 요소는 제거된다.
    _values.indexOf(val) === i ? [...unique, val] : unique,
  []
);

console.log(result); // [1, 2, 3, 5, 4]

---

6) Array.prototype.some

💡 자신을 호출한 배열을 순회하면서 콜백 함수를 호출한다.

🔹 콜백 함수 반환값이 단 한 번이라도 참이면 true, 거짓이면 false를 반환한다.

🔹 some 메서드를 호출한 배열이 빈 배열인 경우, false 반환

// 배열의 요소 중에 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

7) Array.prototype.every

💡 자신을 호출한 배열을 순회하면서 콜백 함수를 호출한다.

🔹 콜백 함수 반환값이 모두 참이면 true, 거짓이면 false를 반환한다.

🔹 every 메서드를 호출한 배열이 빈 배열인 경우, true 반환

// 배열의 모든 요소가 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

---

8) Array.prototype.find

💡 자신을 호출한 배열을 순회하면서 콜백 함수를 호출하면서 반환값이 true인 첫 번째 요소를 반환한다.

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'}
// Array#filter는 배열을 반환한다.
[1, 2, 2, 3].filter(item => item === 2); // -> [2, 2]

// Array#find는 요소를 반환한다.
[1, 2, 2, 3].find(item => item === 2); // -> 2

---

9) Array.prototype.findIndex

💡 자신을 호출한 배열을 순회하면서 콜백 함수를 호출하면서 반환값이 true인 첫 번째 요소의 인덱스를 반환한다.

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

// id가 2인 요소의 인덱스를 구한다.
users.findIndex(user => user.id === 2); // -> 1

// name이 'Park'인 요소의 인덱스를 구한다.
users.findIndex(user => user.name === 'Park'); // -> 3

// 위와 같이 프로퍼티 키와 프로퍼티 값으로 요소의 인덱스를 구하는 경우
// 다음과 같이 콜백 함수를 추상화할 수 있다.
function predicate(key, value) {
  // key와 value를 기억하는 클로저를 반환
  return item => item[key] === value;
}

// id가 2인 요소의 인덱스를 구한다.
users.findIndex(predicate('id', 2)); // -> 1

// name이 'Park'인 요소의 인덱스를 구한다.
users.findIndex(predicate('name', 'Park')); // -> 3

---

10) Array.prototype.flatMap

💡 map 메서드를 통해 생성된 새로운 배열을 평탄화한다.

🔹 즉, map 메서드와 flat 메서드를 순차적으로 실행한다.

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']
const arr = ['hello', 'world'];

// flatMap은 1단계만 평탄화한다.
arr.flatMap((str, index) => [index, [str, str.length]]);
// -> [[0, ['hello', 5]], [1, ['world', 5]]] => [0, ['hello', 5], 1, ['world', 5]]

// 평탄화 깊이를 지정해야 하면 flatMap 메서드를 사용하지 말고 map 메서드와 flat 메서드를 각각 호출한다.
arr.map((str, index) => [index, [str, str.length]]).flat(2);
// -> [[0, ['hello', 5]], [1, ['world', 5]]] => [0, 'hello', 5, 1, 'world', 5]

 

📖 참고자료

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard