[JavaScript] 자바스크립트 while 반복문 이해하기

프로그램을 만들다 보면 일정한 패턴을 가진 동작들을 반복적으로 수행해야 할 때가 있다.

예를 들어 콘솔에 1부터 10까지 숫자를 출력하는 경우를 보면,

일정하게 숫자 1이 증가하는 패턴을 가지고 있다.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

 

이렇게 무작정 1부터 10까지 콘솔에 출력하기 보다는,
일정한 패턴을 찾아서 반복문을 활용하면 훨씬 더 효율적인 코드를 작성할 수 있다.

 

자바스크립트에서 코드를 반복하는 방식은 여러 가지가 있지만,

오늘은 while 반복에 대해서 정리해보고자 한다.

 

기본 구조

while (조건) {
    동작
}

기본적인 구조를 보면 시작하는 키워드만 다를 뿐 흡사 if문과 비슷하다.

while문은 while이라는 키워드 다음에 소괄호를 열어서 어떤 조건식을 작성하는데,
if문과 마찬가지로 이 조건식을 충족할 경우 동작 부분을 수행한다.
그런데 반복문의 이름에 걸맞게 if문처럼 동작 부분을 한 번만 수행하는 것이 아니라,

while문의 조건식을 충족하지 않을 때까지 동작 부분을 계속해서 수행하는 구조를 가지고 있다.

그래서 반복하고자 하는 일정한 패턴을 여기 동작부에 작성하면 된다는 것이다.

 

그럼, while문을 활용해서 1부터 10까지 출력하는 코드를 작성해보자.

let i = 0;

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

증가하는 숫자를 담을 변수를 하나 만들어준다.

 

값을 할당해도 좋고, null 이든 0을 할당해줘도 될 것 같다.

잠시 다른 얘기지만, 자바스크립트는 타입을 명시하는 방식이 없기 때문에,
처음 변수를 선언할 때 (초기화할 때) 각 타입별로 빈 값의 의미를 가진 값을 할당하면서,

그 변수에 들어갈 타입을 암시하는 방법이 있다.

예를 들어 타입이 정해지지 않았거나 혹은 유동적으로 변수에 들어갈 값이 바뀐다면

당연히 아무 값도 할당하지 않거나 null값을 할당하면 되지만,

변수에 들어갈 값이 주로 문자열이라면, 변수를 초기화할 때 빈 문자열을 할당하고

변수에 들어갈 값이 주로 숫자라면, 변수를 초기화할 때 0을 할당하는 방식이다.

 

아무튼, 다시 반복문을 살펴보면, 기준이 될 변수를 만들고

그 변수를 활용해서 반복문을 수행할 조건식을 갖추면 된다.

i가 10보다 작다라는 조건식을 만들었는데, 동작 부분을 보면 알 수 있겠지만,

i에 숫자 1을 증가시킨 다음에 i를 출력하기 때문에 i가 10보다 작을 때를 조건식으로 만들었다.

 

행여나 이 부분이 헷갈릴 경우에는 순서를 바꿔서

let i = 1;

while (i <= 10) {
    console.log(i);
    i++;
}

이런 식으로,

i를 먼저 콘솔에 출력한 다음 i를 증가시켜줘도 된다.

같거나 작다라는 부분이 등호까지 써야 해서 불편(?)하다면,

조건식 부분도 i < 11로 작성해도 결과는 동일하다.

 

하지만 한 가지 주의해야 될 부분은 연산 이후에 결과이다.

반복문이 끝나고 최종적인 i의 값을 놓고 보면, 

위쪽 코드는 반복문이 끝났을 때 i가 10이고,

아래쪽 코드는 반복문이 끝났을 때 i가 11이라는 차이가 존재한다.

 

코드가 복잡해지는 경우에는 이런 미세한 차이가

예상치 못한 오류를 불러올 수 있기 때문에,

코드를 작성할 때 이런 부분도 잘 고려해야 할 것이다.

 

개인적으로는 마지막으로 출력하는 숫자가 10이라면, 

최종적인 i의 상태도 10인 것이 조금 더 안전하다고 생각한다.

 

주의 사항

1. 무한루프 주의

while 반복문뿐만 아니라, 프로그래밍을 할 때 모든 반복문에서 주의해야 될 점은 멈춤이다. 

반복문이 멈추지 않고 무한히 반복되는 경우를 무한루프에 빠졌다고 하는데,

while반복문의 경우에는 조건식을 작성할 때 반드시 멈출 수 있는 조건을 조성하고,

동작 부분에서 언젠간 반드시 반복문이 종료될 수 있는 코드를 작성해줘야 한다. 

 

2. 형 변환 주의

[JavaScript] 자바스크립트 if문 조건문 이해하기에서도 마지막에 언급했는데,

while문도 if문과 마찬가지로 조건식에 들어간 결괏값이 불린 형태로 형 변환이 되기 때문에,

조건부에 값이 들어갈 경우에 당연히 그 값이 불린 형태로 형 변환이 되고서 조건 평가가 이뤄진다.

그렇기 때문에 혹시나 실수로 truthy 한 값이 계속해서 조건부에 들어갈 경우

무한루프에 빠질 수도 있으니 이 부분은 반드시 조심해야 한다.

 

3. 지역 변수 생성 주의

while문에도 중괄호로 감싸진 블록이다. 당연히 블록 스코프를 가지고 있다.

하지만 처음 반복문을 접할 때 간혹 오해를 하는 경우가 있는데,

이 블록 안에서 지역변수를 생성을 할 경우

계속해서 반복문 내에서 이 변수가 유지된다고 오해할 수 있다.

사실 이런 오해는 반복문을 한 번만 실행해보면 바로 알 수 있긴 하지만, 

아무튼 이런 경우, 하나의 동작 부분이 실행될 때 그 순간에

독립적인 하나의 변수가 생성되는 것일 뿐,

반복적으로 지역 변수가 유지되어 다음 동작부분이 실행될 때 공유되지 않는다.

let i = 0;

while (i < 10) {
    let a = 1
    console.log(a);
    a++;
    i++;
}

이 코드의 경우 분명히 a++로 a의 값을 증가시켰음에도 불구하고

콘솔에는 1만 10번 출력된 모습을 확인할 수 있다.