고양의 성장일기

[Javascript] Javascript에서 반복문 사용하기 본문

🖥️ Front-End/Javascript

[Javascript] Javascript에서 반복문 사용하기

고 양 2023. 10. 12. 13:52
반응형
Javascript에서 반복문 사용하기

자바스크립트에서도 코드 반복을 위한 반복문을 작성할 수 있습니다.
자바와 마찬가지로 do-while문, while문, for문 세 종류를 사용할 수 있습니다.


do-while
do-while문은 while의 조건이 true인 경우 do 블록 안의 코드를 반복합니다.
주로 조건의 true, false 여부와 상관없이 코드를 최소 한 번은 실행시키기 위해 사용합니다.
아래 코드는 i가 0보다 클 동안 i의 값을 알림 창으로 띄워주는 코드입니다.

let i = 10;
do {
    alert(i);
    i--
} while (i);

 

while
while문은 조건이 먼저 명시되고 실행코드가 나중에 나타나게 됩니다.
조건이 true인 한 코드를 반복하게 됩니다.
아래 코드의 경우는 1부터 10까지 alert를 이용해 알려주는 코드입니다. 알림 지옥

let i = 1;

while (i<=10) {
    alert(i);
    i++;
}

 

보통 일정 조건 아래 무한히 루프를 반복하고 싶을 때 while문을 아래와 같은 방식으로 응용해서 만들곤 합니다.

while(true){
	//code 
	//code...
    
	if(!condition) break;
}

 


for
for문도 자바와 같은 구조를 띄고 있습니다.
아래 코드는 배열을 선언하고 배열의 첫 번째 자리부터 숫자 1씩을 할당하는 코드입니다.
배열의 첫 번째 자리의 인덱스는 0인데 i가 1로 시작하기 때문에 배열의 인덱스값은 i - 1로 구성해줘야 합니다.

let array = new Array();

for (let i = 1; i<=5; i++){

	array[i-1] = i;

}

for 문의 경우 시작값을 인라인으로 선언하지 않고 for문 블록 바깥에서 선언된 값을 이용해서 설정할 수도 있습니다.

let array = new Array();
array = [1,2,3,4,5];
let i = array.length;

for (i; i <= 10; i++) {
    alert(i);
}

for문의 조건 중 구성요소를 생략할 수 있는데 다음과 같이 사용할 수 있습니다.

let i = 0; 

for ( ; i < 5; i++) {
    alert(i);
}
//이미 변수가 선언되어 있고 값이 할당되어 있으면
  시작값을 생략할 수 있습니다.

for ( ; i < 10 ;) {
    alert(i++);
}
//증감식도 생략할 수 있습니다.

let i = 0;
let sum;
for (; i <= 10 ; ) {
    sum += Math.pow(2, i);
}
//10의0승부터 10의 10승까지의 합을 구해봅시다.

 

자바스크립트의 모든 반복문도 break와 condition을 이용해 반복 자체를 제어할 수 있습니다.
반복되는 코드블록 내부에 if조건을 이용해 (?를 사용하는 삼항 연산자는 사용할 수 없습니다.)
해당 코드를 멈추고 빠져나갈지 한 단계를 건너뛸지 또는 계속해서 이어갈지 선택할 수 있습니다.


좀 더 특별한 for
자바와 마찬가지로 for문을 이용해 2중으로 루프를 구성하거나 무한루프를 구성할 수도 있습니다.

let i = 1;
outer: 
for(; ;) {
	i++;
	for(let j = 1; j < 10; j++ ) {

		let keepRun = prompt(`what is (${i} x ${j})?`,'');
		
		if (!keepRun == i*j) break outer;
	}
}
alert('wrong answer');

 

2중 for문으로 n9단을 만들어서 prompt를 이용해 매번 답을 묻고 사용자가 입력한 답이 틀리면 n9단이 끝나는 구조를 구성해 봤습니다. 
바깥 for문에 outer라는 라벨을 붙여 안쪽 for문에서 바깥 for문까지 멈출 수 있는 제동장치를 만들었습니다.

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

반응형