[JS] 고전적인 for문, while문, 중첩 for문 ( break, continue )

AREUM·2022년 12월 19일

JavaScript 반복문

Javascript이론

목록 보기

4/10

오늘은 반복문의 기본적인 for문 과 while문 break문 continue문을 정리해 보겠다.

반복문 사용이유

반복문을 사용하는 상황은 하나의 코드를 반복해서 사용하는 경우 이다.
구체적으로 이야기 하자면,

어떠한 목록들을 차례대로 출력하는 경우 ( 상품 목록, 글 목록 )
숫자를 1부터 10까지 하나씩 증가시키면서 동일한 코드를 반복 실행해야 하는 경우

: 이러한 경우에 반복문을 사용하고, 조금 더 나아가 그 상품의 목록들을 가져오되 어떠한 순서로 가져올지 반복문 안에 조건 또는 메소드를 사용할 수 가 있다. 이 기초 문법들을 잘 조화시켜 하나의 기능을 만들어 질 수 가 있다. ( 조건문 )

웹 사이트에 기본적으로 사용되기 때문에 반복문을 꼭 짚고 넘어가야 한다.

while문 문법

while( condition ) {
 // 반복 될 코드 
}

while 문의 문법은 이렇다.
condition은 조건이다. 조건이 true일 동안 이 반복문은 동작한다.

간단한 예제를 보자.

let i = 0;	// 1.
while( i < 4 ) {	// 2.
  console.log(i);	// 0, 1, 2, 3
  i++;	// 3.
}

i가 '0' 이다.
'0' 이 '4' 미만이 될 때
i를 1씩 증가 시켜준다.

만약 i++을 적지 않았더라면, 이 코드는 무한한.. 수를 찍었을 것이다.

그러면 console.log 에는 0, 1, 2, 3이 찍히는 것을 알 수 있다.
이 것이 while문의 기본 문법이다.

for문 문법

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

begin : i = 0 : 반복문에 진입할 때 단 한 번 실행됩니다.
condition : i < 3 : 반복마다 해당 조건이 확인됩니다. false이면 반복문을 멈춥니다.
body :alert(i) : condition이 truthy일 동안 계속해서 실행됩니다.
step : i++ : 각 반복의 body가 실행된 이후에 실행됩니다.

while문과 문법이 조금은 다르지만 작동 하는데에 있어서는 다를게 없다.

for( let i=0; i<5; i++) {
	console.log(i);	// 0, 1, 2, 3, 4
}
console.log(i);	// Error..

console.log가 왜 이렇게 나타나는지 모르겠으면 이 부분은 scope를 공부하면 이해가 가능하다.
간략하게 이야기 하자면,
{ } 대괄호가 하나의 블럭이기 때문에 그 블럭 안에서만 변수를 호출을 할 수 있다.

생략할 수 있는 코드 while문, for문

while문

추가적인 이야기를 적어보려고 한다.
i++을 적지 않았다면 코드는 무한적인 반복 코드가 돌거라는 것인다. 이 무한한 반복을 멈출 수 있게 우리가 사용하는 브라우저는 멈추게 하는 실질적인 수단을 가지고 있다.

지금 보여 줄 코드는 감소이다. 생략되어 적을 수 있는 부분이 있다.
반복될 코드가 한줄이라면 {}를 생략하고 한줄로 쓰기가 가능하다.

let i = 4;
while (i) console.log(i--);

console.log는 과연 무엇을 보여줄까.
while (i != 0)을 짧게 줄여 while (i)을 적은 것이다.
왜냐면 i가 0이 되면 false를 반환하기 때문에 이 반복문은 멈춘다.

false는 0 true는 1 을 표현 하기 때문이다.

그러면 console.log는 4, 3, 2, 1이 나타날 것이다.

for문

for문도 마찬가지로 생략이 가능하다.

let i = 0;

for (; i < 3;) {
  console.log( i++ );	// 0, 1, 2
}

i를 밖에 선언 했다면 생략이 가능하고 while문 과 동일하게 반복 되는 코드가 한줄이라면 i++를 생략 할 수 있다.

변경가능 한 코드

/* 2의 배수 */
// 1.
for(let i=0; i < 10; i++) {
	if(i % 2 === 0) {
    	console.log(i);
    }
}

// 2.
for(let i=0; i < 10; i+=2) {
	console.log(i)	// 0, 2, 4, 6, 8
}

1번째의 방법은 조건문을 사용해 작성한 코드이다.
2번째의 방법은 조건문을 사용하지 않고 i = i + 2를 축약시켜 i+=2로 변경해서 사용하였다.
두가지의 방법을 때의 따라 잘 사용하면 될 것같다.

while문도 동일하게 작성가능하다.

break : 반복 종료하기

멈출 수 있는 무한반복문 사용하는 경우 사용된다.
강제로 반복문, 조건문과 같이 제어문을 벗어날 때 사용한다. ( 중첩 제어문 포함 )
무한 반복문을 사용할 때는 조건에 while(true)를 써서 사용한다.

간단한 예를 들어보았다.

let i = 0; // 초기값 지정
while (true) { // 조건
    if ( i === 5) braek; // i가 5가 되었을 때 braek로 인하여 멈춰서 반복문이 종료 된다.
        console.log(i);	// 0, 1, 2, 3, 4
    i++; // 0에서 1씩 + 추가
}

👉🏻 다른 예로는 input value값 을 가지고 입력 받은 숫자가 타입이 또는 조건이 맞을 때, 또는 맞지 않을 때 그에 따른 상황을 벗어날 것인지 반복할 건지 조건을 줄 수 있다.

continue : 반복 코드 실행 건너뛰기

반복 실행 중 특정 조건의 경우 실행 구문을 실행하지 않고 다음 루프로 이동하게 하는 제어문
특정 조건에서만 실행되기를 원할 때 사용한다 ex) 짝수 홀수 값 구하기
( 컨티뉴 continue 문 ) 실행하면 그 뒤는 모두 무시

let i = 0;
while ( i < 10 ) {
    i++; // 1씩 증가
    if ( i % 2 === 0 ) { // i를 2로 나눈 나머지가 0일 경우 : 짝수
        continue; // if문의 조건에 부합한 값은 건너뛰기 ( 결국 홀수 구하기 )
    }
    console.log(i);	// 1, 3, 5, 7, 9
}

for (let i = 1; i < 10; i += 2) {
  if(i % 2 === 0) continue;
    console.log(i);	// 1, 3, 5, 7, 9
}

중첩 반복문

중첩반복문이란 ?
for문 안에 for문을 사용한 것을 중첩 for문, 이중 for문이라고 한다.
언제 사용하는지 예를 들어보면,
테이블 표를 만들 때가 대표적으로 꼽을 수 있고 ! 연습은 구구단으로들 다들 연습한다.
굉장히 헷갈리기 때문에 많이 만들어봐야겠다고 느낀다.

반복문의 끝은 중첩 반복문이라고 생각한다.
먼저, 이중 for문 중첩 for문의 문법이다.

for(초기값; 조건식; 증감식) {
  for(초기값; 조건식; 증감식) {
    실행문;
  }
}

예시로 구구단을 가져왔다.

for(let i=1; i<10; i++) {
	for(let j=1; j<10; j++) {
    	console.log(i, j, i*j);
    }
}

console.log에 찍힐 숫자는 어떻게 될까 ?

결과를 먼저 이야기 하자면, 1단부터 9단까지 찍힌다.

❗️TIP❗️
처음에는 너무 머리가 멈추기 때문에 공책에 적어가면서 하나씩 호출되는 것을 적어보는 것이다.
그러면 규칙이 보일 것이다.

i=1 j=1 i*j 1*1 = 1
i=1 j=2 i*j 1*2 = 2
i=1 j=3 i*j 1*3 = 3
i=1 j=4 i*j 1*4 = 4
i=1 j=5 i*j 1*5 = 5
i=1 j=6 i*j 1*6 = 6
i=1 j=7 i*j 1*7 = 7
i=1 j=8 i*j 1*8 = 8
i=1 j=9 i*j 1*9 = 9
...
...
...

i=9 j=1 i*j 9*1 = 9
i=9 j=2 i*j 9*2 = 18
i=9 j=3 i*j 9*3 = 27
i=9 j=4 i*j 9*4 = 36
i=9 j=5 i*j 9*5 = 45
i=9 j=6 i*j 9*6 = 54
i=9 j=7 i*j 9*7 = 63
i=9 j=8 i*j 9*8 = 72
i=9 j=9 i*j 9*9 = 81

어떻게 이렇게 찍힐 수 가 있을까 ?