Wecode Javascript Replit 29번 map

Relpit 29번

 

Map 과 arrow function 을 이용해서 

 

1. 각 배열의 요소의 값이 100초과이면 true / 100이하면 false return 하는 moreThan100을 만들어라

 

따단! 여기서 map은 어캐쓰냐

 

Array.map(함수) > Array 배열에 요소 하나하나씩  함수를 실행한다는 느낌

 

일단 코드를 만들어 봤다

 

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

 

moreThan100 매개변수 nums를 가지고 화살표 오른쪽 함수를 return한다 느낌이다

 

return 하는 함수는

 

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

요거이다 다시 원래 코드로 돌아와서

 

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

moreThan100은 nums를 매개변수로 받는데 이곳에 배열이 들어가는 거니까

 

변수 arr는 매겨변수로 받은 변수(nums)를 map함수를 사용한다 여기서 map 함수란

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

array.map(함수) 라 가정한다면 array라는 배열에 각 element에다가 함수를 실행한뒤 그 결과를 배열로 리턴한다는 느낌이다

const a = [100, 9, 30, 7];
console.log(moreThan100(a));

아하 그렇군요! 배열 a와 해당 함수를 console.log 해볼까용?

 

두둥!!

 

[ false, false, false, false ]

 

아니 너무한거 아니냐고오~

 

코드를 자세히 살펴볼까 하하 

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

 

 

arr 변수는 nums라는 배열을 map() 한거를 할당 받는것인데, nums 배열의 각 element에 funcion()을 실행하는것인데

 

내생각엔 if문이 틀린거같아  if를 어캐 걸어야할까 if(nums>100)의 nums가 배열이니까 배열에게 비교연산자 사용 불가하니까 else만 출력 되는거같아요 

 

그렇군요! 이제 우리가 찾아야할것은 어떻게 if문을 걸것인가 음 이렇게는 안되나봐요 하하

 

멘토님 질문이요!!!

 

질문에 답을 들었다

 

map(함수) <--- 여기서 함수의 매개변수는 배열의 요소이고, => (화살표) 뒤에 함수를 실행한다

 

아하 배열의 element를 매개변수에 넣고 그걸 function에 실행하는느낌으로 구현되는 함수 map()이구나 알수있따!

 

변경된 코드는

 

 

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

요것이다. 내가 부족했던 부분은 

arrow function의 이해와 

 

map(함수)에서 함수의 매개변수가 그 배열의 요소가 들어가는것을 몰랐다는것이다 한번더 arrow function에 대한 설명을 읽어보자!

 

놀라운게 무엇인지 아나? 지금 1번 풀었다는 것이다 유후 너무 좋아

 

2번으로 넘어가자

 

2번문제는 

 

날짜가 담긴 배열을 인자로 받는 함수 formatDate 함수를 완성하는 것이다.

 

여기서 날짜 배열의 element는 string이고 이 함수는 '2020-03-03' > 2020년 3월 3일 로 변경하는 함수이다!

 

우리함께 생각해볼까요? 어떻게 풀어야하는지?

 

일단 배열의 요소 하나씩 접근하는 map을 사용해야 겠구나! 

고민해야 할 부분은 - 를 년 월 일로 바꿔야 한다는 것이다

 

처음으로 드는 생각은 slice() / indexOf 사용과 replace사용하기 또는

년/월/일을 slice하여서 변수에 할당한 다음에 `${}` 요걸 사용해서 리턴하는 방법 2가지가 생각난다 

 

진정한 개발자는 게으른법 코드가 짧아 보이는 2번째 방법으로 시작한다.

 

년월일을 - 로 표시하는 것은 일정한 규칙이 있다고 생각한다

 

바로 년은 4글자 월은 2글자 일도 2글자

 

slice로 뽑을수 있을거같다! do it!

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice

String.prototype.slice() - JavaScript | MDN

 

slice 복습 해보자 

 

str.slice(시작인덱스,끝인덱스) 이것이 기본인데 MDN에서의 예시를 보자

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(4, 19));
// expected output: "quick brown fox"

4번째 인덱스의 문자 부터 19번 인덱스 문자 전까지를 자르는게 slice구나! 복습 했다

여기서 알수 있는 부분은 시작인덱스는 포함되고 끝인덱스 부분은 포함되지 않는 다는것이다! 

 

const formatDate = dates => {
	const fDate = dates.map(y => {
		const year = y.slice(0, 4);
		const month = y.slice(5, 7);
		const day = y.slice(8, 10);
		const full = `${year}년 ${month}월 ${day}일`;
		return full;
	});
	return fDate;
};

 

이렇게 코드를 작성하니까 정상적으로 진행하였다.

 

내가 생각했던  년은 4글자 월은 2글자 일도 2글자를 사용하였다.

 

fDate는 부모함수의 매개변수로 받은 배열 dates를 map하여 리턴한 배열을 받는다

 

배열의 요소에서 0번째 index부터 3번째 인덱스까지의 문자를 year값에 할당, 5번째에서 6번째 문자를 month에 할당, 8번째 인덱스에서 9번째 인덱스의 문자를 day에 할당하여 

 

이 변수들을 이용하여 full에 변수와 내가 원하는 값들을 넣었고 full을 리턴한다 그 리턴값은 fDate이므로,

formatDate 함수는 fDate를 리턴하게 된다면 문제가 해결된다