JS | Array.map() 과 Array.forEach()

JS| Array.prototype.map();

Array.map() 메서드는 배열 내 요소를 반복하여 인자로 받은 함수의 값을 받아온다.

그리고 callback 함수에서 return값으로 구성된 배열을 return 해준다.

 

const squares = arr.map( function (x) {
	return x * x;
});

map은 Array 타입의 데이터를 요소 갯수만큼 반복한다.

반복할 때마다 실행할 함수를 parameter로 전달하는데, Array 타입의 데이터 요소를 함수의 인자로 받는다.

 

하지만, map 메소드는 변경된 요소를 담은 배열을 반환하는 것이지 본 배열에 영향을 끼치지 않는다는 것을 잘 기억해야 한다.(나 자신)

위와 같이 새로운 변수에 할당하는 방식으로 이용할 수 있다.

 

const squares = arr.map(x => x * x);

위 코드는 아래와 같이 간결하게 표현이 가능하다.

 

 

---

 

JS| Array.prototype.forEach();

forEach는 배열 요소를 순회하며 요소 각각에 대해 콜백 함수에 인자로 전달하여 반복 호출하는 배열 메서드다.

let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach((el,idx) => {
  if (el.startsWith('a')) {
    startWithNames.push(el);
  }
});

return을 사용해도 탈출할 수 없으며, 배열 내 요소를 모두 순회해야 실행이 종료된다.

새로운 배열을 반환하지 않는다. (반환값은 항상 undefined)

forEach 메소드는 두번째 인자로 index를 받으며, 이를 함수 내에서 활용할 수 있다.

 

 

---

Q.

 

1. moreThan100 함수를 구현해 주세요.

• 숫자로 구성된 배열을 인자로 받습니다.
• 100 보다 크거나 같으면, true 를
• 100 보다 작으면 false 로 요소를 변경하여, 새로운 배열을 return 해주세요.
• 예를 들어,
• nums(input)가 [100, 9, 30, 7] 이라면 return은 [true, false, false, false]

const moreThan100 = nums => {
  const arr = [];
	arr=nums.map (x => (x>=100) ? arr.push(true) : arr.push(false));
	return arr;
}         // 채원 작성

우선 내가 작성한 코드는 위와 같다. 사실상 불필요한 부분이 많이 들어있다.

우선, 빈 배열을 코드 공간을 차지해가며 명시해줄 필요가 없고, 두 번째로, arr에 map 메소드의 반환 값을 할당하면서 따로 arr.push()메소드를 용할 필요가 없었다.

또, 아래와 같은 코드를 구성할 수 있다. (다른 분이 알려준 ㅠㅠ)

const moreThan100 = nums => {
  const arr = nums.map(x => Boolean(x >= 100));
  return arr;
}         // 수 쌤 작성 => "형변환"은 정말 생각 못했다!

형변환을 이용해서 문제를 풀 수도 있었다.
x를 "=>" 다음에 등장하는 값으로 대치해달라는 문장인데, 어차피 true/ false를 사용할 것이니, 따로 작성해 줄 필요가 없었다. 

다만 내가 실전에 사용할 때, 생각이 많이 안 날 것 같다.

2. formatDate 함수를 구현해 주세요.

• 날짜가 담긴 배열을 인자로 받습니다.
• 날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
• 해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 return 해주세요.
• ex)

dates(input)가
['2019-03-21', '2019-04-21', '2019-05-21']
이라면

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

function changeWord(str) {
  let first = str.indexOf("-");
  let last = str.lastIndexOf("-");
  const result = str.slice(0, first) + "년 " + str.slice(first + 1, last) + "월 " + str.slice(last + 1) + "일";
  return result;
}

const formatDate = dates => {
  let resultArr = [];
  dates.map(x => resultArr.push(changeWord(x)));
  return resultArr;
}