JavaScript - array methods(assignment 2)

JavaScript Replit - array methods 중 Assignment 포스팅입니다.

---

약 2시간 동안 구글링을 하며 끙끙대다가 결국 친구 찬스를 썼다. 😭

1. Answer 1 (Date 함수 이용)

// ES5 function format
const formatDate = function (dates) {
	return dates.map(function (date) {
	const parsedDate = new Date(date);
	return `${parsedDate.getFullYear()}년 ${parsedDate.getMonth() + 1}월 ${parsedDate.getDate()}일`
   });
 }

 console.log(formatDate(['2019-03-21', '2019-04-21', '2019-05-21']));

출력값 : [ '2019년 3월 21일', '2019년 4월 21일', '2019년 5월 21일' ]

문제에서는 '월'과 '일'이 1 자리수일 경우 앞에 숫자 '0'이 붙어야 한다는 것을 요구했다. 그래서 코드를 다시 작성해 보았다.

---

// ES5 function format
const formatDate = function (dates) {
	return dates.map(function (el) {
	let parsedDate = new Date(el);
	let year = parsedDate.getFullYear().toString();
	let month = (parsedDate.getMonth() + 1).toString();
	let date = parsedDate.getDate().toString();
    
	if (month.length < 2) {
	  month = '0' + month;
	}
	if (date.length < 2 ) {
	  date = '0' + date;
	}
    
	return `${year}년 ${month}월 ${date}일`;
	});	
}

console.log(formatDate(['2019-03-21', '2019-04-21', '2019-05-21']));

출력값 : [ '2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일' ]

처음에는 각 변수마다 .toString() 메서드를 붙이지 않아서 if 문이 적용되지 않았다.

문자와 숫자의 조합이 안먹히므로 .toString() 메서드를 이용하여 각 변수들을 모두 string으로 바꾼 뒤

'0' 문자와 더해져서 출력이 되도록 했다.

---

아래 코드는 ES6 Arrow function으로 변경한 코드이다.

// ES6 function format
const formatDate = dates => dates.map((el) => {
    let parsedDate = new Date(el);
    let year = parsedDate.getFullYear().toString();
    let month = (parsedDate.getMonth() + 1).toString();
    let date = parsedDate.getDate().toString();
    
    if (month.length < 2) {
      month = '0' + month;
    }
    if (date.length < 2 ) {
      date = '0' + date;
    }
    
    return `${year}년 ${month}월 ${date}일`;
});

console.log(formatDate(['2019-03-21', '2019-04-21', '2019-05-21']));

2. Answer 2 (Split 메서드 이용)

// ES6 function format
const formatDate = dates => dates.map((date) => {
  const splited = date.split('-');
  return `${splited[0]}년 ${splited[1]}월 ${splited[2]}일`;
});

console.log(formatDate(['2019-03-21', '2019-04-21', '2019-05-21']));

출력값 : [ '2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일' ]

split 메서드를 이용해서 dates 배열의 element들을 '-'(하이픈)을 기준으로 끊어 다음과 같이 만든다.

[ '2019', '03', '21' ]
[ '2019', '04', '21' ]
[ '2019', '05', '21' ]

년, 월, 일을 요소로 가진 배열이 만들어졌으니 위와 같이 return하면 완료된다.

Ref.

• Date 함수
  https://www.it-swarm.dev/ko/javascript/yyyymmdd%EC%97%90-javascript-%EB%82%A0%EC%A7%9C-%ED%98%95%EC%8B%9D-%EC%A7%80%EC%A0%95/1045676624/