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

while반복문과 마찬가지로 자바스크립트에서 반복 동작을 만들 수 있는 for반복문에 대해서 살펴보자.

 

기본구조

for반복문은 while에 비해서 문법이 상대적으로 더 복잡하지만 while문보다는 훨씬 더 많이 쓰이는 반복문이다.

for (초기화; 반복조건; 동작후동작) {
    동작
}

for반복문도 while반복문과 마찬가지로

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

 

다만 조금 다른 점이라고 하면

for라는 키워드로 시작해서 그 이후 소괄호에 작성하는 내용들이 조금 복잡해 보인다. 

 

하나씩 살펴보자.

1. 초기화

초기화 부분은 반복문이 실행될 때 가장먼저, 그리고 딱 한번 실행되는 코드이다.

일반적으로 반복을 카운트할 카운터 변수를 생성하는데 많이 쓰인다.

여기서 생성하는 변수는 for문 내의 블록 scope를 가진다.

따라서 let이나 const 키워드로 변수를 생성할 경우에는 for문의 지역변수가 생성되고,

var 키워드로 변수를 생성하게 되면 전역 변수가 생성되기 때문에 이 부분은 꼭 조심해야 한다.

 

2. 반복조건

반복 조건 부분은 if문과, while문에서 볼 수 있는 조건 부분과 동일하다.

반복이 진행될 때마다 반복을 수행할지 종료할지를 평가하는데, 
먼저 불린 형태로 형 변환이 이뤄진 다음 평가를 수행한다.

이 부분이 true로 평가될 경우 블록 문 내부의 동작 부분을 수행한다.

 

3. 동작 후 동작

사실 내가 그냥 막 붙인 이름이지만, mdn에서는 'final-expression'이라고 부른다.

이 부분은 블록 문의 동작을 모두 마친 다음 동작하는 부분이다.

다음 반복으로 넘어가기 직전 수행할 동작으로 생각해볼 수도 있다.

일반적으로는 조건 부분에 영향을 미칠 동작들을 작성한다.

예를 들어 카운터 변수의 값을 증감하는 동작들을 수행하는 것이다.

 

for문의 핵심은 바로 이 소괄호 안의 세 부분의 역할이다.

간혹 처음 for문을 학습할 때, 이 부분을 뭔가 공식처럼 오해하는 사람들이 있다.

초기화 부분에 반드시 변수를 선언해야 하는 것처럼 오해할 수도 있지만,

말 그대로 반복문이 실행될 때 가장 먼저 딱 한번 실행되는 것이다.,

동작 후 동작 부분도, 말 그대로 동작 이후에 수행할 동작을 작성하는 것이지,
꼭 반드시 카운터 변수를 증가시키거나 감소시키는 코드를 작성할 필요는 없다는 것이다.

이번 포스트에서 다루진 않겠지만 심지어 이 소괄호 안쪽 부분을 모두 생략할 수도 있다.

 

그렇기 때문에 일반적인 모습으로 인해 고정관념에 사로잡히지 않도록 주의하자. 

좀 더 명확하게 이 원리를 이해한다면 for문을 조금 더 자유롭게 활용할 수 있다.

 

아무튼 다시 for문 문법으로 돌아와서,

마지막 블록 문 내의 동작 부분은 다른 부분과 동일한 동작 부분이다.

매 반복 시 수행할 동작들을 작성하면 된다.

 

활용 및 while문과의 차이

[JavaScript] 자바스크립트 while 반복문 이해하기에서 작성했던

숫자 1부터 10까지 출력하는 while문을 for문으로 작성해 보면 아래와 같다. 

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

 

for문의 경우에는 while문의 예시에서 두 번째로 들었던 예시와 동일하게 동작한다.

for문의 구조상 동작 후 동작이기 때문에 콘솔에 i를 먼저 출력한 다음 숫자를 1씩 증가시킨다.

for (let i = 0; i < 10; console.log(i)) {
    i++;
}

 

 

굳이 첫 번째 예시와 동일하게 하려면 이렇게 작성할 수도 있다.
말 그대로 동작 후 동작이기 때문에 for문이 동작하는 원리에 맞게 적절하게 수행된다.

심지어 동작 후 동작 부분에서 여러 동작을 하려면 쉼표로 구분해서 여러 동작을 작성할 수도 있다.

 

하지만, 이것은 극단적으로 단순한 상황이기에 가능한 것이지,

일반적으로 조건부에 영향을 미칠 간단한 동작은 '동작 후 동작' 부분에 작성하고

나머지 매 반복마다 동작할 복잡한 코드들은 블록 문 안에서 조금 더 자유롭게(?) 작성하는 것이

작성하기에도 편하고 자연스레 가독성도 더 좋다.

 

코드에서도 볼 수 있듯 for문은 소괄호 내부의 동작원리를 활용해서,
반복에 필요한 조건들을 모두 소괄호 내부에 담아두고

블록 문 안에서는 반복적으로 동작할 코드들만 담을 수 있기 때문에,

훨씬 더 작성하기도 편리하고 가독성도 좋은 장점이 있다.

 

소괄호 내부에 반복에 필요한 조건들을 집중해서 작성할 수 있기 때문에

상대적으로 while문 보다 무한루프에 빠질 가능성도 줄일 수 있다.

 

또한 초기화 부분에서 지역변수를 생성하면,

while문과 다르게 매 반복마다 공유가 가능하기 때문에

조금 더 다양한 반복문의 활용이 가능해지는 장점도 있다.

 

카운터 변수를 초기화 부분에서 생성하는 것도 이러한 이유다.

카운터 변수가 필요할 경우 전역 변수를 참조해야 하는 while문과 다르게 
지역변수 활용이 가능한 for문은, 

상대적으로 좀 더 안전한 코드를 작성할 수 있게 해 준다.