👀 오늘 뭘 했을까?

• 오전에 repl.it 못한거 마저 했다
• 오후에 백엔드에 대해 자세히 설명해주셨는데 프론트가 더 좋아졌다.
• 남은 시간 CSS 레이아웃 이해 안가는 부분 복습!

😳 오늘 뭘 공부 했을까?

1. 추가된 String 메소드

const email = 'abc@gmail.com';

console.log(email.starstWith('ab')); // true
console.log(email.endsWith('com')); // true
console.log(email.includes('mail')); // true

• startsWith : 어떤 특정 문자로 시작하는지
• endsWith : 어떤 특정 문자로 끝나는지
• includes : 어떤 특정 포함하는지

2. map 메소드 활용

const formatDate = dates => {
  const answer = dates.map(date => {
    const dateArr = date.split('-');
    const result = dateArr.map((date,index)=>{
      if(index === 0)
        return date + '년';
      else if(index === 1)
        return date + '월';
      else
        return date + '일';
    }).join(' ');
    return result;
  });
  console.log(answer); // ex) ['2020년 01월 01일', '2021년 01월 01일']
  return answer;
}

• YYYY-MM-DD 타입을 YYYY년 MM월 DD일로 변경하는 문제
• 문자열 date 를 split 메소드로 배열 형태로 변경
• map 메소드로 배열을 돌며 - 문자를 찾고 순서대로 년, 월, 일 로 바꿈
• 배열 순환이 끝나면 join 메소드로 공백문자 구분자를 추가하여 문자열로 변경
• 변경된 문자열을 반환하여 기존 문자열과 변경

3. 객체 👉 배열 변환

const myObj = {
  one: "1",
  two: "2",
};

console.log(Object.keys(myObj)); // ['one', 'two']
console.log(Object.values(myObj)); // ['1', '2']
console.log(Object.entries(myObj)); // [['one', '1'], ['two','2']]

• Object.keys() 메소드는 객체의 key를 배열로 반환
• Object.values() 메소드는 객체의 value를 배열로 반환
• Object.entries() 메소드는 객체의 key, value를 함께 이차원 배열로 반환

4. 객체, 배열을 활용한 성적표 문제

const scores = {
  생활속의회계: "C",
  논리적글쓰기: "B",
  독일문화의이해: "B+",
  기초수학: "D+",
  인지심리학: "A+",
};
const charScores = Object.values(scores); // 문자 점수만 배열로 전환
const pointScores = charScores.map((score) => {
  if (score === "A+") return 4.5;
  else if (score === "A") return 4;
  else if (score === "B+") return 3.5;
  else if (score === "B") return 3;
  else if (score === "C+") return 2.5;
  else if (score === "C") return 2;
  else if (score === "D+") return 1.5;
  else return 1;
}); // 배열을 순회하며 숫자 점수로 변경

let index = 0;
for (const key in scores) {
  scores[key] = pointScores[index];
  index++;
} // 객체를 순회하며 숫자 점수로 value를 변경

const subjects = Object.keys(scores);
const requireClass = ["영어회화", "기초수학", "공학수학", "컴퓨터과학개론"];

const filterClass = requireClass
  .map((subject) => {
    if (subjects.indexOf(subject) === -1) return subject;
    else return 0;
  })
  .filter((subject) => subject !== 0);
// 두 배열을 비교하여 둘 다 있으면 0, 없으면 그대로 반환
// 0을 제외한 나머지 요소들만 필터링

filterClass.forEach((subject) => (scores[subject] = 0));
// 나머지 과목들을 모두 value가 0으로 추가

• 문자형 성적을 숫자형 으로 변환하는 문제
• scores 객체에서 문자형 점수만 추출해 숫자형 으로 변경
• scores 객체를 순회하며 숫자형으로 값을 변경
• scores 객체에서 key 만 배열로 추출해 requireClass 배열과 비교 후 없는 과목만 필터링
• 필터된 나머지 과목들을 scores 객체에 value 는 0으로 추가