웹사이트 검색

JavaScript에서 While 루프 및 Do...While 루프 사용


소개

자동화는 시스템이 자동으로 작동하도록 만드는 기술입니다. 프로그래밍에서는 반복 작업을 자동화하기 위해 루프를 사용합니다. 루프는 프로그래밍 언어의 가장 유용한 기능 중 하나이며 이 기사에서는 JavaScript의 whiledo...while 루프에 대해 알아봅니다.

JavaScript의 whiledo...while 문은 true와 유사합니다. 한 번만 평가되는 if 문과 달리 루프는 조건이 더 이상 true로 평가되지 않을 때까지 여러 번 실행됩니다.

또 다른 일반적인 유형의 루프는 for 문으로 설정된 횟수만큼 실행됩니다. whiledo...while 루프는 조건부 기반이므로 루프가 실행되는 횟수를 미리 알 필요가 없습니다.

동안 루프

JavaScript에서 while 문은 지정된 조건이 true로 평가되는 동안 실행되는 루프입니다.

구문은 아래와 같이 if 문과 매우 유사합니다.

while (condition) {
	// execute code as long as condition is true
}

while 문은 JavaScript에서 구성하는 가장 기본적인 루프입니다.

예를 들어 인구 제한이 있는 수족관이 있다고 가정해 보겠습니다. 루프를 반복할 때마다 물고기 한 마리를 추가합니다. 수족관에 물고기가 10개 있으면 개체 수 제한에 도달하고 프로그램에서 더 이상 물고기를 추가하지 않습니다.


// Set population limit of aquarium to 10
const popLimit = 10;

// Start off with 0 fish
let fish = 0;

// Initiate while loop to run until fish reaches population limit
while (fish < popLimit) {
	// add one fish for each iteration
	fish++;
	console.log("There's room for " + (popLimit - fish) + " more fish.");
}

위의 프로그램을 실행하면 조건이 더 이상 true로 평가되지 않을 때까지 while 루프를 통해 프로그램의 반복을 보여주는 다음 출력을 받게 됩니다.

Output
There's room for 9 more fish. There's room for 8 more fish. There's room for 7 more fish. There's room for 6 more fish. There's room for 5 more fish. There's room for 4 more fish. There's room for 3 more fish. There's room for 2 more fish. There's room for 1 more fish. There's room for 0 more fish.

이 예제에서는 while 루프를 물고기 수가 수족관의 개체 수 제한보다 적은 동안 실행되도록 설정했습니다. 반복할 때마다 모든 10 자리가 채워질 때까지 물고기 한 마리가 수족관에 추가됩니다. 그 시점에서 루프 실행이 중지됩니다.

무한 루프

무한 루프는 이름에서 알 수 있듯이 영원히 계속 실행되는 루프입니다. 실수로 무한 루프를 만들면 브라우저나 컴퓨터가 다운될 수 있습니다. 무한 루프를 피하려면 이를 인식하는 것이 중요합니다.

일반적인 무한 루프는 while 문의 조건이 true로 설정된 경우에 발생합니다. 다음은 영원히 실행되는 코드의 예입니다. 무한 루프를 테스트할 필요는 없습니다.


// Initiate an infinite loop
while (true) {
	// execute code forever
}

무한 루프는 영원히 실행되지만 break 키워드로 프로그램을 종료할 수 있습니다.

아래 예에서는 while 루프에 if 문을 추가하고 해당 조건이 충족되면 break 로 루프를 종료합니다.


// Set a condition to true
const iceCapsAreMelting = true;
let polarBears = 5;

// Initiate infinite loop
while (iceCapsAreMelting) {
  console.log(`There are ${polarBears} polar bears.`);
  polarBears--;
  // Terminate infinite loop when following condition is true
  if (polarBears === 0) {
	console.log("There are no polar bears left.");
  	break;
  }
}

위의 코드를 실행하면 다음과 같이 출력됩니다.

Output
There are 5 polar bears. There are 4 polar bears. There are 3 polar bears. There are 2 polar bears. There are 1 polar bears. There are no polar bears left.

이것이 반드시 루프를 만들고 종료하는 실용적인 방법은 아니지만 break는 알아두면 유용한 키워드입니다.

Do…While 루프

우리는 이미 지정된 조건이 참인 동안 코드 블록을 실행하는 while 루프에 대해 배웠습니다. 그 위에 do...while 문이 있습니다. 이 문은 do...while과 매우 유사하지만 주요 차이점은 do...while 입니다. 루프는 조건이 참이 아니더라도 항상 한 번 실행됩니다.

아래에서는 do...while 루프의 구문을 보여줍니다.

do {
	// execute code
} while (condition);

보시다시피 루프의 do 부분이 먼저 나오고 while (condition)이 그 뒤에 옵니다. 코드 블록이 실행된 다음 일반 while 루프에 있는 것처럼 조건이 테스트됩니다.

이를 테스트하기 위해 변수를 0으로 설정하고 do 문 내에서 변수를 증가시킨 다음 조건을 false로 설정할 수 있습니다.


// Set variable to 0
let x = 0;

do {
	// Increment variable by 1
	x++;
	console.log(x);
} while (false);
Output
1

우리의 출력은 1로 나왔는데, 이는 코드 블록이 실패한 while에 의해 중지되기 전에 루프를 한 번(0부터) 반복했음을 의미합니다. 상태.

루프가 한 번 이상 반복된다는 점을 염두에 두고 do...while 루프는 while 루프와 동일한 용도로 사용할 수 있습니다.

결론

이 자습서에서는 JavaScript의 while 루프, do...while 루프 및 무한 루프에 대해 배웠습니다.

반복 작업의 자동화는 프로그래밍의 매우 중요한 부분이며 이러한 루프는 프로그램을 보다 효율적이고 간결하게 만드는 데 도움이 될 수 있습니다.

자세히 알아보려면 Mozilla 개발자 네트워크에서 do...while 루프에 대해 읽어보세요.