Array method

Array.map()

map 메소드는 배열내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어낸다. 

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

// 일반 함수
const squares = arr.map(function (x) { 
  return x * x;
});

화살표 함수에서 map 메소드를 사용한 코드이다.
배열의 각각의 element들이 callback 함수의 파라미터로 전달되고
map() 함수는 이 callback 함수가 return 하는 값으로 새로운 배열을 만들어서 리턴한다.
원래의 배열 값들은 변경되지 않는다.

Array.forEach()

forEach는 for 반복문 대신 사용하는 반복 메소드이다.
map과의 큰 차이는 forEach 함수 자체가 return 하는 것도 아무것도 없다는 것이다.
forEach는 작동하기 시작하면 return/break를 넣어도 멈추지 않는다.

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

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

let hasC = false;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach(el => {
  if (el === 'c') {
    hasC = true;
    return; // 중간에 forEach 반복문을 탈출하고 싶으면 return 해주면 된다. break 사용불가
  }
});

forEach에서 현재 index를 알고 싶으면 두 번째 인자로 받을 수 있다.

let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach((el, idx) => {
  if (el === 'c') {
    idxOfC = idx;
    return;
  }
});

배열을 순회하려면 forEach(), 배열을 순회 후 새 배열을 얻고 싶다면 map() 사용할 것이 좋다.

Array.filter()

filter 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

let profile = [
      {name: "jin", age: 31},
      {name: "poter", age: 16},
      {name: "jane", age: 22},
      {name: "marry", age: 25},
]

let result = profile.filter( x => {
  return x.age >= 25
});

console.log(result)
// (2) [{...},{...}]
0: {name: "jin", age: 31}
1: {name: "marry", age" 25}

Array.reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

const arr = [1, 2, 3, 4, 5]
const reducer = (acc, curr) => acc + curr;

console.log(arr.reduce(reducer));  //15

reduce를 활용해서 배열의 평균값 구하기

const nums = [1,2,3,4,5]

const avg = nums.reduce((acc, curr, index, array) => {
  if (index === array.length - 1) {
    return (acc + curr) / array.length
  }
  return acc + curr
}, 0)

console.log(avg) // 3

Assignment

Arrowfunction과 map() 메소드 사용

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

100 보다 크거나 같으면, true를 100 보다 작으면 false로 요소를 변경하여 새로운 배열을 return해주세요.
예를 들어
nums(input)은
[100, 9, 30, 7]
return은
[true, false, false, false]

My Code

const moreThan100 = nums => {

 let num = nums.map( x => x > 100 ? true : false)
  return num
}

2. formatDate 함수에 날짜가 담긴 배열을 전달드립니다.

날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서 새로운 배열을 return 해주세요.
예를 들어
dates(input)은
['2019-03-21', '2019-04-21', '2019-05-21']
return은
['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']

My Code

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

const formatData = (dates) => {
  let str =
  dates.map(x => {
    let dateArr = x.split("-");
    return `${dateArr[0]}년 ${dateArr[1]}월 ${dateArr[2]}일`
  })
  return str
}