0Pricing
Frontend Academy · 강의

제어 흐름: if, else, switch, for, while

if/else와 switch로 분기하고 for와 while로 반복하며 break와 continue로 반복 실행을 제어합니다.

제어 흐름: if, else, switch, for, while은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

제어 흐름이란 무엇입니까

제어 흐름은 어떤 코드가 실행되고 몇 번 실행될지를 결정합니다. JavaScript는 조건에 따라 실행 경로를 제어할 수 있도록 조건문(if/else, switch)과 반복문(for, while, do/while)을 제공합니다.

if / else if / else 조건문

가장 기본적인 조건문입니다. 괄호 안의 조건은 참 같은 값인지 거짓 같은 값인지 평가됩니다. 여러 조건은 else if로 연결합니다. 마지막 else는 어떤 조건에도 맞지 않을 때를 처리하는 대체 처리입니다.

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

삼항 연산자

삼항 연산자는 간결한 인라인 조건문입니다: condition ? trueValue : falseValue. 간단한 할당과 JSX 표현식에 사용합니다. 삼항 연산자를 중첩하지 마십시오. 금세 읽기 어려워집니다.

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

switch 문

switch는 엄격한 일치 비교를 사용하여 하나의 값을 여러 경우와 비교합니다. 각 경우 뒤에 break를 사용하여 다음 경우로 이어지는 것을 방지하십시오. 일치하는 값이 없을 때는 default가 처리합니다.

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

for 반복문

고전적인 C 스타일 for 반복문입니다: 초기화; 조건; 증가의 형태로 작성합니다. 반복 횟수가 정해져 있거나 인덱스로 배열을 순회할 때 가장 적합합니다.

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

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

for...of 반복문

for...of는 반복 가능한 모든 대상의 값(배열, 문자열, 맵, 집합)을 순회합니다. 인덱스가 필요하지 않을 때는 인덱스 기반 for 반복문보다 더 깔끔합니다.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

for...in 반복문

for...in은 객체의 열거 가능한 속성 키를 순회합니다. 배열에는 사용하지 마십시오. 대신 for...of나 배열 메서드를 사용하십시오.

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

while 반복문

while 반복문은 조건이 참 같은 값인 동안 실행됩니다. 반복 횟수를 미리 알 수 없을 때 사용하십시오. 예를 들어 사용자가 유효한 값을 입력할 때까지 입력을 읽을 때 유용합니다.

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

do...while 반복문

do...while은 조건을 확인하기 전에 본문을 최소 한 번 실행합니다. 종료 조건을 평가하기 전에 본문을 먼저 실행해야 할 때 유용합니다.

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break와 continue

break는 현재 반복문을 즉시 종료합니다. continue는 현재 반복의 나머지 부분을 건너뛰고 다음 반복으로 이동합니다. 두 구문 모두 for, while, do/while 반복문에서 사용할 수 있습니다.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

단락 평가

&&는 처음 만나는 거짓 같은 값이나 마지막 값을 반환합니다. ||는 처음 만나는 참 같은 값이나 마지막 값을 반환합니다. ??(널 병합)는 왼쪽 값이 null 또는 undefined일 때만 오른쪽 값을 반환합니다.

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

빠른 확인

본문이 최소 한 번 실행되는 것이 보장되는 반복문은 무엇입니까?

복습: JavaScript 제어 흐름

분기에는 if/else를 사용합니다. 여러 개별 값에는 switch를 사용합니다. 반복 횟수가 정해져 있으면 for 반복문을 사용합니다. 반복 가능한 대상에는 for...of를 사용합니다. 반복 횟수를 모르면 while을 사용합니다. 최소 한 번 실행해야 하면 do...while을 사용합니다. break는 반복문을 종료하고, continue는 반복을 건너뜁니다. 단락 연산자는 간결한 조건문에 사용합니다.

자주 묻는 질문

“제어 흐름: if, else, switch, for, while” 강의는 무료인가요?

네 — “제어 흐름: if, else, switch, for, while” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“제어 흐름: if, else, switch, for, while”에서 뭘 배우나요?

if/else와 switch로 분기하고 for와 while로 반복하며 break와 continue로 반복 실행을 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“제어 흐름: if, else, switch, for, while” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 변수: let, const, var 및 범위
  2. 데이터 유형: string, number, boolean, null, undefined
  3. 함수: 선언, 표현식, 화살표 함수
  4. 제어 흐름: if, else, switch, for, while
← Frontend Academy(으)로 돌아가기