반복문 for, while
FE BE 개발 메모장/Javascript

반복문 for, while


우선 for 문을 알아보면 아래와 같다.

 

for() 반복문

for반복문 구조

for( [초기식] ; [조건식] ; [증감식]){
	반복문 (문장)
 }   

 MDN에서 설명하는 동작 방식은 대충 이렇다.

 

  1. 초기식이 존재하면 최초로 실행되며, 변수로 선언 할수 있다.
  2. 조건식은 조건이 참이면 실행하고, 거짓이면 for문이 종결된다.
  3. 반복문을 실행한다.
  4. 증감문이 실행되고, 다시 2번부터 시작한다.

이 내용을 조금더 자세히 보면

var a = 0;
for(let i = 0; i <= 5; i++){
	console.log(i) 
	a = a + i; /*statesment*/
}

------------------------------------------------------------------------
1. 초기식 변수 i = 0이다. (var는 반복문의 전역 변수 선언, let 은 반복문의 블록 내 변수 선언) 

2. 조건식에서 i는 5보다 같거나 작은지 판별한다. 결과가 참이면 문장을 실행한다.

3. (a = a + i === a += i;) 문장을 실행한다. a === 0;

4. 증감식에서 증가연산자(++)를 사용해서 1 <= 5가되고, a = 0 + 1;

5. 다시 2번부터 조건이 참일 때까지 반복한다.
-----------------------------------------------------------------------

이런식으로 해석을 하게 되었다.

 

간단히 식으로 풀어보면 이런식이다.

var a = 0;
a += 1 (a = a + 1)
a += 2
a += 3
a += 4
a += 5

반복문을 배운 덕분에 굳이 반복해서 더해주지 않아도 효율적으로 짤 수있는 기초를 배우게 됬다.

 

하지만 이렇게 기초를 배웠어도 막상 예제문제를 풀게 되었을 때, 어떤 변수나 메소드를 넣고, 어쩔때 조건식을 넣어야할지 감이 잡히지 않았다. 문제에 대해서 어떻게 접근해야할지 개념을 잡기위해 구글을 적극적으로 이용 하게되었고, 코드를 해석하는 연습을 많이 하면서 꾸준히 하도록 노력해야겠다고 마음을 먹었다.

for() 이중반복문

for(let i = 0; i < 5; i++){
    for(let j = 0; j < 5; j++){
console.log("text");
  }
}

강의 시간에 이중 반복문의 기초 개념을 설명하기 위한 예시를 보여줬다.  

debugger라는 기능을 통해 코드 실행 순서를 알게 되었다. 덕분에 나에게 이해가 좀더 빠르게 다가왔다.

 

           
           [1]	  [2] [7]
for(let i = 0; i < 5; i++){
   		
               [3]    [4] [6]
    for(let j = 0; j < 5; j++){
    
    [5]
console.log("text");
	}
}
  1. i 조건식을 판별한다.
  2. 변수 j 의 초기식을 실행한다. ( 1회 진행하면, j = 1이되며 4까지 모든 과정을 반복한다.)
  3. j의 조건식을 판별한다.
  4. 문장(statement)을 실행한다.
  5. 변수 j 에 1을 더해주고, 조건식이 참일 때 까지 반복한다.
  6. 변수 i 에 1을 더해준다음 다시 [2]번부터 시작한다.

console.log는 총 25회 반복한다.

 

복잡한 순서지만 간단하게 해석한다면 바깥쪽 for반복문이 먼저 실행한다음 안쪽 반복문을 진행하고, 문장을 실행한다. 안쪽 반복문 과정이 1회 마쳤다면 다시 바깥쪽부터 안쪽으로 조건식이 참일 때 까지 진행된다. 처음엔 많이 복잡했지만 계속 debugger로 반복하다 보니 개념을 알게 되었다.

 

이번엔 while문을 보자

while([조건문]) {
 반복문, 문장
}

for문과 비슷하지만서도 다르다, while문은 조건문이 참이면, 문장을 무한반복한다.

'FE BE 개발 메모장 > Javascript' 카테고리의 다른 글

조건문 if() {  (0) 2020.10.06
연산자  (0) 2020.10.04
Math 메소드, 문자열  (0) 2020.09.22
산술 연산자에서 %가 하는 일  (0) 2020.09.16
자바스크립트 변수와 함수의 기초를 공부하다.  (0) 2020.09.15