5장: 제어 흐름 - 조건문

자바스크립트 첫걸음: 조건문과 제어 흐름

프로그래밍 언어가 가진 가장 큰 힘 중 하나는 상황에 따라 코드를 다르게 실행할 수 있다는 데에 있습니다. 자바스크립트 역시 조건문을 통해 프로그램의 흐름을 유연하게 제어할 수 있습니다. 이 장에서는 조건문, 특히 if, else if, else의 활용법을 하나씩 이해하고, 실제 예제를 통해 어떻게 동작하는지 살펴봅니다.

조건문이란?

조건문은 프로그램이 어떤 조건을 검사해 참일 때와 거짓일 때 서로 다른 코드를 실행하도록 돕는 문법입니다. 웹사이트에서 사용자의 입력값이 올바른지 판단하거나, 버튼을 눌렀을 때 특정 동작을 하도록 만드는 데 자주 응용됩니다.

if문 – 가장 기본적인 조건문

if문은 작성한 조건식이 참(true)일 때 코드 블록을 실행합니다. 자바스크립트로 예를 들어보면 아래와 같습니다:

let age = 20;
if (age >= 19) {
  alert('성인입니다.');
}

위 코드에서 변수 age가 19보다 크거나 같으면, 브라우저에 '성인입니다.'라는 알림이 표시됩니다.

else 및 else if – 다양한 상황 다루기

if문만으로는 두 가지 경우밖에 처리할 수 없습니다. 조건이 거짓일 때 다른 결과를 원한다면 else를 사용합니다.

let password = '1234';
if (password === 'qwerty') {
  alert('비밀번호가 맞습니다.');
} else {
  alert('비밀번호가 다릅니다.');
}

여러 가능한 경우를 구분하고 싶다면, else if 를 연결할 수 있습니다.

let score = 85;
if (score >= 90) {
  alert('수(優)입니다.');
} else if (score >= 80) {
  alert('우(優)입니다.');
} else {
  alert('기타 등급입니다.');
}

논리 연산자와 조건 결합하기

실제 상황은 종종 여러 조건을 함께 판단해야 하는데, 이럴 때는 논리 연산자를 사용합니다. &&(그리고), ||(또는), !(반대) 연산자로 조건을 감쌀 수 있습니다.

let id = 'user';
let pw = 'pass';
if (id === 'user' && pw === 'pass') {
  alert('로그인 성공');
} else {
  alert('다시 시도해 주세요.');
}

조건문의 실전 활용

조건문은 웹페이지의 상호작용을 결정짓는 중요한 도구입니다. 입력값이 비었는지 확인하거나, 옵션을 선택했을 때 다른 기능을 추가할 때 유용하게 쓰일 수 있습니다.

let input = '';
if (!input) {
  alert('입력칸이 비었습니다!');
}

마무리하며

조건문을 제대로 이해하고 활용하면, 자바스크립트 코드의 흐름을 원하는 대로 조작할 수 있습니다. 이제 여러분도 다양한 조건에 따라 프로그램이 달리 동작하도록 만들 준비가 된 셈입니다. 다음 장에서는 반복문을 통해 좀 더 다양한 제어 흐름을 경험해 보게 됩니다.