JavaScript에서는 배열(Array)도 객체(Object)다

 JavaScript에서 배열(Array)은 객체(Object)의 일종이다. 조금 특별한 형태의 객체라고 할 수 있겠다. 다른 프로그래밍 언어의 배열과 유사한 동작을 한다. 이번 포스팅에서는 JavaScript의 배열에 대해 다뤄보려고 한다.

1. 배열 생성

 배열을 생성할 때는 대괄호([])를 활용한 표기법인 배열 리터럴을 사용하거나, Array()라는 생성자 함수를 사용한다.

var foodArr = ['sushi', 'kimchi', 'apple-pie']
console.log(foodArr[0]); // sushi 출력
foodArr[0] = 200;        // 배열의 첫번째 요소가 200으로 바뀜
foodArr[5] = 'pizza';    // 배열의 6번째 요소에 pizza 삽입    

 첫번째 줄에서 요소가 3개인 배열을 생성했다. 그리고 배열의 요소에 접근하는 것은 JAVA와 같은 프로그래밍 언어에서의 그것과 같다.

 세번째 줄부터 주목할 필요가 있다. 문자열만 들어있는 배열에 숫자 요소를 넣었으나 오류가 발생하지 않는다. 즉즉, JavaScript에서는 배열의 아무 위치에 아무 타입이나 넣어도 오류가 발생하지 않는다.

 네번째 줄에서는 요소가 3개인 배열의 6번째 요소에 접근을 시도했다. 앞서 언급했듯 JavaScript의 배열은 객체이므로 배열에 요소를 동적으로 삽입할 수 있으며, 값을 순차적으로 넣을 필요도 없다. 위 예제를 실행한 뒤 foodArr의 내부 모습은 아래와 같을 것이다.

[200, 'kimchi', 'apple-pie', undefined, undefined, 'pizza']

한편, Array() 생성자 함수로 배열을 만드는 예제는 아래와 같다.

var aaa = new Array(3);
console.log(aaa) // [undefined,undefined,undefined] 출력
var bbb = new Array(1,2,3);
console.log(bbb) // [1, 2, 3] 출력

 생성자 함수의 파라미터 개수에 따라 조금 다르게 동작을 하는데, 예제의 주석에 설명을 해두었으니 따로 설명하지는 않겠다.

2. push, splice 그리고 slice

 생성에 대해 대략 알아봤으니, 배열 표준 메서드에 대해 소개하려고 한다. 그 중 자주 쓰이는 push()와 splice(), 그리고 slice()에 대해 알아보자.

var num = ['zero', 'one', 'two'];
num.push('three');
console.log(num) // 출력결과: ['zero', 'one', 'two', 'three']

 예제에서 확인할 수 있듯, push() 메서드는 배열의 가장 뒷 부분에 새로운 요소를 추가하는 기능을 한다. splice()와 slice()의 동작도 예제로 확인해보자.

var company = ['samsong', 'luckygoose', 'sunkoon', 'losse'];
var slicedArr = company.slice(1,2) // index=1 을 기준으로 요소 2개까지 잘라서 복사.
console.log(slicedArr); //출력결과: ['luckygoose', 'sunkoon']

company.splice(2,1); // index=2를 기준으로 요소 1개를 삭제해라.
console.log(company) // 출력결과: ['samsong', 'sunkoon', 'losse']

 splice()는 배열에서 요소를 삭제하고, slice()는 배열의 일부를 복사한다. 두 메서드 모두 첫번째 파라미터는 동작의 기준이 되는 index이다. 그리고 두번째 파라미터는 '동작 개수'가 된다. 

3. length 프로퍼티

 JavaScript의 모든 배열은 length 프로퍼티를 갖고 있다. length는 배열의 크기를 의미한다.(마지막 index + 1) 그런데, length 프로퍼티도 결국 '프로퍼티'다. 값을 동적으로 변경할 수 있다는 뜻이다. 아래 예제를 살펴보자.

var arr = ['zero', 'one'];
arr.length = 4;
console.log(arr) // 출력결과: ['zero', 'one', undefined, undefined]
arr.push('three');
console.log(arr) // 출력결과: ['zero', 'one', undefined, undefined, 'three']
arr.length = 1;
console.log(arr) // 출력결과: ['zero']

 length 프로퍼티를 변경함에따라, 배열의 크기가 변경되는 것을 확인할 수 있다. 

4. 배열도 객체다

 돌고 돌아 여기까지 왔다. JavaScript에서는 배열도 객체다. 다만, 배열의 프로토타입은 Array.Prototype이다. (Array.Prototype이 push, slice와 같은 배열 표준 메서드를 제공한다.) 이를 확인하기 위해 JavaScript에서 제공하는 typeof 연산자로 배열과 객체를 검증하면 모두 Object라는 결과가 출력된다. (프로토타입에 대한 설명은 여기 참조)

var arr = ['zero', 'one'];
var obj = {
    '0':'zero',
    '1':'two'
}

console.log(typeof arr); // 출력결과: object
console.log(typeof obj); // 출력결과: object

 한편, 배열의 length 프로퍼티는 배열의 크기를 관장하므로, 배열의 동작에 중요한 역할을 한다. 그럼 객체에 length라는 프로퍼티를 선언하면 어떻게될까? JavaScript에서는 이러한 객체를 유사배열객체(array-like-objects)라고 부른다. 유사배열객체는 배열처럼 length 프로퍼티를 갖고 있지만 배열이 아닌 객체이다. 

 그래서 배열 표준 메서드를 직접 호출할 수 없다. 그렇지만 call() 또는 apply()를 활용한 this 바인딩을 통해, 배열 표준 메스드를 사용할 수 있다. this 바인딩은 이 포스팅의 범위를 넘어서므로, 예제만 간략하게 소개하겠다.

var obj = {
    '0':'zero',
    '1':'two'
}
obj.length = 2;

var arr = Array.prototype.slice.apply(obj);
arr.push('three'); // 오류가 발생하지 않음.

-끝-

출처및참고

송형주, 고현준, 『인사이드 자바스크립트』, 한빛미디어(2016)