Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript if-else 문 완벽 가이드: 단계별로 배우는 조건문

JavaScript의 if…else 문은 주어진 조건이 참(true)인지 거짓(false)인지 판별합니다. 조건이 참이면 if 블록 내부의 코드가 실행되고, 거짓이면 else 블록의 코드가 실행됩니다. 또한 else…if 문을 활용하면 여러 개의 조건을 순차적으로 검사할 수 있습니다.

조건문, 왜 필요할까요?

프로그래밍을 하다 보면 특정 상황에 따라 서로 다른 코드 블록을 실행해야 하는 경우가 자주 발생합니다. 이때 필요한 것이 바로 조건문(conditional statement)입니다. 조건문은 모든 프로그래밍 언어의 핵심 요소로, 특정 조건이 충족될 때만 지정된 코드 블록을 실행하도록 만들어 줍니다.

조건문이 유용하게 쓰이는 대표적인 예시는 다음과 같습니다:

  • 사용자가 입력한 비밀번호가 저장된 비밀번호와 일치하는지 확인
  • 특정 이메일 주소로 등록된 계정이 존재하는지 검사
  • 모든 필드가 작성되었을 때만 폼(form) 제출 허용
  • 로그인한 사용자에게만 휴일 할인 목록 표시

이 예시들의 공통점은 모두 "~라면(if)"이라는 논리를 사용한다는 점입니다. 어떤 일이 발생하면, 그에 따른 다른 동작이 이루어지는 것이죠. 지금부터 이러한 논리를 JavaScript에서 어떻게 구현하는지 하나씩 살펴보겠습니다.

JavaScript if 문

JavaScript의 if 문은 조건식이 참인지 거짓인지 평가하며, 오직 조건이 참일 때만 코드를 실행합니다. 조건이 거짓이면 아무 일도 일어나지 않습니다.

if 문은 if 키워드로 시작하며, 그 뒤에 소괄호 () 안에 평가할 조건(또는 여러 조건)을 작성합니다. 실행할 코드는 중괄호 {}로 감싸줍니다.

JavaScript if 문의 기본 문법은 다음과 같습니다:

if (조건식) {
  // 조건식이 참일 때 실행되는 코드
}

if 문 예제

실제 예제를 통해 if 문이 어떻게 동작하는지 알아보겠습니다. 온라인 쇼핑몰을 운영하면서 구매자가 반드시 16세 이상이어야 한다고 가정해 봅시다. 다음은 사용자의 나이를 확인해 구매 가능 여부를 판단하는 코드입니다:

const userAge = 15;

if (userAge < 16) {
  console.log("구매하기에는 나이가 너무 어립니다!");
}

위 코드를 실행하면 다음과 같은 결과가 출력됩니다:

구매하기에는 나이가 너무 어립니다!

비교 연산자 <(미만)를 사용해 사용자의 나이가 16보다 작은지 검사했습니다. 사용자의 나이가 15살이므로 userAge < 16은 참(true)이 되고, if 문 안의 코드가 실행됩니다.

반면 사용자의 나이가 16이라면 어떻게 될까요? 이 경우 userAge < 16은 거짓(false)이 되므로 if 블록의 코드는 무시되고, 프로그램은 그대로 다음 코드를 실행합니다.

JavaScript if…else 문

if…else 문은 조건이 참인지 평가하고, 참이면 if 블록의 코드를, 거짓이면 else 블록의 코드를 실행합니다. 즉, 조건의 참·거짓 여부와 관계없이 두 블록 중 하나는 반드시 실행됩니다.

if…else 문의 문법은 다음과 같습니다:

if (조건식) {
  // 조건이 참일 때 실행되는 코드
} else {
  // 조건이 거짓일 때 실행되는 코드
}

else 문은 if 문 뒤에 위치하며, 하나의 if 문에는 else 문을 하나만 포함할 수 있습니다.

참고로 JavaScript에서 true와 false가 동작하는 원리가 궁금하다면 Boolean 관련 가이드를 함께 참고해 보세요.

if…else 문 예제

앞서 살펴본 나이 확인 예제에 else 문을 추가해 보겠습니다. 이번에는 구매가 정상적으로 진행된다는 메시지도 함께 출력하도록 만들어 보겠습니다.

const userAge = 17;

if (userAge < 16) {
  console.log("구매하기에는 나이가 너무 어립니다!");
} else {
  console.log("결제가 진행 중입니다.");
}

실행 결과는 다음과 같습니다:

결제가 진행 중입니다.

사용자의 나이를 담는 변수 userAge를 선언했습니다. 사용자가 16세보다 나이가 많기 때문에 if 문은 건너뛰고 else 절의 코드가 실행됩니다. 만약 사용자의 나이가 12살이라면 else 절은 실행되지 않고 if 블록의 코드가 대신 실행됩니다.

else 문은 다양한 상황에서 활용할 수 있습니다. 예를 들어 오류가 발생했을 때 이를 처리하거나, 폼 입력 내용을 검증해 사용자가 잘못 입력했거나 필수 항목을 누락했을 때 안내 메시지를 보여주는 용도로도 사용할 수 있습니다.

JavaScript else…if 문

else…if 문은 여러 조건 중 하나라도 참인지를 순차적으로 평가합니다. 각 else…if 문은 새로운 조건을 검사하며, 어떤 조건도 충족되지 않으면 아무 코드도 실행되지 않습니다(else 블록이 있다면 그것이 실행됩니다).

여러 개의 else…if 문을 사용하는 문법은 다음과 같습니다:

if (조건1) {
  // 조건1이 참일 때 실행되는 코드
} else if (조건2) {
  // 조건2가 참일 때 실행되는 코드
} else {
  // 위의 모든 조건이 거짓일 때 실행되는 코드
}

프로그램은 조건1부터 시작해 위에서부터 차례대로 각 조건을 검사하고, 모든 조건이 거짓일 경우 마지막 else 블록의 코드가 실행됩니다.

else…if 문은 필요한 만큼 몇 개든 추가할 수 있으며, 각 조건 블록 안에는 해당 조건이 충족될 때 실행할 코드를 작성하면 됩니다.

else…if 문 예제

else…if 문이 실제로 어떻게 활용되는지 예제를 통해 살펴보겠습니다. 영화관을 운영하면서 관객의 나이에 따라 차등 티켓 가격을 적용하고 싶다고 가정해 봅시다. 가격 정책은 다음과 같습니다:

  • 10세 이하: 5달러
  • 11~17세: 8달러
  • 18~64세: 12달러
  • 65세 이상: 8달러

다음은 고객의 나이를 확인해 적절한 티켓 가격을 반환하는 프로그램 예제입니다:

var age = 27;
var ticketPrice = 0;

if (age <= 10) {
  ticketPrice = 5;
} else if (age >= 11 && age <= 17) {
  ticketPrice = 8;
} else if (age >= 18 && age <= 64) {
  ticketPrice = 12;
} else {
  ticketPrice = 8;
}

console.log(ticketPrice);

위 코드를 실행하면 결과값으로 12가 출력됩니다.

코드의 흐름을 살펴보겠습니다. 먼저 나이가 10 이하인지 검사하고, 다음으로 11~17세 사이인지, 그다음으로 18~64세 사이인지 차례로 확인합니다. 이 사용자의 나이는 27살이므로 세 번째 조건이 참이 되어 해당 블록의 코드가 실행되고, 티켓 가격은 12달러로 설정됩니다.

💡 팁: 위 예제처럼 범위를 검사할 때는 논리 AND 연산자(&&)를 사용해 두 조건을 동시에 확인할 수 있습니다. 또한 조건문의 순서를 잘 설계하면 불필요한 검사를 줄여 코드를 더 간결하게 만들 수 있습니다.

마치며

JavaScript의 if else 문을 사용하면 특정 조건이 충족되는지에 따라 프로그램에서 실행할 코드를 결정할 수 있습니다. 모든 프로그래밍 언어는 코드에 논리를 부여하기 위해 조건문을 활용합니다.

이번 가이드에서는 JavaScript에서 if, if…else, else…if 문을 사용하는 방법을 알아보았습니다. 이제 여러분도 프로처럼 조건 연산자를 활용할 준비가 되었습니다!

JavaScript 학습에 도움이 되는 강좌와 추가 학습 자료가 필요하다면, "How to Learn JavaScript" 가이드도 함께 참고해 보세요.