JavaScript 유사 배열 객체 쉽게 배우기, 예제 소스 코드 제공

JavaScript 유사 배열 객체 쉽게 배우기, 예제 소스 코드 제공

 

 

자바스크립트에서 배열과 유사한 객체를 다뤄야 할 때가 있습니다. 이러한 객체를 유사 배열 객체라고 합니다. 이 글에서는 유사 배열 객체의 정의, 특징, 그리고 어떻게 다루어야 하는지에 대해 알아보겠습니다.

 

 

유사 배열 객체란 무엇인가?

 

유사 배열 객체는 배열처럼 보이고 동작하는 객체입니다. 하지만 배열이 아닌 객체입니다. 유사 배열 객체는 다음과 같은 특징을 가집니다.

 

 

• 숫자 인덱스를 갖는다.
• length 프로퍼티를 갖는다.
• 배열 메소드 중 일부를 사용할 수 있다.

 

 

유사 배열 객체의 예시

 

가장 일반적인 유사 배열 객체는 DOM 요소 리스트입니다.

 

JavaScript 명시적 this 바인딩, apply 메소드 쉽게 배우기 - 예시 코드 제공

 

var divs = document.getElementsByTagName('div');
console.log(divs.length); // DOM 요소의 개수
console.log(divs[0]); // 첫 번째 DOM 요소에 접근

 

위 코드에서 getElementsByTagName 메소드로 가져온 DOM 요소 리스트는 유사 배열 객체입니다.

 

 

유사 배열 객체 다루기

 

유사 배열 객체를 배열로 다루기 위해서는 배열 메소드를 사용할 수 있습니다. 예를 들어, Array.from 메소드를 사용하여 배열로 변환할 수 있습니다.

 

var arrayLike = { 0: '사과', 1: '바나나', 2: '체리', length: 3 };

var arr = Array.from(arrayLike);
console.log(arr); // ['사과', '바나나', '체리']

 

위 코드에서 Array.from을 사용하여 유사 배열 객체를 배열로 변환했습니다.

 

 

주의사항

 

 

유사 배열 객체는 배열이 아니기 때문에 배열 메소드가 모두 사용 가능한 것은 아닙니다. 따라서 배열 메소드 중 일부만 사용할 수 있습니다. 또한 주의해야 할 점은 유사 배열 객체의 length 프로퍼티가 정확하게 설정되어 있어야 한다는 것입니다.

 

 

끝으로

 

유사 배열 객체는 배열처럼 동작하는 객체로, 숫자 인덱스와 length 프로퍼티를 가지고 있습니다. DOM 요소 리스트와 같이 배열 메소드를 사용하고 싶은 경우, Array.from 메소드를 사용하여 배열로 변환할 수 있습니다. 유사 배열 객체를 다룰 때는 주의가 필요하며, length 프로퍼티를 정확하게 설정하는 것이 중요합니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 콜백 지옥 해결법 - Promise, async/await 사용법 소개

 

JavaScript로 이미지 위에 마우스 커서를 손가락 모양으로 바꾸기