/ FRONTEND

클린코드 자바스크립트 5-2 배열 다루기(유사 배열 객체, 불변성, for문 배열 고차 함수로 리팩토링)

Clean Code JS 강좌는 여러 절로 구성되어 있습니다.

배열 다루기 😎

유사 배열 객체👍

  • 객체를 배열로 바꿔주는 역할 (Array.from())
const arrayLikeObject = {
  0: "HELLO",
  1: "WORLD",
  length: 2,
};
// 객체를 배열로 바꿔주는 역할
const arr = Array.from(arrayLikeObject);
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(arrayLikeObject)); //false

console.log(arr); // ['HELLO','WORLD']
console.log(arr.length); // 2
  • 유사 배열 객체는 forEach,map,reduce, filter 등 고차 함수를 사용할 수 없다.
function generatePriceList() {
  console.log(Array.isArray(arguments)); //false
  // 유사 배열 객체이기 문에 map, forEach, reduce, filter, every, some 기능이 되지 않는다.

  for (let index = 0; index < arguments.length; index++) {
    const element = arguments[index];
    console.log(elements); // 100, 200, 300, 400, 500, 600
  }
  // return arguments.map((arg) => arg + "원");
}

generatePriceList(100, 200, 300, 400, 500, 600);
  • 객체를 배열로 바꾸어 사용하면 고차 함수를 사용할 수 있다.
function generatePriceList2() {
  Array.from(arguments).map((it) => return arg+'원';
}

const newList = generatePriceList(100, 200, 300, 400, 500, 600);
console.log(newList); // ['100원','200원' .....]

불변성👍

  1. 배열을 복사한다.
  2. 새로운 배열을 반환하는 메서드들을 활용한다. (filter, map, slice)
const originArray = ["123", "456", "789"];
const newArray = originArray;

originArray.push(10);
originArray.push(11);
originArray.push(12);
originArray.unshift(0);

console.log(originArray); //  [0,'123','456','789',10,11,12]
console.log(newArray); //  [0,'123','456','789',10,11,12]
  • 배열을 복사할 경우, 객체 구조 분해 할당을 사용해본다.
const originArray = ["123", "456", "789"];
const newArray = [...originArray];

originArray.push(10);
originArray.push(11);
originArray.push(12);
originArray.unshift(0);

console.log(originArray); //  [0,'123','456','789',10,11,12]
console.log(newArray); //  ['123','456','789']

for문 배열 고차 함수로 리팩토링👍

const price = ["2000", "3000", "4000", "1000", "5000"];

function getWonPrice(priceList) {
  let temp = [];
  for (let i = 0; i < priceList.length; i++) {
    temp.push(priceList[i] + "원");
  }
  return temp;
}

const result = getWonPrice(price);

function getWonPrice2(priceList) {
  return priceList.map((price)) => {
    it+'원'
  })
}

const result = getWonPrice2(price);
  • 요구사항🖐 : 1000원이상 추가로 필터
const price = ["2000", "3000", "4000", "1000", "5000"];

const suffixWon = (price) => price + "원";
const isOverOneThousand = (price) => Number(price) > 1000;

function getWonPrice(priceList) {
  const isOverList = priceList.filter(isOverOneThousand);
  return isOverList.map(suffixWon);
}

const result = getWonPrice(price);
  • 요구사항🖐 : 정렬
const price = ["2000", "3000", "4000", "1000", "5000"];

const suffixWon = (price) => price + "원";
const isOverOneThousand = (price) => Number(price) > 1000;
const ascendingList = (a, b) => a - b;
function getWonPrice(priceList) {
  const isOverList = priceList.filter(isOverOneThousand);
  const sortList = isOverList.sort(ascendingList);
  return isOverList.map(suffixWon);
}

const result = getWonPrice(price);

하지만 계속 요구사항이 많아진다면 어떻게 해결할까? 다음 챕터에..