JavaScript 조건문: 제어 흐름 마스터하기

소개

이 랩에서는 JavaScript 에서 조건문을 사용하는 방법을 배우게 됩니다. 조건문은 특정 조건이 참인지 거짓인지에 따라 다른 코드 블록을 실행할 수 있게 해주는 프로그래밍의 기본적인 부분입니다. 이를 통해 의사 결정을 내리고 그에 따라 동작을 변경할 수 있는 동적이고 반응적인 애플리케이션을 만들 수 있습니다.

다음과 같은 주요 개념을 다룰 것입니다.

조건이 참일 때 코드를 실행하는 if 문.
대안 경로를 제공하는 else 절.
여러 조건을 확인하는 else if 문.
느슨한 동등성 (==) 연산자와 엄격한 동등성 (===) 연산자의 차이점.

이 랩이 끝나면 이러한 필수 도구를 사용하여 프로그램의 흐름을 제어하는 방법을 보여주는 간단한 스크립트를 작성하게 될 것입니다.

비교를 사용하여 if 문 작성하기

이 단계에서는 JavaScript 에서 가장 기본적인 조건문인 if 문을 사용하는 방법을 배우게 됩니다. if 문은 지정된 조건이 true로 평가될 경우에만 코드 블록을 실행합니다.

기본 구문은 다음과 같습니다.

if (condition) {
  // 조건이 참일 때 실행될 코드
}

시간에 따라 인사말을 표시하는 스크립트를 만들 것입니다. 먼저 아침인지 확인해 보겠습니다.

WebIDE 왼쪽의 파일 탐색기에서 script.js 파일을 찾아 엽니다.
script.js에 다음 코드를 추가합니다. 이 코드는 시스템에서 현재 시간을 가져오고, 시간이 12 시보다 작으면 HTML 페이지의 <h1> 요소 텍스트를 변경합니다.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
}

코드를 추가한 후 파일을 저장합니다 (Ctrl+S 또는 Cmd+S 사용 가능).
결과를 보려면 인터페이스 상단의 Web 8080 탭을 클릭합니다. 현재 시간이 정오 이전이면 "Good Morning!" 메시지가 표시됩니다. 그렇지 않으면 메시지는 "Hello!"로 유지됩니다.

JavaScript if 문 예시

대체 경로를 위한 else 절 추가

이 단계에서는 if 문에 else 절을 추가하게 됩니다. else 절을 사용하면 if 문의 조건이 false일 경우 실행될 코드 블록을 지정할 수 있습니다. 이는 프로그램 로직에 대한 대안 경로를 제공합니다.

구문은 다음과 같습니다.

if (condition) {
  // 조건이 참일 때 실행될 코드
} else {
  // 조건이 거짓일 때 실행될 코드
}

아침이 아닐 경우 다른 인사말을 표시하도록 스크립트를 수정해 보겠습니다.

편집기에서 script.js 파일을 다시 엽니다.
기존 코드에 else 블록을 포함하도록 수정합니다. 이렇게 하면 currentHour < 12 조건이 거짓일 경우 인사말이 "Good Afternoon!"으로 설정됩니다.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else {
  greetingElement.textContent = "Good Afternoon!";
}

script.js 파일을 저장합니다.
Web 8080 탭으로 전환하여 변경 사항을 확인합니다. 이제 시간이 정오를 지났다면 메시지가 "Hello!"에서 "Good Afternoon!"으로 변경됩니다.

다중 조건을 위한 else if 사용

이 단계에서는 else if 문을 사용하여 여러 조건을 처리하는 방법을 배우게 됩니다. 두 가지 이상의 가능한 결과가 있을 때, else if를 사용하면 일련의 조건을 순서대로 테스트할 수 있습니다.

구문은 다음과 같습니다.

if (condition1) {
  // condition1 에 대한 코드
} else if (condition2) {
  // condition2 에 대한 코드
} else {
  // 어떤 조건도 충족되지 않을 경우의 코드
}

저녁 시간을 위한 메시지를 포함하도록 인사말 스크립트를 확장해 보겠습니다. "오후"는 오후 6 시 (18:00) 이전으로 정의하고, 그 이후 시간은 "저녁"으로 정의합니다.

script.js 파일에서 else if 조건을 포함하도록 코드를 업데이트합니다. 이제 로직은 다음과 같습니다.
- 시간이 12 시 이전이면 "Morning"입니다.
- 그렇지 않고 시간이 18 시 이전이면 "Afternoon"입니다.
- 그렇지 않으면 "Evening"입니다.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else if (currentHour < 18) {
  greetingElement.textContent = "Good Afternoon!";
} else {
  greetingElement.textContent = "Good Evening!";
}

파일을 저장하고 Web 8080 탭을 새로고침합니다. 이제 인사말은 현재 시간에 따라 아침, 오후 또는 저녁인지 정확하게 반영합니다.

조건에 등가 연산자 == 적용

이 단계에서는 equality operator ==에 대해 알아보겠습니다. 이 연산자는 "느슨한" 또는 "추상적인" equality 연산자로도 알려져 있으며, 두 값을 공통 타입으로 변환하려고 시도한 후 동등성을 비교합니다.

예를 들어, 숫자 10과 문자열 '10'은 ==를 사용할 때 동등한 것으로 간주됩니다.

이를 실제로 보기 위해 스크립트에 새로운 코드를 추가할 것입니다. 이 코드는 인사말에 영향을 주지 않지만, 브라우저의 개발자 콘솔에 메시지를 기록합니다.

script.js 파일 끝에 다음 코드를 추가합니다.

let numberValue = 10;
let stringValue = "10";

if (numberValue == stringValue) {
  console.log("The == operator says they are equal!");
}

파일을 저장합니다. 출력을 보려면 개발자 콘솔을 열어야 합니다.
Web 8080 탭에서 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "Inspect" 또는 "Inspect Element"를 선택합니다. 그러면 개발자 도구가 열립니다.
개발자 도구 내에서 "Console" 탭을 클릭합니다. 다음과 같은 메시지가 표시되어야 합니다: The == operator says they are equal!. 이는 JavaScript 가 비교 전에 타입을 변환했음을 확인시켜 줍니다.

=== 연산자로 엄격한 등가성 테스트

이 마지막 단계에서는 strict equality operator ===에 대해 배우게 됩니다. loose equality operator (==) 와 달리, strict equality operator 는 피연산자의 값과 타입을 모두 비교합니다. 타입 변환을 수행하지 않습니다.

이는 JavaScript 에서 동등성 검사에 일반적으로 권장되는 연산자입니다. 왜냐하면 더 예측 가능하게 작동하고 미묘한 버그를 방지하는 데 도움이 되기 때문입니다.

이전 단계의 예제를 ===를 사용하도록 수정하고 차이점을 관찰해 보겠습니다.

script.js 파일 끝에 다음 새 코드 블록을 추가합니다.

let numberValueStrict = 10;
let stringValueStrict = "10";

if (numberValueStrict === stringValueStrict) {
  console.log("The === operator says they are equal!");
} else {
  console.log(
    "The === operator says they are NOT equal, because their types are different."
  );
}

파일을 저장하고 Web 8080 탭의 개발자 콘솔을 다시 확인합니다. 페이지를 새로고침해야 할 수도 있습니다.
이번에는 다음과 같은 메시지가 표시됩니다: The === operator says they are NOT equal, because their types are different.. 이는 numberValueStrict가 number이고 stringValueStrict가 string이기 때문에 === 연산자가 이를 다르게 올바르게 식별하기 때문입니다.

Developer console showing strict equality comparison result

요약

이 랩을 완료하신 것을 축하드립니다! 개발자에게 필수적인 기술인 JavaScript 의 조건부 로직 기초를 배웠습니다.

이 랩에서는 다음을 수행했습니다:

if 문을 사용하여 단일 조건에 따라 코드를 실행했습니다.
대안적인 경우를 처리하기 위해 else 절을 추가했습니다.
여러 순차적인 조건을 관리하기 위해 else if를 구현했습니다.
타입 변환을 수행하는 loose equality operator (==) 를 이해하고 적용했습니다.
값과 타입을 모두 확인하는 strict equality operator (===) 를 이해하고 적용했으며, 대부분의 비교에 권장되는 선택입니다.

조건문을 숙달하면 지능적이고 반응성이 뛰어나며 다양한 시나리오를 처리할 수 있는 코드를 작성할 수 있습니다.