5. Javascript 배열 (6) - 배열의 생성자 / 유사 배열 객체

 

배열의 Array( ) 생성자 함수

일반적으로 사용하는 배열 리터럴을 통한 배열 객체의 생성은 Array()생성자 함수로 배열을 생성하는 과정을 단순화 시킨 것이라고 생각하면 됩니다. new 연산자를 반드시 사용해야 하며, 이 때 사용하는 인자의 개수에 따라 동작이 달라집니다.

 

1. 인자가 1개이고, 숫자일 경우 - 호출된 인자를 length로 갖는 빈 배열 생성
2. 그 외의 경우 - 호출된 인자를 요소로 갖는 배열 생성

 

var arr = new Array(3);
console.log(arr);
console.log(arr.length);
// [ <3 empty items> ]
// 3

var arr2 = new Array(1, 2, 3);
console.log(arr2);
console.log(arr2.length);
// [ 1, 2, 3 ]
// 3

 

 

---

 

 

유사 배열 객체

length 프로퍼티는 앞서 설명했듯, 배열이라는 객체의 성격을 결정하는 가장 중요한 요소입니다. 특히 Array 표준 메서드가 이를 통해서 동작한다고 설명드렸죠? 그런데 만약, 배열이 아닌 일반 객체에 'length'라는 이름의 프로퍼티가 존재한다면 배열 표준 메서드를 사용하는게 가능할까요? 

 

결론만 이야기 하자면, 가능합니다. 단, 배열과 동일한 방법으로 사용 가능한 것은 아니고 apply( )메서드를 통해서 사용해야 합니다. 추후 call과 apply를 통한 this 바인딩을 배울 때 자세히 설명할테니 이번 아티클에서는 간단하게 사용법에 대한 예시를 먼저 살펴보고 마무리 하겠습니다. 

 

 

var obj = {
    title : 'ripple effect',
    length : 1
};
console.log(obj);
// { title: 'ripple effect', length: 1 }


Array.prototype.push.apply(obj, ['swings']);
console.log(obj);
// { '1': 'swings', title: 'ripple effect', length: 2 }

 

위에서 보다시피, 처음 객체 obj에는 임의로 length라는 프로퍼티를 선언하고 1을 대입했습니다. 이후 apply( )메서드를 통해서 obj를 this 바인딩해주고 배열 객체를 인자로 선언하였습니다. 이후 obj를 출력해 보면 length는 자동으로 2로 늘어났으며 '1'이라는 프로퍼티와 함께 'swings'라는 원소가 추가되었음을 확인할 수 있습니다.

 

그런데 만약, 여기에 애초부터 length라는 프로퍼티가 없었다면 결과는 어떻게 되었을까요? 역시 동일하게 apply( )메서드를 사용 가능합니다. 단, 여기서 'swings'가 추가되는 프로퍼티 명은 '0'이 되고 length는 자동으로 생성되어 1이 할당됩니다. 

 

var obj = {
    title : 'ripple effect',
};
console.log(obj);
//{ title: 'ripple effect' }


Array.prototype.push.apply(obj, ['swings']);
console.log(obj);
// { '0': 'swings', title: 'ripple effect', length: 1 }