#23. array methods (map, forEach)

arrow function을 가장 많이 사용할 때는 callback함수로 사용할 때입니다.
callback함수란, 인자로 전달되는 함수입니다.
이번에는 array의 반복문으로 사용되는 map, forEack 메서드를 함께 보겠습니다.

Array.map()

map 메서드는 배열을 반복해주는데, callback함수에서 return한 값으로 매(each) 요소를 수정해줍니다.
map 메서드의 return값은 수정된 값으로 다시 생성된 배열입니다.

바로 예시를 보겠습니다.

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);
console.log(squares); // [1, 4, 9]를 반환해줍니다.

//아래와 위는 같은 값을 반환하는 코드입니다.
const squares = arr.map(function (x) { 
  return x * x;
});
console.log(squares); // [1, 4, 9]를 반환해줍니다.

Array.forEach()

forEach는 for대신 사용하는 반복문입니다.
map과의 큰 차이점은 forEach 함수 자체가 return하는 것은 아무것도 없다는 것입니다.
forEach함수를 탈출하고 싶을 때 return을 사용하면 됩니다.
map은 요소가 수정된 새로운 배열이 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']를 반환해줍니다.

Assignment
두 문제 모두 map 메서드와 arrow function을 사용해주세요.

1. moreThan100 함수에 숫자로 구성된 배열을 인자로 넘겨드립니다.

100 보다 크거나 같으면, true를
100 보다 작으면 false로 요소를 변경하여
새로운 배열을 return해주세요.

예를 들어

let nums = [100, 9, 30, 7]; 이면

return은
[true, false, false, false]

let nums = [100, 9, 30, 7];
//내가 작성한 코드
const moreThan100 = nums => {
  return nums.map(x => (x >= 100) ? true : false);
};
//모델 코드
const moreThan100 = nums => {
  return nums.map(el => el > 100);
}

let nums = [100, 9, 30, 7];
//내가 작성한 두번째 코드
const moreThan100 = nums => {
	let trueFalse = [];
	for(let i = 0; i < nums.length; i++) {
	  if(nums[i] >= 100) {
	    trueFalse.push(true);
	  } else {
	    trueFalse.push(false);
	  }
  } return trueFalse;
};

moreThan100(nums);

2. formatDate 함수에 날짜가 담긴 배열을 전달드립니다.
   날짜의 data type은 string이며,
   보내는 날짜 타입은 'YYYY-MM-DD' 입니다.

해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서
새로운 배열을 return 해주세요.

예를 들어
let dates = ['2019-03-21', '2019-04-21', '2019-05-21']; 이

return은
['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']

dates = ['2019-03-21', '2019-04-21', '2019-05-21'];

const formatDate = dates => {
	return dates.map(dates => {
    	let date = dates.split('-');
        return `${date[0]}년 ${date[1]}월 ${date[2]}일`;
    });
};

formatDate(dates);