[JavaScript] 07. 반복문

🟡 1. 반복문 (Loop statement)

- 반복문은 주어진 조건식이 참이면 코드 블록을 실행합니다. 이는 조건문이랑 같아 보이는데, 반복문은 조건식이 거짓이 될 때까지 같은 코드 블록을 반복 실행합니다.

- 자바스크립트에서 반복문은 for문, while문, do... while문, for...in문, for..of문이 있습니다. (for...of문은 차후에 자세하게 설명하는 글을 올리도록 하겠습니다😅)

 

 

🟡 2. for문

- for문은 조건식이 거짓이 될 때까지 코드 블록을 반복 실행합니다.

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


// for문 예제
for(let i=0; i < 3; i++) {
	console.log(i);
}
// 0
// 1
// 2

  위 예제를 살펴보면

• for문 안에 들어 있는 코드가 조건식이 됩니다. 이때 첫 부분(초기화식) "let i=0;"이라는 부분은 i라는 변수를 선언과 동시에 0이라는 값을 할당해줍니다.
• 두 번째 "i < 3"는 조건식으로서 변수 i가 3보다 작을 때까지 코드 블록을 반복 실행합니다.
• 세 번째는 증감식으로서 코드 블록을 한번 실행 후 i의 값을 증가시킬지 감소시킬지를 설정해주는 곳입니다.
• 코드가 어떤 순서로 실행이 되는지 설명하겠습니다.

1. 0으로 설정된 변수 i가 3보다 작은 지를 판단합니다. 0 < 3은 참이므로, 코드 블록 안으로 들어갑니다.
2. 코드 블록에서 i를 콘솔에 표시하라는 코드가 실행되면서, 콘솔에는 0이 찍힙니다. 
3. 코드 블록 안에 코드가 모두 실행이 되었으므로, 증감식(i++)으로 가서 i를 증가시킬지 감소시킬지 확인합니다.
4. 증감식이 ++이므로 i에 +1을 해줍니다. (0 +1)
5. 그럼 다시 조건식으로 가서 i가 3보다 작은지 판단합니다. (초기화식은 for문 제일 처음 한 번만 실행됩니다.)
6. i는 1이므로 1<3은 참이 됩니다. 그래서 다시 코드 블록을 실행하고, 콘솔에는 1이 찍힙니다. 
7. 증감식에서 i + 1 (1 + 1)을하여 i는 2가 됩니다.
8. 다시 조건식으로 가서 2<3은 참이므로 코드 블록을 실행하고 콘솔에 2가 찍히고 i는 +1이 되어 3이 됩니다.
9. 다시 조건식으로 가서 i<3을 확인하는데, i가 3이므로 3<3은 false가 됩니다.
10. 조건식이 거짓이 되었으므로, for문이 종료됩니다.

 

for (let i = 4; i > 0; i--){
	console.log(i);
}
//4
//3
//2
//1

- 증감식에 반대로 감소를 시킬 수도 있습니다.

 

for(;;) {}

- 만약, 초기화식-조건식-증감식을 넣지 않으면 무한루프가 됩니다.

 

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

// 1 * 1 = 1
// 1 * 2 = 2
// 1 * 3 = 3
//......
// 9 * 9 = 81

- for문 안에서 다른 for문을 실행시킬 수도 있습니다.

 

 

🟡 3. while문

- while문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 반복 실행합니다. 조건식의 평가 결과가 거짓이 되면 반복이 종료가 됩니다. 만약 조건식의 평가 결과가 boolean값이 아니면 강제 변환을 시킵니다.

while(조건식){
	반복할 코드 블럭
}


//while 예제
let w = 0;

while (w < 3){
	console.log(w);
    w++;
}
//0
//1
//2

- for문과 while문 둘 다 반복문이지만,  for문은 횟수에 의해서 반복이 되고 while문은 참-거짓에 의해서 반복이 됩니다.

 

// 무한루프
while(true){}

- 조건식이 항상 참인 경우에는 무한루프가 발생하게 됩니다.

 

let w = 0;

while(true) {
	console.log(w);
    w++;
    
    if(w ==3){
    	break;
    }
}
//0
//1
//2

- while문에서 무한루프를 돌리면서 어떠한 특정 조건에서 반복을 멈추고 싶을 때 break문을 사용하여 while문을 정지시키면 됩니다.

 

 

🟡 4. do...while 문

- do...while 문은 코드 블록을 실행하고 나서 조건식을 평가합니다. 그래서 무조건 코드 블록이 한 번은 실행이 됩니다.

//do...while문
do {
	반복 실행할 코드 블럭
}while(조건식);


//do...while문 예제
let d = 0;

do {
	console.log(d);
	d++;
} while (d < 3);
//0
//1
//2



------------------while && do...while-----------------
let w = 0;

while(w<0){
	console.log(`w is : ${w}`);
    w++;
}

let d = 0;

do {
	console.log(`d is : ${d}`);
    d++;
}while(d<0);

// d is 0
// do...while은 코드블럭이 무조건 한번은 실행됨

 

 

🟡 5. for...in문

- for...in문은 객체를 순회하기 위해서 사용합니다. 

//for...in
for(let key in object){}


//for...in 예제
let obj = {
	a : 1,
	b : 2,
	c : 3,
	d: 4
};

for(let k in obj) {
	console.log(k);
}
// a
// b
// c
// d

for(let k in obj) {
	console.log(obj[k]);
}
// 1
// 2
// 3
// 4

 - 위 예제를 보면, 객체를 순회하면서 k라는 변수에 순차적으로 obj의 key를 할당합니다. 즉, obj의 key가 4개이면 4번을 순회하게 됩니다. 

- 객체의 키가 아닌 값을 얻고 싶다면 두 번째 for문에 나온 것처럼 object[key]형식으로 추출할 수 있습니다.

 

 

 

📝 정리 

• 반복문은 조건식이 거짓이 될 때까지 특정 코드 블록을 반복 실행하는 문입니다.
• 반복문에는 for, while, do...while, for...in, for...of문이 있습니다.
• for문은 특정 횟수를 반복하기 위해서 사용됩니다.
• while문은 특정 조건에서 반복하기 위해서 사용됩니다.
• do...while은 while과 같지만, 조건에 코드 블록 뒤에 붙어 있어 무조건 한 번은 코드 블록이 실행됩니다.
• for...in은 객체를 순회하기 위해서 사용됩니다.

 

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~