4. 조건문

4-1. 조건문이란?

4-2. if문

if (조건식) {
		// 조건식이 참일 경우 실행될 코드
}

if (true) console.log("중괄호를 생략했습니다.");

4-2-1. if ... else문

if (조건식1) {
		// 조건식1이 참(true)일 경우 실행될 코드
} else if (조건식2) {
		// 조건식1이 거짓(false)이고 조건식2가 참(true)일 경우 실행될 코드
} else {
		// 조건식1, 2 모두 거짓일 경우 실행될 코드
}

if (조건식1) {
		// 조건식1이 참(true)일 경우 실행될 코드
} else if (조건식2) {
		// 조건식1이 거짓(false)이고 조건식2가 참(true)일 경우 실행될 코드
} else if (조건식3) {
		// 조건식1, 2이 거짓(false)이고 조건식3이 참(true)일 경우 실행될 코드
} else if (조건식4) {
		// 조건식1, 2, 3이 모두 거짓(false)이고 조건식4가 참(true)일 경우 실행될 코드
} else {
		// 위의 조건식들이 모두 거짓일 경우 실행될 코드
}

if (true) {
		console.log('조건문을 빠져나갈거에요!');
} else if (조건식) {
		/*
		...10,000줄의 코드...
		*/
} else {
		// 위의 조건식들이 모두 거짓일 경우 실행될 코드
}

function coffePrice(price) {
		if (price > 6000) {
				console.log('커피가 너무 비싸요!');
		} else if (price < 3000) {
				console.log('맨날 먹어도 되겠네요!');
		} else {
				console.log('적당한 가격대입니다.');
		}
}

4-2-2. if문 중첩

function coffePrice(price) {
		if (typeof price === 'number') { // 타입이 숫자형이면서,
				if (price > 6000) { // 그 값의 크기가 작성한 조건을 만족해야 한다.
						console.log('커피가 너무 비싸요!');
				} else if (price < 3000) {
						console.log('맨날 먹어도 되겠네요!');
				} else {
						console.log('적당한 가격대입니다.');
				}
		} else { // 입력값이 숫자가 아닌 모든 경우에는 숫자로 입력하라는 문구를 출력한다.
				console.log('가격을 숫자로 입력해주세요!');
		}
}

// 타입을 확인한 뒤 false라면 함수를 종료시키는 방법
function coffePrice(price) {
		if (typeof price !== 'number') {
				console.log('가격을 숫자로 입력해주세요!');
				return;
		}
		if (price > 6000) {
				console.log('커피가 너무 비싸요!');
		} else if (price < 3000) {
				console.log('맨날 먹어도 되겠네요!');
		} else {
				console.log('적당한 가격대입니다.');
		}
}

// 숫자인 상황에 대해서 모든 상황을 확인한 뒤, 그 외의 경우는 else문으로 처리
function coffePrice(price) {
		if (price > 6000) {
				console.log('커피가 너무 비싸요!');
		} else if (price < 3000) {
				console.log('맨날 먹어도 되겠네요!');
		} else if (price >= 3000 && price <= 6000) { // 논리연산자의 내용은 뒤에 있습니다.
		    console.log('적당한 가격대입니다.');
	  } else {
		    console.log('가격을 숫자로 입력해주세요!');	
		}
}

4-3. switch문

switch (값) {
		case 값1 : 
				// 실행시킬 코드
				break;
		case 값2 : 
				// 실행시킬 코드
				break;
		case 값3 : 
				// 실행시킬 코드
				break;
		case 값4 : 
				// 실행시킬 코드
				break;
		default :
				// 일치하는 경우가 없을 때 실행시킬 코드
				break;
};

• switch 뒤에 오는 표현식들의 값에 따라 실행시킬 코드가 있는 곳으로 실행을 옮겨간다.

• 코드실행을 한 뒤, break에 의해서 조건문을 빠져나오게 된다.

• 표현식이 case와 일치하는 경우가 없다면 default 문으로 이동하게 된다.

• default 문은 선택사항이다.

let price = 0;
let menu = '카페라떼'; // 메뉴를 바꿔가면서 콘솔창에 입력해보자.

switch (menu) {
		case '아메리카노':
				price = 4000;
		    break;
	  case '카페라떼':
				price = 5000;
				break;
		case '바닐라라떼':
				price = 6000;
		    break;
	  case '콜드브루':
				price = 5500;
				break;
		case '딸기라떼':
				price = 7000;
		    break;
	  case '레몬에이드':
				price = 6500;
				break;
		case '에스프레소':
				price = 3500;
		    break;
	  case '루이보스':
				price = 4500;
				break;
		default:
				console.log('메뉴를 정확히 입력하세요.');
}

4-3-1. break

let price = 0;
let menu = '카페라떼'; // 메뉴를 바꿔보세요!

switch (menu) {
		case '아메리카노':
				price = 4000;
	  case '카페라떼':
				price = 5000;
		case '바닐라라떼':
				price = 6000;
	  case '콜드브루':
				price = 5500;
		case '딸기라떼':
				price = 7000;
	  case '레몬에이드':
				price = 6500;
		case '에스프레소':
				price = 3500;
	  case '루이보스':
				price = 4500;
		default:
				console.log('메뉴를 정확히 입력하세요.');
}

// true를 찾아가긴 하지만, 이와 같은 경우엔 if문을 활용하는 것이 좋다.
switch (true) {
		case true: 
				console.log('swithch true!');
				break;
		case false: 
				console.log('swithch false!');
				break;
};

4-4. 삼항연산자(조건연산자)

조건식 ? 참일 경우 실행되는 표현식 : 거짓일 경우 실행되는 표현식

let item = true ? console.log('true') : console.log('false');
console.log(item);

let item = true ? 100 : 200;
console.log(item);

const price = 7000;
const message = (price>6000) ? '비싸요!' : '안비싸요!';
console.log(message);
// '비싸요!'라는 문자열을 값으로 사용하게 된다.

4-4-1. 삼항연산자 중첩

let price = 5000;

let message = (price>6000) ? '비싸요!' : 
							(price<3000) ? '엄청싸요!' : '적당해요!';

// 위의 코드는 아래와 같다.
let price = 5000;
let message = '';

if (price > 6000) {
		message = '비싸요!';
} else if (price < 3000) {
		message = '엄청싸요!';
} else {
		message = '적당해요!';
}

4-5. 조건식을 작성할 때 알아두면 좋은 사항

4-5-1. Boolean 형으로의 암묵적 타입 변환

let name = '';

if (name) {
		console.log(`안녕하세요 ${name}님! 반갑습니다.`);
} else {
		console.log('이름이 없습니다!');
}

만약 이름에 값이 있다면, 인사를 하는 문장을 출력하고 그렇지 않은 경우엔 이름이 없다는 문구를 출력하라.

4-5-5-1. falsy

• 0

• false

• undefined

• null

• "" (빈 문자열)

• NaN

if (0) {
		console.log('0은 true가 될까요?');
} else if (false) {
		console.log('false는 true가 될까요?');
} else if (undefined) {
		console.log('undefined는 true가 될까요?');
} else if (null) {
		console.log('null은 true가 될까요?');
} else if ('') {
		console.log('빈 문자열은 true가 될까요?');
} else if (NaN) {
		console.log('NaN은 true가 될까요?');
} else {
		console.log('위의 조건식중 truthy값은 없습니다!');
}

4-5-5-2. truthy

let coffeeList = []; // 빈 배열은 truthy값이다.

if (coffeeList) { 
		console.log('커피리스트 : ' + coffeeList);
} else {
		console.log('커피 종류를 입력하세요!');
}

// 위와 아래를 비교해보자

if (coffeeList.length) { // coffeeList.length는 0이므로 falsy값이다.
		console.log('커피리스트 : ' + coffeeList);
} else {
		console.log('커피 종류를 입력하세요!');
}

4-5-2. 논리 연산자

• and(&&)

console.log(1 && 2 && 3); // 3

let hello = 10>5 && 10>1 && 'hello'

console.log(hello)
'hello'

let price = 7000;

if (typeof price === 'number' && price>6000) { // true && true == 두번째 true
		console.log('커피가 너무 비싸요!');
}

• or(||)

console.log(1 || 2 || 3); // 1

// 성적이 90이상이거나 수상경력이 있다면 합격문구를 출력하는 조건문을 작성해보자
const user = {
		score : 70,
		award : 'weniv FE스쿨 우수'
}

if (user.score > 90) { console.log('합격입니다!'); };
if (user.award) { console.log('합격입니다!'); };

// 위와 아래코드는 동일하다. 

if (user.score >90 || user.award) { 
		// false || 'weniv FE스쿨 우수' == 'weniv FE스쿨 우수'
		console.log('합격입니다!'); 
};

• not(!)

console.log(!'string');
console.log(!1);
console.log(!true);

console.log(!0);
console.log(!'');
console.log(!undefined);
console.log(!null);
console.log(!NaN);
console.log(!false);

4-6. 조건문을 쓰는 방법

• 참인 조건식(혹은 else문)을 만나야만 탈출하는 if문

• 일치하는 경우를 찾아가서 실행하는 switch문

• 판별해야하는 경우가 너무 많은 경우

Reference

1. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator