💯 TIL) JavaScript 어려웠던 Repl.it 문제 정리 (2)

⚾️ Object

처음 풀이

function getData(salesArr, reviewArr, likeArr) {
  for(i = 0; i < salesArr.length; i+=2) {
      salesArr[i][1] + salesArr[i+1][1];
    }
  let objData = {
  };
  return objData;
}
                                 
salesArr1 = [["20190401", 34], ["20190402", 23], ["20190403", 29]];
reviewArr1 = [["20190328", 3], ["20190401", 0], ["20190403", 1]];
likeArr1 = [["20190328", 98], ["20190401", 102], ["20190403", 125]];

....?

뭔지 아예 감도 안온다.....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이런 코드 쳐놓고 멘탈터져서 헤롱헤롱 하고 있다가....
지나가시던 승현님이 힌트(치곤 많이 긴 힌트)를 던져주셨다!!!

나의 해결 방법

function getData(salesArr, reviewArr, likeArr) {
  let sumAmount = 0;
  let sumReview = 0;
  let sumLike = 0; // 총합 변수 먼저 선언!
  
  for(let i = 0; i < salesArr.length; i++) {
      sumAmount += salesArr[i][1]; // for 문 돌리면서 선언한 변수에 필요한 값만 추가
    }
  for(let i = 0; i < reviewArr.length; i++) {
      sumReview += reviewArr[i][1];
    }
  for(let i = 0; i < likeArr.length; i++) {
      sumLike += likeArr[i][1];
    }
    
  let objData = { // object에 총합계 값 넣기!
    sumAmount: sumAmount,
    sumReview: sumReview,
    sumLike: sumLike,
  };
  return objData;
}

salesArr1 = [["20190401", 34], ["20190402", 23], ["20190403", 29]];
reviewArr1 = [["20190328", 3], ["20190401", 0], ["20190403", 1]];
likeArr1 = [["20190328", 98], ["20190401", 102], ["20190403", 125]];

getData(salesArr1, reviewArr1, likeArr1);

성공!!!!!!!!!!!!!!!!! 으엉엉 ㅠㅠㅠㅠㅠㅠㅠ

포인트는 각 배열의 총합을 저장할 변수를 먼저 선언하고, for문으로 배열안의 배열에 index로 접근해서 먼저 선언한 변수에 차곡차곡 집어넣는것!

---

🍪 template literals, string method - Cookie 값 가져오기

처음 풀이

const getCookie = () => {
  const name = "wecode_cookie";
  const cookies = document.cookie.split(";");
  
  for(let i in cookies) {
    if(cookies[i].includes(name) === true) {
        return cookies[i].slice(name.length+2,cookies[i].length);
    }
  }
}

getCookie();

cookie 값 가져오는건 블로그를 많이 참고했고, string을 쪼개는건 혼자 시도했는데 한번만에 OK!!

여기서 포인트는 localStorage나 sessionStorage는 그냥 key값으로 접근하면 바로 value를 뱉어내는데 반해, cookie는 cookie key=value 정보를 하나의 string으로 줄줄줄 뱉어낸다는것....😵

단, 각 key=value 쌍 끼리 ; 으로 구분하기 때문에 이 ; 를 기준으로 string을 쪼개서 배열로 반환한 뒤, cookies[i] 로 각 cookie 값에 접근했다.

배열내의 모든 i 값을 확인해야 하므로 for in 구문을 사용했고 찾아야 하는 key 값은 "wecode_cookie" 는 따로 변수로 지정해서 for문과 slice 메서드에 이용했음!

slice 메서드는 string 과제 해결할때 서울특별시 때문에 된통 당해서 그런지 수월하게 해결했다ㅋㅋㅋ

< 참고한 블로그 : http://magic.wickedmiso.com/72 >

---

🚴🏻‍♀️ array methods 1

처음 풀이

let numsArr = [100, 9, 30, 7];

const moreThan100 = nums => 
  nums.map( i => { if (i < 100) {
    return false;
  }
  return true;
});

moreThan100(numsArr); // [ true, false, false, false ]

점점....구글링과 블로그에 의지하게 된다... 나 이래도 되는걸까....😂?

이번 문제는 척 보고 nums.map 에 i < 100 조건으로(혹은 i ≤ 100으로) if 문을 돌리면 되겠구나 싶긴 했으나...
arrow function 앞에서 if 조건을 넣는게 낯설고 어려웠다!

Array.map()은 아직도 헷갈려서.... forEach() 랑 같이 이번주내로 뽀개기에 정리할 예정!!!

< 참고한 블로그 : https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d >

model solution

const moreThan100 = nums => {
  return nums.map(el => el > 100);
}

예...?

oh 상상도 못한 코드 oh

그래서 이게 뭔 말?

( el > 100 ) 은 boolean type 이니까 값이 true 아니면 false 로 나온다!

즉 위 코드는 한 줄로 return true/false 인 것.....!

이렇게 간단하게 작성할 수 있는걸.... 굳이 if문으로 줄줄줄 길게도 적었네ㅠㅠㅠㅠ 반성반성....😭

---

🚵🏻‍♀️ array methods 2

처음 풀이

let birthDay = ['2019-03-21', '2019-04-21', '2019-05-21'];

const formatDate = dates =>
  dates.map ( i => { for (let i in dates) {
    return `${dates[i].slice(0, 4)}년 ${dates[i].slice(5, 7)}월 ${dates[i].slice(8, 10)}일`;
  }
})

formatDate(birthDay); // [ '2019년 03월 21일', '2019년 03월 21일', '2019년 03월 21일' ]

birthDay 배열의 [0]번째 값인 2019년 03월 21일 값이 다른 모든 배열 index 값에 들어가버린다....

그래서 [ '2019년 03월 21일', '2019년 03월 21일', '2019년 03월 21일' ] 같은 결과가 출력됨.....

배열에 dates.map 을 돌리는 과정에서 dates 배열의 [0]번째, [1]번째, [2]번째...[n]번째 index에 까지 값이 들어가야 하는데...

[0]번째만 계산하고 값을 반환

2차 시도 = 실패

let birthDay = ['2019-03-21', '2019-04-21', '2019-05-21'];
let dateArr = [];

const formatDate = dates =>
  dates.map ( i => { for (let i in dates) {
    dateArr += `${dates[i].slice(0, 4)}년 ${dates[i].slice(5, 7)}월 ${dates[i].slice(8, 10)}일`;
  }
  return dateArr;
})

formatDate(birthDay);

앞자리 한별님의 도움으로 slice 로 접근하는게 틀렸다는걸 알게 되었다.....ㅎㅎ....

그러면 birthDay의 각 [i] 번째 요소들을 split 으로 "-" 를 기준으로 자른다음에 "년","월","일"을 붙이면 될 것 같다!!

나의 해결 방법

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

formatDate(birthDay); // [ '2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일' ]

우왕!!!!!!!!! 한별님 최고😂😂😂😂😂😂😂😂

split 써서 "-" 단위로 쪼개 놓으니까 for 문 돌릴 일도 없고 간단하게 끝냈다👍!!!

여기서 포인트는 이렇게 계산한 결과 값은 let format 변수에 정의해서 마지막에 format 값은 return 한 것!

model solution

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

그래서 이게 뭔 말?

내가 쓴 코드랑 거의 비슷한데, 포인트는 나는 dates.map 결과값을 format 이라는 변수에 할당한 다음에 변수를 return 했고....

model solution은 dates.map 결과값을 바로 return 했다.

정말 작은 차이인데 빨리 return 하니까 코드가 훨씬 간결하다.

Early Return... 항상 명심하자!!

---

😱 object (3)

나의 n번째 풀이

const scores1 = {
  생활속의회계: 'C',
  논리적글쓰기: 'B',
  독일문화의이해: 'B+',
  기초수학: 'D+',
  영어회화: 'C+',
  인지발달심리학: 'A+',
};
const requiredClasses1 = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];

const getExamResult = (scores, requiredClasses) => {
  const result = {};

  const numScore = {
    'A+': 4.5,
    A: 4,
    'B+': 3.5,
    B: 3,
    'C+': 2.5,
    C: 2,
    'D+': 1.5,
    D: 1,
    F: 0,
  };

  for (let i in requiredClasses) {
    let required = requiredClasses[i]; // 필수 과목
    result[required] = 0;
  }

  for (let key in scores) {
    let subject = scores[key]; // 과목명
    result[key] = subject;
  }

  for (let value in scores) {
    let score = scores[value]; // 숫자 점수
    result[value] = numScore[score];
  }

  return result;
};

 getExamResult(scores1, requiredClasses1);

대략 하루정도 걸린 object (3) 문제....🤪
대체 몇번째 풀이인지...처음 풀이는 어땠는지...기억도 안난다.

(그때그때 기록했어야 했는데ㅠㅠ 자꾸 막히니 답답해서 지우고 다시 해보고 지우고 다시해보고를 쉴 새 없이 했던것 같다....)

일단 문제 이해하는데만 1시간 정도 걸린 것 같고....ㅋㅋㅋㅋㅋㅋ

object (3) 문제 들어가기 전에 들었던, 승현님의 미니 세션이 많이 도움이 됐다!

💁🏻‍♀️ 중요 point

• 빈 객체 { } 를 선언하고, 그 객체에 값을 넣고 싶으면 obj.name = "solmi"; 로 넣을 수 있다.
  => 여기서 name = key , "solmi" = value
  
  
• key 값, value 값은 변수로도 넣을 수 있다!

const obj  = {
	"A": 4, // 이 4값이 필요하다면,
}
const obj2 = {
	"hi": "A", // 근데 이 obj2 를 이용해야 한다면
}
obj[obj2["hi"]]; // 4

• const로 변수를 선언하고 빈 객체를 할당해도, 객체 안에 값이 추가로 들어올 수 있다.
  => const 인데 어떻게? ⇒ 객체의 기본 속성 때문!!
  객체는 메모리에 저장되는게 아닌, 각 요소가 저장된 메모리를 가르키는 reference가 저장되기 때문에!
  
  
• 배열을 객체의 key 값으로 활용하고 싶다면?

const obj = {};
const arr = ["a", "b", "c"]; // obj 안에 a=10, b=10, c=10 으로 넣고 싶다면?
for(let i in arr) { // for 문으로 돌면서
	obj[arr[i]] = 10; // arr[i]에 value 값 지정
}
// obj = { a: 10, b: 10, c: 10 } 으로 출력

👉 빈 object에 값이 어떻게 들어가는지, 어떻게 넣을 수 있는지 고민해보기

model solution 1

const getExamResult = (scores, requiredClasses) => {
  const result = scores;
  
  for(let key in result){
    if(result[key] === "A+"){
      result[key] = 4.5;
    }
    else if(result[key] === "A"){
      result[key] = 4;
    }
    else if(result[key] === "B+"){
      result[key] = 3.5;
    }
    else if(result[key] === "B"){
      result[key] = 3;
    }
    else if(result[key] === "C+"){
      result[key] = 2.5;
    }
    else if(result[key] === "C"){
      result[key] = 2;
    }
    else if(result[key] === "D+"){
      result[key] = 1.5;
    }
    else if(result[key] === "D"){
      result[key] = 1;
    }
    else if(result[key] === "F"){
      result[key] = 0;
    }
  }
  
  requiredClasses.forEach((el) => {
   if(result[el] === undefined){
      result[el] = 0;
    }
  })
  
  return result
}

model solution 1 은 각각의 key 값을 학점과 비교해서, 일치할 경우 숫자 학점 값을 return 하는 방식으로 작성되었다.

if 와 else if 의 혼돈의 도가니탕이지만.... 어려운 조건이 아니고 영어 학점-숫자 학점이 서로 link 되어 있으니까, 오히려 사람 입장에서 봤을때 더 눈에 잘들어오는것 같기도 함!

model solution 2

const getExamResult = (scores, requiredClasses) => {
  const result = {}
  const list = {
    "A+":4.5,
    "A":4,
    "B+":3.5,
    "B":3,
    "C+":2.5,
    "C":2,
    "D+":1.5,
    "D":1,
    "F":0    
  }
  
  for(let key in scores){
    result[key] = list[scores[key]];
  }
  
  const keys=Object.keys(result)
  for(let i in requiredClasses){
    if(!keys.includes(requiredClasses[i])){
      result[requiredClasses[i]] = 0;
    }
  }
  
  return result;
}

model solution 2 는 반면에 왕왕간단... Object.keys 와 includes 메서드를 이용해서 완전 짧고 간결하게 작성되었당.....

나는 for in 구문 3번 반복했는뎅......( 심지어 그것도 하루 걸림🤮)

---

우왕😭 드디어 JavaScript Repl.it 끝!!!!!
도움주는 멘토님, 동기님 모두모두 감사해오ㅠㅠㅠㅠㅠ