JavaScript 제어문은 조건에 따라 로직을 실행(조건문)하거나 반복실행(반복문)할 때 사용한다. JavaScript의 조건문은 if문과 switch-case문이 있다.
if
- if(조건문){
조건문이 참일 때 실행되는 로직
}
if문은 조건문이 참일 때 로직을 실행하고, 그렇지 않을 때는 로직을 실행시키기 않고 if문 밖으로 빠져나간다. if문의 경우에는 if문 하나만 작성하는 단순if문, if문을 여러개 작성하는 다중if문, if문 안에 if문을 작성하는 중첩 if문(중첩if문의 경우에는 가독성이 많이 떨어지기 때문에 사용시 유의해야한다.), 참이 아닐 때의 로직도 작성하는 if-else문 그리고 if-else문이 여러개 들어간 if-else if-else문이 있다.
if-else문
- if(조건문){
조건문이 참일 때 실행되는 로직
}else{
조건문이 거짓일 때 실행되는 로직
}
조건문이 참이 아닐 때는 else{} 안에 작성된 로직이 시행된다.
if-else if-else문
- if(조건문1){
조건문1이 참일 때 실행되는 로직
}if else(조건문2){
조건문2이 참일 때 실행되는 로직
}else{
모든 조건문이 참이 아닐 때 실행되는 로직
}
if-else if-else문의 경우 로직 여러 개 중에 참인 조건문을 만났으면, 그에 해당하는 로직만 시행하고 그 밑에 있는 로직은 시행하지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 7;
if(a > 10){
console.log(`${a}는 10보다 큽니다.`);
}else if(a > 5){
console.log(`${a}는 5보다 큽니다.`);
}else{
console.log(`${a}는 5보다 작습니다.`);
}
console.log("if문을 빠져나왔습니다.");
</script>
</body>
</html>
switch-case
- switch(조건값){
case 비교값1:
로직;
break;
case 비교값n:
로직;
break;
default:
조건값이 일치하는 것이 없을 때 실행되는 로직;
}
switch-case문의 경우 변수에 있는 값과 case의 값이 일치한지에 대한 연산을 하여, 값이 일치한 case의 로직을 실행시킨다. switch-case문의 경우에는 로직 하나가 실행되어도 그 밑의 로직을 시행하려고 하기 때문에 break;를 사용하여 강제로 switch-case문 빠져나가게 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 2;
switch(a){
case 1:
console.log("1입니다");
break;
case 2:
console.log("2입니다");
// break를 쓰지않으면 아래 로직도 시행된다.
case 3:
console.log("3입니다");
break;
}
console.log("switch문을 빠져나와서 시행됨");
</script>
</body>
</html>
위에서 보다시피 break;를 사용하지 않으면 조건값이 맞는 case에서부터 break; 가 있기 전까지 로직이 시행되는 모습을 볼 수 있다.
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript의 기초 문법 : 객체 (0) | 2024.07.22 |
|---|---|
| JavaScript : 호이스팅이 무엇인가 ? (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 함수 (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 제어문 - 반복문(while / for) (0) | 2024.07.19 |
| JavaScript의 기초 문법 : 연산자 (0) | 2024.07.16 |
| JavaScript에서 사용자의 입력을 받아보자 (0) | 2024.07.15 |
| JavaScript의 템플릿 리터럴이란? (0) | 2024.07.15 |
| JavaScript의 기초 문법 : 변수 (0) | 2024.07.15 |