자바스크립트 배열 Array

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

 

자료 구조data structure에서 말하는 "배열" === 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조.

즉, "배열"의 요소는 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접해 있다. ( 밀집 배열dense array )

하나의 데이터 타입으로 통일되어있다는 얘기는 각 요소가 동일한 데이터 크기를 가진다는 뜻과 일맥상통하다.

 

일반적인 배열 장단점

장점: 인덱스로 요소에 빠르게 접근할 수 있다.

단점: 특정 요소를 검색/삽입/삭제하는 경우에는 비효율적이다.

 

즉, 자바스크립트의 배열은 연속적으로 이어져 있지 않을 수 있다. ex. 희소 배열

즉, 자바스크립트의 배열은 요소를 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도 된다. ex. 요소를 종류별로 담을 수 있다

 

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

장점: 특정 요소를 검색/삽입/삭제하는 경우에 일반적인 배열보다 빠를 수 있다.

단점: 인덱스로 요소에 접근할 때 일반 배열보다 느리다.

 

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

 

 

 

📌  배열 리터럴

 

 

배열은 객체지만 프로퍼티 키가 없고 값만 존재한다.

 

// 배열 리터럴은 0개 이상의 요소를, 쉼표로 구분하여 대괄호로 묶는다.

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


// 배열 리터럴에 요소를 하나도 추가하지 않으면, 배열의 길이는 0인 빈 배열이 된다.

const arr = [];
console.log(arr.length);  // 0


// 배열 리터럴에 요소를 생략하면, "희소 배열"이 생성된다.

const arr = [1, , 3];  
console.log(arr.length)  // 3
                         // 희소 배열
					     // 희소 배열은 배열 길이는 같은데 요소 값 개수는 적음 ;; 
                         // OMG 최악

 

 

📌  배열 종류?

 

 

◾ Array 생성자 함수

 

const arr = new Array(10);

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

// 이때 생성된 배열 -> 희소 배열
// length 프로퍼티 값은 0이 아니지만, 실제로 배열의 요소는 존재하지 않는다.

console.log(Object.getOwnPropertyDescriptors(arr));
// length: configurable: false, enumerable: false, value: 10, writable: true

 

// 배열은 요소를 최대 (2^32 - 1 = 4,294,967,295)개 가질 수 있다.
new Array(4294967295);

// 전달된 인수가 0~4,294,967,295를 벗어나면 RangeError가 발생한다.
// 전달된 인수가 음수여도 RangeError가 발생한다.
new Array(4294967296);  // RangeError: Invalid array length 
new Array(-1);          // RangeError: Invalid array length

// 전달된 인수가 없는 경우, 빈 배열을 생성한다 !
new Array();  // -> []

// 전달된 인수 개수 >= 2 -> 배열 생성
new Array(1, 2, 3);  // -> [1, 2, 3]

// 전달된 인수 개수 <= 1 && !typeof 인수 === 'number' -> 배열 생성
new Array({});       // -> [{}]

// new 연산자와 호출하지않더라도, 일반 함수로서 호출해도 동작한다.
Array(1, 2, 3);      // -> [1, 2, 3]

 

 

◾ Array.of (ES6 도입)

 

Array 생성자 함수와 다르게, 전달된 인수가 1개여도 그 값의 타입에 상관없이 배열을 생성한다 !

 

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

 

 

◾ Array.from (ES6 도입)

 

유사 배열 객체array-like object또는 이터러블 객체iterable object를 인수로 전달받아 배열로 변환하여 반환한다.

 

Array.from({length: 2, 0: 'a', 1: 'b'});  // -> ['a', 'b']
Array.from('Hello');                      // -> ['H','e','l','l','o']

 

 

🏁  유사 배열 객체 array-like object?

 

01 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.

02 length 프로퍼티를 갖는 객체이다.

 

// 유사 배열 객체
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
}

 

 

🏁  이터러블 iterable object?

 

01 Symbol.iterator 메서드를 구현하여 for...of 문으로 순회할 수 있다.

02 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체이다.

-->  지금으로서는 이해가 하나도 안가지만 일단 PASS ^_^

03 ES6에서 제공하는 built-in 이터러블은 Array, String, Map, Set, DOM Collection(NodeList, HTMLCollection), arguments..

 

 

 

📌  배열 요소의 참조

 

 

🏁  참조

 

const arr = [1, 2];

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

 

인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와 같은 역할을 한다.

 

const arr = [1, 2];

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

 

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

배열은 사실, 인덱스를 나타내는 문자열을 프로퍼티 키로 갖는 객체다.

존재하지 않는 프로퍼티 키로 객체의 프로퍼티에 접근했을 때 undefined을 반환하는 것처럼

배열도 존재하지 않는 요소를 참조하면 undefined를 반환한다.

 

// 희소 배열
const arr = [1,  , 3];

console.log(arr[1]);  // undefined
console.log(arr[3]);  // undefined

 

마찬가지로 희소 배열의 존재하지 않는 요소를 참조해도 undefined가 반환된다.

 

 

 

📌  배열 요소의 추가 & 갱신

 

 

🏁  추가

 

const arr = [0];

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

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

 

객체에 프로퍼티 키를 동적으로 추가할 수 있는 것처럼 배열에도 그 요소를 동적으로 추가할 수 있다.

이때 length 프로퍼티 값은 자동갱신된다.

 

arr[100] = 100;

console.log(arr);  // [0, 1, empty*98, 100]
console.log(arr.length);  // 101

 

현재 배열의 length 프로퍼티 값보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 된다.

명시적으로 인덱스로 요소에 접근하여 값을 할당하지 않은 요소는 생성되지 않는다는 것에 주의하자.

 

 

🏁  갱신

 

// 요소값의 갱신
arr[1] = 10;

console.log(arr);  // [0, 10, empty*98, 100]

 

이미 요소가 존재하는 인덱스에 값을 재할당하면 요소값이 갱신된다.

 

const arr = [];

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

// 프로퍼티 추가
arr['foo'] = 3;
arr.var = 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

 

인덱스는 요소의 위치를 나타내므로 반드시 0이상의 정수( 또는 정수 형태의 문자열 )를 사용해야 한다.

정수 이외의 값을 인덱스처럼 사용하면, 요소가 생성되는 것이 아니라 프로퍼티가 생성된다.

이때 추가된 프로퍼티는 length 프로퍼티 값에 영향을 주지 않는다.

 

 

 

📌  배열 요소의 삭제

 

 

🏁  삭제

 

const arr = [1, 2, 3];

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

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

 

delete 연산자는 객체의 프로퍼티를 삭제하지만 희소 배열을 생성한다.

이 연산자는 사용하지 않는 것이 좋다.

희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 Array.prototype.splice 메서드를 사용하면된당 :)