[JS] 유사 배열 객체

▶ 유사 배열 객체

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

• 문자열은 마치 배열처럼 인덱스를 통해 각 문자에 접근할 수 있고, 반드시 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"]

---

📎참조

유사 배열 객체와 배열의 차이 https://www.zerocho.com/category/JavaScript/post/5af6f9e707d77a001bb579d2