TIL 37 | JavaScript Repl.it Assignment 01

1. Introduction to JavaScript

keyword : console.log

Console에 "I love WeCode!" 를 출력해주세요.

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

console.log("I love WeCode!")  //콘솔로그를 이용해 출력한다.

출력결과

---

2. 주석

keyword : /* */ //

index.js에 있는 ignore() 함수가 실행될 수 있도록 주석을 풀어 주세요.

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

function ignore() {
  return true;
}

ignore();

/* (참고)
여러
줄
주석
*/

//한 줄 주석

---

3. Variables (변수)

keyword : const

• index.js에 variables 라는 함수가 있습니다.
• 그 안에 myAge라는 변수가 이미 선언되어 있습니다.
• yourAge라는 변수를 새롭게 선언하고 나이를 할당해주세요.
• myAge와 yourAge 변수의 합이 50이 될 수 있도록 yourAge의 값을 정해주세요.

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

function variables() {
  // 다음 코드는 수정하거나 지우지 마세요
  const myAge = 21;
  
  // 아래에 코드를 작성해 주세요
  const yourAge = 29;

  // 다음 코드는 수정하거나 지우지 마세요
  return myAge + yourAge;
}

출력결과

---

4. Function - 기본

keyword : return / function()

아래의 설명을 듣고 함수를 작성해주세요.

• 함수 이름은 checkYear로 해주세요.
• 올해 년도를 return합니다.
• 년도를 작성할 때는 ""(쌍따옴표)없이 숫자만 4자리 써주세요.

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

function checkYear() {
  // 코드를 작성해주세요 
  const thisYear = 2021;    //2021년 올해 년도를 thisYear에 할당시키고

  return thisYear;          //2021이 할당된 thisYear를 return!
} 

checkYear();

출력결과

---

5. Function - 데이터 반환하기(1)

keyword : parameter(매개변수) / argument(인자) / return

아래의 설명을 듣고 함수를 작성해주세요.

• 함수 이름은 addTen 입니다.
• 받은 parameter에 10을 더해서 반환(return)해주세요.

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

function addTen(num) {
  return num+10;   //parameter로 들어온 num에다가 10을 더해서 리턴!
}

출력결과

---

6. Math Expressions

keyword : num++ / ++num / num-- / --num 🚨 앞 뒤에 따라 할당과 업데이트 순서 다르다!

index.js에 작성 되어 있는 mathExpression 함수의 결과 값이 22가 나오도록 수정해 주세요.

내가 작성한 코드

//문제
function mathExpression() {
  // 다음 코드의 값이 22가 되도록 수정해주세요.
  let result = 5 + 6 * 10 / 2 * 2.5 ;
  
  // 다음 코드는 수정하지 마세요!
  return result;
}

//정답
function mathExpression() {
  let result = (5 + 6) * (10 / (2 * 2.5)) ;   //수학처럼 괄호안을 먼저 연산한다.

  return result;
}

Model Solution

• 내 코드와의 차이점
• 나랑 묶어준 방법이 다르다!

function mathExpression() {
  result = ((5 + 6) * 10) / (2 * 2.5)

  return result
}

출력결과

---

7. 텍스트 문자열의 연결

keyword : "text" + "text" + 변수 / "string" + number = "string"

• index.js에 textConcatenation 함수를 수정하여서 다음 문장이 리턴 될 수 있도록 해주세요.
  → "2 더하기 2는 4"

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

function textConcatenation() {

  let text = "2 더하기 2는 " + (2 + 2);  
  // (2 + 2)를 괄호로 묶어주지 않으면 컴퓨터는 왼쪽부터 계산하기 때문에
  // "string"에 숫자 2를 더하면 string이 된다. 또 2를 더하면 string이 되기 때문에
  // 결과는 "2 더하기 2는22" 가 되어버린다!💥
  
  return text;
}

출력결과

---

8. if문

keyword : if / else if / else

myFavoriteColor 함수는 "색깔"을 인자로 받고 3가지 결과 값을 리턴합니다.
if문을 사용해 다음 조건에 맞게 함수를 구현 해주세요.

• color 가 "navy" 이면 "Good!" 리턴
• color 가 "yellow" 이면 "Bad!" 리턴
• 그 외의 경우 "Whatever!" 리턴

내가 작성한 코드

function myFavoriteColor(color) {     //color에 인자가 전달되면,
 if (color === "navy") {              //color가 "navy" 라면
   return "Good!";                    //"Good!" 반환!
 } else if (color === "yellow") {
   return "Bad!";
 } else {                             //"navy" 도 아니고 "yellow" 도 아니면
   return "Whatever!";                //"Whatever!" 반환!
 }
}

Model Solution

• 내 코드와의 차이점
• solution은 변수에 할당하고 그 변수를 return했고, 나는 그 값을 한번에 return시켰다.

function myFavoriteColor(color) {
  var result = ""                  //먼저 빈 문자열을 result에 할당
  
  if (color === "navy") {
    result = "Good!";              //각 조건마다 해당하는 결과값을 재할당
  } else if (color === "yellow") {
    result = "Bad!";
  } else {
    result = "Whatever!";
  }
  
  return result;                   //조건문에서 빠져나온 후 최종 result를 반환!
}

출력결과

---

9. 비교연산자

keyword : === (equality operator) / == (equality operator) / !==

우리나라는 20살 부터 술을 마실 수 있습니다. 우리나라 사람들이 가장 즐겨마시는 술은 소주 입니다.
canIDrinkSoju 함수 안에 비교 연산자를 사용하여 다음의 경우들이 구현될 수 있도록 해주세요.

• age 가 20살 보다 어리면: "애야 가서 공부나 해라!" 리턴
• age 가 50살 이상이면: "건강을 위해서 술은 적당히 마시세요!" 리턴
• 그 외의 경우에는: "소주에는 곱창 어떠신가요?" 리턴

내가 작성한 코드

function canIDringkSoju(age) {
  if (age < 20) {                              //나이가 20보다 작으면
    return "얘야 가서 공부나 해라!"
  } else if (age >= 50) {                      //나이가 50보다 같거나 크면
      return "건강을 위해서 술은 적당히 마시세요!"
    } else {                                   //그 외 나머지 (= 20보다 같거나 크고, 50보다 작은)
	return "소주에는 곱창 어떠신가요?"
      }
}

Model Solution

• 내 코드와의 차이점
• solution은 변수에 할당하고 그 변수를 return했고, 나는 그 값을 한번에 return시켰다.

function canIDrinkSoju(age) {
  var result;                          //이번엔 변수만 선언
  
  if (age < 20) {
    result = "애야 가서 공부나 해라!"      //여기서 변수에 할당
  } else if (age >= 50) {
    result = "건강을 위해서 술은 적당히 마시세요!"
  } else {
    result = "소주에는 곱창 어떠신가요?"
  }
  
  return result;                       //조건문에서 할당하고 빠져나와 이제 변수를 출력!
}

출력결과

---

10. 비교연산자 💭

될것같은 코드가 자꾸 fail이 나와서 힘들었던 문제,, 열번은 넘게 수정한 것 같다 😇

keyword : || &&

rockPaperScissors 함수를 구현해서 가위 바위 보 게임을 구현해 보도록 하겠습니다.
player1과 player2 중 이긴 사람이 누군지 리턴해주세요.
예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다.
만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다.

player1 과 player2 의 값은 다음 셋 중 하나 입니다.

• "가위"
• "바위"
• "보"
  → 예를 들어, player1은 "가위" 이고 player2는 "보" 이면 "player1" 이 리턴 되어야 합니다.
  
  
  가능하면 || 와 && 연산자 둘다 사용해주세요.

내가 작성한 코드
ver.1

function rockPaperScissors(player1, player2) {
   if ( player1 === '바위' && player2 === '보') { //1이 바위이고 2가 보 일때!
         const result = "player2";
         return result;
      } else if (player1 === '바위' && player2 === '가위') {
       const result = "player1";
         return result;
      } else if (player1 === '보' && player2 === '바위') {
         const result = "player1";
         return result;
      } else if (player1 === '보' && player2 === '가위') {
       const result = "player2";
         return result;
      } else if (player1 === '가위' && player2 === '보') {
         const result = "player1"; 
          return result;
      } else if (player1 === '가위' && player2 === '바위') {
         const result = "player2";
          return result;
      } else {                       // 그 이외의 경우 (= 비겼을 때)
         const result = "player1"; 
          return result;
      }   
}

ver.2 → 처음에 작성해봤던 코드였는데 자꾸 fail이 나와서 ver.1로 제출했다가! 왜 안되는지 궁금해서 다시 돌려봤는데 이번엔 pass나 나왔다.🤔❓

• ver.2 코드와 solution 비교)
• 총 세번의 if와 else if 중에서 ||를 기준으로 앞 뒤에 반복해서 "가위" , "바위", "보" 가 들어가는데 그걸 또 "가위" && ("바위" || "보") 로 할 수 있는걸 생각 못했다!!

function rockPaperScissors(player1, player2) {
let result;

if ( (player1 === "가위" && player2 === "보") || (player1 === "가위" && player2 === "가위")) {
    result = "player1"
} else if ((player1 === "바위" && player2 === "가위")||(player1 === "바위" && player2 === "바위")) {
    result = "player1"
}  else if ( (player1 === "보" && player2 === "바위")||(player1 === "보" && player2 ==="보")) {
    result = "player1"
} else {
  result = "player2"
}

  return result;
};

Model Solution

• 내 코드와의 차이점 및 느낀점
• 내가 짠 코드들 중에서 뭔가 겹치는 것 같은 거는 다시 또 더 안 겹치는 방법으로 작성할 수 있는것 같다.
• 그리고 나는 {코드 블럭 안에서} result 를 선언하고 반환하고 해줬는데 ... 그러면 모든 코드 블럭 마다 동일한 변수 선언 코드가 계속 들어가서 안 좋은 것 같다. 제일 바깥에다가 변수를 선언 해주고 안에서는 새로 할당하는 것만 하는게 좋겠다. 솔루션들은 대부분 그렇게 코드가 쓰여져 있는 것 같다.

function rockPaperScissors(player1, player2) {
  var result;      //변수를 선언하고
  
  if ( player1 === "가위" && (player2 === "보" || player2 == "가위") ) {
    result = "player1"   //각 경우에 해당하는 곳에서 변수에 반환할 값 할당!
  } else if (player1 === "바위" && (player2 === "가위" || player2 == "바위")) {
    result = "player1"   //각 경우에 해당하는 곳에서 변수에 반환할 값 할당!
  } else if (player1 === "보" && (player2 === "바위" || player2 == "보")) {
    result = "player1"   //각 경우에 해당하는 곳에서 변수에 반환할 값 할당!
  } else {
    result = "player2"   //각 경우에 해당하는 곳에서 변수에 반환할 값 할당!
  }
  
  return result   //조건문에서 나와서 할당된 result를 이제 반환!
}

출력결과

---

11. Function- 데이터 받기 ❓

keyword : argument 전달

1. 데이터를 전달 받는 isbiggerThanHundred 이라는 이름의 함수를 만들어주세요.
2. isbiggerThanHundred 함수에서 받은 argument를 myNumber라는 parameter에 저장해주세요.
3. isbiggerThanHundred 함수에서
   • myNumber가 100보다 크면 "크다!"라는 문자열을 return 해주세요.
   • myNumber가 100보다 작거나 같으면 "작다!"라는 문자열을 return 해주세요.

내가 작성한 코드

function isbiggerThanHundred(myNumber) {
  if (myNumber > 100){
    return "크다!";
  } else {
    return "작다!";
  }
};

Model Solution

• 내 코드와의 차이점
• solution은 변수에 할당해서 할당된 변수를 조건식에 넣었고, 나는 받은 인자를 바로 조건에 넣어서 비교했다.

function isbiggerThanHundred(num) {
  let myNumber = num;
  if(myNumber > 100) {
    return "크다!";
  } else if(myNumber <= 100){
    return "작다!";
  }
}

질문있다! 왜 변수에 다시 할당한건지! 여기에서는 간단한 코드를 작성한거지만 다른 더 복잡한 코드일 때 이런 방식으로 해야해서 여기도 그렇게 해준건지, 아니면 매개변수를 바로 조건문에 넣으면 안좋은게(오류가 생기는게) 있는지! ❓
→ ✨ 멘토님 답변 : 이 문제 자체의 경우에는 매개변수를 변형하거나 그런게 아니고 단순히 비교해서 값을 리턴하는거기때문에 굳이 변수에 할당해서 하는건 오히려 번거롭고 이 경우는 내가 한 것처럼 매개변수를 바로 조건문에 넣어주는게 더 나을수도 있는거다. 하지만 예를들어 만약 배열이 들어오는데 홀수인덱스만 어떻게 처리하고 등등. 이런 경우는 원본(?) 을 그냥 바로 손대면 안대고 할당해서 처리를 해야 하는 경우들이 있다고 한다. 그러니까,, 상황에 따라서 다르다.

출력결과

---

12. Function - parameter,argument ❓

keyword : parameter(매개변수) / argument(인자)

Assignment 1
함수 halfNumber 를 선언하고 구현하세요.
1. 숫자로 된 인자 하나를 받습니다.
2. 받은 값을 2로 나눈 결과를 리턴합니다.
3. 매개변수 이름은 마음대로 정해서 사용합니다.

Assignment 2
함수 halfAndAddNumber를 선언하고 구현하세요.
1. 숫자로 된 인자 하나를 받습니다.
2. 1번 문제에서 만들었던 halfNumber를 호출하면서, 인자로 받았던 값을 다시 halfNumber 함수에 전달해줍니다.
3. halfNumber의 리턴결과를 함수 안쪽에서 변수명 result에 정의합니다.
4. result에 1을 더한 값을 리턴합니다.

내가 작성한 코드

function halfNumber(num) {
  const halfNum = num/2;
  return halfNum
}

function halfAndAddNumber(num) {
  const result = halfNumber(num);
  return result + 1;
}

Model Solution

• 내 코드와의 차이점
• 앞에서 계속 변수에 할당해주고 return 해줘서, 이번에 풀때는 나도 그렇게 해줬었는데.. solution에서 halfNumber함수는 인자를 받아서 바로 연산처리를 하고 return시켰다.

function halfNumber(value) {
  return value / 2;
}

function halfAndAddNumber(value) {
  let result = halfNumber(value);     
  return result + 1;
}

질문있다!
1. halfAndAddNumber 함수를 보면 안에 let으로 result 변수를 선언했는데,, let 으로 해줘야만 하는건지!
(혼자 해볼때는 const 로 해도 되기는 했었는데 혹시 let 으로 써 준 이유가 있는지!)
2. 혹시 이렇게 함수 내에서 result 변수 처럼 인자가 할당되어 처리되고 값이 const 모모 에 할당되고, 다시 다음번에 또 인자가 들어와서 그게 또 처리될 때 const 모모 라고 할당이 될 텐데,, 그럼 const 선언이기때문에 똑같은 변수에 또 할당했다고 에러가 뜨는건지! 궁금합니다~ 🙋🏻‍♀️❓
→ ✨ 멘토님 답변 : 지금내가 scope에 대한 개념이 없어서 그런건데, 함수를 호출할때마다 각각 호출된 함수들이 새로운 스코프안에서 처리되는거라서 그런 const 재할당같은 문제는 안생긴다!

출력결과

---

13. Function - 여러 인자 🌪

return 개념에 대해서 혼란이 생겼다가 해결 🥳

keyword : 여러 인자 넘기기 / if ( aaa ) return bbb;

• meetAt 함수를 만들어주세요.
• 인자를 세개 받습니다.
• 첫번째 인자는 년도에 해당하는 숫자입니다.
• 두번째 인자는 월에 해당하는 숫자입니다.
• 세번째 인자는 일에 해당하는 숫자입니다.
• 년도 인자만 받았을 경우 --> "1234년" 과 같은 형식의 문자열을 리턴 해주세요.
  년도,월 인자를 받았을 경우 ---> 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.
  년도,월,일 인자를 전부 받았을 경우 --> 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.

내가 작성한 코드
→ 👀 내 접근 : 연도만 있을때 | 연도랑 월 있을때 | 다 있을 때에 따라서 다르니까! 없는거 차이를 이용해서, 일 인자가 있을 때 ⇒ 월 인자가 있을 때 ⇒ 연도 있을 때! ... 이런 순서대로 코드를 작성했다! 👌🏻

function meetAt(year, month, date) {
  if(date) {
    return year + "/" + month + "/" + date;
  }
  if(month) {
    return year + "년 " + month + "월";
  }
  if(year) {
    return year + "년";
  }
}

헐! 근데 갑자기 혼란,,,💥🌪
→ 만약 date 까지 다 있는 상태라고 하면, date에서 return 하면 전체 함수의 코드블럭이 끝나버리는거가 맞나? 어제 풀때는 그 생각은 하나도 안들고 그냥 풀었는데,, 갑자기 헷갈린다..

그래서

function meetAt(year, month, date) {
  console.log("1");
  if(date) {
    return year + "/" + month + "/" + date;
  }
  console.log("2");
  if(month) {
    return year + "년 " + month + "월";
  }
  console.log("3");
  if(year) {
    return year + "년";
  }
}
// 그래서 이렇게 출력을 중간중간마다 넣어줬는데 정말 앞에서 return되면 뒤에있는것들은
// 하나도 실행이 안된다.

→ 🤦🏻‍♀️🤦🏻‍♀️🤦🏻‍♀️ 음

아! 맞는건가 그럼?? 왜냐면 긴 연산을 하는 코드블럭에서 return은 안쓰고 그냥 할당한 하고 블럭 나가니까..? 그럼 결론은 코드블럭 어디에서든 return 을 만나면 무조건 종료?!
아하 ㅎ ⬇️ㅋ

Model Solution

• 내 코드와의 차이점
• 나는 if (date) { return ~~ } 이렇게 해줬는데
  솔루션에서는 더 간결하게 if (date) return ~~~ 해줬다. (처음보는방법)

function meetAt(year, month, date) {
  if (date) return year + '/' + month + '/' + date;
  if (month) return year + '년 ' + month + '월';
  if (year) return year + '년';
}

→ ???? if ( parameter ) return 해주면 블럭같은거 없이 된다구?????? 🤷🏻‍♀️🤷🏻‍♀️🤷🏻‍♀️
출처

출력결과

---

14. Function - 데이터 반환하기(2)

keyword : return / return을 생략하는 함수는 undefined 반환

getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.
getTotal 함수를 만들어주세요!
1. getTotal 이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다.
2. 인자이름은 원하는대로 지어주셔도 됩니다.
3. getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요.


참고!

• getTax 함수는 가격의 tax를 구하는 함수입니다.
• calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다.
• getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다.

내가 작성한 코드

function getTotal(price1, price2) {
  const firstPrice = calculateTotal(price1);
  const secondPrice = calculateTotal(price2);
  
  return firstPrice + secondPrice;
}

function calculateTotal(price) {
//아마도 이 함수는 원래 이미 있던 함수같다! 내가 작성안했던거 같다
  return price + price * 0.1;
}

Model Solution

• 내 코드와의 차이점
• 솔루션에서는 그냥 호출하면서 바로 더해 리턴했다.

function getTotal(price1, price2) {
  return calculateTotal(price1) + calculateTotal(price2);
}

출력결과

---

🔥 <--- 어려웠다!

💭 <--- 느낀점!

❓ <--- 질문!

🌪 <--- 혼란!