반복문

지정한 조건이 참으로 평가되는 동안 지정된 코드 블록을 반복 실행하는 프로그래밍 구문. 자바스크립트에서 while, do...while, for, for...in, for...of와 같은 반복문 제공

do...while

코드 블록을 먼저 실행한 후 조건 평가하여 반복 여부 결정

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

// 출력값:
// 3

while

조건을 먼저 평가한 후 참일 경우 코드 블록 실행

let j = 3;
while (j < 3) {
  console.log(j);
  j++;
}

// 출력값:
// (아무것도 출력되지 않음)

• 이 예시에서 do...while은 초기 조건이 이미 false여도 코드 블록을 한 번 실행함. 반면 while은 조건이 처음부터 false이므로 코드 블록을 전혀 실행하지 않음. 이것이 두 반복문의 주요 차이점임

for

for문은 가장 많이 사용되는 일반적인 반복문

for(초기문;조건문;증감문){

}

for문 실행 순서

1. 초기문 실행
2. 조건문의 참 거짓 판별
3. 조건문이 참이면 블록({}) 안의 코드를 한 번 실행, 거짓이면 반복문 종료
4. 증감문 실행
5. 2번부터 과정 반복

예제코드

for (let i = 1; i <= 3; i++) {
  console.log(i);
}

// 출력값:
// 1
// 2
// 3

이 코드 설명:

• 초기문 let i = 1: 변수 i를 1로 초기화
• 조건문 i <= 3: i가 3 이하일 때까지 반복
• 증감문 i++: 매 반복마다 i를 1씩 증가
• console.log(i): 각 반복에서 현재 i 값 출력

배열 순회 예시

const str = "Hello";
const strArr = ["H", "e", "l", "l", "o"];

for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

문자열도 배열과 유사하게 인덱스로 접근 가능

do...while, while, for 반복문은 배열에 사용 가능하나, 객체에는 직접 적용 불가능

유연한 사용
🧠 두뇌회전 - "형식에 갇히지 말 것"
strArr 부분에 직접 배열 넣기 가능:

for (let i = 0; i < ["H", "e", "l", "l", "o"].length; i++) {
  console.log(str[i]);
}

for...in 반복문

기본 개념

for...in 루프: 객체의 모든 속성을 하나씩 살펴보는 방법

• 배열 → 인덱스 접근
• 객체 → 키 접근

객체 순회 예시

const obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
  console.log(`${prop}: ${obj[prop]}`);
}

// 출력:
// a: 1
// b: 2
// c: 3

for...in: 주로 객체의 속성을 순회할 때 사용. 배열에는 for...of나 일반 for 루프가 더 적합

배열 순회 예시

const strArr = ["H", "e", "l", "l", "o"];
for (let index in strArr) {
  console.log(strArr[index]);
}

index: 배열의 인덱스 번호를 의미. 이름 변경 가능

console.log(index) 사용 시 배열의 인덱스 번호 값 출력:

const strArr = ["H", "e", "l", "l", "o"];

for (let i in strArr) {
  console.log(i);
}

//0
//1
//2
//3
//4

객체 속성 접근 시 주의사항

for...in 루프에서 점 표기법 사용 시 주의 필요. 예제:

const userObj = {
  name: "철수",
  age: 30,
};

console.log(userObj.name); // "철수"

for (let key in userObj) {
  console.log(userObj.name); // "철수"
  console.log(userObj.key); // undefined
  console.log(userObj[key]); // "철수", 30
}

예제 설명:

• console.log(userObj.name): 루프 안에서도 항상 "철수" 출력. 직접 'name' 속성에 접근하기 때문
• userObj.key: undefined 반환. userObj 객체에 실제로 'key'라는 이름의 속성이 없기 때문
• userObj[key]: 각 반복에서 해당 속성의 값("철수", 30) 출력. key 변수의 값을 사용하여 동적으로 속성에 접근하기 때문

for...in 루프에서 객체의 모든 속성에 접근: 대괄호 표기법(userObj[key]) 사용 필요. 점 표기법: 특정 이름의 속성에 직접 접근할 때만 사용 가능

for...of

배열 → 값 접근

객체에는 사용 불가

for...of 문: 반복 가능한 객체(배열, 문자열, Map, Set 등) 순회 시 사용. 각 반복에서 객체의 값을 직접 얻음

예제:

const fruits = ['apple', 'banana', 'orange'];

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

// 출력:
// apple
// banana
// orange

이 예제에서 fruit 변수: 각 반복에서 배열의 실제 값을 직접 가져옴. for...of: 배열의 요소에 직접 접근 가능해 편리하나, 일반 객체에는 사용 불가

반복문 제어 키워드

• continue: 현재 반복을 건너뛰고 다음 반복으로 넘어감
  • 특정 반복을 건너뛰고 싶을 때 사용
  • 예시:

    for (let i = 1; i <= 10; i++) {
      if (i % 2 === 0) {
        continue; // 짝수인 경우 건너뛰기
      }
      console.log(i); // 홀수만 출력
    }
    
    // 출력: 1, 3, 5, 7, 9

• break: 반복문을 완전히 종료
  • 예시:

    for (let i = 1; i <= 10; i++) {
      if (i > 5) {
        break; // i가 5를 초과하면 반복문 종료
      }
      console.log(i);
    }
    
    // 출력: 1, 2, 3, 4, 5

이 두 키워드: 반복문의 흐름을 제어하는 데 매우 유용. 특정 조건에서 반복을 건너뛰거나 반복문을 조기에 종료하고 싶을 때 사용 가능

중첩 반복문에서의 break

// 이중 반복문
for (let i = 0; i < 2; i++) {
  console.log(`i: ${i}`);
  for (let j = 0; j < 3; j++) {
    if (j === 1) { break; }
    console.log(`j: ${j}`);
  }
}

// 출력:
// i: 0
// j: 0
// i: 1
// j: 0

주의 중첩 반복문에서 break는 가장 가까운 반복문만 종료시킴

무한 반복문

무한 반복문: 조건이 항상 참(true)이 되어 무한히 실행되는 반복문. 주로 프로그램의 지속적 실행이나 특정 조건 만족까지 반복을 위해 사용함

예시:

while (true) {
  // 실행할 코드
  if (종료조건) {
    break; // 종료 조건 만족 시 반복문 탈출
  }
}

주의 무한 반복문은 적절한 종료 조건 없이 사용 시 프로그램 정지 가능성 있음. 신중한 사용 필요

다중 반복문

반복문 중첩: 한 반복문 내부에 다른 반복문을 포함시키는 구조

주로 2차원 배열이나 복잡한 데이터 구조를 다룰 때 사용

예시:

// 이중 반복문
for (let i = 0; i < 2; i++) {
  for (let j = 0; j < 2; j++) {
    console.log(`i: ${i}, j: ${j}`);
  }
}

// 출력값:
// i: 0, j: 0
// i: 0, j: 1
// i: 1, j: 0
// i: 1, j: 1

while문과 for문 비교

while문과 for문을 사용한 1부터 5까지 출력 예제 비교

// while문
let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

// for문
for (let j = 1; j <= 5; j++) {
    console.log(j);
}

위 예제에서 볼 수 있듯이, while문은 초기화, 조건 검사, 증감을 별도로 작성해야 하지만, for문은 이 모든 것을 한 줄에 간결하게 표현 가능함

for, for...in, for...of 반복문 비교

특성	for	for...in	for...of
주요 용도	일반적인 반복	객체 속성 순회	반복 가능한 객체 순회
배열 사용	인덱스로 접근	인덱스 순회	요소 직접 접근
객체 사용	직접 사용 불가	키로 접근	직접 사용 불가
반환값	없음	속성 이름(문자열)	요소 값
성능	일반적으로 빠름	객체에 최적화	배열에 최적화

추가 개념

1. 변수 선언

• 자바스크립트 엔진: 변수 선언 없어도 자동으로 'var' 붙여 에러 방지
• 'var' 사용 지양, 대신 'let'이나 'const' 같은 변수 선언 키워드 사용 권장

2. 유사 배열 객체

자바스크립트의 "유사 배열 객체": 배열은 아니지만 배열처럼 동작하는 객체. 자바스크립트에서 문자열을 배열처럼 다룰 수 있음

3. 유사 배열 객체의 값 변경 제한

• 인덱스 사용 수정: 일부 유사 배열 객체(예: 문자열)는 인덱스 통한 직접 값 변경 불가
• 불변성: 특히 문자열은 불변(immutable)하여 개별 문자 직접 변경 불가
• 메서드 사용 제한: 배열의 push(), pop() 등의 메서드로 값 추가/제거 불가

이러한 제한으로 유사 배열 객체의 값 변경: 주로 새로운 객체 생성 또는 Array.from() 사용하여 실제 배열로 변환 후 조작 필요

4. 유사 배열 객체와 배열의 차이점

특성	배열	유사 배열 객체
값 변경	직접 변경 가능	직접 변경 불가능
메서드	push, pop, slice 등 내장 메서드 사용 가능	내장 메서드 직접 사용 불가
length 속성	자동 관리	수동 관리
프로토타입	Array.prototype 상속	Object.prototype 상속