조건문이란?
우리가 일상 생활을 하다보면 특정 상황에서 어떠한 조건에 따라서 행동하게 되는 경우가 있다.
예를 들어서 우리가 횡단보도를 건널 때에도 무수한 조건에 따라 행동하게 된다.
- 신호등이 초록색이면 건넌다.
- 조건 : 신호등이 초록색
- 행동 : 건넌다
- 신호등이 빨간색이면 건너지 않는다.
- 조건 : 신호등이 빨간색
- 행동 : 건너지 않는다
- 신호등이 주황색이면 건널 준비를 한다.
- 조건 : 신호등이 주황색
- 행동 : 건널 준비를 한다
- 예외1 : 빨간불인데 차가 안오니까 그냥 건넌다.
- 조건 : 신호등이 빨간색이지만 차가 안온다
- 행동 : 건넌다
- 예외2 : 신호등이 없어서 차가 안올 때 눈치껏 건넌다.
- 조건 : 신호등이 없지만 차가 안온다
- 행동 : 건넌다
- 예외3 : 무단 횡단을 한다.
- 조건 : 신호등 색을 무시한다
- 행동 : 건넌다
이처럼 신호등을 건너는 간단한 행동에도 사람들은 특정 조건에 따라서 행동을 다양하게 바꾼다.
그런데 사람이 이러한 판단을 하는 것은 본능 같은 것이 아니라 횡단보도가 무엇인지, 신호등이 무엇인지, 법이 무엇인지 등 다양한 지식을 알고 있기 때문이다.
때문에 프로그램도 특정 상황에서 어떤 조건에 따라 행동할 것인지에 대한 지식을 주입해줘야한다.
바로 그때 사용하는 것이 조건문이다.
특정 조건이 참(true)인지 거짓(false)인지에 따라 다른 코드 블록을 실행하도록 하는 것이다.
자바스크립트에서는 다음과 같은 주요 조건문들이 있다.
- if 문, switch 문, 삼항 연산자, 그리고 단축 평가 등이다.
그중 가장 유명한 것이 if문이기 때문에 이것을 조건으로 설명하고자 한다.
1. if 문
1. if 문 (단순 조건)
if는 일반적으로 가정법에서 사용되어 만약 ~라면 ~한다 식으로 사용된다. 식으로 사용된다.
js에서도 동일하게 사용된다.
if 문의 구조는 if (조건) {코드} 식으로 이루어져있다.
조건 문의 판단 흐름은 위의 이미지를 따른다.
만약에 주어진 값이 거짓이라면 1번 코드를 실행하고(혹은 바로 실행 종료)
주어진 값이 참이라면 2번 코드를 실행하고 실행을 종료한다.
실제로 아래와 같은 if문이 있다면
let age = 20;
if (age >= 19) {
console.log("성인입니다."); // age가 19 이상이므로 실행됩니다.
}age>= 가 참(true)이라면 {console.log("성인입니다.")} 를 실행하고
age>= 가 거짓(false)이라면 그냥 실행이 종료된다.
이처럼 그냥 if문은 조건식이 참이라면 코드를 실행하고 거짓이라면 코드를 그냥 패스해버린다.
신호등으로 비유하면
- if (신호등 = 초록불) {건넌다)
- 만약 신호등이 초록불이면 건넌다. 라고 할 수 있다.
2. if...else 문 (양자택일)
- 조건이 참일 때와 거짓일 때 각각 다른 코드 블록을 실행한다.
- if 문의 조건식이 참이면 if 블록이 실행되고, 거짓이면 else 블록이 실행된다.
if else문의 구조는 다음과 같다.
if (조건) {조건이 참일 때 실행할 코드}
else {조건이 거짓일 때 실행할 코드}
let age = 18;
if (age >= 19) {
console.log("성인입니다.");
} else {
console.log("미성년자입니다.");
}위의 if 문에서 거짓일 때(else) 실행할 코드 부분를 추가한 형태이다.
age>= 가 참(true)이라면 console.log("성인입니다.") 를 실행하고
age>= 가 거짓(false)이라면 else 부분인 console.log("미성년자입니다.") 를 실행한다.
신호등으로 비유하면
- if (신호등 = 초록불) {건넌다)
- else {건너지 않는다}
- 만약 신호등이 초록불이면 건넌다.
- 그렇지 않으면(신호등이 초록불이 아니면) 건너지 않는다. 라고 할 수 있다.
그런데 일반적으로 우리가 선택을 할 때 양자택일을 하는 경우는 거의 없다.
모임 장소로 식당을 고른다고 쳐도 한식, 양식, 일식, 중식 등등 다양한 종류가 있다.
때문에 이렇게 다중 조건을 처리하기 위해 사용하는 것이 바로 else if 문이다.
3. else if 문 (다중 조건)
여러 개의 조건을 순차적으로 검사하고, 참인 조건에 해당하는 코드 블록을 실행한다.
if 문의 조건이 거짓일 경우, 다음 else if 문의 조건을 검사한다.
모든 조건이 거짓일 경우, else 블록이 실행된다.
구조는 다음과 같다.
if (조건식1) {
// 조건식1이 참일 때 실행할 코드
} else if (조건식2) {
// 조건식2가 참일 때 실행할 코드
} else if (조건식3) {
// 조건식3이 참일 때 실행할 코드
} else {
// 모든 조건식이 거짓일 때 실행할 코드
}- 조건식 1이 참일 경우 코드 1을 실행하고
- 조건식 1은 거짓이지만 조건식 2는 참일 경우 코드 2를 실행하고
- 조건식 1, 2가 거짓이지만 조건식 3은 참일 경우 코드 3을 실행하고
- 모든 조건이 거짓이라면 else 코드를 실행한다.
여기서 조건식을 검사하는 것은 코드가 적혀진 순서대로 순차적으로 검사하게 된다.
예를 들어 친구 a와 만나서 갈 식당을 정할때 친구의 선호 음식을 기준으로 조건을 판단하는 것이다.
let 선호음식 = "일식"; // 친구의 선호 음식
if (선호음식 === "한식") {
console.log("한식당으로 갑니다. 메뉴는 비빔밥입니다.");
} else if (선호음식 === "양식") {
console.log("양식당으로 갑니다. 메뉴는 스테이크입니다.");
} else if (선호음식 === "일식") {
console.log("일식당으로 갑니다. 메뉴는 초밥입니다."); // 선호음식이 일식이므로 이 블록이 실행됩니다.
} else if (선호음식 === "중식") {
console.log("중식당으로 갑니다. 메뉴는 짜장면입니다.");
} else {
console.log("선호하는 음식이 없어 아무 식당이나 갑니다.");
}- 식당을 선택할 때 우선 요리의 종류를 먼저 떠올리고(한식, 양식, 일식)
- 해당 요리의 종류가 친구의 선호 음식인지를 판단하는 것이다.
- 때문에 친구의 선호 음식이 일식이라고 했을 경우
- 조건 1 한식 ≠ 일식이기에(거짓) pass
- 조건 2(else if)가 일식인지 판단하게 되고
- 조건 2 양식 ≠ 일식이기에(거짓) pass
- 조건 3(else if)가 일식인지 판단하게 되고
- 조건 3 일식 ≠ 일식이기에(참)이므로 해당 블록이 실행되게 된다.
조건 3에서 코드 블록이 실행됐기 때문에 조건 4인 else if (선호음식 === "중식") 까지 코드가 넘어가지 않고
마찬가지로 모든 조건이 거짓일 경우 실행되는 else 코드도 실행되지 않고 조건문이 끝나게 된다.
else if 문에서 else는 생략 가능
else if 문에서 else 부분은 생략 가능한데 else는 모든 앞선 조건이 거짓일 때 실행되는 선택적인 코드 블록이다.
따라서 모든 조건을 만족하지 않는 경우에 대한 특별한 처리가 필요하지 않다면 else 부분을 생략할 수 있다.
그런데 조건이라는 것이 꼭 1개만 만족해야 한다는 법은 없다.
예를 들어서 카페에서 음료수를 먹고자 하는데 생과일 주스를 선택한다면 이것은 조건 1번이다.
그런데 그 중 키위 주스를 선택한다면 이것은 조건 1번을 만족하지 않는가?(거짓인가)
이처럼 여러개의 조건을 중첩해서 만족하는 경우를 처리하기 위해 사용하는 것이 바로 중첩 if문이다.
4. 중첩 if 문 (복잡한 조건)
중첩 if 문은 if 문 안에 또 다른 if 문을 포함하는 구조입니다. 즉, 조건 안에 또 다른 조건을 검사해야 할 때 사용된다.
if (조건1) {
// 조건1이 참일 때 실행되는 코드
if (조건2) {
// 조건1과 조건2가 모두 참일 때 실행되는 코드
} else {
// 조건1은 참이고 조건2는 거짓일 때 실행되는 코드
}
} else {
// 조건1이 거짓일 때 실행되는 코드
}위의 음료를 고르는 조건을 예시로 설명하자면 다음과 같다. 우리가 카페에서 키오스크로 키위 주스를 선택하는 것과 동일한 맥락이다.
let 선택카테고리 = "생과일 주스"; // 키오스크에서 선택한 카테고리
let 선택주스 = "키위"; // 키오스크에서 선택한 생과일 주스 종류
let 얼음추가 = true; // 키오스크에서 얼음 추가 여부
let 시럽추가 = false; // 키오스크에서 시럽 추가 여부
if (선택카테고리 === "생과일 주스") {
console.log("생과일 주스를 선택하셨습니다.");
if (선택주스 === "키위") {
console.log("키위 주스를 선택하셨습니다.");
} else if (선택주스 === "딸기") {
console.log("딸기 주스를 선택하셨습니다.");
} else if (선택주스 === "바나나") {
console.log("바나나 주스를 선택하셨습니다.");
} else {
console.log("다른 종류의 생과일 주스를 선택하셨습니다.");
}
// 공통 옵션 처리
if (얼음추가) {
console.log("얼음을 추가합니다.");
}
if (시럽추가) {
console.log("시럽을 추가합니다.");
}
} else if (선택카테고리 === "커피") {
console.log("커피를 선택하셨습니다.");
} else {
console.log("다른 카테고리를 선택하셨습니다.");
}
console.log("주문이 완료되었습니다.");- 여러가지 음료 목록 중에 생과일 주스 버튼을 누른다
- 그렇다면 커피, 생과일 주스, 디저트 등 여러 메뉴판 중에 생과일 주스 메뉴판을 보여줄 것이다.
- 이후 나온 목록 중에 키위 주스를 버튼 누르면 키위 주스가 주문 내역에 추가되는 것이다.
- 그럼 해당 if문은 종료되고 가장 바깥 쪽 if문의 뒤쪽 코드가 다시 실행된다.
- 거기서 얼음 추가, 시럽 추가 코드를 각각 실행하게 된다.
- 만약에 생과일주스가 아니라 커피를 선택했다면 커피쪽 코드를 진행할 것이다.
2. switch
자바스크립트의 switch 문은 조건에 따라 여러 개의 실행 경로 중 하나를 선택하는 데 사용되는 제어문이다.
if...else if...else 문과 유사하게 작동하지만, 특정 변수 또는 표현식의 값에 따라 실행할 코드 블록을 결정하는 데 더 효율적이고 가독성이 좋다.
스위치 문의 기본 구조는 다음과 같다.
switch (표현식) {
case 값1:
// 표현식이 값1과 일치할 때 실행되는 코드
break;
case 값2:
// 표현식이 값2와 일치할 때 실행되는 코드
break;
case 값3:
// 표현식이 값3과 일치할 때 실행되는 코드
break;
default:
// 표현식이 어떤 값과도 일치하지 않을 때 실행되는 코드
}- 표현식이 case1과 일치(True)한다면 코드 실행 후 끝
- 일치하지 않는다면(False) case2로 넘어간다.
- 모두 일치하지 않으면 default 값의 코드를 실행하고 종료된다.
- 여기서 default 값은 있어도 되고 없어도 된다. 없다면 아무것도 실행하지 않고 종료된다.
예시 1 : 날짜로 요일 판별
약속 같은 것을 잡을 때 미래의 특정 일자가 어떤 요일인지 알아야 할 때가 있는데 달력을 보지 않고도 스위치 문을 사용해서 확인 할 수 있다.
let specificDate = new Date("2030-03-15"); // 특정 날짜 설정 (2030-03-15)
let dayOfWeek = specificDate.getDay(); // getDay() 메서드를 사용하여 요일 가져오기
// getDay() 메서드는 0부터 6까지의 숫자를 반환하며,
// 각 숫자는 다음과 같은 요일을 나타냅니다.
// 0: 일요일, 1: 월요일, 2: 화요일, 3: 수요일, 4: 목요일, 5: 금요일, 6: 토요일
switch (dayOfWeek) {
case 0:
console.log("2030년 3월 15일은 일요일입니다.");
break;
case 1:
console.log("2030년 3월 15일은 월요일입니다.");
break;
case 2:
console.log("2030년 3월 15일은 화요일입니다.");
break;
case 3:
console.log("2030년 3월 15일은 수요일입니다.");
break;
case 4:
console.log("2030년 3월 15일은 목요일입니다.");
break;
case 5:
console.log("2030년 3월 15일은 금요일입니다.");
break;
case 6:
console.log("2030년 3월 15일은 토요일입니다.");
break;
}
new date(), getDay()에 대해서
new date()
- new Date() 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.
- Date 객체는 1970년 1월 1일 00:00:00 UTC(국제표준시)를 기준으로 밀리초(milliseconds) 단위의 타임스탬프를 저장한다.
- 새로운 Date 객체를 생성하는 방법은 new 연산자를 사용하는 것이 유일하다.
- now = Date()처럼 Date를 직접 호출하면 새로운 Date 객체가 아니라 문자열을 반환한다.
- Date를 할당할 때 값이 입력되지 않은 요소는 해당 요소의 기본값으로 입력된다.
- 예를 들어 시간이라면 0시/0분/0초/0밀리초 식이며 날짜 중 월/일은 첫 시작이 1이기 때문에 1월/1일로 입력되며 연도는 1900년으로 입력된다.
- let specificDate = new Date("2030-03-15") 라면 연 : 2030, 월 : 3, 일 : 15, 시 : 0, 분 : 0, 초 : 0, 밀리초 : 0으로 입력되는 것이다.
- 여기서 연도를 제외하면 03-15라면 연이 1900으로 입력 되고 나머지 값은 동일하다
시간대까지 값을 입력할 때는 아래와 같은 형식으로 입력하게 된다.
let specificDate = new Date("2030-03-15T10:30:00"); // 2030년 3월 15일 10시 30분
console.log(specificDate);getDay() 메서드
- date 객체의 요일을 가져오는 메서드이며 요일을 숫자로 반환한다.
- 0: 일요일, 1: 월요일, 2: 화요일, 3: 수요일, 4: 목요일, 5: 금요일, 6: 토요일
new Date() 생성자는 UTC(협정 세계시)를 기준으로 한다
한국 표준시는 세계 협정시보다 +9시간 빠르다. (UTC 0시면 한국은 UTC 09시)
때문에 위의 코드대로라면 UTC 0시를 기준으로 하기 때문에 한국과 동일하게 요일이 나온다.
하지만 저곳에 시간 요소를 추가하면 UTC 기준 1월 1일 20시면 한국은 1월 2일 5시이기 때문에 다음날이 되어 요일이 달라진다.
때문에 시간 요소를 고려 할 경우 이런 시차도 고려해서 코드를 짜야 한다.
예시 2 : 음료 주문 키오스크
앞서 중첩 if문에서도 음료 주문 키오스크 코드를 짰었는데 switch 문을 사용하는 것이 명확하게 분기를 처리하기 때문에 가독성, 유지 보수 면에서 더 좋다.
let 선택카테고리 = "생과일 주스"; // 키오스크에서 선택한 카테고리
let 선택주스 = "키위"; // 키오스크에서 선택한 생과일 주스 종류
let 얼음추가 = true; // 키오스크에서 얼음 추가 여부
let 시럽추가 = false; // 키오스크에서 시럽 추가 여부
switch (선택카테고리) {
case "생과일 주스":
console.log("생과일 주스를 선택하셨습니다.");
switch (선택주스) {
case "키위":
console.log("키위 주스를 선택하셨습니다.");
break;
case "딸기":
console.log("딸기 주스를 선택하셨습니다.");
break;
case "바나나":
console.log("바나나 주스를 선택하셨습니다.");
break;
default:
console.log("다른 종류의 생과일 주스를 선택하셨습니다.");
break;
}
// 공통 옵션 처리
if (얼음추가) {
console.log("얼음을 추가합니다.");
}
if (시럽추가) {
console.log("시럽을 추가합니다.");
}
break;
case "커피":
console.log("커피를 선택하셨습니다.");
break;
default:
console.log("다른 카테고리를 선택하셨습니다.");
break;
}
console.log("주문이 완료되었습니다.");
3. 삼항 연산자(조건 연산자)
삼항 연산자는 조건에 따라 값을 선택하는 간결한 방법이다.
if-else 문을 한 줄로 줄여서 표현할 수 있어 코드 가독성을 높이는 데 유용하다.
조건식 ? 참일 때 값 : 거짓일 때 값
구성 요소
- 조건식 : 참(true) 또는 거짓(false)을 반환하는 표현식이다.
- 참일 때 값 : 조건식이 참일 때 반환되는 값이다.
- 거짓일 때 값 : 조건식이 거짓일 때 반환되는 값이다.
작동 방식
- 조건식을 평가한다.
- 조건식이 참이면 "참일 때 값"을 반환한다.
- 조건식이 거짓이면 "거짓일 때 값"을 반환한다.
예시
변수에 값을 할당할 때
let age = 20;
let isAdult = age >= 19 ? "성인" : "미성년자";함수에서 값을 반환할 때
function getDiscount(price) {
return price > 10000 ? price * 0.9 : price;
}간단한 조건에 따라 다른 값을 출력할 때
let isLoggedin = true;
console.log(isLoggedin ? "접속 중" : "로그아웃");이처럼 간단한 조건문은 삼항 연산자를 사용하는 것이 코드 가독성 측면에서 월등히 좋지만
2개 이상의 조건을 판별하지 못하기 때문에 그럴 경우 else if 문을 사용하는 것이 좋다.
'자바 스크립트(java script) > 자바 스크립트 기초' 카테고리의 다른 글
| 윈도우 객체 (0) | 2025.03.20 |
|---|---|
| 자바 스크립트 기초(9) - 반복문(loop, 루프) (0) | 2025.03.20 |
| 자바 스크립트 기초(7) - math object(계산) (0) | 2025.03.18 |
| 자바 스크립트 기초(6) - 연산자 (0) | 2025.03.18 |
| 자바 스크립트 기초(5) - 동적 언어, 타입 변환 (0) | 2025.03.18 |