조건문은 주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문이다.
//조건문의 기본형식
if (조건식)
동작문;
조건문은 조건식과 동작문으로 구분된다. 조건식이 참이면 내부의 동작문이 실행되고, 거짓이면 실행되지 않는다.
동작문이 하나 이상이면 동작문들을 {}
중괄호로 감싼다.
if (조건식) {
동작문1;
동작문2;
동작문3;
}
//조건이 참이면 실행된다.
if(true) {
console.log('Hello, if!')
}
>"Hello, if!"
true라는 값을 직접 넣어줄 필요없이 true로 형 변환되는 값이나 그것을 담고 있는 변수를 넣어도 된다.
let condition = true;
if (condition) {
console.log('Hello, if')
}
조건에는 모든 값을 넣을 수 있다.
let value = '사과';
let condition = true;
if (condition){
value = '바나나';
}
console.log(value)
>"바나나"
조건식이 거짓일 때 value를 포도로 만들어보겠다.
let value = '사과';
let condition = false;
if (condition) {
value = '바나나';
} else {
value = '포도';
}
console.log(value);
>"포도"
조건이 여러 개 일때.
if (조건식) {
동작문;
} else if (조건식) {
동작문;
} else {
동작문;
}
else if 문은 (여러 개 가능) else문 없이 사용할 수도 있다.
if (조건식) {
동작문;
} else if (조건식) {
동작문;
} else if (조건식) {
동작문;
}
조건문도 문이기 때문에 중괄호 안에 다시 넣을 수 있다.
let first = true;
let second = false;
if (first) {
console.log('첫 번째 조건 충족!');
if (second) {
console.log('두 번째 조건 충족!');
} else {
console.log('두 번째 조건은 불충족!');
}
} else {
console.log('첫 번째 조건은 불충족!');
}
중괄호를 쓸 때마다 들여쓰기를 해야하기 때문에 중첩문은 추천하지 않는다.
조건문에는 if문외에도 switch문이 있다. if문과 switch문은 조건을 충족할 때 실행된다는 공통점도 있지만, 차이점도 있다.
switch (조건식) {
case 비교조건식:
동작문;
}
switch문에는 조건식 두 개가 사용된다. switch는 소괄호 조건식의 값이 case의 비교 조건식 값과 일치(===)하면 해당 동작문이 실행된다. 보통 조건식에 변수를 넣고, 비교 조건식에는 변수와 비교할 값을 넣는다.
let value = 'A';
switch (value) {
case 'A':
console.log('A');
}
if문의 else if처럼 여러 방향으로 분가할 수 있다.
let value = 'A';
switch (value) {
case 'A':
console.log('A');
case 'B':
console.log('B');
case 'C':
console.log('C');
}
조건이 실행되고 멈추게 하려면, break를 걸어주면 된다.
let value = 'A';
switch (value) {
case 'A':
console.log('A');
break;
case 'B':
console.log('B');
break;
case 'C':
console.log('C');
break;
}
if문과 switch문을 비교해보자.
let fruit = '사과';
if (fruit === '사과') {
console.log('사과입니다!');
} else if (fruit === '배') {
console.log('배입니다!');
} else if (fruit === '포도') {
console.log('포도입니다!');
} else {
console.log('뭔지 모르겠습니다!');
}
---------------------------------
switch (fruit) {
default :
console.log('뭔지 모르겠습니다!');
break;
case '사과':
console.log('사과입니다!');
break;
case '배':
console.log('배입니다!');
break;
case '포도':
console.log('포도입니다!');
break;
}
if문과 switch문 외에도 분기 처리에 사용하는 식이 있다 이는 조건부 연산자 또는 삼항 연산자라고 표현한다!
//조건부 연산자의 기본 형식
조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식
조건부 연산자는 문이 아니라 식이기 때문에 결과 값이 나온다!
다음 코드를 확인해보자!
5 > 0 ? '참입니다' : '거짓입니다';
>"참입니다"
연산자의 우선순위가 조건부 연산자의 우선순위보다 높기 때문에 5 > 0
이 먼저 실행되고 이것이 조건식이 된다. 5 > 0은 true
이므로 ‘참입니다’
가 결과 값으로 실행된다.
조건부 연산은 보통 조건에 따라 달라지는 값을 변수에 대입하기 위해 사용한다.
let value = 5 < 0 ? '참입니다' : '거짓입니다';
>undefined
value;
>'거짓입니다'
조건부 연산도 if문으로 변경 가능하다
let condition = true;
let value = condition ? '참' : '거짓';
console.log(value);
---------------------
let condition = true;
if (condition) {
value = '참';
} else {
value = '거짓';
}
console.log(value);
코드를 6줄 쓸 것을 한줄로 압축할 수 있기에 조건부 연산자는 수요가 많다.
조건부 연산도 중첩해서 사용할 수 있다. 헷갈릴 수도 있으니 소괄호를 적극적으로 사용하자!
let condition1 = true;
let condition2 = false;
let value =
condition1 ? (condition2 ? '둘 다 참' : 'condition1만 참') : 'condition1이 거짓';
console.log(value);
>"condition1만 참"
들여쓰기로 구분해도 된다.
let condition1 = true;
let condition2 = false;
let value = condition1
? condition2
? '둘 다 참'
: 'condition1만 참'
: 'condition1이 거짓';
첫 번째 조건이 참인경우에 중첩된 조건부 연산에 들어갔지만, 거짓인 경우에 들어갈 수도 있다.
let condition1 = false;
let condition2 = true;
let value = condition1
? 'condition1만 참'
: condition2
? 'condition2가 참'
: '둘 다 거짓';
console.log(value);
*1분 퀴즈
다음 if문을 switch문과 조건부 연산자로 바꿔보자!
let cond = true;
let value = '';
if (cond) {
value = '참';
} else {
value = '거짓';
}
-----------------------
//switch문
let cond = true;
let value = '';
switch (cond) {
case true :
console.log('참')
break;
case false :
console.log('거짓')
break;
}
------------------------
//삼항연산자
let value = cond ? '참' : '거짓';