[JS] 유사배열

유사배열과 배열은 JavaScript에서 데이터를 저장하고 처리하는데 사용되는 두 가지 주요 데이터 구조입니다. 이 둘은 유사한 점도 있지만, 중요한 차이점도 있습니다.

 

배열 (Array)

배열은 JavaScript에서 가장 많이 사용되는 데이터 구조 중 하나로, 여러 요소를 순차적으로 저장할 수 있습니다. 

• 인덱싱 : 배열의 요소는 0부터 시작하는 인덱스를 가집니다.
• 길이 : 배열은 'length' 속성을 가지고 있으며, 배열에 포함된 요소의 수를 나타냅니다.
• 메서드 : 배열에는 다양한 내장 메서드가 있어 추가, 제거, 검색, 정렬, 반복 등의 작업을 쉽게 수행할 수 있습니다.
  • push(), pop(), shift(), map(), filter(), reduce(), forEach()
• 동적 크기 : 배열의 크기는 동적으로 조절될 수 있습니다.새로운 요소를 추가하면 배열의 크기가 자동으로 증가합니다.
• 순서 유지 : 배열의 요소는 추가된 순서를 유지합니다.

유사배열 (Array-like Object)

유사배열은 배열처럼 보이지만 배열의 모든 기능을 지원하지 않는 객체입니다.

• 인덱싱 : 배열과 마찬가지로 숫자 인덱스를 사용하여 요소에 접근할 수 있습니다.
• 길이 : 'length" 속성을 가지고 있는 경우가 많습니다.
• 메서드 부족 : 배열의 내장 메서드를 직접 사용할 수 없습니다. 배열 메서드를 사용하려면 'Array.prototype'의 메서드를 빌려와야 합니다.
• 객체 형태 : 일반적인 객체이기 때문에 배열이 아니며, 배열의 고유한 기능을 모두 사용할 수 없습니다.
• 문자열은 마치 배열처럼 인덱스를 통해 각 문자에 접근할 수 있고, 반드시 'length' 프로퍼티를 갖기 때문에 유사 배열 객체이다.

const str = "hello";

console.log(Array.isArray(str)); // false

// 문자열은 유사 배열이므로 인덱스를 사용하여 각 문자에 접근할 수 있다.
console.log(str[0]); // "h"

// 원시 값인 문자열이 유사 배열 객체처럼 동작한다.
console.log(str.length); // 5

// 하지만, 문자열은 원시 값이므로 변경할 수 없다.
str[0] = "H";
console.log(str);

 

유사 배열 객체 사용 이유

• 배열은 다양한 메서드를 사용할 수 있지만, 이로 인해 추가적인 메모리 공간이 필요하다. 따라서 유사 배열 객체는 배열보다 메모리와 성능 면에서 이점을 가진다.
• 메서드가 필요한 경우 유사 배열을 배열로 반환하여 배열의 메서드를 사용할 수 있다.

유사 배열의 조건

• 반드시 'length'가 필요하다.
• index 번호가 0부터 시작해서 1씩 증가한다.

유사 배열 예시

객체 형태의 유사 배열

const number = {
  0: "first",
  1: "second",
  2: "third",
  length: 3,
};
console.log(number); // { '0': 'first', '1': 'second', '2': 'third', length: 3 }

• number 객체가 바로 유사배열이다. 키가 숫자고, length 라는 속성을 가지고 있다.
• 배열도 객체라는 성질을 이용한 트릭이다. 배열처럼 number[0], number.length 같은 것을 활용할 수 있다.

배열과 유사배열을 구분해야 하는 이유는, 유사배열의 경우 배열의 메서드를 쓸 수 없기 때문이다.

 

유사 배열을 진짜 배열로 변환하기

Array.from() 사용

Array.from() 을 사용하여 유사 배열 객체를 배열로 만들 수 있다.

const number = {
  0: "first",
  1: "second",
  2: "third",
  length: 3,
};
const array = Array.from(number);
console.log(array); // ["first", "second", "third"]