배열이란?
- 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다.
- 일반 객체와 배열을 구분하는 가장 명확한 차이는 값의 순서와 length 프로퍼티이다.
length 프로퍼티와 희소 배열
const arr = [1, 2, 3];
console.log(arr.length); // 3
// 요소 추가
arr.push(4);
// 요소를 추가하면 length 프로퍼티의 값이 자동 갱신된다.
console.log(arr.length); // 4
// 요소 삭제
arr.pop();
// 요소를 삭제하면 length 프로퍼티의 값이 자동 갱신된다.
console.log(arr.length); // 3- 배열의 길이를 나타내는 length 프로퍼티는 0 이상의 정수를 값으로 갖는다.
- 배열에 요소를 추가하거나 삭제하면 자동 갱신된다.
const arr = [1];
// 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당
arr.length = 3;
console.log(arr.length); // 3
console.log(arr); // [1, empty × 2]- length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
// 희소 배열
const sparse = [, 2, , 4];
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 프로퍼티는 희소 배열의 실제 요소 개수보다 언제나 크다.
배열생성
배열 리터럴
const arr = [1, 2, 3];
console.log(arr.length); // 3- 배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶는다.
- 객체 리터럴과 달리 키가 없고 값만 존재한다.
Array 생성자 함수
const arr = new Array(10);
console.log(arr); // [empty × 10]
console.log(arr.length); // 10- 전달된 인수가 1개이고 숫자인경우 length 프로퍼티 값이 인수인 배열을 생성한다.
- 전달된 인수가 없는 경우 빈 배열 생성한다.
new Array(1, 2, 3); // -> [1, 2, 3]
new Array({}); // -> [{}]- 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열을 생성한다.
- 전달된 인수가 1개지만 숫자가 아니면 인수를 요소로 갖는 배열을 생성한다.
Array.of
Array.of(1); // -> [1]
Array.of(1, 2, 3); // -> [1, 2, 3]
Array.of('string'); // -> ['string']- 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.
Array.from
Array.from({ length: 2, 0: 'a', 1: 'b' }); // -> ['a', 'b']
Array.from('Hello'); // -> ['H', 'e', 'l', 'l', 'o']- 유사 배열 객체를 변환하여 배열을 생성한다.
- 이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
배열 요소의 참조
const arr = [1, 2];
// 인덱스가 0인 요소를 참조
console.log(arr[0]); // 1
// 인덱스가 1인 요소를 참조
console.log(arr[1]); // 2- 배열의 요소를 참조할 때에는 대괄호 표기법을 사용한다.
- 존재하지 않는 요소에 접근하면 undefined가 반환된다.
배열 요소의 추가와 갱신
const arr = [0];
// 배열 요소의 추가
arr[1] = 1;
console.log(arr); // [0, 1]
console.log(arr.length); // 2
arr[100] = 100;
console.log(arr); // [0, 1, empty × 98, 100]
console.log(arr.length); // 101- 현재 배열의 length 프로퍼티 값보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 된다.
배열 메서드
배열에는 원본 배열을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.
Array.prototype.push
const arr = [1, 2];
let result = arr.push(3, 4);
console.log(result); // 4
console.log(arr); // [1, 2, 3, 4]- 인수로 전달받은 모든 값을 원본 배열 arr의 마지막 요소로 추가하고 변경된 length 값을 반환한다.
- push 메서드는 원본 배열을 직접 변경한다.
Array.prototype.pop
const arr = [1, 2];
let result = arr.pop();
console.log(result); // 2
console.log(arr); // [1]- 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
- pop 메서드는 원본 배열을 직접 변경한다.
Array.prototype.unshift
const arr = [1, 2];
let result = arr.unshift(3, 4);
console.log(result); // 4
console.log(arr); // [3, 4, 1, 2]- 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값을 반환한다.
- unshift 메서드는 원본 배열을 직접 변경한다.
Array.prototype.shift
const arr = [1, 2];
let result = arr.shift();
console.log(result); // 1
console.log(arr); // [2]- 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
- shift 메서드는 원본 배열을 직접 변경한다.
Array.prototype.splice
const arr = [1, 2, 3, 4];
const result = arr.splice(1, 2, 20, 30);
console.log(result); // [2, 3]
console.log(arr); // [1, 20, 30, 4]- 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
- 제거한 요소가 배열로 반환된다.
- splice 메서드는 원본 배열을 직접 변경한다.
const arr = [1, 2, 3, 4];
// 원본 배열의 인덱스 1부터 0개의 요소를 제거하고 그 자리에 새로운 요소 100을 삽입한다.
const result = arr.splice(1, 0, 100);
// 원본 배열이 변경된다.
console.log(arr); // [1, 100, 2, 3, 4]
// 제거한 요소가 배열로 반환된다.
console.log(result); // []- splice 메서드의 두 번째 인수, 즉 제거할 요소의 개수를 0으로 지정하면 아무런 요소도 제거하지 않고 새로운 요소들을 삽입한다.
const arr = [1, 2, 3, 4];
// 원본 배열의 인덱스 1부터 2개의 요소를 제거한다.
const result = arr.splice(1, 2);
// 원본 배열이 변경된다.
console.log(arr); // [1, 4]
// 제거한 요소가 배열로 반환된다.
console.log(result); // [2, 3]- splice 메서드의 세 번째 인수를 전달하지 않으면 원본 배열에서 지정된 요소를 제거하기만 한다.
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]- slice 메서드의 첫 번째 인수가 음수인 경우 배열의 끝에서부터 요소를 복사하여 배열로 반환한다.
배열 고차 함수
Array.prototype.sort
const fruits = ['Banana', 'Orange', 'Apple'];
// 오름차순(ascending) 정렬
fruits.sort();
console.log(fruits); // ['Apple', 'Banana', 'Orange']- sort 메서드는 원본 배열을 직접 변경한다.
- 기본적으로 오름차순 적용한다.
Array.prototype.forEach
const numbers = [1, 2, 3];
let pows = [];
// forEach 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
numbers.forEach(item => pows.push(item ** 2));
console.log(pows); // [1, 4, 9]- 조건문과 반복문을 제거하여 변수의 사용을 억제하고 상태 변경을 피한다.
- 원본 배열을 변경하지 않는다.
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 ]- 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
- map 메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 map의 length 프로퍼티 값과 반드시 일치한다.
Array.prototype.filter
const numbers = [1, 2, 3, 4, 5];
// numbers 배열에서 홀수인 요소만을 필터링한다(1은 true로 평가된다).
const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]- filter 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
- 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
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- 하나의 결과값을 만들어 반환한다.
