Skip to Content
BlogJavaScript 정리기초 정리조건문과 반복문 if/switch부터 for...in, for...of까지

조건문과 반복문 if/switch부터 for…in, for…of까지

조건문 (if…else, switch)

if…else

조건에 따라 다른 코드를 실행할 때 사용하는 가장 기본적인 문법이다.

const score = 85;
 
if (score >= 90) {
  console.log("A등급");
} else if (score >= 80) {
  console.log("B등급");
} else if (score >= 70) {
  console.log("C등급");
} else {
  console.log("F등급");
}
// B등급
  • 조건은 위에서부터 순서대로 평가되고, 처음으로 참(truthy)이 되는 블록만 실행된다.
  • 조건식 안에서는 값이 boolean이 아니어도 truthy/falsy로 자동 변환되어 평가된다.
const name = "";
 
if (name) {
  console.log(`안녕하세요, ${name}님`);
} else {
  console.log("이름을 입력해주세요");
}
// 이름을 입력해주세요 ("" 는 falsy이기 때문)

삼항 연산자

간단한 조건은 if...else 대신 삼항 연산자로 한 줄에 처리할 수 있다.

const age = 20;
const message = age >= 19 ? "성인입니다" : "미성년자입니다";
console.log(message); // 성인입니다

조건이 복잡하거나 분기가 3개 이상이면 삼항 연산자를 중첩해서 쓰기보다는 if...else나 switch를 쓰는 게 가독성 면에서 낫다.

switch

하나의 값을 여러 경우와 비교해서 분기할 때 사용한다. 조건이 많고 각 조건이 특정 값과의 “일치 여부”를 비교하는 경우 if...else보다 깔끔하다.

const day = "수";
 
switch (day) {
  case "월":
  case "화":
  case "수":
  case "목":
  case "금":
    console.log("평일입니다");
    break;
  case "토":
  case "일":
    console.log("주말입니다");
    break;
  default:
    console.log("잘못된 입력입니다");
}
// 평일입니다
  • 각 case 뒤에 break를 빼먹으면, 다음 case로 실행이 그대로 이어지는 폴스루(fall-through) 현상이 발생한다. 위 예시처럼 여러 case를 묶어서 같은 동작을 시키고 싶을 때는 일부러 이 특성을 활용하기도 한다.
  • switch는 값 비교 시 ===(일치 비교)를 사용한다. 즉 타입까지 같아야 매칭된다.


반복문 (for, while, for…in, for…of)

for

반복 횟수가 정해져 있을 때 가장 많이 쓰는 반복문이다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0 1 2 3 4
  • 초기식; 조건식; 증감식 세 부분으로 구성된다.
  • break로 반복을 즉시 종료하거나, continue로 현재 회차만 건너뛸 수 있다.
for (let i = 0; i < 10; i++) {
  if (i === 3) continue; // 3만 건너뜀
  if (i === 6) break;    // 6에서 반복 종료
  console.log(i);
}
// 0 1 2 4 5

while

조건이 참인 동안 계속 반복한다. 반복 횟수가 정해져 있지 않고, 특정 조건이 만족될 때까지 반복해야 할 때 적합하다.

let count = 0;
while (count < 3) {
  console.log(count);
  count++;
}
// 0 1 2

do…while

조건 확인 전에 코드 블록을 최소 한 번은 무조건 실행한다는 점이 while과 다르다.

let num = 10;
do {
  console.log(num); // 조건이 false여도 한 번은 실행됨
  num++;
} while (num < 5);
// 10

for…in — 객체의 key 순회

객체의 열거 가능한 속성(key)을 순회할 때 사용한다.

const user = { name: "철수", age: 20, city: "서울" };
 
for (const key in user) {
  console.log(key, user[key]);
}
// name 철수
// age 20
// city 서울
  • 배열에도 사용할 수는 있지만, 배열의 인덱스도 사실 “key”로 취급하기 때문에 순서 보장이 안 되거나 프로토타입 체인의 속성까지 순회될 수 있어 배열에는 권장되지 않는다. 배열은 for...of나 배열 메서드를 쓰는 게 안전하다.

for…of — 반복 가능한 객체(iterable)의 값 순회

배열, 문자열, Map, Set처럼 반복 가능한(iterable) 객체의 값을 순회할 때 사용한다.

const arr = [10, 20, 30];
 
for (const value of arr) {
  console.log(value);
}
// 10 20 30
const str = "hi";
for (const char of str) {
  console.log(char);
}
// h i

일반 객체({})는 기본적으로 iterable이 아니기 때문에 for...of로 바로 순회할 수 없다. 객체를 순회하고 싶다면 Object.keys(), Object.values(), Object.entries()로 배열 형태로 변환한 뒤 for...of를 쓰는 방식이 흔히 쓰인다.

const user = { name: "철수", age: 20 };
 
for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// name 철수
// age 20

for...of가 iterable 객체를 순회할 수 있는 이유는 내부적으로 Symbol.iterator를 구현하고 있기 때문인데, 이 부분은 이후 “이터레이터와 제너레이터” 글에서 더 자세히 다룬다.

정리 — for…in vs for…of

구분순회 대상주 사용처
for…in객체의 key(속성 이름)일반 객체
for…ofiterable의 값배열, 문자열, Map, Set 등


마지막 수정