[자바스크립트] 배열 - 개념

배열 (array)

배열이란 여러개의 데이터를 담는 집합 자료형으로, 자바스크립트에서는 이름과 인덱스로 참조되는 정렬된 값의 집합을 배열이라 일컫는다.

 

배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다. 자바스크립트에서 배열의 특징은 아래와 같다.

 

• 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있다.
• 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있다.
• 자바스크립트에서 배열은 Array 객체로 다뤄진다.

 

 

배열의 생성

자바스크립트에선 배열을 생성하는 방식으로 배열 리터럴 방식과 Array객체를 통한 생성 두가지가 있다. 

 

배열 리터럴

자바스크립트에서 배열을 생성하기 위한 리터럴로 대괄호([])를 사용한다.

// 배열 리터럴
// []
// .length : 배열의 길이 반환
const arr = [];


// 배열의 요소들의 타입이 다를 수도 있음
const arr1 = [1, 'hi', true];
console.log(arr1[1]); //hi


// 배열의 요소가 비어있을 수도 있음
const arr2 = [1, 2, , , 5];
console.log(arr2.length); //5
console.log(arr2[3]); //undefined

 

Array 객체

Array 객체를 이용하는 방법에는 Array 객체의 생성자를 이용하는 방법과 new 연산자를 사용하는 방법이 있다.

// Array 객체 생성자
// Array(el1, el2, el3, ...)
const arr = Array(1, 2, true, 'hi');
console.log(arr.length); //4
console.log(arr[2]); //true


// new 연산자를 이용
// new Array(el1, el2, el3, ...)
const arr1 = Array(1, 2, true, 'hi');
console.log(arr1.length); //4
console.log(arr1[2]); //true

 

 

배열의 참조(접근)

자바스크립트에서 배열의 각 요소를 참조(접근)하고 싶을 때는 대괄호([])를 사용한다.

배열명[인덱스]

자바스크립트에서 배열의 요소의 개루를 배열의 길이라고 하는데 이는 배열 객체의 length 프로퍼티에 자동으로 갱신되기 때문에, 배열.length를 통해 접근할 수 있다. 

배열명.length;

 

자바스크립트에서 인덱스는 언제나 0부터 시작한다. 또한, 인덱스에는 음이 아닌 정수를 반환하는 표현식 또한 사용가능하다. 자바스크립트에서 인덱스는 2^32보다 작은 양수만을 사용할 수 있다.

 

배열의 범위를 벗어나는 값을 참조하면(IndexOutOfBounds), undefined를 반환한다.

 

 

배열 요소의 추가 / 삭제

배열 또한 객체와 마찬가지로, 존재하지 않는 인덱스의 요소에 값을 넣으면 요소 추가가 가능하고 delete 연산자를 통해 요소의 삭제 또한 가능하다.

// 배열 요소 추가
// arr[index] = value
const arr = [1];


// 존재하는 index면 값을 갱신
arr[0] = 2;
console.log(arr[0]); //2


// 존재하지 않는 index면 값을 추가
arr[1] = 1;
console.log(arr[1]); //1
console.log(arr.length); //2


// 인덱스를 건너띄고 추가도 가능
// 그럴경우, 중간 index는 비어있는 상태 : 값X, 타입X
// => undefined
arr[3] = 3;
console.log(arr[2]); //undefined
console.log(arr);   //[2, 1, , 3]
console.log(arr.length); //4


// 배열 요소 삭제
// delete arr[index];
// 해당 인덱스의 값을 비어있는 상태로 만듦 : 값X, 타입X
// 길이가 줄지는 않음
delete arr[3];
console.log(arr[3]); //undefined
console.log(arr);   //[2, 1, , ]
console.log(arr.length); //4

 

위의 예제를 통해 알 수 있듯이, delete 연산자를 사용한 배열 요소의 삭제는 해당 배열이 참조하고 있는 값을 없애는 것이지 값을 참조하기 위한 공간(메모리) 자체는 삭제되지 않는다.

 

이러한 방법은 동적 배열을 활용하는데 썩 좋은 방법은 아니기 때문에 사용을 지양하는 것이 좋다. 배열 객체에는 이것을 해결할 수 있는 유용한 메소드를 제공하고 있기 때문에 이에 대해서는 다음 포스팅(배열-메소드)을 통해 알아보겠다.

 

 

배열 여부 판단

아래의 코드는 typeof 연산자를 통해 배열(array)가 무슨 타입인지를 묻고 있다.

// typeof []
console.log(typeof []); //Object

 

Array 객체가 아닌 Object가 출력되는 것을 볼 수 있다. 이렇게  typeof 연산자를 사용하면 해당 객체가 배열인지 객체인지 판단할 수 가 없다. 그렇기 때문에, 다른 방법을 사용하여 배열인지 아닌지의 여부를 판단해야 한다.

 

Array.isArray

Array의 isArray 메소드를 사용하면 배열인지 판단할 수 있다.

// Array.isArray([]);
console.log(Array.isArray([]));  //true

 

Array.constructor

Array 객체의 constructor 프로퍼티를 통해 배열인지 판단할 수 있다. 객체 또한 이런 방법으로 확인 가능하다.

// Array.constructor
console.log([].constructor === Array); //true

// 객체도 가능
console.log({}.constructor === Object); //true

 

Object.prototype

자바스크립트의 모든 객체는 prototype을 상속 받는다. 이를 이용하여 배열인지 판단할 수 있다. 해당 방법으로는 모든 객체의 타입을 체크할 수 있다.

// Object.prototype
function checkType(data) {
    return Object.prototype.toString.call(data).slice(8, -1);
}

console.log(checkType([]) === 'Array');  //true
console.log(checkType({}) === 'Object'); //true
console.log(checkType(null) === 'Null'); //true