[JavaScript #16] Basic of JavaScript - Array methods

Array Methods

• arrow function을 가장 많이 사용하는 경우는 callback 함수로 사용할 때다.
• callback 함수란, 인자로 전달되는 함수다.
• array 메서드 중 반복문 map, forEach는 많이 쓰인다.

Array.map()

• map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
• 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 이 때 원본 배열은 변경되지 않는다.
• map 메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 map 메서드를 호출한 배열의 length 프로퍼티 값과 일치한다. (1:1 매핑한다)

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

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

console.log(arr); // [1, 2, 3] map 메서드는 원본 배열을 변경하지 않는다.
console.log(squares); // [1, 4, 9] map 메서드는 새로운 배열을 반환한다.

Array.forEach()

• forEach는 for 대신 사용하는 반복문이다. (forEach는 함수형 프로그래밍을 위한 고차 함수다.)
• forEach 는 아무것도 return 하는 것이 없다. 함수를 탈출하고 싶을 때 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']

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

arr.forEach(el => {
  if (el === 'c') {
    hasC = true;
    return;
  }
});

console.log(hasC); //true

map/forEach 공통점과 차이점

• map 메서드와 forEach 메서드의 공통점은 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
• map 메서드와 forEach 메서드의 콜백 함수는 메서드를 호출한 배열의 요소값과 인덱스, 배열 자체 즉 this를 순차적으로 전달받을 수 있다.
  => 즉, 콜백 함수를 호출할 때 3개의 인수를 전달한다.

[1,2,3].map((item, index, arr) => {
  console.log(`요소값: ${item}, ${index}, ${JSON.stringify(arr)}`);
  return item;
});

[1,2,3].forEach(item, index, arr) => {
  console.log(`요소값: ${item}, ${index}, ${JSON.stringify(arr)}`);
  return item;
});

/* 
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

• 그러나 forEach 메서드는 언제나 undefined를 반환하고, map 메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다는 차이가 있다.
• 즉, 는 단순히 반복문을 대체하기 위한 고차 함수이고, 는 요소값을 다른 값으로 매핑(mapping)한 새로운 배열을 생성하기 위한 고차함수다.

Assignment

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

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

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일']

const moreThan100 = nums => {
  let arr = nums.map(
    i => {if (i < 100) {
      return false;
    } 
    return true;
    })
  return arr;
}

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