<JavaScript> Array Methods배열 메소드 map, forEach

🐥자바스크립트 기초 문제 풀이

학습 목표
배열 데이터타입에서 자주 사용되는 map, forEach메소드를 익힌다.

map 메소드는 배열을 반복해주는 메소드이다.
배열의 인덱스를 순서대로 쭉 한바퀴 돌아서 각각의 요소에게 실행문을 적용시킨다. 그렇게 수정된 값으로 이루어진 새로운 배열을 return한다.

아래 코드를 살펴보자!

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

위 처럼 코드를 작성하면 map메소드는 arr이라는 배열을 어떻게 가공할까?

[1, 4, 9]라는 결과를 출력한다!

1. 배열의 0번째 인덱스를 x라는 이름으로 부를것이야!
2. x에게 화살표 오른쪽에 있는 실행문을 실행시킨다.
3. 그 결과값으로 새로운 배열을 재구성한다.
4. 배열 끝까지 쭉 반복

그러면 x*x는 곧 1*1을 의미하는것이니 1이라는 결과를 새로운 배열에 넣을것이다. 같은 방식으로 1번째와 2번째 인덱스의 결과까지 추가한 배열을 return하니 1*1, 2*2, 3*3의 결과인 1, 4, 9가 출력되는것이다.

forEach 메소드 는 for 대신 사용하는 반복문이다. map메소드에서 요소가 실행문을 거쳐서 만들어진 새로운 배열을 return 시켰다면 forEach 는 아무것도 return하지않는다. 그래서 forEach로 전달되는 콜백 함수에서도 return하는 것이 없다. forEach 는 단지 for 문 대신 사용하는 반복메소드일뿐이다!

아래 코드를 살펴보자!

let startWithNames = [];
//빈 배열을 선언해주고
let names = ['a', 'ab', 'cbb', 'ada'];
//네 가지 문자열을 인덱스로 가지는 배열을 하나 선언한다!

names.forEach(el => {   
//각 인덱스들을 el이라는 이름으로 부를거고~
  if (el.startsWith('a')) {     
  //각 el들을 쭉 돌면서 'a'를 포함하는 el들이 있다면
    startWithNames.push(el);  
    //startWithNames라는 객체에 el을 하나씩 넣어준다.
  } 
});

let hasC = false;
//hasC값을 false로 선언해주고
let arr = ['a', 'b', 'c', 'd'];
//네 가지 문자열을 인덱스로 가지는 배열을 하나 선언한다!
arr.forEach(el => {
//배열의 각 el들을 쭉 돌다가
  if (el === 'c') {
  //c라는 인덱스가 당도하면!
    hasC = true;
    //hasC값을 true로 재선언한다!
    return;
    //그리고 반복문 빠져나오기~
  }
});

let idxOfC = -1;
//idxOfC에 -1를 할당해주고
let arr = ['a', 'b', 'c', 'd'];
//네 가지 문자열을 인덱스로 가지는 배열을 하나 선언한다!

arr.forEach((el, idx) => {
//배열의 각 el들을 쭉 돌거고, 각각의 el의 인덱스(몇 번째 el인지)도 받을거야~
  if (el === 'c') {
    //c라는 인덱스가 당도하면!
    idxOfC = idx;
    //해당하는 el의 인덱스값을 idxOfC라는 변수에 재할당한다!
    return;
    //반복문 빠져나오기~
  }
});

정리해보자면, map()메소드는 배열의 인덱스를 처음부터 끝까지 하나하나 훑어서 실행문을 거치는데에 사용되는거고, 그렇게 나온 결과값으로 새로운 배열을 만들어서 return하게된다. 결국은 새로운 배열을 return한다는것이 포인트다!

forEach()메소드는 배열의 인덱스를 처음부터 끝까지 하나하나 훑는 것 까지는 map메소드와 같지만, map메소드처럼 뭔가를 재구성하지도않고, 함수 자체가 뭔가를 return하지도않는다. 그냥 배열을 반복적으로 돌고 돌 뿐이다.

Assignment

1. moreThan100 함수를 구현해 주세요.
숫자로 구성된 배열을 인자로 받습니다.
100 보다 크거나 같으면, true 를
100 보다 작으면 false 로 요소를 변경하여, 새로운 배열을 return 해주세요.
예를 들어,

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

나의 답안

Assignment 1

const moreThan100 = nums => {
//nums라는 인자를 받는 화살표 함수를 만들고
  let newArr = [];
  //그 속에 빈 배열을 하나 만든다.
  let arr = nums.map(nums => {
  //받아올 인자는 배열이라고했으니, map을 돌려서 각 요소에게 하나씩 뭔가를 해주자!
  //각 요소들에게 nums라는 이름을 지어줘야지!
    if(nums >= 100){
    //각 nums들을 순회하며 100보다 같거나 클 경우에
      newArr.push(true)
      //새 배열에 true를 넣어주고
    } else {
      newArr.push(false)
      //그렇지 않을 경우 같은 배열에 false를 넣어준다.
    }
  });
  return newArr;
  //그렇게 만들어진 새 배열을 리턴한다
}

Assignment 2

const formatDate = dates => {
//dates라는 인자를 받는 화살표 함수를 만들고
  let arr = dates.map(dates => {
  //받아온 dates인자에 map을 돌린 값을 arr이라는 변수에 할당한다.
  //각 요소들에게는 dates라는 이름을 지어줘야지!
    let splited = dates.split('-');
    //들어온 각 요소들을 하이픈(-)을 기준으로 분해해서 splited라는 변수에 저장!
    return `${splited[0]}년 ${splited[1]}월 ${splited[2]}일`;
    //저장해둔 변수들을 백틱 안에서 호출해서 문자열을 리턴~
  })
  return arr;
  //arr배열을 호출~
}