배열은 자바스크립트 객체의 특별한 형태이다. 타 언어의 배열과 같은 기능을 하지만, 다른 언어와 달리 굳이 크기를 정하지 않아도 된다. 또한, 어떤 위치에 어떤 형태의 값을 저장하더라도 에러가 발생하지 않는다.

배열 리터럴

배열을 생성할때, 대괄호 표기법을 사용한다.

const list= [1,2,3,4,5];
console.log(list[0]);
// 출력값 1

프로퍼티없이 요소 값만 지정하면되고, 인덱스 값으로 접근이 가능하다.

배열 요소 생성

자바스크립트에서는 배열의 아무 위치에나 요소를 생성 할 수 있다.

const list=[];
list[3] = 8;
list[5] = 'a';
list[9] = true;
console.log(list);
console.log(list.length());
// 출력값 
// [undefined x 3 , 8 ,undefined,"a", undefined x 3 , true]
// 10

자바스크립트 배열의 길이는 가장 큰 인덱스 기준으로 정해지므로, 위 예제에서 리스트의 length는 10이다. 모든 배열에는 length 프로퍼티가 존재한다.

length 프로퍼티

배열의 length 값은, 가장 큰 인덱스 기준으로 변한다. 또한, 코드를 통해 바꿔버릴 수도 있다. 다음 예제를 보자.

const list=[1,2,3];
list[100] = 100;
console.log(list.length());
// 출력값 101
list.length() = 5;
console.log(list);
// 출력값 [1,2,3,undefined,undefined]
list.length(2) = 2;
console.log(list);
// 출력값 [1,2]

배열과 객체

자바스크립트에서의 배열은 역시 객체이지만, 일반적인 객체와는 조금 다르다. 배열은 Array.__proto__ 를 프로토타입 객체로 가지고, Array.__proto__ 는 Object.__proto__ 프로토타입 객체를 가진다. 따라서, 배열은 Object의 표준 메서드를 모두 사용할 수 있다.

배열의 프로퍼티 동적 생성

자바스크립트에서 배열은 역시 객체기때문에, Object.__proto__ 프로토타입의 메서드를 모두 사용할 수 있다. 다음 예제를 살펴보자.

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

위와 같이, name 프로퍼티가 추가되었다. 하지만, arr.length() 값은 여전히 3이다. 가장 큰 인덱스가 여전히 3이기 때문이다.

배열 요소 삭제

delete 연산자를 통해, 배열의 요소를 삭제 할 수 있다. 다만, 주의할 점이 있다. 다음 예제를 살펴보자.

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

위 예제에서 보는 것과 같이, 해당 인덱스의 요소를 undefined로 바꿀 뿐, 해당 요소를 완전히 삭제하지 않는다. 따라서 길이가 변하지 않았다. 완전히 삭제하기 위해서는 splice() 메서드를 사용한다.

splice()

const arr=[1,2,3];
arr.splice(2,1); // 2번째 요소를 시작으로 1개의 요소를 삭제한다.
console.log(arr);
// [1,2]
console.log(arr.length());
// 2

Array() 생성자 함수

생성자 함수를 통해서 배열을 생성할때는, 인자의 개수에 따라 작동방식이 다르다.

const arr1 = new Array(3);
const arr2 = new Array(1,2);
console.log(arr1); // [undefined,undefined,undefined]
console.log(arr2); // [1,2]