1. 조건문
조건문은 특정 조건이 참(Truthy)인지 거짓(Falsy)인지에 따라 코드의 실행 여부를 결정합니다. 마치 길을 가다가 신호등을 만났을 때, 초록불이면 가고 빨간불이면 멈추는 것과 비슷합니다.
이를 코드로 표현해보면 아래와 같죠. 자바스크립트 문법이 아니라 영어 문법대로 읽어보세요. 초록불을 false로도 바꿔보세요.
let 초록불 = true;
if(초록불){
console.log('횡단보도를 건넙니다.');
} else {
console.log('기다립니다.');
}
조건문이 왜 필요할까요?
조건문을 사용하면 프로그램이 더 똑똑해집니다. 예를 들어, 사용자가 로그인했는지 여부에 따라 다른 화면을 보여주거나, 쇼핑몰에서 특정 조건을 만족하는 상품만을 필터링할 때 조건문이 유용합니다.
let loggedIn = true;
if (loggedIn) {
console.log('환영합니다! 로그인되었습니다.');
// 로그인 화면을 출력하는 로직
} else {
console.log('로그인이 필요합니다.');
// 로그인이나 회원가입 화면을 출력하는 로직
}
1.1 if문
아래는 기본적인 if문의 예시입니다.
/**
if (조건) {
// 조건이 참일 때 실행될 코드
}
*/
if (true) {
console.log('true'); // 이 코드는 항상 실행됩니다.
}
let test = 5;
if (test < 10) {
console.log('참입니다!'); // 이 코드는 test가 10보다 작을 때만 실행됩니다.
}
1.1.1 중괄호 생략
조건문 안의 코드가 한 줄 뿐이라면 중괄호를 생략할 수 있습니다.
if (true) console.log('중괄호를 생략했습니다.');
하지만 여러 사람이 함께 코드를 읽고 수정할 경우, 가독성을 위해 중괄호를 사용하는 것이 좋습니다. 특히 짧은 코드가 항상 좋은 코드라고 생각하지 않는 것이 좋습니다.
1.1.2 if-else 문
if문은 조건이 참일 때만 실행되기 때문에, 위 조건이 만족하지 않을 때 실행할 코드가 필요할 때는 else문을 사용합니다.
let x = 3;
let y = 7;
if (x == y) {
console.log('x와 y가 같습니다.');
} else {
console.log('x와 y가 다릅니다.');
}
1.1.3 if-else if-else 문
여러 조건을 처리해야 할 때는 else if를 사용하여 다양한 경우를 처리할 수 있습니다. 이는 시험 점수에 따라 등급을 나누는 것과 비슷합니다.
let score = 69;
let grade;
if (score > 90) {
grade = 'A';
} else if (score > 80) {
grade = 'B';
} else if (score > 70) {
grade = 'C';
} else if (score > 60) {
grade = 'D';
} else {
grade = 'F';
}
console.log(`당신의 학점은 ${grade}입니다.`);
점수를 바꿔보면서 어떤 학점이 나오는지 확인해보세요.
1.2 switch문
if-else 조건문 외에도, switch 문을 사용하여 여러 조건에 대한 실행 코드를 작성할 수 있습니다. switch문은 여러 조건을 비교할 때 유용합니다. if-else문과 같이 switch 문도 조건에 따라 코드의 분기가 일어나는 구조입니다.
switch문은 하나의 표현식을 여러 값과 비교하여 실행할 코드를 결정합니다.
switch (표현식) {
case 값1:
// 값1에 대한 실행 코드
break;
case 값2:
// 값2에 대한 실행 코드
break;
...
default:
// 모든 case에 해당하지 않을 때 실행될 코드
break;
}
switch (표현식) {
case 값1:
// 값1에 대한 실행 코드
break;
case 값2:
// 값2에 대한 실행 코드
break;
...
default:
// 모든 case에 해당하지 않을 때 실행될 코드
break;
}
예를 들어, 요일에 따라 다른 메시지를 출력하는 코드를 작성해 보겠습니다.
console.log(new Date().getDay()); // 요일은 숫자로 표현됩니다.
switch (new Date().getDay()) {
case 1:
console.log('월요일입니다.');
break;
case 2:
console.log('화요일입니다.');
break;
case 3:
console.log('수요일입니다.');
break;
case 4:
console.log('목요일입니다.');
break;
case 5:
console.log('금요일입니다.');
break;
default:
console.log('주말입니다.');
break;
}
1.2.1 break
break문은 switch문에서 중요한 역할을 합니다. break가 없다면, 해당 조건이 참인 경우 이후 모든 코드를 실행합니다. 이를 막기 위해 각 case 뒤에 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('메뉴를 정확히 입력하세요.');
}
console.log(`가격은 ${price}원 입니다.`);
위 코드는 menu 변수의 값에 따라 다른 가격을 설정합니다. break문이 없다면 모든 case가 실행되어 올바른 가격이 설정되지 않습니다. 따라서 break를 추가하여 각 case가 끝난 후 switch문을 빠져나오도록 해야 합니다.
let menu = '카페라떼'; // 메뉴를 바꿔보세요!
switch (menu) {
case '아메리카노':
console.log('아메리카노를 주문했습니다!');
case '카페라떼':
console.log('카페라떼를 주문했습니다!');
case '바닐라라떼':
console.log('바닐라라떼를 주문했습니다!');
case '콜드브루':
console.log('콜드브루를 주문했습니다!');
}
위 코드는 break문이 없어 해당 메뉴부터 case가 끝날 때까지 모든 코드가 실행됩니다.
1.2.2 default
switch문에는 default문을 추가할 수 있습니다. default문은 모든 case에 해당하지 않을 때 실행됩니다. default는 필수가 아닌 선택사항입니다.
let menu = '아메리카노'; // 메뉴를 바꿔보세요!
switch (menu) {
case '아메리카노':
console.log('아메리카노를 주문했습니다!');
break;
case '카페라떼':
console.log('카페라떼를 주문했습니다!');
break;
case '바닐라라떼':
console.log('바닐라라떼를 주문했습니다!');
break;
case '콜드브루':
console.log('콜드브루를 주문했습니다!');
break;
default:
console.log('없는 메뉴를 고르셨습니다. 다시 주문해주세요.');
}