본문 바로가기

Frontend study/JavaScript

JavaScript - 5. 반복문

✔ 자바스크립트의 반복문에 대해 정리합니다.

 

 

  반복문에 대해서

 

:) 반복문은 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 하는 실행문이다. 

   조건식을 통해 반복 횟수를 설정할 수 있다. 

 

 

 

 

 1. while 문

    : 조건이 참인 동안 계속 반복 실행되고 조건이 거짓이 되는 순간 반복문을 빠져나온다.

 

  [형태]

 let i = 0 //변수 초기화 
 while(조건식) { 
   "실행할 코드"
   i++  //변수 i를 1만큼 증가   
 }
 

 ◎ 조건식에 반복 횟수를 정해주고 그 조건식이 참인 동안 반복 실행되고 

     조건식이 거짓이 되는 순간에 반복문을 빠져나온다. 

 

 ◎ 조건식을 항상 참으로 설정하게 되면 무한 루프에 빠지므로 주의하며 사용

    무한 루프는 반복 횟수를 알 수 없을 때 어떤 조건이 만족하는 동안 계속 

       반복을 돌리는 경우 사용할 수 있다. 이때 무한 루프를 빠져나오고 싶으면

       break 문을 사용한다. 

 

 ◎ 실행할 코드가 한 줄이면 중괄호를 사용하지 않아도 된다. 

    → 자바스크립트에서는 중괄호({ })안에 처리해야 할 코드가 한 줄이라면

        중괄호를 사용하지 않아도 된다.

 

 

 

(예제)

1. 안녕하세요 5번 출력하기

 

 let i = 0;
 while (i < 5) {
   console.log('안녕하세요');
   i = i + 1;
 };

 

조건식에서 i = 5일 때는 거짓이 되므로 반복문을 빠져나오게 되어
"안녕하세요"를 총 5번 출력하게 된다.

 

 

 

 

2. 문자열 길이 구하기 (무한 루프 활용)

 

let length = 0;
 let str = 'abcdefg';
 let i = 0;
 while (true) {
   if (str[i] !== undefined) {
     console.log(str[i]);
     length++;
   } else {
     break;
   }
     i = i + 1;
 }
 console.log('str 길이: ' + length);
 
 

 

 2. for 문

    :  for 문도 while문과 동일하게 참인 동안 계속 반복 실행되고 조건이 거짓이 되는 순간

      반복문을 빠져나온다. 하지만 while문과 구조상 차이가 있다. for문은 초기화, 조건식, 

      증감식을 괄호 안에 작성한다. 

 

 

 (형태)

 for(초기화; 조건식; 증감식)  {
    "실행할 코드"
 }

◎ 괄호안에 초기화, 조건식, 증감식을 한 번에 작성한다.

◎ 반드시 초기화, 조건식이 끝나는 부분에 세미콜론(;)을 붙여준다.

  → 마지막 부분은 붙이지 않음

◎ 주로 반복문과 같이 쓰인다.

 

 

 (배열)

   : 다양한 값을 대괄호 안에 넣을 수 있는 자료형

 

 (예제)

   1) 배열 안에 요소 출력하기

 let array = ["과자""사탕""젤리"];
 for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
 }
 

 

 

 

   2) 1 ~ 10까지의 합 구하기

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

 

 

 주로 배열문이나 반복 조건이 정해진 경우 for 문을 사용하는 것이

 적합하고, 무한 루프와 같이 특정 조건에 만족할 때까지 반복해야

 하는 경우 while문이 적합하다.

 

 사실 두 가지 중 편한거 사용해도 상관없다. while문으로 배열문 예제와 같이 

 사용할 수 있고, for 문으로 무한 루프를 활용하여 문자열 길이 예제처럼 사용

 할 수 있다. 따라서 두 조건문은 구분해서 사용할 필요는 없다.

 

 끝으로 do while 문도 있지만 잘 사용하지

 않으므로 여기에는 정리하지 않겠다.

 필요하게 되면 그때 구글링해서 사용하기

 

 

 

 

 

'Frontend study > JavaScript' 카테고리의 다른 글

JavaScript - 7. 함수  (0) 2022.02.27
JavaScript - 6. 배열  (0) 2022.02.27
JavaScript - 4. 조건문  (0) 2022.02.26
JavaScript - 3. 연산자  (0) 2022.02.25
JavaScript - 2. 변수, 상수, 자료형  (0) 2022.02.25