본문 바로가기
프로그래밍 개발/JS 기본 언어

javascript 반복문(Loop)

by Jinseok Kim 2020. 11. 5.
반응형

반복문이란?

 

인간은 반복적인 작업을 잘하지 못한다. 실수하고, 지루해한다. 컴퓨터는 이런 반복적인 작업을 대행하기 위해서 만들어진 기계다. 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다.

 

 

 

 

 

 

 

반복문의 문법들

 

 

 

 

while

while (조건){
    반복해서 실행할 코드
}

 

  • while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다.
  • 조건이 false면 반복문이 실행되지 않는다. 여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다.
  • 반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
       var i = 0;
      while(i < 10){
         document.write('coding everybody <br />');
          i++
}
    </script>
</body>
</html>

 

  • 무한 반복을 피하기 위해서는 위 코드처럼 조건을 걸어주어야 한다.
  • while문 조건에 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다라는 조건을 달아준다.
  • 그리고 'i++'을 이용하여 i의 값이 1씩 증가하도록 한다.

※ '++i'와 'i++'가 있는데 역할을 같지만 의미가 조금 다르다. '++i'는 처음 출력 값을 본래의 i의 값부터 시작하여 그 다음부터 1씩 증가시키지만, 'i++'은 처음 출력 값부터 i의 값을 1증가 시킨 값부터 시작한다. 

 

 

 

 

 

 

for

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

 

  • for문은 제일 먼저 '초기화'를 한다. 여기서 초기화는 var i = 0;이라 하면 즉 변수 i의 값을 0으로 설정한 것이다.
  • 그 다음에는 '반복조건'인 i < 10이 실행된다. i의 값은 0이라면 조건은 참이다. 즉 반복조건이 참이면 중괄호 안의 내용이 실행된다.
  • while문으로 반복조건을 달아주려면 초기화, 반복조건 등등을 떨어트려놓아 오류나 가독성에 문제가 있을 수 있다. 하지만 이때 for문을 사용하여 for문 안에 초기화, 반복조건 등등을 한꺼번에 집어넣을 수 있어 매우 효율적이다.

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
       for(var i = 0; i < 10; i++){
    document.write('kim, jin seok'+i+'<br />');
}
    </script>
</body>
</html>

  • 위 코드에서 반복 문자 옆의 '+i+'는 문자 옆에 함께 0의 값에서 1씩 i의 값이 증가하라는 조건이다. 예로 1의 값에서 시작하고 싶다면 '+(i+1)+'로 해주면 되고, 2의 배수로 증가시키고 싶다면 '+(i*2)+'로 해주면 된다.
  • 반복 문자 옆의 <br/>은 문자가 반복할 때 줄바꿈을 하며 반복하여 나타내라는 조건이다. 

 

 

 

 

 

 

 

 

 

 

 

break과 continue

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
       for(var i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    document.write('kim, jin seok'+i+'<br />');
}
    </script>
</body>
</html>

  • 반복문을 중도에 중단시키고 싶다면 위에 코드처럼 break을 걸어주면 된다.
  • 위의 코드의 결과를 보면 원래대로라면 종료조건에 따르면 10행이 출력돼야 하는데 5행만 출력되었다.
  • 2행의 if(i === 5) 에 의해서 i의 값이 5일 때 break 문이 실행되면서 반복문이 완전히 종료된 것이다. 반복문 안에서 break가 실행되면 반복문을 즉시 종료시키는 것이다.

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
       for(var i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    document.write('kim, jin seok'+i+'<br />');
}
    </script>
</body>
</html>

  • break을 continue로 바꿔주자 다시 반복하기 시작한다.
  • 하지만 숫자 5가 보이지 않는다. 왜냐하면 i의 값이 5가 되었을 때 실행이 중단 됐기 때문에 continue 이후의 구문이 실행되지 않은 것이다. 하지만 반복문은 중단되지 않았기 때문에 나머지 결과가 출력된 것이다.
  • 즉 continue는 반복을 중단했다가 다시 반복해주는 기능을 가지고 있다.

 

 

 

 

 

 

 

반복문의 중첩 활용

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
               for(var i = 0; i < 10; i++){
    
    for(var j = 0; j < 10; j++){    
       
        document.write(String(i)+String(j)+'<br />');
    }
}
    </script>
</body>
</html>

 

  • for문을 이용하여 0부터 9까지 변수 i와 j에 중첩으로 인하여 순차적으로 값을 할당한다. 0~99까지 출력되어 진다.
  • 그리고 i와 j의 값을 더한 후에 출력한다. 숫자로서 더해지는 것이 아닌 문자대 문자로 결합하여 출력되어진다. 그 이유로 String이 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하였기 때문이다.

 

 

 

 

 

 

 

 

반응형

'프로그래밍 개발 > JS 기본 언어' 카테고리의 다른 글

Javascript 배열(array)  (0) 2020.11.06
Javascript 함수(Function)  (0) 2020.11.05
Javascript 조건문의 문법  (0) 2020.11.03
Javascript 비교 연산자  (0) 2020.11.03
Javascript 변수 Variable  (0) 2020.11.03

관련글

댓글

티스토리툴바