TIL. JS 개념 & Replit문제풀이

🌟 객체의 키를 변수로 접근하기

const information = { // 1)
  name: 'seul',
};

// 2) 
const verb = 'developes';
const project = 'instagram';

• 1) 여기 객체가 있다.
• 2) 그리고 여기 값이 할당된 변수가 선언되어져 있다.

❓ 1) 객체 안에 verb 값을 key로, project 값을 키의 값으로 새로 할당해주려고 할 때 키와 값을 변수를 통해 받아온다면 어떻게 해야할까? 🤔

information[verb] = project; // 1)
information.developes = 'instagram' // 2)

위와 같이 할당이 가능하다.

• 1) 의 경우 변수 verb 와 project 가 가지는 값에 따라서 다른키와 다른 값을 가질 수 있다.
• 2) 의 경우 키와 값은 항상 정해져있다.

1. 만나이 계산하기

미국을 비롯해 전세계 대부분의 나라들이 생일을 기준으로 나이를 계산 합니다. 쉽게 말해 미국은 태어나자마자 0살이고 생일을 지나야 비로소 한 살이 됩니다. 반면에 한국은 태어나자마자 1살이고 연도가 바뀔 때마다 한 살씩 먹습니다. 예를 들어 미국에서는 1995년 9월 12일에 태어났으면 1995년 9월 12일에는 0살이고 1996년 9월 12일이 되야 1살이 됩니다. 그에 비해 한국에서는 1995년 9월 12일에 태어나자마자 1살이고 1996년 1월 1일에 2살이 됩니다. 1살 차이도 크게 생각하는 우리나라 고유의 문화에 비롯한 계산법이 아닌가 추측해 봅니다. 미국이나 다른 나라가 사용하는 나이 계산법은 우리나라에서는 만 나이 라고 하죠.

만으로 계산한 나이를 구하는 함수인 getWesternAge 함수를 구현하기

• 이 함수는 birthday 라는 인자를 받습니다.
• 이 birthday 는 Date 객체 입니다. birthday 라는 인자를 넣었을 때, 현재를 기준으로 만으로 계산한 나이를 리턴 해주세요.
• birthday 는 string이 아닌 Date 객체라는 걸 명심하세요 :)
• 예를 들어, 오늘이 2020년 7월 21일이고, birthday 값이 다음과 같다면 리턴 값은 30 이 되어야 합니다.

1990-03-21T00:45:06.562Z

풀이

function getWesternAge(birthday) {
   // 1)
  let current = new Date();
  let year = current.getFullYear();
  let month = current.getMonth() + 1;
  let date = current.getDay();

  // 2)
  let age = year - birthday.getFullYear(); 
  console.log(age);
  
  // 3)
  if ( 
    month < birthday.getMonth() ||
    (month === birthday.getMonth() + 1 && date < birthday.getDay())
  ) {
    age -= 1;
  }
  console.log(age);
  return age;
}

✍️ 만나이 계산을 어떻게 할까?

• 1) 우선 현재 날짜를 Date 객체를 통해서 가져온 뒤 년도와 월, 일의 값을 받아왔다.
• 2) 받아온 birthday는 Date 객체이므로 바로 getFullyear() 메서드를 사용해서 현재 년도와의 차이값을 구해내고 age 라는 변수에 담는다.
• 3) 만약 현재 날짜 기준으로 생일이 뒤에 있다면 아직 생일이 지나지 않았으므로 age 변수의 나이 값을 1 감소한다.

2. 배열 요소 바꾸기

조건 : map 메서드와 arrow function을 사용

formatDate 함수를 구현해 주세요.
날짜가 담긴 배열을 인자로 받습니다.
날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 return 해주세요.

ex. )

dates(input)가
['2019-03-21', '2019-04-21', '2019-05-21']
이라면

return은
['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']
이 되어야 한다.

풀이

const formatDate = dates => {
  let year = dates.map((date) => date.slice(0, 4));
  let month = dates.map((date) => date.slice(5, 7));
  let day = dates.map((date) => date.slice(8, 10));

  let result = [
    `${year[0]}년 ${month[0]}월 ${day[0]}일`,
    `${year[1]}년 ${month[1]}월 ${day[1]}일`,
    `${year[2]}년 ${month[2]}월 ${day[2]}일`,
  ];
  return result
}

✍️ 더 간단하게 구할 수 있는 방법이 있을 것 같다. 🤔

• 우선 주어진 dates 의 배열에서 조건의 map() 을 이용하여 요소들 각각 slice() 를 통해 년,월,일 을 구한다.
• 구한 값을 템플릿 리터럴을 이용해서 바로 result의 배열 요소로 넣어서 구했다.

✍️ +) 동기님께 도움을 받아서 리팩토링을 진행해보았다!

const formatDate = dates => {
  const result = dates.map(
    (date) => date.replace('-', '년 ').replace('-', '월 ') + '일'
  );
  return result;
};

• map() 이 새로운 배열을 리턴한다는 것을 이용, replace() 메서드 체이닝을 이용해서 간단하게 풀 수 있다. 👍

3. 오브젝트

인자 scores 는 다음과 같은 객체입니다. 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.

• 'A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F'

{
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}

• 인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다.

['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']

• 다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요.
  scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다. 단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.
  A+ => 4.5
  A => 4
  B+ => 3.5
  B => 3
  C+ => 2.5
  C => 2
  D+ => 1.5
  D => 1
  F => 0
• requiredClasses 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면, 해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다. 위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면, 다음과 같은 객체과 리턴됩니다. 요소간 순서는 다를수 있지만, 채점에 무관합니다.

{
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0,
}

✍️ for in , forEach 를 사용해서 풀었다.

const getExamResult = (scores, requiredClasses) => { 
  const result = {}; // 1)
  const scoresArr = { // 2)
    'A+': 4.5,
    A: 4,
    'B+': 3.5,
    B: 3,
    'C+': 2.5,
    C: 2,
    'D+': 1.5,
    D: 1,
    F: 0,
  };
  console.log(scores);

  for (let key in scores) { // 3)
    result[key] = scoresArr[scores[key]];
  }
  requiredClasses.forEach((subject) => { // 4)
    if (scores[subject] === undefined) {
      result[subject] = 0;
    }
  });
  return result;
}

✍️

• 1) 결과값을 담을 빈 객체를 생성한다.

• 2) scores 객체가 가지고 있는 키 값을 이용해서 scoresArr 의 값으로 할당하기 위한 객체를 새로 만들었다.

• 3) scores를 원하는 형태로 만들어서 result라는 새로운 객체에 담는다.
  → result[key] = scoresArr[scores[key]]
  여기서 result의 키는 scores의 키('생활속의 회계', '논리적인글쓰기', '독일문화의이해'...)가 되고, 값으로는 scoresArr 객체의 키에 해당하는 값이 된다.
  이 부분에서 scroes[key] 의 값, 즉 A+, B, C... 가 scoresArr의 키로써 값을 가져올 수 있게된다.

• 4) for in 문만 생각해서 복잡하게 풀다가 오래 걸렸던 부분이다. 😵
  결과적으로 forEach 를 사용했고, 받아온 requiredClasses 를 각각 forEach를 사용해서 요소들마다 조건에 만족하는지 검사하도록 구현했다.
  → 만약 scores의 [각 요소] 가 키로 undefined, 즉 존재하지 않을 경우 result 객체에서 그 요소의 값은 0으로 키와 값을 추가한다.