자바스크립트 입문[Javascript] - 조건문 (Conditionals) / if, else, else if / and(&&) , or( | | )

2021-07-23

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

---

[Conditionals] 

javascript - conditionals

조건문은 true인지 false인지 알려주기때문에 중요합니다. 우리는 주로 뭔가를 확인하기위해 사용합니다.

키워드는 "if"와 "else"입니다.

"else if"는 else와 if를 합친 개념입니다. 조건을 하나 추가할 수 있는 키워드죠.

조건문의 기본형태는 아래와 같습니다.

 

if (condition) {
   statement1
} else {
   statement2
}

 

condition이 true이면 statement1을 실행하고 condition이 false면 statement2를 실행합니다.

유저에게 나이를 물어보는 코드를 짜봅시다. prompt를 통해 유저가 숫자를 입력할 수 있습니다. 

prompt에서 숫자 ("12")를 받든 ("lalala")를 받든 parseInt 함수를 통해 숫자를 숫자로 변환해줍시다.

 

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

 

만약 숫자라면 age는 숫자로 정의될 것이고, 문자라면 NaN(not a number)로 변환될 것입니다.

입력값이 NaN인지 아닌지 구분할 수 있는 함수 isNaN을 통해 조건문을 만들어봅시다.

 

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.")
}

 

숫자를 입력했을때 age는 숫자로 정의되고, 함수 isNaN(age)에서 false 값을 내놓습니다. 따라서 else 문인 console.log(Thank you for writing your age.")을 실행하게 됩니다.

반대로 문자를 입력했을 때 age는 NaN으로 정의되고 함수 isNaN(age)에서 true 값을 내놓습니다. 따라서 if 문인 console.log("Please write a number.")을 실행합니다.

조건을 하나 더 늘려 조건문을 만들어봅시다. 위에서 말했듯, 조건을 늘리긴위해선 if와 else외에 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 soju")
}

 

마찬가지로 조건문이 더 늘어나도 형태는 같습니다.

 

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

 

여기서 주의해야할 점은 '&&'은 "and"이고 '| |'은 'or'입니다.

즉 '&&'은 둘다 true여야 true이고, '| |'은 둘 중 하나만 true라면 true입니다.

 

true | | true === true

true | | false === true

false | | true === true

false | | false === false

 

true && true === true

true && false === false 

false && true === false 

false && false === false 

 

===은 JS에서만 사용하는 연산자이며
== 은 값만을 비교하고 === 은 유형도 비교하여 === 를 주로 사용하는걸 추천합니다.

 

0 == false ---> true

0 === false ---> false

 

조건문의 값을 지정해야하는 것을 유의해야합니다. 아래와 같은 코드를 사용하면 안됩니다.

 

if (x = y) {
   /* do the right thing */
}

 

조건식에 값을 지정 해야할 경우, 아래와 같이 일반적으로 할당된 것 주위에 추가 괄호가 필요합니다.

 

if ((x = y)) {
   /* do the right thing */
}

---

출처

 

Greeting JavaScript: If, else, else if, switch statements and ternary operator in JavaScript | Learn To Code Together

 

if...else - JavaScript | MDN

 

노마드 코더 Nomad Coders