본문 바로가기

IT 인터넷/javascript

[javascript 언어공부] 반복문(2) - for문

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

이번시간에는 while문과 함께, 아주 잘 사용되는 또다른 문법에 대해서 살펴보겠다.


우선 저번시간에 배운 while에 대해 다시 한번 분석해보자. 


while 문은 크게 3가지 부분으로 구성돼있는데, 


① i라는 변수, 즉 언제까지 반복할 것이냐에 대한 기준점을 초기화 하는 부분,

② 그리고 반복적으로 실행할 때 마다 i값을 갱신해주는 부분,

③ 그리고 반복을 계속 진행할 것이냐 하는 것을 조건화 해놓은 부분이다.


실제로 코딩을 하다보면 이 3가지를 언제나 사용하게 되고, 따라서 

3가지를 하나의 문법적 요소로 결합해놓는다면, 오류가 줄어들고 더 보기 좋은 것임을 알 수 있다. 


아래 코드를 살펴보자. 


  var i = 0

  while(i < 10){

      document.write('hello world <br />');

      i = i+1;

  }



지금은 코드가 서로 붙어 있으니까 괜찮지만 


 var i = 0


이 사이에 100줄의 코드가 이 안에 있다면? 

그리고 그 중에 i = 100; 이라고 선언하는 실수를 한다면? 


 while(i < 10){

      document.write('hello world <br />');


이 사이에 100줄의 코드가 이 안에 있다면? 

그리고 그 중에 i = 100; 이라고 선언하는 실수를 한다면? 


      i = i+1;

  }


그렇다면 반복 조건이 달라지기 때문에, 우리가 원하는 코드가 만들어지지 않고,

가독성 면에서도 i의 값을 눈으로 찾기 어렵다. 



이러한 문제로, 이 3가지를 하나의 문법적 요소로 결합해 놓은 반복문이 있는데 이것이 바로 for문이다.


기존 코드를 for문으로 바꿔보자.

우선, while 부분을 for로 변경한다.

그리고 3가지의 문법적 요소, 초기화 부분 / 반복 조건 부분 / 값을 갱신해 주는 부분 

3가지 요소가 모두 for문 뒤 괄호 안에 들어간다.

세가지의 구분은 세미콜론(;)으로 구성한다. 

(var i = 0; i < 10; i = i+1) 


코드를 작성해보면 다음과 같다. 

 

  for(var i = 0;i<10;i=i+1){

      document.write('hello world <br />');

  }

이 세가지 요소가 괄호 안에서 순서가 바뀌면 안되기 떄문에 꼭 기억하고 있어야 한다. 


그렇다면, for문이 실행되는 순서는 어떻게 될까?


일단 for를 읽으면, 컴퓨터는 반복문이 실행된다는 것을 안다.

그리고 괄호 안의 것을 3부분의 구성요소로 쪼개게 된다. 


  for(var i = 0;i<10;i=i+1){

      document.write('hello world <br />');

  }


①번 초기화 부분은 for문이 실행될 때 제일 먼저 한번만 실행되며, 그다음 부턴 실행되지 않는다. 

그리고 나서 

②번 조건을 확인하고 true이면 하단 {}중괄호 안의 부분이 실행된다. 실행이 끝나면

③번 부분이 실행되도록 약속돼있다. 이후 다시 조건을 확인하러

②으로 가서 조건을 확인 후, true 일 경우 {}중괄호 안의 부분이 실행된다. 

.

.

.

.

이렇게 쭉 반복이 되다가, 

③에서 i의 값이 10이 됐을 때, 

②으로 가서 i < 10이 false인 것을 확인하고 


for문을 빠져나가서 

for문 하단의 내용을 실행하는 것이다. 




한가지 더 이야기 하자면, 

i = i+1 이라는 부분은 보통 i++라고 쓴다.

i++는 구문이 실행될 때마다 i의 값을 1씩 증가시킨다는 뜻이다. 


예를 들어 


var i = 0;

이라 선언 후 i++;를 입력 후 

alert(i)를 실행하면 경고창에 1이 뜬다.

이후에 또 i++를 입력 후 alert(i)를 실행하면 경고창에 2가 뜬다. 


다시 i = 0 을 선언보자.

alert(i++)를 실행히보면 0이 나온다.

이상태에서 다시 alert(i++)를 실행히 보면 1이 나온다.

또 alert(i++)를 실행하면 2가 된다.


i++는 i의 갑을 1씩 증가시킨 다는 뜻인데, 증가는 되는데 한 단계씩 느려진다는 생각이 든다. 


++i도 살펴보자. 


i=0을 선언 후 

alert(++i)를 실행하면 1이 되고 

alert(++i)를 실행하면 2가 되고

alert(++i)를 실행하면 3이 된다.


++i는 일반적으로 1을 더한 것과 같이 실행된다. 


그렇다면, i++와 ++i은 둘다 1의 값을 증가시킨다는 뜻인데 다른 값을 출력하게 된 것일까? 


i++는, i가 0인 상태에서 

alert(i++)를 실행시키면, 우선 alert명령이 사용되는 그 순간에는 i의 값은 0이며,

명령이 끝난 후에 i의 값이 1추가된다.


반대로 ++i는, i가 0인 상태에서

alert(++i)를 실행시킬 경우, 우선 i의 값이 1 증가되고, 이후 alert명령이 실행된다. 

따라서 경고창에 1이 뜬다.


보통 for문에선 i++를 많이 사용하나, 어떤 것을 사용해도 상관없다. 




반복문에는 i라는 변수가 많이 사용되나 변수명은 바뀔 수 있다.