JS레플릿 29.array methods_10.20

Assignment#1

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

예를 들어, nums(input)가 [100, 9, 30, 7] 이라면
return은 [true, false, false, false]

로직 생각해보기

1. 화살표 nums를 인자로 받는 함수moreThan100을 선언합니다. 인자가 1개이므로 괄호()는 생략할 수 있습니다

const moreThan100 = nums => { 
}

2. 인수x에 대해 100이상이면 true, 미만이면 false를 반환하는 화살표 함수arr을 선언합니다

const moreThan100 = nums => { 
  const arr = x => {
      if(x>=100){
        return true;
      }else{
        return false;       
      }      
}

3. nums에 대해 map()하는 arr을 반환합니다

const moreThan100 = nums => { 
  const arr = nums.map(
    x => {
      if(x>=100){
        return true;
      }else{
        return false;       
      }
    }
  );
  return arr;
}

결과

const myArray = [100, 9, 30, 7];
const moreThan100 = nums => { 
  const arr = nums.map(
    x => {
      if(x>=100){
        return true;
      }else{
        return false;       
      }
    }
  );             
  return arr;
}
console.log(moreThan100(myArray));

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

로직 생각해보기

1. dates를 인자로 받는 함수 formatDate를 선언합니다

const formatDate = dates => {
}

2. arr에 dates를 map()하는 화살표 함수를 선언하고

const formatDate = dates => {
  const arr = dates.map(
    x => {
    }
  )
  return arr;
}

3. 배열dates의 각 string값을 '-'를 기준으로 분리하여 배열el로 저장합니다

const formatDate = dates => {
  const arr = dates.map(
    x => { // x = ['2019-03-21']이면
      let el = x.split('-'); // el = ['2019', '03', '21']
    }
  )
  return arr;
}

4. 백틱(`)으로 감싸서 ${ }년, ${ }월, ${ }일 안에 배열el의 값을 순서대로 할당합니다

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

결과

const myDate = ['2019-03-21', '2019-04-21', '2019-05-21'];
const formatDate = dates => {
  const arr = dates.map(
    x => {
      let el = x.split('-');
      return `${el[0]}년 ${el[1]}월 ${el[2]}일`;
    }
  )
  return arr;
}

console.log(formatDate(myDate));

Today I Learn

1. Array.map()

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

• return 값은 수정된 값으로 다시 생성된 배열.
• Array 타입의 데이터를 요소 갯수만큼 반복하며 반복할 때마다 실행할 함수를 parameter로 전달.
• 그러면 이 callback 함수에서 array의 요소를 인자(x)로 받음.

const arr = [1, 2, 3];
const squares = arr.map(x => x * x); // [1, 4, 9]
/* 상동
const squares = arr.map(function (x) { 
  return x * x;
});
*/

2. Array.forEach()

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

• 새로운 배열을 return(반환) 하지 않습니다
• 배열의 모든 요소를 순회하기 때문에 콜백 함수를 실행하는 중간에 반복을 탈출할 수 없으며 새로운 배열 또한 반환하지 않습니다.
• 만약 실행 중간에 멈춰야 한다면 forEach는 적절하지 않을 수 있으며, 대신 for 반복문이나 every, some과 같은 메서드들을 활용해 조기에 반복을 종료할 수 있습니다.

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

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

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

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

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