[JavaScript] 배열

배열이란?

배열(array)는 여러개의 값을 순차적으로 나열한 자료구조입니다.

• 요소(element) : 배열이 가지고 있는 값
• 인덱스(index) : 배열의 요소에서 자신의 위치를 나타내는 0 이상의 정수로 배열에 접근할 때 사용 (대부분의 프로그래밍 언어에서 인덱스는 0부터 시작)

 

자바스크립트의 배열

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

arr[0]; // 'apple'

arr.length // 3

for(let i=0;i<arr.length;i++) {
    console.log(arr[i]); // 'apple', 'bannana', 'orange'
}

typeof arr // object

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

 

• 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있음
• 배열의 요소에 접근할 때는 대괄호 표기법을 사용
• 배열의 길이(요소의 개수)를 나타내는 length 프로퍼티를 가져서 for 문을 통해 순차적으로 요소에 접근 가능
• 배열은 객체 타입 (자바스크립트는 배열이라는 타입이 존재X)
• 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 배열 생성 가능
• 배열의 프로토타입 객체 Array.prototype는 배열을 위한 빌트인 메서드를 제공

배열 객체 vs 일반 객체

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

 

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

---

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

자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체입니다.

• 일반 배열 : 자료구조에서 말하는 배열은 동일한 크기의 요소가 메모리 공간에 연속적으로 나열된 밀집 배열
• 자바스크립트 배열 : 요소의 메모리 공간이 연속적이지 않아되는 희소 배열이 가능하며 각 요소의 크기가 달라도됨

 

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

 

일반 배열과 자바스크립트 배열의 장단점

구분	일반 배열	자바스크립트 배열
장점	인덱스로 요소에 빠르게 접근할 수 있음 (O(n))	요소를 삽입/삭제하는 경우 일반 배열보다 성능이 빠름
단점	요소를 삽입/삭제하는 경우 효율적이지 않음	해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느림

 

하지만 배열의 요소에 접근할 때 일반적인 배열보다 느릴 수밖에 없는 구조적인 단점을 보완하기 위해 대부분의 모던 자바스크립트 엔진은 배열을 일반 객체와 구별하여 좀 더 배열처럼 동작하도록 최적화하여 구현했습니다. 

---

length 프로퍼티와 희소 배열

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

 

// 1. 추가/삭제 자동 갱신
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


// 2. 현재 length 보다 작은 숫자를 할당하면 길이가 줄어듦
console.log(arr); // [1, 2, 3]
arr.length = 1;
console.log(arr); // [1]


// 3. 현재 length 보다 큰 숫자를 할당하면 길이가 늘어나지 않음
console.log(arr); // [1]
arr.length = 3;
console.log(arr.length); // 3
console.log(arr); // [1, empty × 2]
console.log(Object.getOwnPropertyDescriptors(arr));
/*
{
  '0': {value: 1, writable: true, enumerable: true, configurable: true},
  length: {value: 3, writable: true, enumerable: false, configurable: false}
}

1. length 프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동 갱신됨
2. length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어듦
3. length 프로퍼티 값보다 큰 숫자 값을 할당하면 length 프로퍼티 값은 변경되나 실제 배열의 길이가 늘어나지 않음

3번과 같은 경우 empty x 2는 실제로 추가된 배열 요소가 아니라 메모리 공간을 확보하지도 않으며 빈 요소를 생성하지도 않습니다. 이처럼 배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 희소 배열이라고 합니다.

 

희소 배열은 length와 배열 요소의 개수가 일치하지 않고 length는 희소 배열의 실제 요소 개수보다 언제나 크기 때문에 연속적인 값의 집합이라는 배열의 기본적인 개념과 맞지 않으며, 성능에도 좋지 않은 영향을 줍니다.

 

따라서 배열을 생성할 경우에는 같은 타입의 요소를 연속적으로 위치시켜 희소 배열을 생성하지 않도록 주의해야 합니다.

---

배열 생성

객체와 마찬가지로 배열도 다양한 생성 방식이 있습니다.

배열 리터럴

가장 일반적인 배열 생성 방식으로 배열 리터럴은 객체 리터럴과 달리 프로퍼티 키가 없고 값만 존재합니다.

 

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


// 2. 빈 배열
const arr = [];
console.log(arr.length); // 0


// 3. 희소 배열
const arr = [1, , 3]; // 희소 배열
// 희소 배열의 length는 배열의 실제 요소 개수보다 언제나 크다.
console.log(arr.length); // 3
console.log(arr);        // [1, empty, 3]
console.log(arr[1]);     // undefined

• 0개 이상의 요소를 쉼표로 구분하여 대괄호([])로 묶어서 생성
• 요소를 하나도 추가하지 않으면 길이는 0인 빈 배열
• 요소를 생략하면 희소 배열이 생성됨

Array 생성자 함수

Object 생성자 함수를 통해 객체를 생성할 수 있듯이 Array 생성자 함수를 통해 배열을 생성할 수도 있는데, Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작하므로 주의가 필요합니다.

 

// 1. 인수가 1개
const arr = new Array(10);
console.log(arr); // [empty × 10]
console.log(arr.length); // 10
console.log(Object.getOwnPropertyDescriptors(arr));
/*
{
  length: {value: 10, writable: true, enumerable: false, configurable: false}
}
*/


// 2. 전달된 인수의 범위 
new Array(4294967295);
// 전달된 인수가 0 ~ 4,294,967,295를 벗어나면 RangeError가 발생한다.
new Array(4294967296); // RangeError: Invalid array length
// 전달된 인수가 음수이면 에러가 발생한다.
new Array(-1); // RangeError: Invalid array


// 3. 인수가 0개
new Array(); // -> []


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

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

// 6. new 연산자 생략 가능
Array(1, 2, 3); // -> [1, 2, 3]

• 전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성 (희소 배열로 배열의 요소 X)
• 배열은 요소를 최대 2^23 - 1개를 가질 수 있으며 전달된 인수가 범위를 벗어나면 RangeError가 발생
• 전달된 인수가 없는 경우 빈 배열을 생성
• 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성
• Array 생성자 함수는 new 연산자 없이 일반 함수로서 호출해도 생성자 함수로 동작 (Array 생성자 함수 내부에서 new.targe을 확인)

Array.of

ES6에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성합니다. Array 생성자와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성합니다.

 

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

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

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

 

Array.from

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

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]

 

이처럼 Array.from은 두 번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있습니다.

---

배열 요소의 참조

const arr = [1, 2];

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

// 인덱스가 2인 요소를 참조. 배열 arr에는 인덱스가 2인 요소가 존재하지 않는다.
console.log(arr[2]); // undefined

• 배열의 요소를 참조할 때에는 대괄호([]) 표기법을 사용
• 대괄호 안에는 인덱스가 와야 하지만, 정수로 평가되는 표현식이라면 인덱스 대신 사용 가능
• 인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와 같은 역할을 함
• 존재하지 않는 요소에 접근하면 undefined가 반환

---

배열 요소의 추가와 갱신

// 1. 존재하지 않는 인덱스로 값을 할당하면 자동 갱신
const arr = [0];
// 배열 요소의 추가
arr[1] = 1;
console.log(arr); // [0, 1]
console.log(arr.length); // 2

// 2. 현재 배열의 length 프로퍼티 값보다 큰 인덱스로 추가하면 희소 배열이 됨
arr[100] = 100;
console.log(arr); // [0, 1, empty × 98, 100]
console.log(arr.length); // 101

// 3. 정수 이외의 값을 인덱스로 사용하면 요소 대신 프로퍼티가 생성됨(length 영향 X)
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

• 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가되고 length 프로퍼티 값이 자동 갱신
• 만약 현재 배열의 length 프로퍼티 값보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 됨
• 인덱스는 반드시 0 이상의 정수를 사용해야 하므로 정수 이외의 값을 사용하면 요소가 생성되지 않고 프로퍼티가 생성되는데, 이때 추가된 프로퍼티는 length 프로퍼티 값에 영향을 주지 않음

---

배열 요소의 삭제

배열은 사실 객체이기 때문에 배열의 특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있고 Array.prototype.splice 메서드를 사용할 수 있습니다.

 

// 1. delete 연산자
const arr = [1, 2, 3];

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

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


// 2. 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

• delete 연산자는 객체의 프로퍼티를 삭제하고 희소 배열을 만들어서 사용하는 것은 좋지 않음
• Array.prototype.splice 메서드를 사용하면 희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제 가능

---

[출처] 모던 자바스크립트 Deep Dive

https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리