[JS] if vs if...else vs elseif, 그리고 삼항연산자

📍 if

if문의 기본 형식

if( 조건식 ) {	
	코드;
}

if문은 조건식에 따라 true일 경우 코드에 작성한 값을 출력한다.

---

📍 if ... else

if ... else문의 기본 형식

if( 조건식 ) {
	코드1;
} else {
	코드2;
}

if...else문은 조건식이 true일 경우 if문에 적힌 코드를 출력하고 조건식이 false일 경우 else문에 적힌 코드를 출력한다

const value = prompt('수를 입력하세요.');

if(value >= 10){
	alert('10 이상의 값입니다.');
}else { 
	alert('10 미만의 값입니다.');
}
// 10 이상의 값을 입력할 경우 true이므로 '10 이상의 값입니다.'를 출력합니다.
// 10 미만의 값을 입력할 경우 false이므로 '10 미만의 값입니다.'를 출력합니다.

---

📍 elseif

elseif문의 기본 형식

if( 조건식1 ) {
	코드1;
} else if( 조건식2 ){
	코드2;
} else{
	코드3;
}

elseif문은 if...else문에서 조건식이 2개 이상 필요할 때 사용한다. if...else는 이것 아님 저것으로 2가지 중 하나를 선택할 수 있는데 elseif문을 추가적으로 사용하면 3가지 이상의 값 중 하나를 선택할 수 있다.

const num = parseInt(prompt('값을 입력하세요'));

if(num >= 10){
	alert('한자리 수보다 큽니다.');
}else if( num >= 0 ){
	alert('한자리 수 입니다.');
}else{
	alert('음수입니다.');
}

---

📍 삼항 연산자

삼항 연산자 기본 형식

(조건식) ? 코드1 : 코드2;

삼항 연산자는 조건식에 따라 코드1, 코드2가 출력된다. 조건식이 true일 경우 코드1이 출력이 되고, 조건식이 false일 경우 코드2가 출력된다.

const a = parseInt(prompt('첫번째 숫자를 입력하세요'));
const b = parseInt(prompt('두번째 숫자를 입력하세요'));

let result = (a + b < 10) ? '10 미만' : '10 이상'
alert(result);

만약 조건식이 1개가 아닌 여러 개인 경우에는 어떻게 사용할까?

조건식이 여러 개인 경우

(조건식1) ? 코드1: (조건식2) ? 코드2 : 코드3;

조건식1이 false인 경우 다음 조건식으로 넘어갈 수 있도록 한다.

const age = prompt('나이를 입력하세요');

let message = (age >= 20) ? '성인입니다.' : (age >= 17) ? '고등학생입니다.' : (age >= 14) ? '중학생입니다.' : (age >= 8) ? '초등학생입니다.': '미취학아동입니다.';

alert(message);