conditional(if,elseif,else)/ 연산자(논리,비교)

입력한 숫자에 따라 다른 문자를 주고 싶다.

하나씩 알아야 할 것들을 보고 가자.

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

console.log(age);
-----------------
20 
-> 20
lalal 
-> lalal

prompt() : 메시지를 띄워 답을 받아오는 function이다. 단점이 많아서 지금은 사용하지 않는다.

숫자와 문자 둘 다 입력하면 그대로 나온다.

하지만 나는 나이를 물어볼 거라 숫자만 입력하게 하고 싶다.

typeof

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

console.log(typeof age);
-----------------
20
-> string

하지만 변수가 어떤 type인지 알려주는 typeof를 사용하니 number가 아닌 string으로 나온다.

이걸 이용해 사용자에게 나이를 물어봤는데,

사용자가 숫자가 아닌 걸 입력했을 경우를 인지할 수 있다.

parseInt()

string으로 나온 숫자를 number로 바꿔준다.

console.log(typeof "15", typeof parseInt("15"));
-------------------------------
string number

string을 number로 바꿔주는 이유는

이 숫자가 어떤 수보다 큰지 작은지 알 수 있기 때문이다. 비교가 된다.

string이면, 숫자와 크기 비교를 할 수가 없다.

console.log(parseInt("haha"))
--------------------------
NaN

숫자로 변환할 수 없는 값은 NaN으로 나온다.

이걸 이용해서 숫자를 입력하지 않은 것을 알 수 있다.

isNaN()

isNaN() function은 boolean을 retrun 해 NaN인지 아닌지 판단한다.

NaN이면 True, 아니면 False.

console.log(isNaN(parseInt("20")));
console.log(isNaN(parseInt("haha")));
------------
false
true

if, else, else if

true인지 false인지 알아야 할 때 사용, 필수적으로 사용된다.

구조는 이런 식이다.

if(condition) {

/// condition === true 

} else {

 /// condition === false

}

if에 주어진 condition이 true면 if 작동. false면 else 작동.

condition은 boolean이어야 한다. true or false.

isNaN function과 조합해보자.

if (isNaN(age)) {

console.log("Please write a number")

} else {

console.log("Thank you for writing your age")

}

number를 적으면 false이므로 else, 아니면 true로 if 작동

else if

if가 false일 때 condition을 더 사용할 수 있다.

if (isNaN(age)) {

console.log("Please write a number")

} else if (age < 18) {

console.log("You are too young.")

} else if(age >= 18 && age <= 50) {

console.log("You can drink")

} else {
console.log("Please little drink")
}

비교 연산자

표현식과 연산자 - JavaScript | MDN

연산자	반대 연산자	설명
== (동등)	!= (부등)	피연산자들이 같으면(다르면) 참을 반환합니다.
=== (일치)	!=== (불일치)	피연산자들이 같고(다르고) 피연산자들의 같은(다른) 형태인 경우 참을 반환합니다.  Object.is 와 JavaScript에서의 같음을 참고
> (~보다 큰)	< (~보다 작은)	좌변의 피연산자 보다 우변의 피연산자가 크면(작으면) 참을 반환합니다.
>= (~보다 크거나 같다)	<= (~보다 작은)	좌변의 피연산자 보다 우변의 피연산자가 크거나(작거나) 같으면 참을 반환합니다.

논리 연산자

표현식과 연산자 - JavaScript | MDN

논리 AND	expr1 && expr2	expr1을 true로 변환할 수 있는 경우 expr2을 반환하고, 그렇지 않으면 expr1을 반환합니다.
논리 OR	expr1 || expr2	expr1을 true로 변환할 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.
논리 NOT	!expr	단일 피연산자를 true로 변환할 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.

&& (AND)

const a1 =  true && true;     // t && t returns true
const a2 =  true && false;    // t && f returns false
const a3 = false && true;     // f && t returns false
const a4 = false && (3 == 4); // f && f returns false
const a5 = "Cat" && "Dog";    // t && t returns Dog
const a6 = false && "Cat";    // f && t returns false
const a7 = "Cat" && false;    // t && f returns false

&&는 and로 조건 둘 다 true 여야 true

|| (OR)

const o1 =  true || true;     // t || t returns true
const o2 = false || true;     // f || t returns true
const o3 =  true || false;    // t || f returns true
const o4 = false || (3 == 4); // f || f returns false
const o5 = "Cat" || "Dog";    // t || t returns Cat
const o6 = false || "Cat";    // f || t returns Cat
const o7 = "Cat" || false;    // t || f returns Cat

ll은 or로 조건 중 하나만 true면 true

! (NOT)

const n1 = !true;  // !t returns false
const n2 = !false; // !f returns true
const n3 = !"Cat"; // !t returns false

결괏값을 false를 준다, 그래서 결괏값이 false면 true.

마무리

else는 선택사항이라 꼭 사용할 필요는 없다.

음수를 적는 경우도 적어놓는다.

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("Please little drink");

} else if (age >80) {
	console.log("You can do whatever you want.");
} else if (age === 100) {
	console.log("wow you are wise");
}

마지막 ===100은 실행되지 않는다.

왜냐하면 100은 80보다 크기 때문에 위에 쓰인 age>80이 실행되기 때문.

작동시키려면 age>80 보다 위에 위치시켜야 한다.

if ( (a && b) || (c && d) || (x || w) ) {

}

이렇게 더 복잡하고 많은 조건을 넣을 수도 있다.