[JavaScript] 배열의 반복문｜map, forEach (w.Arrow function)

Allow function ｜

화살표함수는 함수를 간결하게 만들어줍니다.

function 키워드와 중괄호를 생략하고 =>로 대신합니다.

아래 두 코드는 같은 의미입니다.

const add = function (a, b) {
   return a + b;
};

const add = (a, b) => a + b;

 

 

 

map() 메서드란 ｜

배열의 각 요소에 지정된 함수를 호출한 결과를 새로운 배열로 반환하는 메서드입니다.

 

ex. 화살표 함수로 arr배열의 각 숫자를 곱한 값을 반환

const arr = [1, 2, 3, 4];
const squares = arr.map(num => num * num);

console.log (squares)   //[1, 4, 9, 16]

'=>'는 화살표 함수(arrow function)를 정의하는데 사용되는 문법입니다.

 

화살표 함수는 간결한 문법을 제공하고,

return과 중괄호 '{}'를 생략하여 바로 작성할 수 있으므로 가독성을 높일 수 있습니다.

 

 

ex. return과 중괄호 생략하기 전

const arr = [1, 2, 3];
const squares = arr.map (num => {return (num * num)});
console.log (squares)

 

 

 

 

forEach() 메서드란 ｜

배열의 각 요소에 지정된 함수를 실행하는 메서드입니다.

반복문을 사용하여 배열의 각 요소에 순회하여 함수를 호출합니다.

 

ex

const arr = [1, 2, 3, 4];
const squares = [];
arr.forEach(num => {
squares.push(num * num);
});
console.log (squares)   // [1, 4, 9, 16]

배열의 값마다[1, 2, 3, 4] 콜백함수를 수행합니다. 전달한 콜백함수(num*num)를 value 하나하나마다 호출합니다.
(callbackfn: value: T, index: number, array: T[]) => void)

const food = ['🍕', '🍟'];

foods.forEach(function (food, index) {
   console.log(food, index);
});


//같은 의미의 코드 arrow function
foods.forEach((food, index, array) => console.log(food, index, array));
/*
🍕 0 ['🍕', '🍟']
🍟 1 ['🍕', '🍟']
*/


foods.forEach((food) => console.log(food));
/*
🍕
🍟
*/

 

 

---

 

문제1. 숫자 배열을 인자로 받아 100보다 크거나 같으면 'true', 아니면 'false'로 요소를 변경하여 새로운 배열을 반환

const checkNums = nums => {
  let numToBool = nums.map(num => {
    if (num >= 100) {
      return true;
    } else {
      return false;
    }
  })
  return numToBool
}
console.log(checkNums([100, 1, 99, 999]))   //[true, false, false, true]

 

 

 

문제2. data type이 string이며 'yyyy-mm-dd' 타입의 날짜 배열을 인자로 받아 'yyyy년 mm월 dd일' 로 바꿔 새로운 배열을 반환

const formatDate = dates => {
  return dates.map(date => {
  let oneDay = '2023-07-15';
  let day = oneDay.split ('-');
  return `${day[0]}년 ${day[1]}월 ${day[2]}일`;
  });
}
console.log (formatDate(['']))   //['2023년 07월 15일']

 

결과는 나왔지만... 코드가 안예쁘고 어거지로 급하게 코드를 짠 티가 줄줄 난다🤤
또 '날짜가 담긴 배열'을 인자로 받아야 하기 때문에 다시 코드를 작성하였다.

 

좀 더 가독성 좋은 코드로 재탄생했다 : )

const formatDate = dates => {
  return dates.map(date => {
    const [year, month, day] = date.split ('-');
    return `${year}년 ${month}월 ${day}일`
  })
}

 console.log (formatDate(['2023-07-15']))   //['2023년 07월 15일']