/ FRONTEND

클린코드 자바스크립트 5-3 배열 다루기(배열 메소드 체이닝 활용, map vs forEach, continue&break)

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

배열 다루기 😎

배열 메소드 체이닝 활용👍

  • 요구사항이 많아질 때 배열 메소드 체이닝을 통해 클린코드를 구성할 수 있다.
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) {
  return priceList
    .filter(isOverOneThousand) // filter 원하는 조건에 맞는 배열 리스트 만드기
    .sort(ascendingList) // sort 정렬
    .map(suffixWon); // 배열 요소들을 다시 정리
}

const result = getWonPrice(price);

map vs forEach👍


return 이 있느냐 없느냐?

  • forEach
    1. 요소마다 함수를 실행시켜주는 역할
    2. forEach 반환값 : undefined
  • map
    1. 함수 실행을 통해 배열 조작을 하는 역할
const prices = ["1000","2000", "3000", "4000" "5000"];

const newPricesForEach = prices.forEach(function (price) {
  return price+'원';
})
const newPricesMap = prices.map(function (price) {
  return price + '원'
})

console.log(newPricesForEach) // undefined
console.log(newPricesMap) // ["1000원","2000원", "3000원", "4000원" "5000원"]
  • 아래와 같을 때는 forEach가 더 유효하다.
const prices = ["1000","2000", "3000", "4000" "5000"];

const newPricesForEach = prices.forEach(function (price) {
  console.log(price+'원')
})
const newPricesMap = prices.map(function (price) {
  console.log(price+'원')
})

continue & break👍

  • forEach, map는 continue,break > Syntax Error 가 발생한다.
    1. try catch 활용
    2. for of, for in 활용
    3. Array.prototype.every, some, find, findIndex … 배열 요소를 판별 함수에 전달하고 그 결과의 참/거짓 여부에 따라 반복 여부를 결정
// 에러 발생
const orders = ['first','second','third'];

orders.forEach(function(order) {
  if(order==='second') {
    continue;
    break;
  }
  console.log(order);
})

try {
  orders.forEach(function(order) {
    if(order==='second') {
      continue;
      break;
    }
    console.log(order);
  })
} catch(e) {

}

for(const iterator of object) {

}

for(const key in object) {

}