[ JavaScript ] 자바스크립트 기본 문법 | 반복문 for 문법

이미지 출처 :  https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

자바스크립트 기본 문법  ::  반복문 - for

 

자바스크립트에서 반복을 표현하는 방법 중 하나인 for는 아래의 형식을 하고 있습니다.

 

 

 

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){ 반복해서 실행될 코드 }

 

예시를 보도록 하겠습니다.

 

 

 

 

for(var i = 0; i < 10; i++){
    console.log('test'+i);
}

 

 

for문은 제일 먼저 '초기화'를 합니다.

위의 예제에서 초기화는

 

var i = 0;

 

이라고 할 수 있습니다.

 

그 다음에는 '반복조건'인 i < 10이 실행됩니다. 이 때 반복조건이 참이면 중괄호 안의 내용이 실행됩니다.

처음 반복할 때는 i의 값이 0이기 때문에 'test'이라는 텍스트가 출력됩니다.

 

반복해서 실행될 코드'의 실행이 끝나면 '반복이 될 때마다 실행되는 코드'가 실행됩니다.

i++는 현재 i의 값에 1을 더하라는 의미입니다. 

 

 

이후 '반복조건'이 실행됩니다. 또 다시 '반복해서 실행될 코드'가 실행됩니다.

그렇게 반복해서 작업이 실행됩니다.

이 과정에서 i의 값은 반복 할 때마다 1씩 증가하고,

결국 i의 값이 10이 되는 순간 i < 10을 충족시키지 못하게 되고 반복문은 종료되게 됩니다.

 

 

 

 

for 문이 while 문과 다른 점

 

 

while 문은 크게 세가지 부분으로 구성되어 있습니다.

 

변수 초기화

반복 조건

반복 실행문

 

 

var i =0;
while(i<10){
console.log('test');
    i++;
}

 

 

위의 예제에서

 

var i =0;

 

에 해당하는 부분이 변수 초기화입니다.

 

i<10

 

에 해당하는 부분은 반복 조건이고,

 

i++

 

에 해당하는 부분이 반복 실행문입니다.

 

같은 코드를 for 문으로 작성해보도록 하겠습니다.

 

 

for(var i = 0; i < 10; i++){
    console.log('test'+i);
}

 

더욱 간결해진 것을 확인할 수 있습니다.

 

 

 

 

 

---

 

 

+ 보너스!

 

반복문이 없다면

 

 

test를 10번 반복해서 출력하고 싶다고 한다면 아래와 같이 코드를 작성하면 됩니다.

 

 

console.log('test');
console.log('test');
console.log('test');
console.log('test');
console.log('test');
console.log('test');
console.log('test');
console.log('test');
console.log('test');
console.log('test');

 

 

이 정도의 작업은 복사&붙여넣기를 이용해서도 할만하죠?

하지만 좀 더 큰 규모의 데이터를 다뤄야 한다면 반복문의 효용이 부각되기 시작합니다.

 

예를들어서 'test'를 5천번 출력해야 한다면 위의 예제와 아래 예제의 코드 분량에 큰 차이가 생기게 되겠죠.

 

 

 

 

for(var i = 0; i < 5000; i++){
    console.log('test');
}

 

 

반복문을 이용하면 이렇게나 코드가 간결해지고, 수고가 덜어지게 됩니다.