바닐라 JS로 크롬 앱 만들기 [1-6] Conditionals

---

• true & false를 알려주기 때문에 중요
• if, else 사용
• prompt -> css 적용이 되지 않고 js 작동이 멈춰서 사용 안함
• js는 작은 괄호부터 시작해서 큰 괄호로 넘어간다

---

typeof

입력 값의 타입을 확인하는 방법

const age = prompt("How old are you?");

console.log(typeof age);

• prompt에 넣은 값의 타입을 알려줌
• 숫자도 기본으로 문자열로 인식

parseInt

• 문자열을 숫자로 변환
• 숫자여야 어떤 숫자보다 큰지 작은지 비교가 가능하기 때문에 사용
• parseInt 내부에 숫자를 넣지 않으면 NaN 출력

const age = prompt("How old are you?");

console.log(typeof "15", typeof parseInt("15"));

결과
string, number

isNaN

• 숫자가 아닌지 판별하는 방법
• Boolean을 값으로 반환

const age = parseInt( prompt("How old are you?") );

console.log(isNaN(age));

숫자 넣으면 false, 문자 넣으면 true

Conditionals

기본 문법

if(condition) {
    // condition === true
} else {
    // condition === false
}

else 는 없어도 됨, 없다면 true가 아니면 아무 것도 하지 않음

• Boolean으로 판별 가능해야 함

응용

const age = parseInt( prompt("How old are you?") );

if(isNaN(age)) {
    console.log("Please write a number");
} else {
    console.log("Thank you for writing your age")
}

isNaN(age) : true(숫자 X) -> if 실행
isNaN(age) : false(숫자) -> else 실행

여러개의 if가 필요한 경우

const age = parseInt( prompt("How old are you?") );

if(isNaN(age)) {
    console.log("Please write a number");
} else if(age < 18) {
    console.log("you are too young")
} else {
    console.log("You can drink")
}

else if : age가 숫자이고 18보다 작을 때 실행
else : if & else if가 false여야 실행

비교 연산자 활용

const age = parseInt( prompt("How old are you?") );

if(isNaN(age) || age < 0) {
    console.log("Please write a real positive number");
} else if(age < 18) {
    console.log("you are too young")
} else if(age >= 18 && age <= 50) {
    console.log("You can drink");
} else if(age > 50 && age <= 80) {
    console.log("You should exercise");
} else if(age > 80) {
    console.log("You can do whatever you want");
}

age === 100 을 사용하고 싶으면 age > 80 보다 앞에 사용하면 실행 가능

OR -> || : 둘 중 하나만 true이면 됨
true || true === true
false || true === true
true || false === true
false || false === true
AND -> && : 둘 다 true여야 함
true && true === true
false && true === false
true && false === false
false && false ===false