-
자바스크립트 반복문Front-end/Javascript 2023. 5. 18. 21:10반응형
1. for문
for문은 초기화, 조건식, 증감식으로 구성되며, 초기화는 반복을 시작하기 전에 한 번만 실행되고, 조건식이 true인 동안 반복되고, 증감식은 각 반복이 끝난 후 실행됩니다. for문은 일반적으로 특정 횟수만큼 반복하거나 배열의 요소를 순회할 때 사용됩니다.
예를 들어, 0부터 4까지의 숫자를 출력하는 for문을 작성해보겠습니다.
for (let i = 0; i < 5; i++) { console.log(i); }
위의 예제에서는 i라는 변수를 0으로 초기화하고, i가 5보다 작을 때까지 반복하며, 반복할 때마다 i를 1씩 증가시킵니다. 결과적으로 0부터 4까지의 숫자가 출력됩니다.
2. while문
while문은 조건식이 true인 동안 반복됩니다. while문은 주어진 조건이 참일 때 코드 블록을 실행합니다.
다음은 0부터 4까지의 숫자를 출력하는 while문의 예제입니다.
let i = 0; while (i < 5) { console.log(i); i++; }
위의 예제에서는 i라는 변수를 0으로 초기화하고, i가 5보다 작을 때까지 반복하며, 반복할 때마다 i를 1씩 증가시킵니다. 결과적으로 0부터 4까지의 숫자가 출력됩니다.
3. do-while문
do-while문은 반복 블록을 실행한 후에 조건식을 검사합니다. 즉, 조건식이 false라도 최소한 한 번은 실행됩니다.
다음은 0부터 4까지의 숫자를 출력하는 do-while문의 예제입니다.
let i = 0; do { console.log(i); i++; } while (i < 5);
위의 예제에서는 i라는 변수를 0으로 초기화하고, 코드 블록을 실행한 후에 i가 5보다 작을 때까지 반복하며, 반복할 때마다 i를 1 씩 증가시킵니다. 결과적으로 0부터 4까지의 숫자가 출력됩니다.
4. for...of문
for...of문은 배열의 각 요소에 대해 반복합니다. for...of문은 주어진 배열을 순회하면서 배열의 각 요소에 대해 코드 블록을 실행합니다.
다음은 배열의 요소를 순회하며 출력하는 for...of문의 예제입니다.
const arr = [1, 2, 3, 4, 5]; for (const num of arr) { console.log(num); }
위의 예제에서는 arr이라는 배열을 순회하면서 각 요소를 num이라는 변수에 할당하고, 각 요소를 출력합니다.
5. for...in문
for...in문은 객체의 속성에 대해 반복합니다. for...in문은 주어진 객체의 속성을 순회하면서 각 속성에 대해 코드 블록을 실행합니다.
다음은 객체의 속성과 값을 순회하며 출력하는 for...in문의 예제입니다.
const obj = { a: 1, b: 2, c: 3 }; for (const key in obj) { console.log(key, obj[key]); }
위의 예제에서는 obj라는 객체의 속성을 순회하면서 각 속성과 해당 속성의 값을 출력합니다.
6. break문과 continue문
반복문 내에서 break문을 사용하면 반복을 중단하고, continue문을 사용하면 현재 반복을 건너뛸 수 있습니다.
다음은 반복문에서 break문과 continue문을 사용하는 예제입니다.
for (let i = 0; i < 5; i++) { if (i === 3) { break; // 반복문 종료 } if (i === 1) { continue; // 다음 반복으로 건너뜀 } console.log(i); }
위의 예제에서는 i가 3일 때 break문을 사용하여 반복문을 종료하고, i가 1일 때 continue문을 사용하여 다음 반복으로 건너뜁니다. 따라서 출력되는 숫자는 0과 2입니다.
결론
자바스크립트에서는 다양한 종류의 반복문을 제공하여 반복 작업을 수행할 수 있습니다. 각 반복문은 다른 상황에 적 합하게 사용될 수 있으며, 코드의 효율성과 가독성을 고려하여 적절한 반복문을 선택해야 합니다.
더 자세한 내용은 MDN의 자바스크립트 반복문 문서를 참고하시기 바랍니다.
반응형'Front-end > Javascript' 카테고리의 다른 글
JavaScript DOM에 대한 이해 (0) 2023.05.21 뉴스와 날씨 정보를 가져오는 세 가지 방법 (0) 2023.05.17 JavaScript의 split() 메서드 (0) 2023.05.15 프로토타입과 프로토타입 체인 (0) 2023.05.11 객체 지향 프로그래밍(OOP)에 대한 이해 (0) 2023.05.11