TIL 40 | JavaScript Repl.it Assignment 02

15. Array

keyword : array / index / index는 0부터

Assignment1
getElement 함수안에 arr 변수를 선언했습니다.
arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!
배열이 담긴 arr 변수에 접근하여 getElement 함수가 "array" 라는 문자열을 return 할 수 있도록 해주세요.


Assignment2
addFirstAndLast 함수 안에 작성해주세요.
addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다.
addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.
만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.

내가 작성한 코드
assignment 1 (Model Solution과 동일) ✅

function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]]; 
	
	//arr 배열안에 들어있는 "array"문자열을 return하는것을 아래에서 구현하세요.
	return arr[1][1][0];  //arr의 1번째 인덱스에서, 다시 또 1번째 인덱스에서, 0번째 인덱스!
}

assignment 2

function addFirstAndLast(myArray) {
  const length = myArray.length;
  
  if(length === 0) { //length가 0이면 비어있는 배열이니까 0을 리턴
    return 0;
  } else if (length === 1) { //요소가 한개라면 해당 값 리턴!
    return myArray[0];
  } else {   //그밖에 나머지 모든 경우는 0번인덱스와 제일 마지막 인덱스를 더해준다!
    return myArray[0] + myArray[length-1];
  }
}

Model Solution
Assignment 2

• 내 코드와의 차이점
• 비교하는 조건들의 순서가 다르고, 결과를 변수에 담아 return 했다.

function addFirstAndLast(myArray) {
  var result;
  
  if (myArray.length > 1) {
    result = myArray[0] + myArray[myArray.length - 1];
  } else if (myArray.length === 1) {
    result = myArray[0];
  } else {
    result = 0;
  }
  
  return result;
}

출력결과

---

16. for 문 🔥

첫번째 배열요소를 담아놓고 비교하면서 더 작은 값을 재할당 시키는 방법을 생각하는데까지 조금 시간이 필요했다.

keyword : for (let i = 0; i < array.length; i++)

findSmallestElement 함수를 구현해 주세요.
findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 array 입니다.
array 의 값들 중 가장 작은 값을 리턴해주세요.
만일 array가 비어있으면 0을 리턴해주세요.


예를 들어, 다음과 같은 array이 인자(input)으로 들어왔다면:

`[20, 200, 23, 1, 3, 9]`

1이 리턴되어야 합니다.

내가 작성한 코드
ver.1

function findSmallestElement(arr) {
    let min = arr[0];
    
    if (arr.length === 0) {
      return 0
    } else { //어차피 비어있는 배열이면 0을 리턴하고 함수가 종료되니까 else를 다시 빼주는게 좋겟다!
      for (let i = 0 ; i < arr.length; i++) {
        if (arr[i] < min) {
          min= arr[i]
        }
      }
    }
    
    return min
}

ver. 2 → 우선 배열이 비어있으면 바로 0을 return하고 함수를 종료시키면 되니까 먼저 if 문을 적고, 뒤에 를 처음엔 else 로 처리해서 그안에 for 그안에 다시 if 문이 들어가 좀 복잡해보여서 .. for문을 따로 다시 해줬다. 왜냐구??? return을 한다는게 함수를 종료시켜서 뒤 코드들이 실행안된다는걸 생각하며 작성하는 걸 이제 완전 알았거든요,, 😝

function findSmallestElement(arr) {
  let min = arr[0];  //solution에서는 이게 아래쪽에 있는데, 첫번째 if문에서는 이 변수가 필요 없으니까 for문 전에 선언하는게 코드를 흐름대로 보기 좋겠다.
 
  if (arr.length === 0) {
    return 0
  }
  for (let i = 0; i < arr.length ; i++) {
    if (arr[i] < min ){
      min = arr[i]
    }
  }
  
return min;
}

Model Solution

• 내 코드와의 차이점
• 최소값 담을 변수를 선언한 위치 빼고 내 코드랑 똑같다!! 👏🏻✨

function findSmallestElement(arr) {
  // your code here
  if (arr.length === 0) {
    return 0;
  }
  
  let result = arr[0];
  
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] < result) {
      result = arr[i];
    }
  }
  
  return result ;
}

출력결과

---

17. 배열 조작하기 🌪

주의!! for loop에서 i가 줄어들고 있는건지, 증가하고 있는건지를 잘 생각하기!

keyword : push / unshift / pop / 배열에 요소 추가 / 만약에 건너뛰고 추가한다면 그 사이에 할당되지 않은 인덱스들은 undefined 출력된다

divideArrayInHalf 함수를 다음과 같이 구현해주세요.
divideArrayInHalf 함수의 인자인 array는 숫자 값으로만 구성되어 있으며 정확히 총 5개의 요소(element)로 구성되어 있습니다.
array의 요소들 중 10과 같거나 작은 값의 element들은 result의 맨 앞으로,
10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요.

• 중요사항
  이때, 순서는 array의 맨 뒤의 요소 부터 맨 앞의 요소까지 순차적으로 이루어저야 합니다.
  예를 들어, 인자 array 값이 다음과 같을때

[1, 20, 10, 5, 100]

result 배열이 만들어 지는 순서는 다음과 같으며,

[100]
[5, 100]
[10, 5, 100]
[10, 5, 100, 20]
[1, 10, 5, 100, 20]

아래와 같은 result가 리턴 되어야 합니다.

[1, 10, 5, 100, 20]

내가 작성한 코드
ver.1
→ index가 뒤에서부터 점점 작아지게 하는건 처음해봐서, i >= 0 이 조건식 부분을 i = 0 혹은 i < 0 등등 어떻게 해줘야하는지 헷갈렸다. 그래서 fail이 나오다가 결국 해결했다!

function divideArrayInHalf(array) {
    let result = [];
    for (let i = 4 ; i >= 0 ; i--) {
      console.log(i);
        if (array[i] <= 10 ) {
            result.unshift(array[i])
        } else {
            result.push(array[i]);
        }
    }
    return result;
}

ver. 2 → 처음에 작성할 때는 배열의 요소가 언제나 5개만이라고 해서 바로 i=4 로 시작해줬는데, 어떤 배열이 들어와도 정상적인 실행이 될 수 있도록 수정했다.

function divideArrayInHalf(arr) {
  let result = [];
  
  for (i = arr.length-1 ; i >= 0 ; i--){
    if(arr[i] <= 10){
      result.unshift(arr[i]);
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

Model Solution

• solution에서는 for loop를 사용하지 않고 if else 조건문으로 풀었다.
• 아직 문제 푸는 단계가 if else 단계여서, for loop 를 이용하지 않고 푸는 방법을 알려주시는 것 같다.

→ 과정 : array.pop() 하면 배열 뒤에서부터 하나씩 삭제되는데, 이때 삭제된 값을 리턴해주기 때문에 그 리턴된 값을 새로운 변수에 할당해주고 그 값을 조건에따라 unshift 해주거나 push 해준다. 다만 지금 여기서는 for loop는 사용하지 않고 하려고 그냥 5개의 요소 한정이니까! 그냥 5번 반복해주는 방법으로 해줬다!

function divideArrayInHalf(array) {
  // for loop 이나 while loop 을 사용하면 더 편리하지만 
  // 아직 안배웠음으로 for loop 을 사용하지 않고
  // 구현하면 다음과 같음.
  let result = [];

  let element = array.pop(); //array배열에서 뒤부터 하나씩 뽑아서 리턴된 걸 할당!
  if (element <= 10) {
    result.unshift(element);
  } else {
    result.push(element);
  }
  
  element = array.pop();
  if (element <= 10) {
    result.unshift(element);
  } else {
    result.push(element);
  }
  
  element = array.pop();
  if (element <= 10) {
    result.unshift(element);
  } else {
    result.push(element);
  }
  
  element = array.pop();
  if (element <= 10) {
    result.unshift(element);
  } else {
    result.push(element);
  }
  
  element = array.pop();
  if (element <= 10) {
    result.unshift(element);
  } else {
    result.push(element);
  }
  //무조건 배열은 5개의 요소로만 구성되어있다고 했으니까, for loop 대신 그냥 5번 반복한다!

  return result;
}

출력결과

---

18. 데이터 타입

keyword : undefined null boolean (true/false) number string object typeof

Assignment 없다 🎁

---

19-1. String 🔥💭

꼭 다시 풀어보기!!

keyword : string / .toUpperCase() / .toLowerCase() / string.length / 숫자 앞자리가 0부터 시작하는 숫자를 할당하면, 컴퓨터는 0을 빼고 할당한다. 그래서 0으로 시작하는 숫자는 string으로 바꿔서 할당해야 0이 유지된다
indexOf() ← 특정 문자열이 들어있는지 확인 .. 활용) 채팅창 욕설 차단
slice(잘릴 시작위치, 잘릴 끝위치) ← string을 잘라주는 함수 *끝은 포함되지 않는다

sliceCityFromAddress 함수를 구현해 주세요.

• sliceCityFromAddress 함수는 address 인자를 받습니다.
• address 인자에는 주소를 나타내는 string이 주어집니다.
• 주어진 주소가 어느 도시인지를 찾아내서, 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
• 주소는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
• "도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
  
  
  예를 들어, 다음과 같은 주소가 주어졌다면;

"경기도 성남시 분당구 중앙공원로 53"

다음과 같은 값이 리턴되어야 합니다:

"경기도 분당구 중앙공원로 53"

내가 작성한 코드
ver.1
→ index는 0부터 시작하니까 length 값에 +1 안해줘도 된다!! (lastChar 부분) 🚨

function sliceCityFromAddress(address) {

  let givenAddress = address;
  let nameDo = address.indexOf("도");
  let nameCity = address.indexOf("시");
  let lastChar = address.length+1;
  
  if  (nameDo === -1) {
     givenAddress = address.slice(0, nameDo+1) + address.slice(nameCity+2, lastChar);
  } else if(nameCity !== -1) {
     givenAddress = address.slice(0, nameDo+1) + address.slice(nameCity+1, lastChar);
  }
 
  return givenAddress;
}

ver. 2 → 이번에는 할당될 값을 고려해서 변수명을 지었다. 그리고 slice 를 이용해 처리하는부분도 문제조건의 흐름대로 생각해서 수정했다.

function sliceCityFromAddress(address) {
  
  let givenAddress = address;
  let indexOfSi = address.indexOf("시");
  let indexOfDo = address.indexOf("도");
  let afterLastChar = address.length + 1; //어차피 length는 인덱스보다 하나 더 기니까 length로 해줘도 index 마지막값 포함된다! 🙂
  
  // console.log(address.slice(0,3)); return값 알아보려고!
  
  if (indexOfDo === -1) {  //만약 도가 없으면 (=서울시) .. 시 다음부터 끝까지!)
    givenAddress = address.slice(indexOfSi + 2, afterLastChar);
  } else { //만약 도가 있으면, 맨앞부터 도까지 & 시 뒤부터 끝까지 (띄어쓰기 생각하기!)
    givenAddress = address.slice(0,indexOfDo+1) +  address.slice(indexOfSi+1 , afterLastChar);
  }
  
  return givenAddress;
}

Model Solution

• 내 코드와의 차이점과 느낀점 💭
• 두번째로 풀면서 변수명을 생각하면서 정했다고 생각했는데, 그냥 index가 들어오는게 아니라 시, 도 가 끝나는 부분이니까 조금 직관적인 이름으로 해줄 수 있었는데 생각못했다. 변수명이 더 확실해져서 코드를 읽으면서도 city_end 에서 2개 인덱스 뒤,, 이렇게 잘 해석이 되어서 가독성이 더 좋아보인다.
• 그리고 나의 기계적인 length+1 ..ㅎㅎ slice 는 마지막은 포함을 시켜주지 않는다고해서 그럼 하나를 더 늘려야겠다고 해서 1을 더해줬는데,, 사실 length가 원래 index보다 1이 크기 때문에 안해줘도 되는거였다. 생각하고 풀자..😇

function sliceCityFromAddress(address) {
  // your code here
  var province_end = address.indexOf("도");
  var city_end     = address.indexOf("시");
  
  console.log("province end " + province_end)
  console.log("city end " + city_end)
  
  // 서울의 경우 도가 없이 서울특별시 부터 시작
  if (province_end == -1) {
    return address.slice(city_end + 2, address.length);
  } else {
    return address.slice(0, province_end + 1) + address.slice(city_end + 1, address.length);
  }
}

출력결과

---

19-2. String ←→ Number 변환

keyword : string ↔ number 변환 / NaN (Not A Number)
1234 + "" ← number to String / string - 0 ← string to Number

우리나라는 국민연금을 만 65세 부터 받을 수 있습니다.
nationalPensionRemainingYearCount 함수를 구현해주세요.
nationalPensionRemainingYearCount 는 age_string 이라는 input을 받습니다.
age_string 은 나이 값인데 string형 값으로 되어 있습니다.
주어진 나이부터 몇년이 지나야 국민연금을 받을 수 있는지 리턴해주세요.
리턴 값으로는 다음 문장 처럼 리턴해야 합니다.

`"앞으로 20년 남으셨습니다"`

예를 들어, age_string 값이 다음과 같다면:

"35"

리턴 값은 다음과 같아야 합니다.

"앞으로 30년 남으셨습니다"

내가 작성한 코드
ver.1

function nationalPensionRemainingYearCount(age_string) {
  // Your code here
  const age_number = Number(age_string);
  const leftYears = 65 - age_number;

  return "앞으로 " + leftYears + "년 남으셨습니다";
}

ver. 2 → number를 string로 변환해줄 때 이번에는 숫자 0을 빼는 방법으로 변환시켰다. 그리고 변수선언을 let 으로 해줬다.

function nationalPensionRemainingYearCount(age_string) {
  let age_number = age_string-0;  //혹은 Number(age_string) 도 가능!
  let leftYears = 65 - age_number

  return "앞으로 " + leftYears + "년 남으셨습니다";
}

Model Solution

• 내 코드와의 차이점
• solution에서는 전달인자 를 바로 숫자형으로 바꿔주면서 계산해가지고 한번에 할당했다!

function nationalPensionRemainingYearCount(age_string) {
  // Your code here
  var remaining_years = 65 - Number(age_string);
  
  return "앞으로 " + remaining_years + "년 남으셨습니다"
}

출력결과

---

20. 날짜와 시간 🔥🌪

keyword : new Date() .getFullYear() .getMonth() .getDate() .getDay() .getHours() .getMinutes()
.getTime() ← 날짜의 밀리초 표현을 반환 ( 1970년 1월 1일로부터 1564563605026 밀리초가 지났다는 의미입니다. 만약 10분 뒤에 다시 새로 new Date()를 호출하면, 시간이 조금 흘렀으니 위의 1564563605026 보다는 큰 숫자가 나올 것입니다. 이렇게 getTime함수로 반환된 숫자로 비교연산을 통해 언제가 더 과거인지 판단할 수 있습니다. 값이 더 작으면 과거입니다.

특정 날짜를 매개변수로 넘겨주면, 해당 날짜의 Date를 반환 받을 수 있다
→ let date1 = new Date('December 17, 2019 03:24:00');
→ let date2 = new Date('2019-12-17T03:24:00');
→ let date3 = new Date(2019, 5, 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 값이 다음과 같다면:

1990-03-21T00:45:06.562Z

• 리턴 값은 30 이 되어야 합니다.
  
  

🤚🏻 나 혼자 자꾸 헷갈린 부분!
→ 우리나라 나이계산이 하는게 아니라!!! 온전히 외국인의 나이 입장에서

• 생일이 안지났으면 현재연도 - 태어난연도 - 1살
• 생일날이랑, 생일이 지나면 이제 한살 먹어서현재연도 - 태어난연도

(ex- 2020년에 태어나고 지금 2021년 생일 안지났으면 0살이고,생일 지나면 1살이 되니까! 2021년 - 2020년 = 1 .. 빼기 1 해줘야 0살(생일전) ////// 그대로 1살이면 생일후! 제발 한국나이생각 노노 😐

내가 작성한 코드
ver.1
→ 설명 : 월+일 ( 0321 처럼) 변환했다. 왜냐면 1월1일 11 부터 12월 31일 1231 계속 커지니까!

조건식 순서는

1. currentMonth < birthMonth = 생일이 안지났으면 → 한살 빼주기

2. else = 생일인 달인데 생일 전이거나, 후이거나! (&생일달보다도 이후)

   1. 오늘 월일(month&date)에서 생일월일 뺐을때 0보다 작으면 → 생일이 더 큰거니까 나중이다!
      → 한살 빼주기

   2. 그 반대는 (오늘 월일에서 생일뺀게 같거나! 크면) → 오늘월일이 더 크니까 같으면 생일 지났거나 생일날이다!
      → 한살 안빼줘도 된다!

function getWesternAge(birthday) {

const birthYear = birthday.getFullYear();
const birthMonth = birthday.getMonth()+1;
const birthDate = birthday.getDate();
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth()+1;
const currentDate = new Date().getDate();

const birthDay = birthMonth+""+birthDate+"";
const today = currentMonth+""+currentDate+"";
  
console.log(birthDay);
console.log(today);

if (currentMonth < birthMonth ){    //생일 안지남
  return currentYear - birthYear - 1;
} else {                            //생일달인데 생일 전이거나, 생일날 혹은 생일 이후달
    if(today - birthDay < 0) {      //생일 안지남
      return currentYear - birthYear - 1;
    } else {                        //생일날이거나, 생일 이후
       return currentYear - birthYear;
      }
   }
}

ver. 2
→ 설명 : 먼저 변수 age 를 만들어 두고, 각각 조건에서 age 에다가 해당 나이를 할당!

조건식 순서는

1. 생일인 month가 지났으면 무조건 생일이 지난거니! → afterBirthday 나이 할당
2. 생일인 month가 아직 안지났으면 무조건 생일이 안지났으니까 → beforeBirthday 나이 할당
3. 현재가 생일인 month 라면
   1. 생일 day 가 안지났으면, 생일 안지났으니 → beforeBirthday 나이 할당
   2. 생일 day 당일이거나 지났으면, 생일 지난거니까 → afterBirthday 나이 할당

function getWesternAge(birthday) {
   let age;
   const birthYear = birthday.getFullYear();
   const birthMonth = birthday.getMonth()+1;
   const birthDate = birthday.getDate();
   const currentYear = new Date().getFullYear();
   const currentMonth = new Date().getMonth()+1;
   const currentDate = new Date().getDate();
  
    const beforeBirthday = currentYear - birthYear -1;
    const afterBirthday = currentYear - birthYear;
  

   if(birthMonth < currentMonth){  //생일이 지났다
     age = afterBirthday;
   } else if (birthMonth > currentMonth) {  //생일이 안지났다
     age = beforeBirthday;
   } else {                            //생일인 달에는
     if (birthDate < currentDate) {    //날짜가 지났다
       age = afterBirthday;
     } else {                          //날짜가 안지났다
        age = beforeBirthday;
     }
   }

  return age;
}

Model Solution

• 내 코드와의 차이점 - 완전 간단하다,, 😱
• solution에서는
  → 생일 안지났을때 한살 빼주는 경우만 조건식안에서 빼줄 1살을 업데이트 시키고,
  → 만약 생일날이거나 생일 지난경우에는 1살을 빼주도록 업데이트하는 조건식에 걸리지 않고 넘어가니까 그대로 나이가 나오게 된다. (= 0을 빼주니까 그대로인거다!)

function getWesternAge(birthday) {
    var today    = new Date();
    var thisYear = 0;
    
    if (today.getMonth() < birthday.getMonth()) {
        thisYear = 1;
    } else if ((today.getMonth() == birthday.getMonth()) && today.getDate() < birthday.getDate()) {
        thisYear = 1;
    }
    
    var age = today.getFullYear() - birthday.getFullYear() - thisYear;
    
    return age;
}

console.log(getWesternAge(new Date('1981-07-29T03:24:00')));
console.log(getWesternAge(new Date('1990-07-30T19:45:06.562Z')));
console.log(getWesternAge(new Date('1990-07-31T00:45:06.562Z')));

출력결과

---

21. Number 🔥

스스로는 떠올릴 수 없었습니다...

keyword : Math.round / Math.ceil / Math.floor / Math.random()

앞으로 랜덤함수를 쓸 일이 정말 많습니다.
그런데 Math.random()으로는 내가 원하는 범위의 랜덤수를 얻을 수가 없습니다.
항상 0.0000000000000000에서 0.9999999999999999 사이 값에서만 return해주기 때문이죠.
최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수를 구현해주세요.

• 함수는 짧지만, 이번에는 수학의 뇌를 조금 써야 하는 assignment입니다.

내가 작성한 코드

function getRandomNumber (min, max) {

  const random = Math.random() * (max - min) + min;
  return random;
}

Model Solution

• 내 코드와의 차이점
• 솔루션에서 만들어주는 랜덤숫자는 Math.floor 를 이용해서 소수점을 버려준다.
• 그리고 Math.floor(Math.random() * (max + 1 - min)) + min 이렇게 1 을 더해주면, 조금 더 고른 분포의 값을 얻을 수 있다고 한다.

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max + 1 - min)) + min;
}

출력결과

참고

Math.random() * (max - min) + min

왜 max-min을 하고, 나중엔 또 왜 min을 더해야 하는건지 그냥 봐서는 이해가 가지 않아서 조금 풀어서 정리해보니 이해가 갔다.

→ 이 과정대로 다시 한번 1을 더하는 걸 생각해보니, 아마 1을 더해주면 내가 전달해준 최대값까지도 결과에 나올 수 있는 확률에 포함되기 때문에 해주는 것 같다. 왜냐면 이 상황에서는 floor로 버림을 해주기 때문에 예를들어 최대값을 350을 넣었어도, 351을 넘지 않는 소수자리를 가지고 있는 숫자인 350.426369380 등등 이 나오게 되므로 버림을 해주면 350이 나올 수 있는 확률이 생기기 때문이다.

그리고 이건 검색을 해보다가 여기 에서 발견한 글인데 공감이 가서 저장하고 싶었다. 그런데 저분은 심지어 guilty 까지❗️

그리고 추가로 이것도 메모해두고 싶다.

---

22. Object

keyword : array / index / index는 0부터

getData는 세 개의 배열을 인자로 받는 함수입니다.

• salesArr: 날짜별 판매량
• ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]]
• reviewArr: 날짜별 리뷰수
• ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]]
• likeArr: 날짜별 좋아요수
• ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]]
  
  위의 예시로 보여드린 배열은 단지 예일뿐,
  날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다.
  
  다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.
  objData가 갖고 있는 property는 3개 입니다.
• sumAmount: 총 판매량
• sumReview: 총 리뷰개수
• sumLike: 총 좋아요수

내가 작성한 코드
ver.1

function getData(salesArr,reviewArr,likeArr){
  
let amount = 0;
let review = 0;
let like = 0;

for (let i = 0 ; i < salesArr.length; i++){
  const value = salesArr[i][1];
  amount = amount + value;

}
for (let i = 0 ; i < reviewArr.length; i++){
  const value = reviewArr[i][1];
  review = review + value;
  
}
for (let i = 0 ; i < likeArr.length; i++){
  const value = likeArr[i][1];
  like = like + value;

}

let objData = {};
objData.sumAmount = amount;
objData.sumReview = review;
objData.sumLike = like;

return objData;
}

ver.2
(복습하면서 다시 작성해 본 코드) → += 를 사용한 것 빼고는 또 똑같이 풀었다.

function getData(salesArr,reviewArr, likeArr){
let sumAmount = 0;
let sumReview = 0;
let sumLike = 0;
  
for (let i = 0; i < salesArr.length; i++) {
  let amount = salesArr[i][1];
  sumAmount += amount;
}

for (let i = 0; i < reviewArr.length; i++) {
  let review = reviewArr[i][1];
  sumReview += review;
}

for (let i = 0; i < likeArr.length; i++) {
  let like = likeArr[i][1];
  sumLike += like;
}
  
let objData = {};
objData.sumAmount = sumAmount;
objData.sumReview = sumReview;
objData.sumLike = sumLike;

return objData;
}

Model Solution
Assignment 2

• 내 코드와의 차이점
• 나는 object를 만들어서 할당하고 리턴했는데, 솔루션에서는 아예 오브젝트형태로 리턴해버렸다. (몰랐던 방법이다!)

function getData(salesArr, reviewArr, likeArr) {
  let sumAmount = 0;
  let sumReview = 0;
  let sumLike = 0;
  
  for (let i = 0; i < salesArr.length; i++) {
    let amount = salesArr[i][1];
    
    sumAmount = sumAmount + amount;
  }
  
   for (let i = 0; i < reviewArr.length; i++) {
    let review = reviewArr[i][1];
    
    sumReview += review;
  }
  
  for (let i = 0; i < likeArr.length; i++) {
    let like = likeArr[i][1];
    
    sumLike += like;
  }
  
  return {   //오브젝트 형태로 리턴!
    sumAmount: sumAmount,
    sumReview: sumReview,
    sumLike: sumLike
  };
}

출력결과

---

24. Class

keyword : method / state / Constructor / instance

class 생성을 연습해보겠습니다.
MyMath라는 class를 생성해주세요.
constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
총 4개의 메서드를 구현해주세요.

• getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2]
• add: 두 개의 숫자를 더하는 메서드
• substract: 두 개의 숫자를 빼는 메서드
• multiply: 두 개의 숫자를 곱하는 메서드

내가 작성한 코드
ver.1

class MyMath {
  constructor(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
  }
  getNumber() {
    return [this.num1, this.num2];
  }
  add(){
    return this.num1 + this.num2;
  }
  substract(){
    return this.num1 - this.num2;
  }
  multiply(){
    return this.num1 * this.num2;
  }
}

ver.2 (Model Solution과 동일) ✅
(복습하면서 다시 작성해 본 코드) → num1,num2 를 a,b 로 변경한 것 빼고는 똑같다.

class MyMath {

  constructor(a, b) {
    this.num1 = a;
    this num2 = b;
  }
  getNumber() {
    return [this.num1, this.num2];
  }
  add() {
    return this.num1 + this.num2;
  }
  substrct() {
    return this.num1 - this.num2;
  }
  multiply() {
    return this.num1 * this.num2;
  }
}

출력결과

---

25. Object

아래의 객체에서 '샐러드'라는 값이 출력 될 수 있도록 getAnswer함수에서 return 해 주세요.

let myProfile = {
  name: '김개발',
  address: {
    email: 'geabal@gmail.com',
    home: '위워크'
  },
  'my favorite': {
    food: [{
    name: '샐러드',
    price: 3500  
    }, {
    name: '삼겹살',
    price: 15000  
    }],
    hobby: ['축구']
  }
}

내가 작성한 코드 (Model Solution과 동일) ✅

function getAnswer() {
	return myProfile["my favorite"].food[0].name;  //샐러드
}

출력결과

---

28. Array methods

keyword : Array.map() / Array.forEach()

Assignment1
두 문제 모두 map 메서드와 arrow function을 사용해주세요.
1. moreThan100 함수에 숫자로 구성된 배열을 인자로 넘겨드립니다.
100 보다 크거나 같으면, true를
100 보다 작으면 false로 요소를 변경하여
새로운 배열을 return해주세요.

예를 들어

nums(input)은

[100, 9, 30, 7]

return은

[true, false, false, false]

Assignment 1

내가 작성한 코드

const moreThan100 = nums => {
const boolean = nums.map(num => {
  if (num >= 100){
    return true;
  } else {
    return false;
  }
})
return boolean;
}

출력결과

Assignment2
1. formatDate 함수에 날짜가 담긴 배열을 전달드립니다.
날짜의 data type은 string이며,
보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서
새로운 배열을 return 해주세요.

예를 들어

dates(input)은

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

return은

['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']

Assignment 2

내가 작성한 코드

const formatDate = dates => {
 const formatDates = dates.map(date => {
    return `${date[0]}${date[1]}${date[2]}${date[3]}년 ${date[5]}${date[6]}월 ${date[8]}${date[9]}일`
  })
  return formatDates;
}

Model Solution

• 내 코드와의 차이점
• solution에서는 split method 를 이용해서 배열을 만들어주고 각각 배열의 인덱스를 이용해 리턴값을 만들었다.
  → 솔루션 코드와 비교해보았을 때 내 코드가 좀 더 정확성이 낮을 것 같다.

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

출력결과

---

29. Object 🔥

keyword : Object.keys() / for key in

getExamResult 함수를 구현해주세요.
인자 scores 는 다음과 같은 객체입니다.
객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다.
객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.
('A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F')

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

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

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

다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요


1. scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다.
단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.

A+ => 4.5
A => 4
B+ => 3.5
B => 3
C+ => 2.5
C => 2
D+ => 1.5
D => 1
F => 0

2. requiredClass 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면, 해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다.
   위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면,
   다음과 같은 객체과 리턴됩니다. (요소간 순서는 다를수 있지만, 채점에 무관합니다.)

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

내가 작성한 코드
ver.1
→ 처음에는 어떻게 접근해야할지 모르겠어서 그냥 문제를 읽는 순서대로 코드를 작성했던 것 같다. 그래서 먼저 객체의 key와 value를 각각의 배열로 분리해 담았고, 알파벳점수배열은 다시한번 숫자점수의 배열로 바꿔줬다. 그 후 각각의 배열들을 같은 인덱스끼리 새 객체의 key와 value로 추가시켰다. 그런데 이 부분에서 배열은 순서가 보장되지만, 객체는 순서가 보장되지 않는다. 라는 것 때문에 이렇게 해줘도 되는지 모르겠지만,, 일단 완성을 시켜보고 실행해보려고 계속 작성했다.
그리고 다시한번 requiredClass 배열에 있는 요소들을 valuesArr(과목이름이 담긴 배열) 가 포함하고 있는지 체크하면서 없다면 객체에 또 추가시켜줬다. 그리고 테스트를 해봤는데 결과가 pass가 나와서 이 코드를 제출했다.

const getExamResult =(scores, requiredClasses) => {
  const result = {}
  const valuesArr = Object.values(scores);
  const translated = valuesArr.map(score => {
    switch(score) {
      case "A+" :
        return 4.5;
        break;
      case "A" :
        return 4;
        break;
      case "B+" :
        return 3.5;
        break;
      case "B" :
        return 3;
        break;
      case "C+" :
        return 2.5;
        break;
      case "C" :
        return 2;
        break;
      case "D+" :
        return 1.5;
        break;
      case "D" :
        return 1;
        break;
      case "F" :
        return 0;
        break;
    }
  });

  let title = [];
  
  for(let key in scores) {
   title.push(key);
  }
  
  for (let i = 0; i < title.length; i++) {
    const subjectName = title[i];
    const score = translated[i];
    
    result[subjectName] = score;
  }
  
  for (let i = 0; i < requiredClasses.length; i++){
    const required = requiredClasses[i];
    
    if(!title.includes(required)){
      result[required] = 0;
    } 
  }
  
  return result
}

ver.2
→ 처음 제출했던 방법이 좋은 방법이 아닌것 같아서 두번째로 풀어볼 때는 다른 방법으로 시도했다. for key in 을 이용해서 배열에 접근하는 방법으로 이번에는 알파벳점수를 숫자점수로 변환시켰다. 이 부분은 solution code랑 똑같다!! 👏🏻
그리고 requiredClass 를 비교하는것은 배열의 filter method를 이용해서
requiredClass의 요소가 result객체의 key로 없으면 undefined가 나오기때문에 이건 false 이므로 !result[item] 해서 포함하지 않는 과목을 배열로 만들고 result 객체에 새로운 key로 추가시켰다.

function getExamResult(scores,requiredClasses) {
 let result = {};
 let scoreObj = {
   "A" : 4.5,
   "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) {
  const changed = scoreObj[scores[[key]]];
  result[key] = changed;
 }
 
  const filter = requiredClasses.filter(item => !result[item]);
  
  for (let i = 0; i < filter.length; i++) {
    let subject = filter[i];
    result[subject] = 0;
  }

  return result;
}

Model Solution

• 내 코드와의 차이점
• requiredClasses의 요소들을 result객체의 키로써 접근해 undefined가 나오는 과목들을 value 0으로 추가한다는 것은 같았지만, 나는 filter를 쓰고 배열을 만들어서 또 다시 추가해주는 방법으로 했지만, solution에서는 forEach를 이용해 한번에 처리해주었다. 나는 한 두 단계를 더 거쳤기때문에 이부분을 다시 익혀봐야겠다!

ver.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
}

ver.2

Assignment - 방법 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;
}

출력결과

---

🔥 <--- 어려웠다!

💭 <--- 느낀점!

❓ <--- 질문!

🌪 <--- 혼란!