[JS] 조건문

조건문

주어진 조건에 따라 코드들의 실행이 결정되는 문(statement)
조건식이 true일 때 중괄호 안의 코드들이 실행

if문

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

if ... else문

하나의 조건이 아닌 여러개의 조건을 평가할 때

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

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

if문 중첩

예) 입력받은 값이 숫자라면 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('가격을 숫자로 입력해주세요!');	
		}
}

switch문

(잘 사용하지 않는다)
표현식의 값에 따라 일치하는 경우를 찾아가서 코드를 실행시키는 조건문

• switch 뒤에 오는 표현식들의 값에 따라 실행시킬 코드가 있는 곳으로 실행 옮겨감
• 코드실행 후 break로 조건문 빠져나온다(break 없으면 switch문을 탈출하지 않고 모든 코드들 실행됨)
• 표현식이 case와 일치하는 경우가 없다면 default 문으로 이동, default 문은 선택사항
• 참 거짓 판별보다는 다양한 값을 받아오는 상황에서 코드 실행 결정할 때 사용(문자열,숫자)

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

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('메뉴를 정확히 입력하세요.');
}

삼항연산자 (조건연산자)

조건식 ? 참일 경우 실행되는 표현식 : 거짓일 경우 실행되는 표현식
let item = true ? console.log('true') : console.log('false');
console.log(item);

const price = 7000;
const message = (price > 6000) ? '비싸요!' : '안비싸요!';
console.log(message);

삼항연산자 중첩

2개 정도만 중첩하고 3개 이상은 알아보기 힘들다

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

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

아래처럼 표현할 수도 있다

let price1 = 5000;
let message1 = '';

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

nullish

추가된지 얼마 안된 문법

a ?? b
a가 null도 아니고 undefined도 아니면 a
그 외의 경우는 b

https://ko.javascript.info/nullish-coalescing-operator

let firstName = null;
let lastName = null;
let nickName = "바이올렛"; 
// null이나 undefined가 아닌 첫번째 피연산자 
console.log(firstName ?? lastName ?? nickName ?? "익명의 사용자");
// 바이올렛

firstName, lastName, nickName이란 변수에 사용자 이름이나 별명을 저장하는데, 사용자가 아무런 정보도 입력하지 않는 케이스도 허용한다고 해보겠습니다.
화면엔 세 변수 중 실제 값이 있는 변수의 값을 출력하는데, 세 변수 모두 값이 없다면 '익명의 사용자’가 출력되도록 해보죠.
이럴 때 nullish 병합 연산자 ??를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있습니다.

let a = 10;
let b = 20;
let c = 30;
let d = a ?? b ?? c;
console.log(d)
// 10

let a = null;
let b = 20;
let c = null;
let d = a ?? b ?? c;
console.log(d) 
// 20

let a;
let b;
let c;
let d = a ?? b ?? c;
console.log(d)
// undefined

let 실명;
let 별명 = 'kon';
let 기본값 = '프로도';
let 채팅창아이디 = 실명 ?? 별명 ?? 기본값;
console.log(채팅창아이디)
// kon

차이점
let height = 0;
console.log(height || 100); 
// 100
console.log(height ?? 100); 
// 0

|| : 0, null, undefined
// ?? : null, undefined

falsy하다 : 0, null, undefined, "", NaN
nullish하다 : null, undefined