JavaScriptJavaScript 기초강의 10개 중 2번째난이도 입문

조건문과 반복문 — 프로그램의 흐름 만들기

발행 읽는 시간 약 2 분

  • JavaScript
  • 조건문
  • 반복문
  • if
  • for
  • while

강의 소개

if/else 조건문과 for/while 반복문을 배우고 프로그램이 상황에 따라 다르게 동작하도록 흐름을 제어하는 방법을 익힙니다.

"점수에 따라 다른 메시지를 보여주고 싶어요"#

점수가 90점 이상이면 "우수", 60점 이상이면 "보통", 그 이하면 "노력 필요"를 보여주는 로직. 이런 분기 처리가 조건문입니다.

그리고 같은 작업을 100번 반복해야 할 때 코드를 100번 쓰는 대신 반복문을 씁니다.


조건문 — if / else if / else#

JavaScript
let score = 85;

if (score >= 90) {
  console.log("우수");
} else if (score >= 60) {
  console.log("보통");
} else {
  console.log("노력 필요");
}
// 출력: 보통

비교 연산자#

JavaScript
10 > 5      // true  (크다)
10 < 5      // false (작다)
10 >= 10    // true  (크거나 같다)
10 <= 9     // false (작거나 같다)
10 === 10   // true  (같다)
10 !== 5    // true  (다르다)

=== 은 값과 타입이 모두 같을 때 true입니다. == 는 타입을 자동 변환해서 비교하므로 예상치 못한 결과가 나올 수 있어 === 를 권장합니다.

JavaScript
10 == "10"    // true  (자동 변환)
10 === "10"   // false (타입이 다름)

논리 연산자#

JavaScript
// && (AND): 둘 다 참일 때
let age = 15;
if (age >= 13 && age <= 19) {
  console.log("청소년");
}

// || (OR): 하나라도 참일 때
let day = "토요일";
if (day === "토요일" || day === "일요일") {
  console.log("주말!");
}

// ! (NOT): 참/거짓 반전
let isLoggedIn = false;
if (!isLoggedIn) {
  console.log("로그인이 필요합니다.");
}

조건부 표현식 (삼항 연산자)#

간단한 조건은 한 줄로 쓸 수 있습니다.

JavaScript
// 조건 ? 참일때값 : 거짓일때값
let score = 75;
let result = score >= 60 ? "합격" : "불합격";
console.log(result);   // 합격

switch 문#

여러 경우 중 하나를 선택할 때 if-else보다 읽기 편합니다.

JavaScript
let day = 3;

switch (day) {
  case 1:
    console.log("월요일");
    break;
  case 2:
    console.log("화요일");
    break;
  case 3:
    console.log("수요일");
    break;
  default:
    console.log("기타");
}
// 출력: 수요일

break를 빼면 다음 case로 계속 실행되므로 반드시 붙입니다.


반복문 — for#

정해진 횟수만큼 반복합니다.

JavaScript
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0, 1, 2, 3, 4

// 1부터 10까지 합계
let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;   // sum = sum + i
}
console.log(sum);   // 55

for 문 구조:

Text
for (초기값; 조건; 증감) { 반복할 코드 }

반복문 — while#

조건이 참인 동안 계속 반복합니다.

JavaScript
let count = 0;

while (count < 5) {
  console.log(`카운트: ${count}`);
  count++;
}
// 카운트: 0, 1, 2, 3, 4

조건을 잘못 설정하면 무한 반복에 빠질 수 있으므로 주의합니다.


배열과 반복문#

배열(Array)은 여러 값을 순서대로 담는 컨테이너입니다.

JavaScript
let fruits = ["사과", "바나나", "딸기", "포도"];

// 인덱스로 접근 (0부터 시작)
console.log(fruits[0]);   // 사과
console.log(fruits[2]);   // 딸기

// 배열 길이
console.log(fruits.length);   // 4

// for 반복으로 모두 출력
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...of (더 간단)
for (let fruit of fruits) {
  console.log(fruit);
}

실전 예제: 구구단#

JavaScript
// 3단 출력
for (let i = 1; i <= 9; i++) {
  console.log(`3 × ${i} = ${3 * i}`);
}

// 전체 구구단 (중첩 반복문)
for (let dan = 2; dan <= 9; dan++) {
  console.log(`=== ${dan}단 ===`);
  for (let i = 1; i <= 9; i++) {
    console.log(`${dan} × ${i} = ${dan * i}`);
  }
}

직접 해보기 ✏️#

  1. 변수 score를 만들고 점수에 따라 등급을 출력하는 코드를 작성하세요.

    • 90 이상: A
    • 80 이상: B
    • 70 이상: C
    • 그 이하: D
  2. 1부터 100까지 숫자 중 3의 배수만 출력하는 코드를 작성하세요. (힌트: % 연산자는 나머지)

JavaScript
// 나머지 연산자 예시
10 % 3   // 1 (10을 3으로 나눈 나머지)
9 % 3    // 0 (나머지가 0이면 3의 배수)

정리#

개념문법
조건문if (조건) {} else {}
삼항 연산자조건 ? 참 : 거짓
switch 문switch(값) { case: ... }
for 반복for (초기; 조건; 증감) {}
while 반복while (조건) {}
for...offor (let item of 배열) {}

다음 편에서는 코드를 재사용 가능하게 만드는 함수(Function) 를 배웁니다.

Follow · Ask · Work

이 글이 도움이 됐다면

짧은 작업 기록과 데모는 인스타그램에 올립니다. 만들고 싶은 것이 있다면 프로젝트 의뢰나 협업 제안도 편하게 보내 주세요.

글쓴이

파란여우

직접 만든 AI 앱·제품의 개발·배포를 공개하는 실전형 테크 크리에이터

파란여우 소개 Instagram @bluefox._.hi

이어서 보기

만들고 싶은 것이 있다면 프로젝트 의뢰로 알려 주세요.