JavaScript 문제 - 변수

왜 아래의 변수는 동작하지 않을까?

var name = 'park';
var id = 0;

function showName(){
  var name = 'kim';
  var id = 1;
  console.log(name);
}

showName();
console.log(id);

다음 코드를 실행했을 때 콘솔창에 무엇이 출력될까?

console.log(name) 부분에서는 'kim'이 출력되고
console.log(id) 부분에서는 0이 출력된다.

var name의 경우 함수 안에서 재선언 + 재할당을 하고
출력했기 때문에 'kim'이 출력된다.

var id의 경우 함수 안에 있던 변수는 그 범위가 함수 안에서
벗어날 수 없기 때문에 함수 바깥에서 console.log(id)를 하면
함수 밖에서 할당된 값인 0이 출력된다.

---

이자율 계산하기

철수는 은행에 예금을 하러 갔는데 예금 금액에 따라 이율이 달라지는 것을 보고 크게 당황했다.
첫 예금액이 5만원 미만이면 이율이 연 15퍼센트,
첫 예금액이 5만원 이상이면 이율이 연 20퍼센트라고 한다.
그래서 민준이는
1) 변수에 예금액을 넣으면
2) 2년 후의 총 예금액을 자동으로 콘솔창에 출력해주는 기능을 자바스크립트로 만들려고하는데
어떻게 코드를 짜면 될까?

var 예금액 = 60000;
var 미래예금액 = 0;

if(예금액 =< 50000){
  미래예금액 = 예금액 * 1.15 * 1.15
} else {
  미래예금액 = 예금액 * 1.2 * 1.2	
}

console.log(미래예금액)

예금액이라는 변수에 60000을 집어넣으면 86400 이 콘솔창에 출력됨. (이자 20%가 2번 붙음)

예금액이라는 변수에 10000을 집어넣으면 13225 이 콘솔창에 출력됨. (이자 15%가 2번 붙음)

---

커피 리필을 이상하게 해주는 곳이 있다. 최대한 마실 수 있는 커피양을 계산해보자.

방금 마신 커피의 3분의 2만큼 총 2번 리필해주는 카페가 있다.
예를 들면 처음 커피를 90ml 주문하면 첫 리필은 60ml를 해주고,
그 다음 리필은 40ml를 해준다.
그럼 처음 주문한 커피 양에 따라서 최대한 마실 수 있는 커피양을 계산해주는 코드를 작성해보자.

var first = 360;
var second = first * (2/3)
var third = second * (2/3)
var all = first + second + third

console.log(all)

var first에 360을 집어넣으면 위 코드를 실행했을 때 콘솔창에 760이 출력된다. (360 + 240 + 160)

이렇게 여러개의 변수를 선언하지 않고도 계산할 수 있는 방법이 있습니다.

var first = 360;
var total = 0;

total = first + first * 2/3 + first * 2/3 * 2/3

console.log(total)

---

정답 제출 UI 퀴즈

유저가 <input>에 답을 적고 제출버튼을 누를 수 있는 퀴즈 UI
1. 유저가 답을 맞추면 alert('성공');
2. 유저가 답을 3번 찍어서 못맞추면 alert('땡!') 을 띄워보자.
(위 문제의 답은 1335이다.)

<p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>

<script>
  let count = 0

  document.getElementById("send-answer").addEventListner('click', function() {
    count++;
    let userAnswer = document.getElementById("answer").value 
    if(userAnswer === '1335'){
      alert('성공')
    } else if(userAnswer !=='1335' && count >= 3){
     alert('땡!')
    }
  })
</script>