JavaScript 반복문

seul_velog·2021년 12월 1일

목록 보기

7/25

반복문(Loop statement)

반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법으로, 다양한 종류가 있다.

반복문은 주어진 조건식(conditional expression)의 평가 결과가 참인 경우 코드 블럭을 실행한다. 그 후 조건식을 다시 검사하여 여전히 참인 경우 코드 블록을 다시 실행하는데, 이는 조건식이 거짓일 때까지 반복된다.

1. while 문

주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다. 조건문의 평가 결과가 거짓이 되면 실행을 종료한다.

while 문의 구성

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

ex.1) ▼
let i = 0;
while ( i < 10 ) {
  // do something
  i++;
}


ex.2) ▼
let i = 3;
while (i > 0) {
    console.log(`while:${i}`);
    i--;
}
// while:3
// while:2
// while:1

❗️ 위의 예제 ex1.) 를 보면

i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어간다.
i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 한다. 만약 i++이 없으면 i의 값이 계속 0이므로 무한 반복을 하게 되어 컴퓨터에 부담이 간다..🥲
( 반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다. )

2. do-while 문

코드 블록을 먼저 실행한 다음에 조건이 맞는지 안맞는지 검사한다. 따라서 코드 블록은 무조건 한번 이상 실행된다.

do-while 문의 구성

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

ex.1) ▼
let i = 0;
do {
  // do something
  i++;
} while ( i < 10 )

  
ex.2) ▼
let count = 0;
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
  console.log(count);
  count++;
} while (count < 3); // 0 1 2

❗️ 위의 예제 ex1.) 를 보면

do 반복문은 코드 블록을 실행하고 조건식을 평가하기 때문에 최소 한번은 반복되며, i 가 10보다 작을 때까지 계속 반복된다.

✍️ 블럭을 먼저 실행하고 싶다면 do-while 을 쓰고, 조건문이 맞을때만 블럭을 실행하고 싶으면 while 을 쓰는 것이 좋겠다.

3. for 문

for 문은 조건식이 거짓으로 판별될 때까지 코드 블록을 반복 실행한다. 가장 일반적으로 사용되는 반복문이다.

for 문의 구성

for(초기화식; 반복조건식; 증감식){
    조건식이 참인 경우 반복해서 실행될 코드;
}

ex.1) ▼
for ( let i = 0; i < 10; i++ ) {
  // do something
}


ex.2) ▼
for ( let i = 0; i < 2; i++ ) {
  console.log(i);
}

❗️ 위의 예제 ex1.) 를 보면 ▼

(블럭 안에서 let이라고 하는 지역변수를 선언) 초기화식 i라는 변수를 만들고 0 값을 넣어 초기화 한다. 그리고 나서 조건을 비교한 후, 참이라면 내용을 실행한다. 그리고 끝인 i++를 실행한다.

❗️ 위의 예제 ex2.) 를 보면 ▼

for 문을 실행하면 가장 먼저 let i = 0이 실행된다. 초기화식은 단 한번만 실행된다.
초기화식의 실행이 종료되면 조건식으로 실행 순서가 이동한다. 현재 변수 i는 0이므로 조건식의 평가 결과는 true다.
조건식의 평가 결과가 true이므로 실행 순서가 코드 블록으로 이동하여 실행된다. 증감문으로 실행 순서가 이동하는 것이 아니라 코드 블록으로 실행 순서가 이동하는 것에 주의하자.
코드 블록의 실행이 종료하면 증감식으로 실행 순서가 이동한다. 증감식 i++가 실행되어 i는 1이 된다.
증감식 실행이 종료되면 다시 조건식으로 실행 순서가 이동한다. 초기화식으로 실행 순서가 이동하는 것이 아니라 조건식으로 실행 순서가 이동하는 것에 주의하자. 현재 변수 i는 1이므로 조건식의 평가 결과는 true다.
조건식의 평가 결과가 true이므로 실행 순서가 코드 블록으로 이동하여 실행된다.
코드 블록의 실행이 종료하면 증감식으로 실행 순서가 이동한다. 증감식 i++가 실행되어 i는 2가 된다.
증감식 실행이 종료되면 다시 조건식으로 실행 순서가 이동한다. 현재 변수 i는 2이므로 조건식의 평가 결과는 false다. 조건식의 평가 결과가 false이므로 for 문의 실행이 종료된다.

❗️✍️ break, continue 이용해서 while, for 조건문 만들어보기! ▼

// while 반복문 연습
let i = 3;
while (i > 0) {
    console.log(`while:${i}`); // 백틱 사용이 더 편해졌다..^^
    i--;
}


// Q1. 숫자를 0~10까지 짝수만 프린트하는 것을 continue를 이용해서 작성해라.
// 그냥 내가 원하는 것일때 출력 되게끔 작성하는 것이 좋다고 한다.
for (let i = 0; i < 11; i++){
    if (i % 2 === 0 ){
        console.log(`q1:${i}`);
    }
}
// 굳이 !== 를 쓴다면 ▼
for (let i = 0; i < 11; i++){
    if (i % 2 !== 0 ){
        continue;
    }
    console.log(`q1. ${i}`);
}


//Q2. 범위 0~10까지를 루핑하는 것을 작성하되 대신 숫자8을 만나면 그만하도록 작성해라.
for (let i = 0; i < 11; i++){
    if (i > 8 ){   // if (i===9) 해도 원하는 대로 출력됐다!
        break;
    }
    console.log(`q2:${i}`);
}

//Q3. 범위 0~99까지 루핑하는 것을 작성하되 1의 자리 숫자들 앞에 0이 붙도록(ex. 05,06,07...) 작성해라.
for(let i=0; i<10; i++){
    for(j=0; j<10; j++){
        console.log(`${String(i) + String(j)}`); // 이부분에서 조금 해맸다..
    }
}

📌 Check !

Q1 에서 짝수가 아닐때 넘어가라는 코드보다는 (내가 원하는)짝수 일때 값이 나오는 코드가 더 좋은 코드라고 한다.
Q2 에서 if (i > 8 ) 말고도 if (i===9) 는 어떨까 싶어서 넣어 봤는데, 같은 결과가 나왔다 !
Q3 i가 0일때 j를 0~9까지 돌리고, i가 1일때 j를 0~9까지 돌리고... 방식으로 작성한 건데, 이렇게 작성하면 CPU에 좋지 않으므로 되도록 피하는게 좋다고 한다. 🥲
for문 을 쓸 때는, 언제까지 반복할 것인가에 대한 기준점을 제공하는 ( i 라는 변수를 초기화
) 하는 부분 (초기화식)과 반복을 계속 진행할 것인가에 대해 체크하는 (조건식), 그리고 마지막 (증감식) 이 세가지의 순서와 역할을 잘 기억해서 쓰는게 포인트 인 것 같다.
❗️여기서 주의 할 것
: 이 세가지를 세미콜론 ' ; ' 으로 구분하되, 마지막에는 세미콜론 ' ; ' 을 붙이면 에러가 뜨니 조심 !

✍️ Q3 백틱 안에 있는 ${String(i) + String(j)} 의 String(i)는 숫자 타입을 문자열 타입으로 변환하는 과정(명시적 타입 변환)이었다는걸 찾아보고 나서 알게 되었다 !

✍️ 이를 통해서 꼭 답이 정해져 있는 건 아니라는 점을 알았지만, Q1 에서 처럼 상황에 따라 더 가독성이 좋고 효율적인 코드가 있기 마련일테니, 좋은 코드로 작성 할 수 있도록 많이 배워야 겠다고 생각했다. 😌

4. break문 & continue문

break문

코드 블록을 탈출한다. 반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복을 회피할 수 있어 유용하다.

코드 블록을 탈출하는 것이 아니라 레이블 문, 반복문(for, for…in, for…of, while, do…while) 또는 switch 문의 코드 블록을 탈출한다. 레이블 문, 반복문, switch 문의 코드 블록 이외에 break 문을 사용하면 SyntaxError(문법 에러)가 발생한다.