본문 바로가기
JAVASCRIPT

[JavaScript 유사 배열(Array-like Object)]

by dancingcarrot 2023. 4. 25.

1. 유사 배열이란?


자바스크립트에서 유사 배열(Array-like Object)이란 배열과 유사한 구조를 갖지만, 배열과는 다른 특징을 갖는 객체를 말한다. 유사 배열은 일반적으로 length 프로퍼티를 가지며, 인덱스로 접근이 가능하지만, 배열의 메서드 및 프로퍼티를 가지고 있지 않다.

 

2. 유사 배열의 예시


유사 배열의 대표적인 예시는 arguments 객체와 NodeList 객체이다. arguments 객체는 함수 내부에서 전달된 인자를 배열 형태로 다룰 수 있게 해주는 객체이며, NodeList 객체는 문서 객체 모델(DOM)에서 요소를 참조할 때 반환되는 객체이다.

 

 

function sum(){
  console.log(arguments.length); // 7
  console.log(arguments[0]); // 3
  console.log(arguments[1]); // 7
}

sum(3,7);

 


 3. 유사 배열과 배열의 차이점


유사 배열과 배열은 구조적으로 유사하지만, 차이점이 있다. 

배열은 Array.prototype에 정의된 메서드와 프로퍼티를 사용할 수 있지만, 

유사 배열은 해당 메서드와 프로퍼티를 사용할 수 없다. 

따라서, 유사 배열에 값을 추가하기 위해서는 직접 객체에 프로퍼티를 추가해야 한다. 

또한, 유사 배열은 배열과 달리 Array.isArray() 메서드를 사용할 수 없다. 

따라서, 유사 배열을 배열로 변환하여 사용하는 것이 일반적인 방법이다.


 4. 유사 배열 다루기

유사 배열의 길이를 구할 때는 객체의 'length'프로퍼티를 사용할 수 있지만, 배열의 메소드를 사용하려면  'Array.from()'메소드나 전개 연산자 등을 사용해야 한다.

 

 

const arrayLikeObj = {0: 'a', 1: 'b', 2: 'c', length: 3};

//  Array.from() 메서드 활용
const arr = Array.from(arrayLikeObj);
console.log(arr); // ['a', 'b', 'c']

 

5. 유사 배열 확인하기

 

1. 객체의 형태 확인하기: 객체가 배열이 아닌 경우, `typeof` 연산자를 사용하여 `object`를 반환한다. 반면, 배열은 `object`가 아닌 `array`를 반환한다. 따라서, `typeof` 연산자로 형태를 확인하여 유사 배열 객체와 배열을 구분할 수 있다.

2. 배열의 메서드 사용하기: 유사 배열 객체는 배열과 유사한 구조를 가지지만, 배열의 메서드를 직접 사용할 수는 없다. 만약 객체가 배열 메서드를 사용할 수 있는지 여부를 확인하려면, `Array.isArray()` 메서드나 `instanceof` 연산자를 사용하여 객체가 배열인지 아닌지를 확인할 수 있다.

3. length 프로퍼티 확인하기: 유사 배열 객체는 배열처럼 length 프로퍼티를 가지고 있다. 따라서, 객체의 length 프로퍼티를 확인하여 유사 배열 객체인지 아닌지를 구분할 수 있다.

4. for문으로 요소에 접근하기: 유사 배열 객체는 인덱스를 사용하여 요소에 접근할 수 있다. 따라서, for문을 사용하여 객체의 요소에 접근해 볼 수 있다. 만약 요소에 접근할 때 에러가 발생하지 않는다면, 해당 객체는 유사 배열 객체일 가능성이 있다.


댓글