(19) JavaScript - 제어문 / for 반복문

만약에 'SeopE'라는 문자열을 10번 출력하고 싶다면 console.log를 10번 쓰면 될 것이다.

console.log('SeopE')
console.log('SeopE')
console.log('SeopE')
console.log('SeopE')
console.log('SeopE')
console.log('SeopE')
console.log('SeopE')
console.log('SeopE')

 

그런데 이런식으로 작성하게되면 잘못 적지는 않았는지 혹은 10번 전부 잘 입력이 되었는지 등

단순한 반복적인 일 임에도 두 번 일을하게 되는 경우가 생긴다.

이럴 때 사용하는 것이 반복문이라는 것이다.

 

for 반복문

for문의 기본 구조는 다음과 같다.

    for (초기화부분; 조건부분; 추가동작부분){
        동작부분
    }

 

▲ if문과 비슷해 보이지만 가장 큰 차이점은 if 문은 어떤 조건 부분이 충족되면 동작부분을 한 번만 수행하고 끝나지만

for문은 반복문인만큼 조건 부분이 충족이 되면 계속해서 동작 부분을 반복한다.

소괄호 내부를 살펴보자면..

초기화 부분, 조건 부분 추가동작부분 세부분을 세미콜론으로 나누어져 있다.

 

▷ 초기화 부분

for 반복문이 시작할 때 가장 먼저, 그리고 딱 한 번만 실행되는 부분이다.

 

▷ 조건 부분

if문과 동일하게 조건 부분에 작성된 코드를 불린 형태로 평가한 다음 true로 판단이 되면 

동작 부분을 실행하는 역할을 하는 부분이다.

 

▷ 추가 동작 부분

조건 부분이 true로 판단됐을 때 동작 부분을 실행하고 그 다음 추가적으로 동작할 부분을 작성하는 곳이다.

 

'SeopE' 문자열 10번 반복을 for문으로 작성해보자면..

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

▲ console.log 10번 작성 한 것 보다 훨씬 간결하고 깔끔하게 변했다.

소괄호 부분을 살펴보면..

 

▷ 초기화 부분

i라는 변수를 하나 만들고 조건 부분과 추가 동작 부분에서 i를 사용하는 것을 볼 수 있는데

반복문을 만들 때 가장 먼저 생각해야 할 부분은 '얼마만큼 반복하실?' 이다.

두 번만 반복할 수도 있고 100번을 반복할 수도 있고 아니면 무한으로 반복할 수도 있는데,

그 반복의 횟수를 저장하는 역할이 변수 i이다.

그래서 for문에서 보통 초기화 부분은 주로 반복 횟수를 저장할 변수를 생성하는데 활용한다.

 

▷ 조건 부분

이 i 변수의 값을 활용해서 조건 부분을 작성하는데, 10번 반복하는게 목적이기에

i가 10보다 작거나 같을 때라는 조건을 만들어준다.

 

▷ 추가 동작 부분

자연스럽게 반복 횟수를 카운트하기 위해서

이 변수의 값을 하나씩 증가시키는 코드를 주로 추가 동작 부분에 작성한다.

 

 

실행 시키기 전에 i가 잘 증가하는지 보기위해 i도 함께 연결해서 출력해보자면..

    for (let i = 1; i <= 10; i++) {
        // console.log('SeopE');
        console.log(`${i} SeopE`);   
    }

 

 

의도에 맞게 코드에 맞춰서 10번 전부 출력이 잘 된 것을 볼 수있다.

 

다시 동작하는 순서를 살펴보자면..

for문이 시작되면 가장먼저 초기화 부분이 실행 되면서 변수 i가 선언되었다.

그리고 조건 부분에 처음에는 i가 1이니까 조건 부분이 true가 돼서 동작 부분이 실행된다.

그럼 console.log에있는 i는 1이 되고 첫 번째 'SeopE'가 출력이 되는 것이다.

마지막으로 추가 동작 부분에서는 i값이 1이 증가했으니 이제는 i가 2가 되는 것이다.

 

그런데 초기화는 처음에 딱 한 번만 실행되기 때문에

한번 이렇게 반복이 일어나면 그 다움 순서는 초기화가 아니라 조건 부분이 된다.

이때부터는 조건 부분이 false가 될 때까지 

조건 부분, 동작 부분 그리고 추가 동작 부분 순서로 계속해서 반복이 일어나는 것이다.

 

그러면 이제 조건 부분이 직전에 i를 1씩 증가 시켜줬으니까 이제는 i가 2인 상태로 평가가 된다.

당연히 조건이 충족하기 때문에 숫자 2와 두 번째 'SeopE'가 출력이 되는 것이다.

 

이런식으로 계속해서 10번을 반복하고 

i가 11이 되는 지점에서는 다음 조건 부분이 false가 되면서 반복문이 종료가 되는 것이다.

 

for문의 특징을 몇가지 살펴보자면..

 

▼ 추가 동작 부분을 꼭 채울 필요는 없다.

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

for 반복문에서 추가 동작 부분은 꼭 채울 필요는 없다.

추가 동작 부분을 비워두고, 동작 부분에 i를 1씩 증가시키는 부분이 들어가도 문제없다.

하지만 i++와 같은 역할을 하는 곳으로 for문의 추가 동작 부분을 만든 것이기 때문에,

동작 부분에서는 반복하고자 하는 내용만 작성하는 것이 좋다.

 

▼ 초기화 부분도 반드시 채울 필요는 없다.

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

for 반복문의 로컬 변수를 꼭 활용하지 않고, 반복문 밖에 있는 글로벌 변수를 활용해도 

아무런 문제없이 같은 결과를 출력한다.

단, for문의 소괄호 안쪽 가장 첫 번째 세미콜론은 생략할 수 없다.

저 세미콜론은 초기화 부분과, 조건 부분을 구분하는 세미콜론이기 때문에 초기화 부분의 코드를 생략하더라도

세미콜론 만큼은 생략해선 안되는 것.

for문의 소괄호 안쪽은 반드시 세미콜론 2개가 필요하며 그렇지 않으면 실행 오류가 발생한다.

 

▼ 초기화 부분에서 생성한 변수는 for문의 로컬 변수다.

    for (let i = 1; i <= 10; i++) {
        console.log(`${i} SeopE`);  
    }
    console.log(i) // 오류

for 반복문의 초기화 부분에서 생성한 변수는 for문 안에서의 로컬 변수가 된다.

for문 안에서 생성한 로컬 변수이기 때문에 for 반복문이 종료되고 나서 

for 반복문 밖에서 변수를 사용하려고 하면 오류가 발생한다.

 

 

이렇게 반복문만 잘 활용한다면 원하는 동작을 몇 번이든 쉽게 처리할 수있다.

 

---

★GitHub 주소 (for문)

https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/Basic

JavaScript_soloPlay/Basic at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (for문 예제)

https://purrfect-gargoyle-935.notion.site/for-10ce9530b3e18001b99ae2e90a7db53b?pvs=4

for반복문 (짝수 구하기 예제) | Notion

 

https://purrfect-gargoyle-935.notion.site/for-10ce9530b3e18058a350d65dd598eb27?pvs=4

for반복문 (* 삼각형 예제) | Notion