[JavaScript][clean-code] 유사 배열 객체

* 유사 배열 객체

[유사배열에 대해서 참고] https://latte1114.tistory.com/478

 

const arrayLikeObject = {
  0: 'Hello',
  1: 'World',
  length: 2,
};

• 해당 객체는 배열을 흉내낸것처럼 보이지만 Array.isArray로 확인하였을때 false라는 명확한 결과가 나온다.
• Array.from() 내장메서드를 활용하면 이러한 유사 배열 객체들을 배열로 변환해줄 수 있다.

const arr = Array.from(arrayLikeObject);

console.log(arr); //  ['Hello', 'World'];
console.log(Array.isArray(arr)); // true;
console.log(Array.isArray(arrayLikeObject)); // false

 

• 변환된 객체는 배열의 기능을 잘 수행한다.
• 따라서 자바스크립트의 배열은 객체이다. 라는게 한번 더 증명이 된다.

---

* 유사 배열 객체의 안좋은 코드

- 유사배열객체는 다양한 케이스에서 볼수있다.

function generatePriceList() {
  return arguments.map((arg) => arg + '원');
}

generatePriceList(100, 200, 300, 400); // arguments.map is not a function

• arguments는 기본적으로 JavaScript함수 내부에서 가지고 있는 유사 배열 객체중에 대표적인 하나의 사례이다.
• 아무런 인자를 받지않는 함수의 인자로 고정적이지 않는 가변적인 무언가를 인자로 넘길때 이 인자들은 매개변수를 선언하지 않았음에도 불구하고 함수 내부에서 arguments라는 유사배열객체로 다룰수 있다.
• arguments를 배열로 착각하여 배열의 함수를 사용하는데 사용되지않는다. 
  • 이유는?? 유사 배열 객체이기 때문이다. 따라서 map() 메서드를 사용할 수 없다.
• 또 다른 예시로는 Web api에서의 NodeList

* 해결방법

- 아래와 같이 바꿔줘야한다.

function generatePriceList() {
  return Array.from(arguments).map((arg) => arg + '원');
}

const newList = generatePriceList(100, 200, 300, 400);

---

* for문을 이용해서 보는 예시

• 매개변수를 미리 선언하지 않았음에도 불구하고 인자를 받아내고 있다.
• for문으로 돌릴 수 있다보니 arguments를 배열이라 생각할 수 있는데 유사 배열 객체이다. (착각하지 말것)

function generatePriceList() {
  console.log(Array.isArray(arguments)); // false

  for (let index = 0; index < arguments.length; index++) {
    const element = arguments[index];

    console.log(element);
  }
}

generatePriceList(100, 200, 300, 400, 500, 600);