If ~ Eles, 삼항연산자, 조건문 응용

If

만약에 ~한다면 ~해라

소괄호 안에 들어가는 조건이 참이면 {}안에 들어가는 구문이 실행됨

소괄호는 true, false만 인식

var a = 20;
var b = 40;

if (a < b) {
	console.log("a는 b보다 작다.");
}
if (true) {
	console.log("a는 b보다 작다.");
}
if (a > b) {
	console.log("a는 b보다 크다.");
}

if문 보완

거짓인 경우를 대비해서 if문 보완, 거짓인 상태를 사용자에게 인지시켜주어야한다.

예를들어 로그인시 id나 비밀번호 둘중 하나라도 잘못 입력시 '아이디, 비밀번호가 틀렸습니다' 라는 에러메세지를 보내줘야한다.

else는 false인 경우 실행되는 구문

var a = 20;
var b = 40;

if(a >b) {
	console.log("a는 b보다 크다.");
} else {
	console.log("a는 b보다 작다.");
}

else if

여러개의 조건을 사용하고자 할때 사용

if문으로 시작해야한다.

모든 조건이 다 참이 아니라면 else구문이 실행된다.

var a = 20;
var b = 40;
var c = 60;

if(a > b) {
	console.log("a는 b보다 크다");
} else if(b > c) {
	console.log("b는 c보다 크다");
} else if(a < c) {
	console.log("a는 c보다 작다");
} else if(b < c) {
	console.log("b는 c보다 작다");
} else {
	console.log("모든 조건을 만족하지 않는다.");
}

주의점

a < c도 참, b < c도 참 b < c도 출력되야 정상아닌가?

else if문은 조건들 중에서 여러개의 참이 존재한다면 가장 먼저 나오는 참만 실행시킴

중첩if문

위에서 사용한 코드들이 버그없이 동작하는 구문일까? a = b의 경우의수를 빼먹은 버그코드이다.

var a = 20;
var b = 20;

if(a >b) {
	console.log("a는 b보다 크다.");
} else {
	console.log("a는 b보다 작다.");
}

버그를 제거하기 위해서는 조건문을 꼼꼼하게 작성할 필요가 있음, 그럴때 사용하는게 중첩if문

숫자가 같은지 다른지 먼저 대전제로 깔아두는 것

var a = 40;
var b = 40;

if( a !== b) {
	
	if(a > b) {
		console.log("a는 b보다 크다.");
	} else {
		console.log("a는 b보다 작다.");
	}

} else {
	console.log("a와 b는 같다.");
}

거짓이 되는 상황

false 외에 다른값("", 0, null, undefined)을 입력한 경우에도 거짓이 출력될 수 있음

문자열 : 빈 문자열이면 false, 문자열이 있으면 true

사용자가 로그인을 해야하는데 아이디를 입력안함, 빈문자열로 인식해서 else문이 출력('아이디를 입력해주세요')

숫자 : 0보다 작거나 크면 true, 0이면 false

null, undefined : false

undefined는 변수안에 아무런 값도 입력하지않았을 때 들어가는 값이기 때문에 거짓으로 인식된다.

실무에서 자주사용되는 팁

if(0) {
	console.log("참!!!");
}else {
	console.log("거짓!!!");
}

삼항 연산자

삼항연산자는 if else와 같은 구조를 만들때 사용된다.

조건을 넣고 참인경우 ? 안에있는 구문이 실행, 거짓이면 : (콜론)안에 있는 구문이 실행

// if구문
var age = 15;

if(age >= 18) {
	console.log("성인");
} else {
	console.log("어린이");
}

// 삼항 연산자
var age = 15;

var result = (age >= 18) ? "성인" : "어린이";

console.log(result);

한줄짜리 구문은 if else문보다 삼항 연산자가 가독성이 뛰어남

복잡한 두줄이상의 구문이 사용이되면 if else문을 사용

조건문 응용

prompt 메서드

자바스크립트에서 만들어놓고 브라우저환경에서만 동작

팝업은 브라우저에서 기본적으로 제공하는 팝업

사용자한테 어떠한 값을 전달받을때 사용되는 팝업을 띄우는 기능

입력한 값이 userId와 userPw에 각각 할당이됨

아이디 woosung 비번 kim 입력

var userId = prompt("아이디를 입력해 주세요.");
var userPw = prompt("비밀번호를 입력해 주세요.");

console.log(userId);
console.log(userPw);

아무런 값도 입력하지 않으면 빈문자열로 전달

&& 연산자

앞, 뒤 모두 참일경우 true로 반환

하나라도 거짓이면 false로 반환(else 실행)

alert 메서드

입력하는 정보가 없는 팝업을 출력

사용자에게 어떠한 상태인지를 인지시켜줄 때 사용

if(userId === "woosung" && userPw === "12345") {
	alert("로그인 되었습니다.");
} else {
	alert("아이디 또는 비밀번호가 틀렸습니다.");
}

주의점

prompt로 전달받은 값들은 모두 데이터타입이 string.

var userId = prompt("아이디를 입력해 주세요.");
var userPw = prompt("비밀번호를 입력해 주세요.");

console.log(userId);
console.log(typeof userPw);

12345라고 입력시 데이터타입이 다르기 때문에 false로 반환

why? '12345'라는 문자열데이터와 12345라는 숫자데이터를 비교해서 그럼

if(userId === "woosung" && userPw === 12345) {
	alert("로그인 되었습니다.");
} else {
	alert("아이디 또는 비밀번호가 틀렸습니다.");
}

parseInt

숫자로 비교하고싶다면 문자로 전달된 숫자를 숫자 데이터타입으로 변경해주어야함

문자로 전달된 숫자를 숫자데이터타입(정수형)으로 변경

if(userId === "woosung" && parseInt(userPw) === 12345) {
	alert("로그인 되었습니다.");
} else {
	alert("아이디 또는 비밀번호가 틀렸습니다.");
}