Languages/Java Script

[Js] 반복문 | javascript 반복문 | 반복문 제어, 중첩 | for,while

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

반복문

인간은 반복적인 작업을 잘하지 못한다. 실수하고, 지루해한다.

컴퓨터는 이런 반복적인 작업을 대행하기 위해서 만들어진 기계다.

반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다.

조건문이 컴퓨터를 똑똑하게 한다면, 반복문은 컴퓨터를 강력하게 만든다!

두 가지를 결합하면 소프트웨어를 만드는 데 큰 축이 된다.

반복문의 문법

반복문의 문법은 몇가지가 있다.(while, for ..)

각각의 구문은 서로 대체 가능하기 때문에 상황과 취향에 따라서 선택해서 사용하면 된다.

while

형식은 아래와 같다.

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

즉, 조건이 true 인 경우 무한적으로 반복하여 코드를 실행하다가

이 조건이 false가 되면 반복문에서 빠져나오게 된다.

자바스크립트를 이용하여, html코드를 프로그래밍적으로 생성 할 수가 있다.

예를 들어, hello world라는 문장을 10 번 출력시키려고 한다면 html 코드로

Hello world;<br /> 과 같은 문장을 10 번써야 할 것이다.

하지만

자바스크립트로 반복문을 사용한다면, 훨씬 더 코드가 효율적으로 동작 한다.

이 때! 사용하는 문법이 바로 document.write이다.

아래의 예제를 실행해보자.

다음 예제는 무한반복을 발생시킨다. 저장되지 않은 작업이 있다면 모두 정리한 후에 이 명령을 실행하자. 웹브라우저는 무한반복을 허용하지 않기 때문에 어느 정도 시간이 흐르면 스크립트를 종료할 것인지 물어볼 것이다.

document.write는 자바스크립트를 이용해서 웹페이지에 텍스트를 출력한다. 이것은 웹브라우저에서만 동작할 것이다. node.js 콘솔과 같은 환경에서 실습을 한다면 console.log와 같은 메소드를 대신 사용한다.

<script>
    while(true){
        document.write('coding everybody <br />');
    }
</script>

위 코드를 만약 브라우저에서 실행한다면, 무한 반복이 되어 정지되지 않고 끊임 없이 반복되어

컴퓨터에게 부담을 줄 것이다.

이번에는 true를 false로 바꾼 아래의 예제를 실행해보자. 아무런 결과도 출력하지 않을 것이다.

<script>
    while(false){
        document.write('coding everybody <br />');
    }
</script>

while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다.

조건이 false면 반복문이 실행되지 않는다.

여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다.

반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.

그렇다면 반복문은 언제까지 실행되야 할까?

바로 이것을 반복 조건에서 설명할 수 있다.

반복조건이 없다면, 무한반복이 되어 원하지 않는 결과를 초례할 수 있다.

아래 예시를 살펴보자

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
	var i = 0;
	while(i<10){
		document.write("hello world~~ <br />");
		i = i+1;
	}
</script>

</body>
</html>

위 코드를 살펴보면 종료 조건으로 i의 값이 10보다 작다면 !을 주었다.

이 말은 10보다 작다면 ture, 같거나 크다면 false가 되는 것이다.

반복이 될 때마다 hello wolrd ~~ 가 출력되고, 줄바꿈 후

i+1의 값이 i의 대입 된다.

즉, 0,1,2,3,4,5,6,7,8,9(index = 0부터 시작) 총 10번 출력이 되고,

이후 while문을 빠져나간다.

다음으로, while문과 함께 잘 사용되는 문법인 for문을 알아보자.

while문은

기준점을 제공하는 i 라는 변수를 초기화 하는 부분이있고 (변수 초기화)

반복적으로 실행될 때마다 갱신해주는 반복 실행이 있고 (반복 실행)

반복을 진행 할지 체크하는 반복 조건(반복 조건)

이 세가지의 부분으로 구성되어 있다.

위와 같은 세가지 문법 요소를 하나의 문법으로 만들어놓는다면, 편리하고 실수할 확률도 줄어들 것이다.

그렇게 해서 나오게 된 것이 바로! for문이다.

for

형식은 아래와 같다.

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

위에서 실습했던 while문 코드를 for형식으로 바꾸어보자

<script>
    for(var i = 0; i < 10; i++){
        document.write('hello world ~~'+i+'<br />');
    }
</script>

▼ for문은 어떻게 실행되는 것인가 ?

for문은 제일 먼저 '초기화'를 한다.

위의 예제에서 초기화는 var i = 0;이다.

즉 변수 i의 값을 0으로 설정한 것이다.

그 다음에는 '반복조건'인 i < 10이 실행된다.

현재 i의 값은 0이다. 그렇기 때문에 이 조건은 참이다.

반복조건이 참이면 중괄호 안의 내용이 실행된다.

i의 값이 0이기 때문에 'hello world~~0<br />'이라는 텍스트가 출력된다.

'반복해서 실행될 코드'의 실행이 끝나면 '반복이 될 때마다 실행되는 코드'가 실행된다.

i++는 현재 i의 값에 1을 더하라는 의미다. 현재 i의 값은 0이다.

따라서 i++의 결과로 i는 1이 되었다. 그리고 '반복조건'이 실행된다.

현재 i의 값은 1이기 때문에 i < 10은 참이다. 다시 '반복해서 실행될 코드'가 실행된다.

그렇게 반복해서 작업이 실행된다. 이 과정에서 i의 값은 반복 할 때마다 1씩 증가한다.

결국 i의 값이 10이 되는 순간 i < 10을 충족시키지 못하게 되고 반복문은 종료된다.

후위 연산과 전위 연산

i ++ : 실행 후 i 증가

++ i : 증가 후 실행

▼ 만약 반복문이 없었다면?

반복문이 없다면(반복문의 효용)

coding everybody를 10번 반복하고 뒤에 숫자를 붙여

출력 하고 싶다고 한다면 아래와 같이 코드를 작성하면 된다.

<script>
      document.write('coding everybody 1<br />')
      document.write('coding everybody 2<br />')
      document.write('coding everybody 3<br />')
      document.write('coding everybody 4<br />')
      document.write('coding everybody 5<br />')
      document.write('coding everybody 6<br />')
      document.write('coding everybody 7<br />')
      document.write('coding everybody 8<br />')
      document.write('coding everybody 9<br />')
      document.write('coding everybody 10<br />')
</script>

매번 숫자가 바뀌기 때문에 Copy & Paste 도 할 수가 없다.

이러한 작업이 1000번이 실행된다면 ? ...

바로 이때부터 반복문의 효용이 부각되기 시작한다.

<script>
      var i = 0;
      while(i < 10){
          document.write('coding everybody '+i+'<br />');
          i++;
      }
</script>

횟수를 10 이 아닌, 1000으로만 바꾸어 주면 되니 매우 간편하고 효율적이 된 것이다.

또한 연산을 하는 것도 매우 간편해졌다.

ex) 숫자를 2배수 하여 출력하고 싶다면?

<script>
      var i = 0;
      while(i < 10){
          document.write('coding everybody '+(i*2)+'<br />');
          i++;
      }
</script>

반복문이 없었다면 한줄 한줄 수정해야 하는 것을

단 몇글자의 수정으로 줄여줄 수 있다.

반복문의 제어

반복문을 강제로 종료시키거나, 스킵하고 반복하고 싶을 때 즉 반복작업을 중단 시킬 경우 사용하는 문법을 알아보자

break

반복작업을 중간에 중단시키고 싶다면 어떻게 해야할까? break를 사용하면 된다. 아래의 예제는 위에서 살펴본 예제를 일부 변형한 것이다

<script>

    for(var i = 0; i < 10; i++){
        if(i === 5) {
            break;
        }
        document.write('coding everybody'+i+'<br />');
    }

</script>

반복문 안에 조건문이 들어가도 상관없고,

조건문 안에 반복문이 들어가도 상관없다.

위 코드의 결과는 아래와 같다.

coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4

종료조건에 따르면 10행이 출력되야 하지만 5행만 출력되었다.

조건문에서 i ===5 일 때 break문을 실행시켰기 때문에

반복문이 완전히 종료된 것이다.

이처럼 반복문 안에서 break가 실행되면 반복문을 즉시 종료 시킬 수 있다.

continue

그럼 실행을 즉시 중단 하면서 반복은 지속되게 하려면 어떻게 해야 할까?

설명이 어렵다면 예제를 보자. 이전 예제의 break를 continue로 변경했을 뿐이지만 결과는 전혀 다르다.

<script>
      for(var i = 0; i < 10; i++){
          if(i === 5) {
              continue;
          }
          document.write('coding everybody'+i+'<br />');
      }
</script>

단지 break가 continue로 변경된 것 뿐인데 결과는 아래와 같다.

coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4
coding everybody 6
coding everybody 7
coding everybody 8
coding everybody 9

이유는 i의 값이 5가 되었을 때 실행을 중단하되,

반복문은 중단이 되지 않았기 때문에 continue이후 구문을 제외하고

나머지 결과는 출력이 된것이다.

i === 5이라는 것은

5행이 출력되고(0,1,2,3,4), 6번째 행(5)이 될 때 건너뛰게 된 것이다.

반복문의 중첩

반복문 안에는 다시 반복문이 나타날 수 있다. 다음 예제를 보자. 다음 예제는 00, 01, 02....99 까지를 화면에 출력한다.

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
	for(var i =0; i<10; i++){
		for(var j =0; j<10; j++){
			document.write("hello haeun~"+String(i)+String(j)+"<br/>");
		}
	}
</script>

</body>
</html>

출력결과는 아래와 같이 00~99까지 실행된다.

디버깅 모드로 한번 살펴보도록 하자!

F[12] 개발자 모드로 들어가서 sources를 클릭 후 F5를 눌러준다.

그럼 코드가 잡힐 것이다!

코드가 잡힌후, 브레이크 포인트를 설정해준다. (8번째줄 숫자 8쪽을 클릭)

이후 다시 F5를 해주면, 브레이크 포인트 부분에서 멈추게 된다.

이후 한줄 씩 살펴보고 싶다면

빨간 네모친 부분에 3번째 ↓ 이 화살표를 클릭하여 코드가 실행되는 과정을 살펴보면 된다.

만약 한번에 보고싶다면 첫번째 기호를 클릭해주면 된다.

즉 이렇게 디버거라는 것을 통해 코드가 실행되는 과정을 직접 확인해볼 수 있다는 것을 알 수 있다!

(실제 코드 동작과정을 살펴보기 용이함!)

'Languages > Java Script' 카테고리의 다른 글

[Js] 배열 \| javascript 배열 \| 배열이란? (0)	2021.02.03
[Js] 함수 \| 함수의 형식 \| 함수의 정의와 호출 \| 입력과 출력 (0)	2021.02.03
[Js] 조건문 \| javascript 조건문 \| Boolean \| 논리 연산자 (0)	2021.02.02
[Js] 비교 연산자 \| javascript 연산자 \| 연산자 (0)	2021.02.02

Contents

새소식

인기 검색어