Modern JavaScript Deep Dive 스터디 - CH27 배열(1) :
배열 정의, 특징, 생성 방법, element 생성/수정/삭제 방법
참고 자료: ⟪모던 자바스크립트 Deep Dive⟫(이웅모 지음,위키북스, 2020)
1. 배열이란?
- 여러 개의 값을 순차적으로 나열한 자료구조
요소(element),인덱스(index),length 프로퍼티를 가짐- 자바스크립트의 모든 값은 배열의 요소가 될 수 있음(원시값, 객체, 함수, 배열)
- 일반 객체와 배열을 구분하는 가장 명확한 차이는
값의 순서와length 프로퍼티- 배열은 요소의 순서가 존재하고
length 프로퍼티가 존재
- 배열은 요소의 순서가 존재하고
const arr = [1, 2, 3, 4, 5];
// 현재 length 프로퍼티 값인 5보다 작은 숫자 값 3을 length 프로퍼티에 할당
arr.length = 3;
// 배열의 길이가 5에서 3으로 줄어든다.
console.log(arr); // [1, 2, 3]2. 자바스크립트 배열은 배열이 아니다
일반 자료구조의 배열
- 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조
- 요소는 하나의 데이터 타입으로 통일되어 있고 서로 연속적으로 인접함 -> 밀집 배열
- 자바스크립트의 배열은
- 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 됨
- 연속적으로 이어져 있지 않을 수도 있음
- -> 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체
- 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열(sparse array)이라고 함
// 희소 배열
const sparse = [, 2, , 4];- 자바스크립트 배열은 해시 테이블로 구성된 객체
- -> 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느림
- 특정 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠름
3. length 프로퍼티와 희소 배열
1) length 프로퍼티
- 값은 요소의 개수.
- 배열의 길이를 나타내는 0이상의 정수를 값으로 가짐
[].length[(1, 2, 3)].length; // -> 0 // -> 3일반적인 배열의 length는 배열 요소의 개수와 일치희소 배열의 length는 실제 요소 개수보다 언제나 큼
// 희소 배열
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 }
}
*/4. 배열 생성
1) 배열 리터럴
- 0개 이상의 요소를 쉼표로 구분하여 대괄호([])로 묶어 생성
const arr = ["apple", "banana", "orange"];2) Array 생성자 함수
new키워드를 이용한 생성자 함수 사용
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}
}
*/
// 배열은 요소를 최대 4,294,967,295개 가질 수 있다.
new Array(4294967295);
// 전달된 인수가 0 ~ 4,294,967,295를 벗어나면 RangeError가 발생한다.
new Array(4294967296); // RangeError: Invalid array length
// 전달된 인수가 음수이면 에러가 발생한다.
new Array(-1); // RangeError: Invalid array length- 전달된 인수의 개수에 따라 다르게 동작하므로 주의
- 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열을 생성
- 전달된 인수가 1개지만 숫자가 아니면 인수를 요소로 갖는 배열을 생성
// 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열을 생성한다.
new Array(1, 2, 3); // -> [1, 2, 3]
// 전달된 인수가 1개지만 숫자가 아니면 인수를 요소로 갖는 배열을 생성한다.
new Array({}); // -> [{}]3) Array.of
- 전달된 인수를 요소로 갖는 배열을 생성
// 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.
Array.of(1); // -> [1]
Array.of(1, 2, 3); // -> [1, 2, 3]
Array.of("string"); // -> ['string']4) Array.from
- 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환
유사 배열 객체
const arrayLike = { '0': 'apple', '1': 'banana', '2': 'orange', length: 3 };
// 유사 배열 객체는 마치 배열처럼 for 문으로 순회할 수도 있다.
for (let i = 0; i < arrayLike.length; i++) {
console.log(arrayLike[i]); // apple banana orange
}
```javascript
// 유사 배열 객체를 변환하여 배열을 생성한다.
Array.from({ length: 2, 0: "a", 1: "b" }); // -> ['a', 'b']
// 이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
Array.from("Hello"); // -> ['H', 'e', 'l', 'l', 'o']- length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채움
// length만 존재하는 유사 배열 객체를 전달
Array.from({ length: 3 }); // -> [undefined, undefined, undefined]- 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환
// 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환
Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2]5. 배열 요소의 참조
- 대괄호(
[]) 표기법 사용
const arr = [1, 2];
console.log(arr[1]); // 26. 배열 요소의 추가와 갱신
- 배열에 요소를 동적으로 추가 가능
- 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가됨
length 프로퍼티값은 자동 갱신됨
- 이미 존재하는 요소에 값을 재할당하면 요소값이 갱신됨
- 정수 이외의 값을 인덱스처럼 사용하면, 요소가 생성되는 것이 아니라 프로퍼티가 생성. 이는 length 프로퍼티 값에 영향을 주지 않음
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); // 27. 배열 요소의 삭제
- 배열은 객체 ->
delete연산자 사용하여 요소 삭제 가능- 그러나 희소 배열이 되며 length 프로퍼티의 값은 변하지 않음
- ->
delete연산자는 사용하지 않는 것이 좋음
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