Coding/JavaScript

[JavaScript] 반복문(for, while)

호밀이 2022. 4. 28. 09:15

📌 반복문: 같거나 비슷한 코드를 여러번 실행해야 하는 경우에 사용한다.

 

📌 반복문의 종류

  • for
  • for...in
  • for...of
  • while
  • do ...while

 

📌 for

  • 어떠한 조건이 거짓이 될 때까지 반복한다.
  • 주로 특정 조건이 주어져 있을 경우에 많이 사용합니다.
  • for (초기문; 조건문; 증감문)
    문장
  • ex) 초기문 i = 1, 조건문 i <= 4, 증감문 i++
    시작은 1부터 시작하며 조건문 i가 4와 같거나 작을 때 반복문이 수행되며 1번 반복할 때마다 i가 1씩 증가한다.
    반복되는 문장 = i의 현재 값을 출력한다.
for (let i = 1; i <= 4; i++){
	console.log(i);
}

/*
output1: 1
output2: 2
output3: 3
output4: 4
*/

 

📌 for...in

  • 객체의 열거 속성을 통해 지정된 변수를 반복합니다.
  • for(let i in 변수)
    문장
  • ex) name의 길이 = 6이므로 열거 속성을 이용해 6번 반복한다.
let name = 'homile';

for (let i in name){
	console.log(i);
}

/*
output1: 0
output1: 1
...
output6: 5
*/

 

📌 for...of

  • for...in은 속성의 이름을 통해 반복하지만 for...of는 속성의 값을 통해 반복합니다.
  • for(let i of 변수)
    문장
  • ex) name의 길이 = 6 이므로 속성의 값을 6번 반복하여 출력한다.
let name = 'homile';

for (let i of name){
	console.log(i);
}

/*
output1: h
output1: o
...
output6: e
*/

 

📌 while

  • 어떠한 조건이 참일 때 계속해서 반복합니다.
  • 계속 반복하여 주어진 조건을 찾을 때 사용합니다.
  • 주의할 점은 어떠한 조건이 계속 참일 경우 무한히 반복되므로 작성에 주의해야 합니다.
let a = 0;
let b = 0;

while (a < 3){
	a++;
    b += a;
    console.log(b);
}

/*
output1: 1	// a = 1 < 3
output2: 3	// a = 2 < 3
output3: 6	// a = 3 < 3 → while문 종료
*/

 

📌 do...while

  • 문장이 한번 실행되고 조건이 거짓이 될 때까지 반복합니다.
  • do
        문장
    while(조건문)
  • do {} 안에있는 문장이 최소 1번 실행되고 while조건이 참이라면 반복적으로 실행됩니다.
let i = 0;

do{
    i++;
    console.log(i);	
}while (i < 3);

/*
output1: 1
output2: 2
output3: 3
*/

 

📌 break

  • break문을 만나면 가장 가까운 반복문, switch문을 종료하고 다음 명령을 실행합니다.
  • ex) for문은 0부터 5이하까지 반복하는데 조건문으로 i가 2일 때, break문을 만나서 for문이 종료됩니다.
for (let i = 0; i < 5; i++){
	if (i === 2){
    	break;
    }
    console.log(i);
}

/*
output1: 0
output2: 1
*/

 

📌 continue

  • 현재 실행중인 반복을 종료하고 다음 반복 명령을 실행합니다.
  • ex) for문은 0부터 5이하까지 반복하는데 조건문으로 i가 2일 때, continue문을 만나서 반복이 종료되어서 2를 제외한 값이 출력됩니다. 이때, 반복문이 종료되는 것이 아닌 현재 진행중인 반복이 종료된다는 것을 주의하셔야 합니다.
for (let i = 0; i < 5; i++){
	if (i === 2){
    	continue;
    }
    console.log(i);
}

/*
output1: 0
output2: 1
output3: 3
output4: 4
*/

 

 

 

📝 참고자료

JavaScript MDN 루프와 반복

 

'Coding > JavaScript' 카테고리의 다른 글

[JavaScript] 객체  (0) 2022.05.10
[JavaScript] 배열  (0) 2022.05.10
[JavaScript] 문자열  (0) 2022.04.27
[JavaScript] 조건문  (0) 2022.04.27
[JavaScript] 함수  (0) 2022.04.26