JavaScript 제어문

프로그래밍에서 제어문(Control Statement)은 프로그램의 흐름을 조건에 따라 바꾸거나 반복시키는 문법입니다.

저에게는 자바스크립트를 공부하면서 제일 재미있고 쉬운 부분이었습니다. 코드가 위에서 아래로만 흘러가는 것이 아니라, 내가 원하는 로직과 규칙에 따라 생각대로 움직이게 만들 수 있다는 사실이 흥미로웠습니다.

이번 글에서는 이러한 프로그램의 논리적 사고를 구축하는 기본 도구인 자바스크립트의 조건문과 반복문을 깊이 있게 살펴보면서, 제어문의 다양한 활용법과 깔끔한 코드 작성 팁까지 함께 익혀보도록 하겠습니다.

1. 조건문 (Conditional Statements)

조건문은 주어진 조건에 따라 실행할 코드 블록을 선택합니다.

1-1. if / else if / else

let score = 85;

if (score >= 90) {
  console.log("A 학점");
} else if (score >= 80) {
  console.log("B 학점");
} else {
  console.log("C 학점 이하");
}

조건을 위에서부터 차례로 검사
참(true)인 조건문의 블록만 실행

1-2. switch문

let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("사과입니다.");
    break;
  case "banana":
    console.log("바나나입니다.");
    break;
  default:
    console.log("알 수 없는 과일입니다.");
}

여러 경우의 수를 비교할 때 사용
break를 넣지 않으면 다음 case까지 실행됨

1-3. 삼항 연산자

삼항 연산자는 세 개의 피연산자를 가지는 유일한 연산자로, if…else 문을 한 줄로 간결하게 표현할 때 사용합니다. 간단한 조건에 따라 값을 반환하거나 실행할 때 유용하며, 코드 가독성을 높일 수 있습니다.

기본 문법: 조건 ? 참일 때 실행할 문장 : 거짓일 때 실행할 문장

let score = 85;
let result = score >= 80 ? "합격" : "불합격";
console.log(result); // 출력: 합격

if문과 비교해 간단한 조건 처리에 매우 효율적이지만, 복잡한 조건문에는 가독성이 떨어질 수 있으므로 상황에 맞게 사용하는 것이 좋습니다.

2. 반복문 (Loops)

반복문은 코드를 여러 번 실행할 수 있도록 합니다.

2-1. for문

for (let i = 0; i < 5; i++) {
  console.log(i);
}

초기값: let i = 0
조건식: i < 5
증감식: i++

2-2. while문

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

조건이true인 동안 계속 실행
조건이 처음부터 false라면 한 번도 실행되지 않음

2-3. do…while문

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

조건을 나중에 검사
최소 1회는 무조건 실행

2-4. for…of (배열 반복)

let fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
  console.log(fruit);
}

배열이나 iterable 객체를 반복할 때 사용
각 요소를 순서대로 꺼내옴

2-5. for…in (객체 속성 반복)

let person = { name: "Hae-na", age: 1 };

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

객체의 속성(key)을 반복
배열에는 권장되지 않음 (순서 보장 X)

2-6. 배열의 고차 함수 (forEach, map, filter 등)

현대 자바스크립트에서는 배열을 반복하는 새로운 방법으로 고차 함수를 자주 사용합니다. 이 함수들은 for 문보다 코드를 더 간결하고 직관적으로 작성할 수 있게 해줍니다.

forEach() 배열의 모든 요소를 순회하며 주어진 함수를 실행합니다. 반환값이 없습니다.

let numbers = [10, 20, 30];
numbers.forEach(function (num) {
  console.log(num * 2);
});
// 출력: 20, 40, 60

map() 배열의 모든 요소를 순회하며 함수를 실행한 후, 그 결과들을 모아 새로운 배열을 반환합니다.

let numbers = [1, 2, 3];
let doubled = numbers.map((num) => num * 2);
console.log(doubled); // 출력: [2, 4, 6]

filter() 배열의 각 요소를 순회하며 특정 조건을 만족하는(true인) 요소들만 모아 새로운 배열을 반환합니다.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4]

reduce() 배열의 모든 요소를 순회하며 값을 하나로 줄여(누적하여) 반환합니다. 주로 합산, 평균 계산 등에 사용됩니다.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 출력: 10

find() 배열의 각 요소를 순회하며 주어진 조건을 만족하는 첫 번째 요소의 값을 반환합니다. 조건을 만족하는 요소를 찾으면 즉시 순회를 멈춥니다.

let users = [{ name: "철수" }, { name: "영희" }];
let user = users.find((u) => u.name === "영희");
console.log(user); // 출력: { name: '영희' }

some() 배열의 요소 중 하나라도 주어진 조건을 만족하면 true를 반환하고, 아니면 false를 반환합니다.

let numbers = [1, 3, 5, 7];
let hasEven = numbers.some((num) => num % 2 === 0);
console.log(hasEven); // 출력: false

every() 배열의 모든 요소가 주어진 조건을 만족해야 true를 반환하고, 하나라도 만족하지 않으면 false를 반환합니다.

let numbers = [2, 4, 6, 8];
let allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // 출력: true

3. 반복 제어

반복문 안에서 흐름을 제어할 수 있습니다.

for (let i = 0; i < 5; i++) {
  if (i === 2) continue; // 2일 때는 건너뛰기
  if (i === 4) break; // 4일 때 반복 종료
  console.log(i);
}
// 출력: 0, 1, 3

continue: 현재 반복을 건너뛰고 다음 반복으로 넘어갑니다.
break: 현재 반복문을 완전히 종료하고 반복문 밖으로 빠져나옵니다.

4. Oneul Code를 정리하며…

오늘은 자바스크립트의 제어문을 학습했습니다.

조건문: if / else if / else, switch, 삼항연산자
반복문: for, while, do...while, for...of, for...in, 배열의 고차 함수
반복 제어: break, continue

조건문을 사용하면 상황에 따라 다른 로직을 실행할 수 있고, 반복문을 사용하면 같은 동작을 여러 번 자동으로 처리할 수 있습니다.

제어문은 프로그램의 흐름을 결정짓는 핵심 문법이므로, 변수와 데이터 타입과 함께 반드시 익혀야 하는 기초입니다.

Oneul Code는 오늘 배운 내용을 기록하며, 여러분도 직접 for, while 반복문을 돌려보고, break/continue 차이를 학습해보길 추천합니다.

Oneul Code - 08. The Power of Control: JavaScript Flow Statements