[Deep dive] 27장 배열(1)

27.1 배열이란?

 

배열(array)

 

- 여러 개의 값을 순차적으로 나열한 자료구조 

- 요소(element) : 배열이 가지고 있는 요소 

- 인덱스(index) : 배열의 요소가 가지는 배열에서 자신의 위치를 나타내는 0 이상의 정수 

- length 프로퍼티  : 배열의 길이

- 배열은 객체 타입 

- 배열의 생성자 함수는 Array이며, 배열의 프로토타입 객체는 Array.prototype

- 베열은 일반 객체와 달리 "값의 순서"와 "length 프로퍼티"를 가짐 

 

 

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

 

밀집 배열(dense array)

 

- 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있음

- 인덱스를 통해 단 한번의 연산으로 임의의 요소에 접근 가능

 

희소 배열(sparse array)

 

- 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있음

- 배열의 요소가 연속적으로 위치하지 않고 일부가 비어있는 배열

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

- 자바스크립트의 배열은 인덱스를 나타내는 문자열을 프로퍼티 키로 가지며, length 프로퍼티를 갖는 특수한 객체 

- 자바스크립트 배열의 요소는 프로퍼티 값

- 어떤 타입의 값이라도 배열의 요소가 될 수 있음

- 자바스크립트 배열은 해시 테이블로 구현된 객체 

 

27.3 length 프로퍼티와 희소 배열

 

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

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

//요소 추가 
arr.push(4);
console.log(arr.length); //4

//요소 삭제 
arr.pop();
console.log(arr.length); //3

- 현재 length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어듬 

const arr = [1,2,3,4,5];

arr.length = 3;

//배열의 길이가 5에서 3으로 줄어듬
console.log(arr); //[ 1, 2, 3 ]

- 현재 length 프로퍼티 값보다 큰 숫자 값을 할당하면 length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않음

const arr = [1];

arr.length = 3;

//length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않음
console.log(arr.length); //3
console.log(arr); //[ 1, <2 empty items> ]

- 자바스크립트는 희소배열을 문법적으로 허용. 희소배열은 length와 배열의 요소 개수가 일치하지 않음

//희소 배열
const sparse = [,2, ,4];

//희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않음
console.log(sparse.length); //4
console.log(sparse); //[ <1 empty item>, 2, <1 empty item>, 4 ]

 

27.4 배열 생성

 

27.4.1 배열 리터럴 

- 배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호([ ])로 묶음

- 배열 리터럴에 요소를 하나도 추가하지 않으면 빈 배열 생성

- 배열 리터럴에 요소를 생략하면 희소 배열 생성

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

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

const arr3 = [1, , 3];
console.log(arr3.length); //3
console.log(arr3); //[ 1, <1 empty item>, 3 ]
console.log(arr3[1]); //undefined

 

27.4.2 Array 생성자 함수 

 

- Array 생성자 함수를 통해 배열 생성 가능

- 전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열 생성

const arr = new Array(10);

//희소 배열
console.log(arr); //[ <10 empty items> ]
console.log(arr.length); //10

- 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열 생성

new Array(1,2,3); // [1,2,3]
new Array({}); //[{}]

- Array 생성자 함수는 일반함수로서 호출해도 배열을 생성하는 생성자 함수로 동작

Array(1,2,3); //[1,2,3]

 

27.4.3 Array.of

- 전달된 인수를 요소로 갖는 배열 생성 

- Array 생성자 함수와 다르게 전달된 인수가 1개 이고 숫자이더라도 인수를 요소로 갖는 배열 생성

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

 

27.4.4 Array.from

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

//유사 배열 객체로 변환하여 배열을 생성
Array.from({length:2,0:'a',1:'b'}); //{'a','b'}

//이터러블을 변환하여 배열을 생성
Array.from('Hello'); //{'H','e','l','l','o'}

- 두 번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있음

//Array.from은 두 번째 인스로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환
Array.from({length:3},(_,i)=>i); //[0,1,2]

 

27.5 배열 요소의 참조 

 

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

- 존재하지 않은 요소에 접근하면 undefined 반환

const arr = [1,2];

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

 

27.6 배열 요소의 추가와 갱신

 

- 배열에도 요소를 동적으로 추가 가능

- 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가 

- length 프로퍼티는 자동 갱신됨

- 이미 존재하는 요소에 값을 재할당하면 요소값이 갱신

const arr = [0];

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

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

//요소값의 갱신
arr[1] = 10;
console.log(arr); //[ 0, 10 ]

 

27.7 배열 요소의 삭제 

 

- 배열의 특정 요소를 삭제하기 위해 delete 연산자 사용 가능 

- delete arr[1]은 arr에서 프로퍼티 키가 '1'인 프로퍼티를 삭제 

const arr = [1,2,3];

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

//length 프로퍼티에 영향을 주지 않음. 희소배열이 됨
console.log(arr.length); //3