#TIL12, Javascript 배열의 반목문 .map() .forEach()

April·2021년 4월 18일
0

✨Javascript

목록 보기
9/45
post-thumbnail

개인 공부를 위해 작성했습니다

Array의 반복문✨✨✨

정말 많이 쓰이므로 확실하게 익히자!

Array.map()

  • .map() 메서드는 배열을 반복
  • callback 함수에서 return 한 값으로 매(each) 요소를 수정
  • .map() 메서드의 return 값은 수정된 값으로 새로운 배열로 반환
const arr = [1, 2, 3];
const squares = arr.map(function (x) { 
  return x * x;
});
console.log(squares); // [ 1, 4, 9 ]

Array.forEach()

  • forEachfor 대신 사용하는 반복문
  • map 과의 큰 차이는 forEach 함수 자체가 return 하는 것도 아무것도 없다는 것
  • 그냥 forEach 함수를 탈출하고 싶을 때 return 을 사용
let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el);   
  } 
});
console.log(startWithNames); // [ 'a', 'ab', 'ada' ]

💯 예제 풀기!

  • 날짜가 담긴 배열을 인자로 받기
  • 날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD'
  • 해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 return 하기
const formatDate = dates => {
  const datesMap = dates.map(date => 
    `${date.substring(0,4)}${date.substring(5,7)}${date.substring(8,10)}`
  )
  return datesMap;
}
const arr = ['2019-03-21', '2019-04-21', '2019-05-21']
formatDate(arr);
// [ '2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일' ]

✅ 목표!

  • 자주 사용하는 배열 메소드 익히기
profile
🚀 내가 보려고 쓰는 기술블로그

0개의 댓글