[JavaScript] 반복문 while문, for문

 

"환영합니다!" 라는 내용을 반복하여 10번 출력하는 문장을 JavaScript로 구현하려면 어떻게 해야할까 ?

console.log('환영합니다! ');
console.log('환영합니다! ');
console.log('환영합니다! ');
console.log('환영합니다! ');
console.log('환영합니다! ');
console.log('환영합니다! ');
console.log('환영합니다! ');
console.log('환영합니다! ');
console.log('환영합니다! ');
console.log('환영합니다! ');

 

아마 console을 이용하여 출력할 경우에는 위와 같이 작성하면 될 것이다.

하지만 위처럼 10번 반복이 아니라 100번, 1000번 등 무수히 많은 양을 반복해야 한다면 ?

혹은 출력문에 순서대로 번호를 붙여야한다면 하나하나 편집하기에는 굉장한 스트레스가 따를 것이다.

 

그래서 나온 것이 "반복문"이다.

 

 

반복문

반복적으로 실행되어야 하는 프로그램을 간결하게 반복실행할 수 있도록 만들어주는 구문

기본적으로 while, for 문이 존재한다.

 

 

 

 

while문

초깃값의 선언
while(반복되는 조건){
    실행될 코드
    증감자
}

 

기본적인 형태는 위와 같다.

예를 들어, 이전에 "환영합니다!" 라는 문장을 10번 출력하는 프로그램을 while문으로 나타낸다면 아래와 같이 나타난다.

 

let i = 0;
while(i<10){
    console.log('환영합니다! ');
    i++;
}

 

• 초기값 선언 : let i = 0, i라는 이름의 변수를 선언하고 초기값으로 0을 넣었다.
• 반복되는 조건 : i<10, i가 10보다 작다면 이 반복문은 실행된다.
• 실행될 코드 : console.log('환영합니다! ');  콘솔에 '환영합니다! '를 출력하게 된다.
• 증감자 : i++, i의 값을 1 증가시킨다는 의미이다.

 

결과

 

 

만약에, 초기값을 let i=0 으로 설정하고, 증감자를 i--로 설정한다면 어떻게 될까 ?

let i = 0;
while(i<10){
    console.log('환영합니다! ');
    i--; // i의 값을 1씩 감소시킴
}

 

결과

 

결과는 "환영합니다! "의 출력이 멈추지 않고 계속해서 출력된다.

 

우리가 초기값으로 설정한 i의 값은 0이다.

우리가 반복문을 설정한 조건은 i가 10보다 작을 때 실행되는 것이다.

처음에 i<10의 조건이 성립하므로, 반복문의 루프는 시작되고, 그 이후에 i의 값을 1 감소시키면 i에는 -1의 값이 들어있는 것이다.

다시 i<10의 조건에서 성립하고,반복문은 계속된다. i를 감소시켜서는 절대 i<10의 범위를 벗어나지 못하기 때문에 무한루프에 걸리게 된다.

따라서 , 이와 같은 무한루프를 방지하기 위해서는 초기값과 증감자를 잘 확인해야한다.

 

두 가지 방법으로 고칠 수 있다.

let i = 0; // 초기값 0
while(i<10){
    console.log('환영합니다! ');
    i++; // 1씩 커지는 증감자
}

 

제일 처음의 방식처럼 작성하거나,

 

 

let i = 10; // 10부터 시작
while(i>0){ // 조건은 0보다 큰 경우
    console.log('환영합니다! ');
    i--; 1씩 작아지는 경우
}

 

 위와 같이 i 의 초기값을 10으로 설정하고 조건범위를 i가 0보다 큰 경우로 설정한다.

i값을 1씩 줄이는 증감자를 사용하여 i 값이 10, 9 , 8, 7, 6, ... , 1까지 총 10번 루프가 돌도록 설계한다.

 

결과

 

두 프로그램은 위와같은 결과가 출력된다.

 

 

 

 

 

 

 

for문

for(초기값;조건범위;증감자){
    실행 코드
}

 

위 모습이 기본적인 for문의 형태이다.

while문에서는 초기값과 조건범위, 증감자가 흩어져있는 반면 for문은 한 곳에 정리되어 있어 가독성이 더 뛰어나다고 할 수 있다.

 

for문으로 "환영합니다! " 출력을 다시 작성한다면 아래와 같다.

for(let i = 0; i<10; i++){
    console.log('환영합니다! ');
}

 

결과

 

for문도 마찬가지로 범위와 초기값 설정에 유의하여 무한루프가 발생하지 않도록 주의해야한다.

10번을 출력하는 다른 범위의 코드도 첨부하겠다.

for(let i = 10; i>0; i--){
    console.log('환영합니다! ');
}

 

결과

 

 

 

 

 

 

※ 관례적으로 for문과 while문 같은 반복문의 변수는 i를 사용하곤 한다.