변수

---

var 변수이름 = 자료;
let 변수이름 = 자료;
const 변수이름 = 자료;

변수는 자료를 저장할 창구

= 는 자료를 변수이름 에 할당해주는 역할을 한다

‘선언’ - var 이름;
‘할당’ - = 자료; 변수에 자료넣기
‘범위’ -

function 함수() {
  var 이름 = ‘kim’;

}

함수안에서 만든 변수는 함수에서만 쓸 수 있다.
함수밖에서 만든 변수는 함수에서도 쓸 수 있다.

var - 재선언, 재할당 가능

범위는 function

let - 재선언이 불가능

let 이름 ~~
let 이름 ~~
불가능 - 변수를 까먹고 또 만들경우를 방지
범위가 {} 안쪽

const - 재선언, 재할당이 불가능

const 이름 = ‘kim’
이름 = ‘park’ 불가능 - 상수선언시 유리
범위가 {} 안쪽

---

변수선언 연습

이자율 계산하기

function 이자율(x){
    let firstInt = 0;
    let LastInt = 0;
    if(x < 50000){
        firstInt = x * 1.15;
        LastInt = firstInt * 1.15;
    } else {
        firstInt = x * 1.2;
        LastInt = firstInt * 1.2;
    }
    console.log('1년차 = ' + firstInt + '/' + '2년차 = ' + LastInt);
}

커피리필

function 리필(x) {
    let firstRefill = 0;
    let SecondRefill = 0;
    let iLovecoffee = 0;
    firstRefill = x * (2/3);
    SecondRefill = firstRefill * (2/3);
    iLovecoffee = x + firstRefill + SecondRefill;
    console.log(iLovecoffee);
}

이성계가 태어난 년도 맞추기

<p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>
<script>
    let count = 0;
    document.querySelector('#send-answer').addEventListener('click',function(){
        let $answer = document.querySelector('#answer').value;    
        if($answer === '1335'){
            alert('성공!');
            count = 0;
        } else {
            count++;
            if(count > 3){
                alert('바보');
                count = 0;
            }
        } 
    })
</script>

변수선언 위치에 대한 고찰

맨날 실수하거나, 고쳐도 왜 이게 정답인지 잘 몰랐던 부분
처음에 실수했던게 $answer 변수를 바깥으로 빼서 오류가 났었다
강의에서 아주 명쾌한 답을 얻었는데
정말 오랫동안 궁금했던 물음에 마침표를 찍어주는 답이었다
변수를 언제 만들지 잘 결정해야 하는데
변수를 함수 안에 넣으면 이벤트 발동시에 1회 실행되고
함수 밖에 있으면 새로고침시 1회 실행된다는 것이다.
위의 코딩으로 예를 들면
count 변수는 답안을 제출할때마다 쌓여야 하므로 함수 바깥에 정의되어야 하고
$answer 변수는 클릭시 제출되어야 할 답안이므로 함수 안쪽에 정의되어야 한다
정리하자면
함수의 기능, 그러니까 내가 구현하고 싶은 목적에 따라서 변수를 어디서 활용할 지 고려해야 한다

그리고 또..

변수선언에 대해서 찾아보다가
자바스크립트 스타일 가이드를 죽 읽어보고
그동안 습관적으로 생각없이 써내려간 코드들에 대해 다시 생각해볼 수 있었다
유명한 기업들에서 쓰는 스타일 가이드를 주기적으로 읽어보는게 좋을 것 같다

에어비앤비 한글 스타일가이드

자바스크립트 스탠다드 스타일

일관성 있는 자바스크립트 스탠다드 스타일

setTimeout

setTimeout(function(){
  '$ 초 후에 실행할 함수'
},$) // $는 ms 단위 ($ : 1000 = 1초)

setInterval

setInterval(function(){
  '$ 초 마다 실행할 함수'
},$)

자바스크립트 문법 vs 웹 API

if var function // 이건 자바스크립트 문법

!=

document.querySelector() // 이렇게 생긴게 Web Api
setTimeout()
alert()

웹 api에 대해 더 알아볼 것

오늘의 숙제

• 다크모드, 라이트모드 버튼 구현
  • 라이트모드 네브바 #ccb9bc / 스크롤바 ffebee / 배경 #ffffff
  • 다크모드 네브바 #7f0000 / 스크롤바 #b71c1c / 배경 #f05545
• 새로고침시 5초 이내 구매시 사은품 증정! 의 숫자가 초단위로 줄어들게
• 클릭하면, 5초가 지나면 사라지게
• 클릭하거나 5초가 지나면 셋인터벌 종료