배열

김동현·2021년 9월 7일

JavaScript

목록 보기
11/32
post-thumbnail

배열이란?

배열은 여러 개의 값을 순차적으로 나열한 자료구조 이다.

배열이 갖고 있는 값"요소"라고 하고, 자바스크립트의 모든 값은 요소가 될 수 있습니다.

배열의 요소는 배열에서 자신의 위치를 나타내는 0이상의 정수인 "인덱스" 를 갖고 있으며, 인덱스는 배열의 요소에 접근할 때 사용합니다. 요소에 접근할 때는 대괄효 표기법을 사용하며 대괄호 안에 접근하고 싶은 요소의 인덱스를 작성합니다.

배열은 요소의 개수, 즉 배열의 길이를 나타내는 "length 프로퍼티"를 갖고 있습니다. 배열은 인덱스와 length 프로퍼티를 갖고 있어 for문을 통해 순차적으로 요소에 접근할 수 있습니다.

자바스크립트에서 배열이라는 타입은 존재하지 않습니다. 배열은 객체 타입 입니다.

배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.for 메서드로 생성할 수 있습니다. 배열의 생성자 함수는 Array이며, 프로토타입 객체는 Array.prototype입니다.

배열은 객체이지만 일반 객체와는 구별되는 특징이 있습니다.

구분객체배열
구조프로피터 키와 프로퍼티 값인덱스와 요소
값의 참조프로퍼티 키인덱스
값의 순서XO
length 프로퍼티XO

일반 객체와 배열이 구분되는 가장 큰 특징은 "값의 순서(인덱스)"length 프로퍼티 입니다.

인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 요소에 접근하기 적합한 자료구조입니다.**

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

자료구조에서 말하는 배열은 "동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조"를 말합니다. 즉, 배열의 요소는 하나의 데이터 타입을 갖고 있으며, 서로 연속적으로 인접해 있습니다. 이러한 배열을 밀집 배열이라고 합니다.

이와 같은 배열은 인덱스를 통해 단 한 번의 연산으로 임의의 요소에 접근할 수 있습니다. 이는 매우 효율적이며 고속으로 동작합니다.
하지만 정렬되지 않은 배열에서 임의의 요소를 검색하는 경우 배열의 모든 요소를 처음부터 요소를 발견할 때까지 차례대로 검색해야합니다. 또한 배열의 요소를 추가, 삭제하는 경우 배열의 요소를 연속적으로 유지하기 위해서 요소를 이동시켜야 한다는 단점도 존재합니다.

자바스크립트에서의 배열은 앞에서 설명한 배열의 의미와는 다릅니다. 자바스크립트에서의 배열은 요소를 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않아도 됩니다. 배열의 요소가 연속적으로 이어져 있지 않은 배열을 희소 배열이라고 합니다.

이처럼 자바스크립트의 배열은 엄밀히 말하면 일반적인 배열이 아닙니다. 자바스크립트의 배열은 배열의 동작을 흉내낸 특수한 객체입니다.

자바스크립트 배열은 인덱스를 나타내는 정수 문자열을 프로퍼티 키로, length 프로퍼티를 갖는 특수한 객체이며, 자바스크립트 배열의 요소는 사실 프로퍼티 값이므로 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 될 수 있습니다.

자바스크립트 배열은 "해시 태이블"로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다는 느릴 수밖에 없는 구조적인 단점이 존재하지만, 특정 요소를 검색하거나 요소를 삽입, 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있습니다. 자바스크립트 배열은 인덱스로 요소에 접근하는 경우의 성능 대신에 특정 요소를 탐색하거나 배열의 요소를 삽입 또는 삭제하는 경우의 성능을 선택하는 것입니다.

length 프로퍼티와 희소 배열

length 프로퍼티는 요소의 개수, 즉 배열의 길이를 나타내는 0이상의 정수를 값으로 갖습니다. length 프로퍼티의 값은 빈 배열인 경우 0이며, 빈 배열이 아닌 경우 가장 큰 인덱스에 1을 더한 값과 같습니다.

length 프로퍼티 값은 0과 223-1 미만의 양의 정수입니다.
즉, 배열은 요소를 최대 223-1개 가질 수 있습니다. 배열에서 사용할 수 있는 가장 작은 인덱스는 0이고, 가장 큰 인덱스는 223-2입니다.

length 프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동으로 갱신됩니다.

length 프로퍼티에 명시적으로 숫자 값을 할당할 수도 있습니다. 현재 length 값보다 작은 값을 할당하면 배열의 길이가 줄어들고, 현재 length 값보다 큰 값을 할당하면, length 프로퍼티 값만 변경이되고 실제 배열의 길이는 늘어나지 않습니다. length 프로퍼티 값은 성공적으로 변경되지만 실제 배열에는 아무런 변함이 없습니다.

값 없이 비어있는 요소를 위해 메모리 공간을 확보하지 않으며 빈 요소를 생성하지도 않습니다.

이처럼 배열이 연속적으로 위치하기 않고 일부가 비어있는 배열을 희소 배열이라고 합니다. 자바스크립트에서는 희소 배열을 문법적으로 허용하지만 이는 연속적인 값의 집합이라는 배열의 기본적인 개념과 맞지 않으며 성능에도 좋지 않은 영향을 줍니다.

최적화가 잘 되어있는 모던 자바스크립트 엔진은 배열을 생성할 때 요소의 타입이 하나로 통일되어 있다면 일반적인 배열처럼 연속된 메모리 공간을 확보하는 것을 알려져 있습니다. 그러므로 배열을 생성할 때는 같은 타입의 요소를 연속적으로 위치시키는 것이 최선입니다.

배열 생성

배열 리터럴

배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶습니다. 배열 리터럴은 일반적인 객체와는 달리 프로퍼티 키 없이 프로퍼티 값만 존재합니다.

// 배열 리터럴
const arr = [1, 2, 3];

Array 생성자 함수

Array 생성자 함수는 new 연산자와 함께 호출하여 배열을 생성할 수 있습니다. 단, Array 생성자 함수에 전달되는 인수의 개수에 따라 동작이 구분됩니다.

  1. 전달된 인수가 1개이고 숫자 값인 경우 length 프로퍼티 값이 인수인 배열을 생성한다. 언제나 희소 배열을 생성한다.
cosnt arr = new Array(10);
console.log(arr); // []
console.log(arr.length); // 10
  1. 전달된 인수가 없는 경우 빈 배열을 생성한다.
const arr = new Array();
console.log(arr); // []
console.log(arr.length); // 0
  1. 전달된 인수가 2개 이상이거나 숫자 타입이 아닌 경우 인수를 요소로 갖는 배열을 생성한다.
const arr1 = new Array(1, 2, 3);
console.log(arr1); // [1, 2, 3]
console.log(arr1.length); // 3

const arr2 = new Array('a');
console.log(arr2); // ['a']
console.log(arr2.length); // 1

Array.of

ES6에 도입된 Array.of 메서드Array 생성자 함수의 정적 메서드입니다.

Array.of 메서드에 전달된 인수를 요소로 갖는 배열을 생성합니다. Array 생성자 함수와는 달리 인수가 1개이고 숫자값이라도 인수를 요소로 갖는 배열을 생성합니다. 즉, 희소 배열을 생성하지 않습니다.

const arr = Array.of(10);
console.log(arr); // [10];
console.log(arr.length) // 1

Array.from

ES6에 도입된 Array.from 메서드는 인수로 유사 배열 객체 또는 이터러블을 전달받아 배열로 변환하여 반환합니다.

Array.from 두 번째 인수로 콜백 함수를 전달할 수 있습니다. 이때 첫 번째 인수로 전달한 객체를 배열로 변환하여 배열의 요소와 인덱스를 두 번째 인수로 전달받은 콜백 함수의 인수로 차례로 전달합니다. 그리고 콜백 함수의 반환값을 배열의 요소로하는 새로운 배열을 반환합니다.

const arr = Array.from({length: 3}, (_, i) => i);
console.log(arr); // [0, 1, 2]
console.log(arr.length); // 3

배열의 요소 참조

배열의 요소를 참조할 때는 "대괄호 표기법"을 사용합니다. 대괄호 안에는 참조할 요소의 인덱스를 지정합니다. 이때 정수로 평가되는 표현식인 경우 인덱스 대신해서 사용할 수 있습니다. 인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와 같은 역할을 합니다.

만약 존재하지 않는 요소에 접근하면 undefined를 반환합니다. 이는 객체에서 존재하지 않는 프로퍼티 키로 객체의 프로퍼티에 접근시 undefined를 반환하는 것과 같습니다.

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

배열 요소의 추가와 갱신

객체에 프로퍼티를 동적으로 추가할 수 있는 것처럼 배열에도 요소를 동적으로 추가할 수 있습니다. 존재하지 않는 인덱스를 사용하여 값을 할당하면 새로운 요소가 동적으로 추가됩니다. 이때 length 프로퍼티 값은 자동으로 갱신됩니다.

만약 현재 length 값보다 큰 값으로 요소를 동적으로 생성하면 희소 배열이 됩니다. 그리고 이미 존재하는 요소에 값을 재할당하면 요소값이 갱신됩니다.

인덱스는 요소의 위치를 나타내므로 반드시 0이상의 정수를 사용해야 합니다. 만약 정수 이외의 값을 인덱스 처럼 사용하는 경우 요소가 생성되는 것이 아니라 프로퍼티가 생성됩니다. 이때 프로퍼티가 추가되어도 length 값은 변경되지 않습니다.

배열 요소의 삭제

배열은 사실 객체이므로 delete 연산자로 요소를 삭제할 수 있습니다.

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

delete 연산자는 객체의 프로퍼티를 삭제합니다. 이때 배열은 희소 배열이 됩니다. length 프로퍼티 값은 변경되지 않습니다. 따라서 희소 배열을 생성하는 delete 연산자는 사용하지 않는 것이 좋습니다.

배열 메서드

배열의 메서드에는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요합니다.
배열에는 "원본 배열을 직접 변경하는 메서드""원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드"가 있습니다.

1. Array.isArray

: Array.isArrayArray 생성자 함수의 정적 메서드이며 인수로 전달한 값이 배열인지 검사하여 결과를 불리언 값으로 반환합니다.

2. Array.prototype.indexOf

: indexOf 메서드는 원본 배열에서 인수로 전달받은 요소를 검색하여 인덱스를 반환합니다. 인수로 전달한 요소와 중복되는 요소가 여러 개 존재하는 경우 첫 번째로 검색된 요소의 인덱스를 반환합니다. 만약 인수로 전달한 요소가 원본 배열에 존재하지 않으면 -1을 반환합니다.

두 번째 인수로 검색을 시작할 인덱스를 전달할 수 있습니다.

3. Array.prototype.push

: push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 값을 반환합니다. 이때 원본 배열이 변경되는 부수 효과가 존재합니다.

4. Array.prototype.pop

: pop 메서드는 원본 배열의 마지막 요소를 제거하고 제거된 요소를 반환합니다. 이때 원본 배열이 변경되는 부수 효과가 존재합니다.

5. Array.prototype.unshift

: unshift 메서드는 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값을 반환합니다. 이때 원본 배열이 변경되는 부수 효과가 존재합니다.

6. Array.prototype.shift

: shift 메서드는 원본 배열의 첫 번째 요소를 제거하고 제거된 요소를 반환합니다. 이때 원본 배열이 변경되는 부수 효과가 존재합니다.

7. Array.prototype.concat

: concat 메서드는 인수로 전달받은 모든 값을 원본 배열에 마지막 요소로 추가한 새로운 배열을 반환합니다. 이때 인수로 전달한 값중 배열이 존재하면 배열을 해제하여 요소로 추가합니다. concat 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.

8. Array.prototype.splice

: splice 메서드는 원본 배열의 중간에 요소를 추가하거나 제거하는 경우에 사용합니다. 이때 원본 배열을 직접 변경하는 부수 효과가 존재하며 제거된 요소를 배열로 만들어 반환합니다.

splice 메서드는 3개의 매개변수를 전달받습니다.

  • start : 요소를 제거할 시작 인덱스를 지정합니다. 음수인 경우에는 배열의 끝에서의 인덱스를 나타냅니다.

  • deleteCount : 요소를 제거할 개수를 지정합니다. 0을 지정하면 아무런 요소도 제거하지 않습니다.

  • items : 제거된 위치에 삽입할 요소 목록을 지정합니다. 생략한 경우 요소를 추가하지 않고 제거하기만 합니다.

9. Array.prototype.slice

: slice 메서드는 인수로 전달받은 범위의 요소들을 복사(얕은 복사)하여 배열로 반환합니다. 이때 원본 배열은 변경되지 않습니다. 인수를 모두 생략시 원본 배열 전체를 얕은 복사하여 새로운 배열을 반환합니다.

slice 메서드는 2개의 인수를 전달 받습니다.

  • start : 복사를 시작할 인덱스를 지정합니다. 음수인 경우 배열의 끝에서의 인덱스를 나타냅니다.

  • end : 복사를 종료할 인덱스를 지정합니다. 이때 두 번째 인수로 지정한 인덱스 이전까지 복사합니다. 생략한 경우 첫 번째 인수로 전달받은 인덱스부터 배열 끝까지 복사하여 새로운 배열을 반환합니다.

10. Array.prototype.join

: join 메서드는 원본 배열의 모든 요소들을 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환합니다. 인수를 생략시 기본값으로 ,(콤마)로 연결됩니다.

11. Array.prototype.reverse

: reverse 메서드는 원본 배열의 순서를 반대로 뒤집어 반환합니다. 이때 원본 배열을 직접 변경하는 부수 효과가 존재합니다.

12. Array.prototype.fill

: fill 메서드는 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채워 반환합니다. 이때 원본 배열이 변경되는 부수 효과가 존재합니다.
두 번째 인수로 요소 채우기를 시작할 인덱스를 지정할 수 있습니다.
세 번째 인수로 요소 채우기를 멈출 인덱스를 지정할 수 있습니다.

13. Array.prototype.includes

: includes 메서드는 인수로 전달받은 요소를 원본 배열에서 탐색하여 원본 배열 내에 존재하는지 확인하여 불리언 값을 반환합니다.
첫 번째 인수로 검색을 시작할 인덱스를 전달할 수 있으며 음수를 전달하면 원본 배열의 length 값과 인수를 더하여 나온 값을 검색을 시작할 인덱스로 지정하여 검색합니다.

14. Array.prototype.flat

: flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 원본 배열을 평탄화합니다. 인수 생략시 기본값은 1이며, 인수로 infinity를 전달하면 중첩된 배열 모두를 평탄화 합니다.

배열의 고차 함수

고차 함수란 함수를 인수로 전달받거나 함수를 반환하는 함수를 말합니다. 자바스크립트의 함수는 일급 객체이므로 인수로 전달할 수 있고 함수의 반환값으로 사용할 수 있습니다. 고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있습니다.

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

1. Array.prototype.sort

: sort 메서드는 배열의 요소를 정렬합니다. 원본 배열을 직접 변경하며 정렬된 배열을 반환합니다. sort 메서드는 기본적으로 오름차순으로 정렬합니다.숫자뿐만 아니라 한글 문자열인 요소도 오름차순으로 정렬됩니다.

이때 주의할 점은 숫자 요소로 이루어진 배열을 정렬할 때는 주의가 필요합니다.

const points = [40, 100, 1, 5, 2, 25, 10];
points.sort();
// 기대한대로 정렬이 되지 않습니다.
console.log(points); // [1, 10, 100, 2, 25, 40, 5]

sort 메서드는 기본 정렬 순서는 "유니코드 코드 포인트의 순서"를 따릅니다. 배열의 요소가 숫자 타입이라 할지라도 배열의 요소를 일시적으로 문자열로 바꾼뒤 유니코드 코드 포인트 순서를 기준으로 정렬합니다.

따라서 숫자 요소를 정렬할 때는 "정렬 순서를 정의하는 비교 함수"를 인수로 전달해주어야 합니다. 비교 함수는 양수나 음수, 0을 반환해야 합니다. 비교 함수의 반환값이 0보자 작으면 비교 함수의 첫 번째 인수를 우선 정렬하고, 0이면 정렬하지 않고, 0보다 큰 경우 두 번째 인수를 우선으로 정렬합니다.

const points = [40, 100, 1, 5, 2, 25, 10];
points.sort((frist, second) => frist < second ? -1 : (first > second ? : 1 : 0));
console.log(points); // [1, 2, 5, 10, 25, 40, 100]

2. Array.prototype.forEach

: forEach 메서드는 for문을 대체할 수 있는 고차 함수입니다. forEach 메서드는 자신의 내부에서 반복문을 수행합니다.

즉, forEach 메서드는 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하며서 수행해야 할 처리를 콜백 함수로 전달받은 반복 호출합니다.

const numbers = [1, 2, 3];
const pows = [];
numbers.forEach((item => pows.push(item ** 2))); // undefined
console.log(pows); // [1, 4, 9]

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

[1, 2, 3].forEach((item, index, arr) => {
	console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JOSN.stringify(arr)}`);
});
/* 요소값: 1, 인덱스: 0, this: [1, 2, 3]
요소값: 2, 인덱스: 1, this: [1, 2, 3]
요소값: 3, 인덱스: 2, this: [1, 2, 3] 
*/

forEach 메서드의 반환값은 언제나 undefined 입니다.

forEach 메서드의 두 번째 인수로 콜백 함수 내부에서 this로 사용할 객체를 전달할 수 있습니다.

forEach 메서드는 for문과 달리 break, continue 문을 사용할 수 없습니다. 다시 말해, 배열의 모든 요소를 빠짐없이 모두 순회하며 중간에 순회를 중단할 수 없으며 희소 배열인 경우 존재하지 않는 요소는 순회 대상에서 제외됩니다. 이는 뒤에서 설명하는 모든 고차함수에서 공통적으로 적용되는 사항입니다.

3. Array.prototype.map

: map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출합니다. 그리고 콜백 함수의 반환값으로 구성된 새로운 배열을 반환합니다. 이때 원본 배열은 변경되지 않습니다.

map 메서드의 콜백 함수도 forEach 메서드의 콜백 함수와 동일하게 메서드를 호출한 배열의 요소값, 인덱스, 메서드를 호출한 배열 자체를 순차적으로 전달받습니다. 그리고 map 메서드의 두 번째 인수로 콜백 함수 내부에서 this로 사용할 객체를 전달할 수 있습니다.

const numbers = [1, 4, 9];
cosnt roots = numbers.map((item => Math.sqrt(item)));
console.log(roots); // [1, 2 3]

4. Array.prototype.filter

: filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출합니다. 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환합니다. 이때 원본 배열을 변경하지 않습니다.

const numbers = [1, 2, 3, 4, 5];
const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

filter 메서드는 자신을 호출한 배열에서 필터링 조건(콜백 함수)을 만족하는 특정 요소만 추출하여 새로운 배열을 만들 때 사용합니다. 특정 요소를 제거하기 위해 사용할 수도 있습니다.

filter 메서드의 콜백 함수는 메서드를 호출한 배열의 요소값, 인덱스, 메서드를 호출한 배열 자체를 순차적으로 전달받습니다. 그리고 filter 메서드의 두 번째 인수로 콜백 함수 내부에서 this로 사용할 객체를 전달할 수 있습니다.

5. Array.prototype.reduce

: reduce 메서드는 자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출합니다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 반환값을 만들어 반환합니다. 이때 원본 배열은 변경되지 않습니다.

reduce 메서드는 첫 번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받습니다. reduce 메서드의 콜백 함수는 4개의 인수, 초기값 또는 콜백 함수의 이전 반환값, reduce 메서드를 호출한 배열의 요소값, 인덱스, reduce 메서드를 호출한 배열 자체가 순차적으로 전달됩니다.

const sum = [1, 2, 3, 4].reduce((acc, cur, index, arr) => acc + cur, 0);
console.log(sum); // 10

콜백 함수에서 acc는 초기값 또는 콜백 함수의 이전 반환값을 전달받고,
cur은 현재 순회중인 요소값, index는 현재 순회중인 요소의 인덱스, arr은 메서드를 호출한 배열 자체를 전달 받습니다.
그리고 reduce 메서드의 두 번째 인수로 초기값인 0을 전달하였습니다.

이처럼 reduce 메서드는 초기값과 배열의 첫 번째 요소값을 콜백 함수의 인수로 전달하면서 호출하고 다음 순회에서 콜백 함수의 반환값과 두 번째 요소값을 콜백 함수의 인수로 전달하면서 호출한다. 이러한 과정을 반복하여 reduce 메서드는 하나의 결과값을 반환합니다.

즉, reduce 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 "하나의 결과값"을 구해야하는 경우에 사용합니다.

reduce 메서드의 두 번째 인수로 전달하는 초기값은 첫 번째 순회에 콜백 함수의 첫 번째 인수로 전달됩니다. 주의할 점은 추기값 설정은 생략할 수 있습니다. 하지만 reduce 메서드를 호출할 때는 언제나 초기값을 설정해주는 것이 안전합니다.

6. Array.prototype.some

: some 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복호출합니다. 이때 some 메서드의 콜백 함수의 반환값이 단 한 번이라도 true라면 true를 반환하고, 콜백 함수의 반환값이 모두 false인 경우 false를 반환합니다. 주의할 점은 빈 배열에서 some 메서드를 호출한 경우 언제나 false를 반환합니다.

즉, 콜백 함수를 통해 정의한 조건을 만족하는 요소가 1개 이상 존재하는지 확인하여 그 결과를 불리언 값으로 반환할 때 사용합니다.

some 메서드의 콜백 함수는 메서드를 호출한 배열의 요소값, 인덱스, 메서드를 호출한 배열 자체를 순차적으로 전달받고, some 메서드의 두 번째 인수로 콜백 함수 내부에서 this로 사용할 객체를 전달받을 수 있습니다.

[5, 10, 15].some(item => item > 10); // true

7. Array.prototype.every

: every 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출합니다. 이때 every 메서드의 콜백 함수의 반환값이 모두 true인 경우 true를 반환하고, 콜백 함수의 반환값이 하나라도 false인 경우 false를 반환합니다. 주의할 점은 빈 배열에서 every메서드를 호출하면 언제나 true를 반환합니다.

즉, 콜백 함수를 통해 정의한 조건을 모두 만족하는지 확이하여 그 결과를 불리언 타입으로 반환합니다.

every 메서드의 콜백 함수는 메서드를 호출한 배열의 요소값, 인덱스, 메서드를 호출한 배열 자체를 순차적으로 전달받고, every 메서드의 두 번째 인수로 콜백 함수 내부에서 this로 사용할 객체를 전달받을 수 있습니다.

[5, 10, 15].every(item => item > 3); // true

8. Array.prototype.find

: find 메서드는 자신을 호출한 배열의 요소를 모두 순회하면서 인수로 전달받은 콜백 함수를 반복 호출합니다. 이때 콜백 함수의 반환값이 true인 첫 번째 요소를 반환합니다. 만약 true인 요소가 존재하지 않는다면 undefined를 반환합니다.

find 메서드의 콜백 함수는 메서드를 호출한 배열의 요소값, 인덱스, 메서드를 호출한 배열 자체를 순차적으로 전달받고, find 메서드의 두 번째 인수로 콜백 함수 내부에서 this로 사용할 객체를 전달받을 수 있습니다.

const users = [
	{ id: 1, name: 'a' },
    { id: 2, name: 'b' },
    { id: 3, name: 'c' }
];
users.find(item => item.id === 3); // { id: 3, name: 'c' }

9. Array.prototype.findIndex

: findIndex 메서드는 자신을 호출한 배열의 요소를 모두 순회하면서 인수로 전달받은 콜백 함수를 반복 호출합니다. 이때 콜백 함수의 반환값이 true인 첫 번째 요소의 인덱스를 반환합니다. 만약 true인 요소가 존재하지 않는다면 -1을 반환합니다.

findIndex 메서드의 콜백 함수는 메서드를 호출한 배열의 요소값, 인덱스, 메서드를 호출한 배열 자체를 순차적으로 전달받고, some 메서드의 두 번째 인수로 콜백 함수 내부에서 this로 사용할 객체를 전달받을 수 있습니다.

const users = [
	{ id: 1, name: 'a' },
    { id: 2, name: 'b' },
    { id: 3, name: 'c' }
];
users.findIndex(item => item.name === 'b'); // 1

10. Array.prototype.flatMap

: flatMap 메서드는 map 메서드를 통해 생성된 배열을 평탄화 합니다.
즉, map 메서드와 flat 메서드를 순차적으로 호출하는 효과가 있습니다.

단, floatMap 메서드는 flat 메서드처럼 평탄화 깊이를 지정할 수 없으며 언제나 1단계만 평탄화합니다. 중첩된 깊이를 지정해야하는 경우 map 메서드와 flat 메서드를 각각 호출해야 합니다.

const arr = ['hello', 'world'];
arr.flatMap(item => item.split('')); // ['h','e','l','l','o','w','o','r','l','d']
profile
Frontend Dev

0개의 댓글