[JS] 유사 배열 객체

박시은·2023년 5월 25일

목록 보기

19/58

▶ 유사 배열 객체

배열이 아닌데 배열인 척 하는 애들을 유사 배열 객체이라고 한다.

문자열은 마치 배열처럼 인덱스를 통해 각 문자에 접근할 수 있고, 반드시 length 프로퍼티를 갖기 때문에 유사배열 객체이다!

즉, 배열처럼 사용할 순 있지만 배열과 관련된 메소드를 사용할 수 없다. (push(), pop(), slice() 등)

var str = "string";

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

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

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

▷ 유사 배열 객체 사용 이유

그렇다면 왜 배열이 아닌 유사배열 객체를 사용할까?

배열은 다양한 메서드를 사용할 수 있지만, 이로 인해 추가적인 메모리 공간이 필요하다. 따라서 유사 배열 객체는 배열보다 메모리와 성능 면에서 이점을 가진다.
특히 대용량 데이터나 메모리 사용에 제한이 있는 환경에서는 유사 배열 객체를 활용하는 것이 효율적이다. 메서드가 필요한 경우 유사 배열을 배열로 변환하여 배열의 메서드를 사용할 수 있기 때문이다.

▷ 유사 배열의 조건

반드시 lenght가 필요하다.
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[1], number.length같은 것을 모두 활용할 수 있다.

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

▷ arguments 객체를 활용한 유사 배열

함수에 전달된 인자의 수와 값에 대한 정보를 제공한다.

likeFood("Pork cutlet", "Udon");

function likeFood() {
  console.log(arguments[0]); // 출력: 'Pork cutlet'
  console.log(arguments[1]); // 출력: 'Udon'
  console.log(arguments.length); // 출력: 2
}

▷ call, apply 메서드 활용한 배열 메서드 사용

객체에는 배열 메서드(push, slice)는 직접 적용할 수 없지만, 유사 배열 객체에는 call또는 apply 메서드를 이용해 배열 메서드를 적용할 수 있다.

즉, 실제 배열의 메서드를 call 또는 apply를 활용해서 사용하는 것 처럼 할 수 있다.
call 또는 apply는 즉시 실행 함수이기 때문에 즉시 실행해주면서 《 this bindings 》을 하는 this 자리에 해당 유사 배열 객체를 넣어줌으로써 기능을 수행하게끔 하는 것이다.

var obj = {
	0: 'a',
	1: 'b',
	2: 'c',
	length: 3
};
Array.prototype.push.call(obj, 'd');
console.log(obj); // { 0: 'a', 1: 'b', 2: 'c', 3: 'd', length: 4 }

var arr = Array.prototype.slice.call(obj);
console.log(arr); // [ 'a', 'b', 'c', 'd' ]

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

▷ 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"]