Session 5_1. JavaScript Troubleshooting

*🔐Study Keyword :

✅에러를 해결하고 🔑접근하는 방식에 대해서 공부해보자

[과제 1] 논리 오류

- JavaScript Replit 13번 문제의 잘못된 답안입니다. 어떻게 에러를 해결할까?

<script>
const meetAt = (year, month, date) => {
  if(!month === undefined){
    return `${year}년/${month}/${date}`
  } else if(!date === undefined){
    return `${year}년 ${month}월`
  } else {
    return `${year}년`
  }
}
meetAt(2022) // 원하는 결과는 "2020년" 입니다.
meetAt(2022, 3) // 원하는 결과는 "2020년 3월" 입니다.
meetAt(2022, 6, 22) // 원하는 결과는 "2020/6/22" 입니다.
</script>

해결 방식

• 1_1. 풀이 1번 =>
  인자를 세 개다 넣어줌으로서 세개의 인자 모두 검열을 거치는 로직

<script>
const meetAt = (year, month, date) => {
	if (year && month && date) {
    return `${year}/${month}/${date}`
	} else if (year && month && !date) {
		return `${year}년 ${month}월`
	} else if (!year) {
    return `${year}년`
	}
};
</script>

• 1_2. 풀이 2번 =>
  우선 연산자를 줌으로서 세번째 파라미터 date가 있는지만 확인 + month가 있는지만 확인하여 없다면 year만 나오는 로직

<script>
const meetAt = (year, month, date) => {
  if(!(date === undefined)){
    return `${year}/${month}/${date}`
  } else if(month !== undefined){
    return `${year}년 ${month}월`
  } else {
    return `${year}년`
  }
}
meetAt(2022) // "2020년" 
meetAt(2022, 3) // "2020년 3월"
meetAt(2022, 6, 22) //  "2020/6/22" 
</script>

[과제 2] 문제 요건 파악 오류

-JavaScript Replit 23번 문제의 잘못된 답안입니다. 어떻게 에러를 해결할까?

<script>
function getSum(arr){
  let sum =0;
  for(let i=0; i<arr.length; i++){
    sum += arr[i][1];
  }
  return sum;
}
// 함수에 인자를 전달하는 함수
function getData(salesArr,reviewArr,likeArr){
	return [getSum(salesArr), getSum(reviewArr), getSum(likeArr)]
}
getData([["20190401", 34], ["20190402", 23], ["20190403", 29]],
       [["20190328", 3], ["20190401", 0], ["20190403", 1]],
       [["20190328", 98], ["20190401", 102], ["20190403", 125]])
// 리턴 값을 객체로 받고자한다
</script>

해결 방식

• 2번 답 => 리턴 값 자체를 객체의 키와 키의 값 형태인 프로퍼티를 넣어줌으로서 객체를 반환해준다.

<script>
function getSum(arr){
  let sum =0;
  for(let i=0; i<arr.length; i++){
    sum += arr[i][1];
  }
  return sum;
}
function getData(salesArr,reviewArr,likeArr){
  return {
		sumAmount: getSum(salesArr),
		sumReview: getSum(reviewArr),
		sumLike: getSum(likeArr)
	};
}
getData([["20190401", 34], ["20190402", 23], ["20190403", 29]],
       [["20190328", 3], ["20190401", 0], ["20190403", 1]],
       [["20190328", 98], ["20190401", 102], ["20190403", 125]])
getData(salesArr,reviewArr,likeArr)// { sumAmount: 86, sumReview: 4, sumLike: 325 }
</script>

[과제 3] Replit 30번 다시 풀기

Replit 30번의 나은 해결 방식 찾아보자!

• 3번 답 =>

1. 함수 내부에 객체 형태(changeScore)로 키와 키값이 A,B,C 점수와 4.5, 4, 3.5로 매칭된 프로퍼티를 생성해준다.
2. 기존의 scores 객체를 for.. in으로 돌면서 changeScore의 키의 값을(4.5, 4, 3.5...etc) score객체의 키의 값을 새로 할당해준다.
3. requiredClasses 배열에 있는 요소를 돌면서 scores 객체가 갖고 있지 않은 새로운 프로퍼티(키)가 존재하면 scores 프로퍼티(키)를 추가해주면서 키의 값으로 0을 할당해준다.

<script>
const scores = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}
const requiredClasses = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']
const getExamResult = (scores, requiredClasses) => {
  const changeScore = {
    "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) { // 객체 내부 순환 
    scores[key] = changeScore[scores[key]]
  }
  requiredClasses.forEach(el=>{
    if(!scores.hasOwnProperty(el)) scores[el] =0;
  })
  return scores
}
getExamResult(scores, requiredClasses) 
</script>

[과제 4] 작은 문제로 쪼개기

Logical Error를 줄이기 위해서 어떻게 해야할까?

• 큰 문제를 작은 문제로 쪼개는 과정이 필요!

<script>
const CATEGORIES = [
  { id: 1, title: "디지털/가전", checked: true },
  { id: 2, title: "가구/인테리어", checked: true },
  { id: 3, title: "유아동/유아도서", checked: false },
  { id: 4, title: "생활/가공식품", checked: false },
  { id: 5, title: "스포츠/레저", checked: false },
  { id: 6, title: "여성잡화", checked: false },
  { id: 7, title: "여성의류", checked: false },
  { id: 8, title: "남성패션/잡화", checked: false },
  { id: 9, title: "게임/취미", checked: false },
  { id: 10, title: "뷰티/미용", checked: false },
  { id: 11, title: "반려동물용품", checked: false },
  { id: 12, title: "도서/티켓/음반", checked: true },
  { id: 13, title: "식물", checked: false },
  { id: 14, title: "기타 중고물품", checked: false },
  { id: 15, title: "삽니다", checked: false },
]; 
// 배열로 해당 스트링을 만들기
//"&filterOption=디지털/가전&filterOption=가구/인테리어&filterOption=도서/티켓/음반"
</script>

• 4번 답=>
• Step 1> CATEGORIES 배열을 순회하며 프로퍼티 'checked'가 true인 요소만 배열에 담기

<script>
 const result =
CATEGORIES.filter(ele => ele.checked === true) // '=== true' 생략가능
/********************************************************
// Expected outputs:
[
  { id: 1, title: '디지털/가전', checked: true },
  { id: 2, title: '가구/인테리어', checked: true },
  { id: 12, title: '도서/티켓/음반', checked: true }
]
********************************************************/
</script>

• Step 2> result 배열에 담긴 객체를 map을 사용하여 title 프로퍼티 값으로 치환

<script>
 const result =
CATEGORIES
.filter(ele => ele.checked === true)
.map(ele => ele.title)
/********************************************************
// Expected outputs:
[ '디지털/가전', '가구/인테리어', '도서/티켓/음반' ]
********************************************************/
</script>

• Step 3 > 템플릿 스트링에 result의 각 인덱스 값을 넣어 query 변수에 할당

<script>
const query = `&filterOption=${result[0]}&filterOption=${result[1]}&filterOption=${result[2]}`
</script>

• 풀이 결과

<script>
const arr = CATEGORIES
.filter(ele => ele.checked)
.map(ele => ele.title);
`&filterOption=${arr[0]}&filterOption=${arr[1]}&filterOption=${arr[2]}`
/*'&filterOption=디지털/가전&filterOption=가구/인테리어&filterOption=도서/티켓/음반'*/
</script>

*💡conclusion

• 큰 문제를 여러 작은 문제로 쪼개기(어려운 문제를 쉬운 여러 문제로 나누기)
• 각각의 작은 문제를 해결할 때 console.log를 매우 많이 찍기

#📑Study Source

• WeCode 노션의 문제 과제 중:)