[생활코딩] JavaScript 문법 - 반복문

반복문은 영어로 loop과 iterare로 불리며, while 혹은 for 을 상황에 맞게 쓸 수 있다. 코딩할 때 자주보이는 문법이니 잘 알아둘 것!

---

1. 반복문 (loop / iterate)

컴퓨터는 반복적인 작업을 대행하기 위해

조건문은 컴퓨터를 똑똑하게, 반복문은 컴퓨터를 강력하게

이 두 개의 결합은 소프트웨어를 만들어가는 큰 축이다.

---

반복문의 문법(각각의 구문 서로 대체 가능)

2. while

while (조건){
    반복해서 실행할 코드
}

document.write 는 HTML이 아닌 JS를 이용해서 웹페이지에 텍스트를 출력하는 방법이다.

while(true){
    document.write('coding everybody <br />');
}

=> ()Boolean이 true 여서 {}중괄호 안의 코드가 반복적으로 coding everybody를 실행한다.

while(false){
    document.write('coding everybody <br />');
}

=> ()Boolean이 false 여서 반복문이 실행되지 않는다.

즉, ture 와 false는 종료조건이다. 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다.

반복조건

var i = 0;
// 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.
while(i < 10){ // i < 10 의 <는 비교연산자이다. 좌항과 우항의 비교한 결과에 따라서 true/fasle를 만들어준다.
    document.write('coding everybody <br />');
    // 반복이 실행될 때마다 coding everybody <br />이 출력된다. <br />는 줄바꿈을 의미하는 HTML 태그
    i = i + 1;
    // i의 현재 값이 1씩 증가한다. i++; 도 가능
}

3. for

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){ // 중간에 세미콜론이 꼭 와야한다. BUT 맨 끝은 안 붙인다.
    반복해서 실행될 코드
}

for(var i = 0; i < 10; i++){
    document.write('coding everybody'+i+'<br />');
}

for문은 제일 먼저 '초기화'를 한다. 이부분은 for문이 맨 처음 실행 때만 실행 된다.

=> 위의 코드에서는 var i = 0 이다 = 변수 i 의 값을 0으로 설정한 것

=> '반복조건'인 i<10 이 실행된다. i의 값은 현재 0이다 = 이 조건은 true(참)이다 = {}중괄호 안의 내용이 실행된다.

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

=> i++는 현재 i의 값에 1을 더하라는 뜻. 현재 i는 0이다. 따라서 i++의 결과로 i는 1이 되었다.

=> 반복조건이 다시 실행된다. 현재 i의 값은 1이기 때문에 true 이다. 

=> 다시 ''반복해서 실행될 코드'가 실행되고 이것을 계속 반복한다.

=> i의 값이 10이 되는 순간 i < 10을 만족시키지 못하고 false가 되어 반복문이 종료된다.

참고

• var i 대신에 k든 ko 등 아무거나 써도 되지만 i는 iterate의 약자로써 많이 쓰인다,
• i++;은 이 구문이 실행될 때 마다 i의 값을 1씩 증가시켜라 라는 뜻으로 i = i + 1; 과 같다

var i = 0;
alert(i++);

=> 0 
기존의 값 0을 사용하고, i의 값을 1 증가 시키는 것

var i = 0; 
alert(++i);

=> 1
기존의 값에 먼저 1을 증가시켜준 것  

---

4. 반복문이 없다면 얼마나 불행해졌을까?

coding everybody를 10번 반복해서 출력하고 싶다면? 복붙을 이용한다면 할만하다. 

document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');

하지만 만약 10,000번을 해야한다면... 할 수는 있겠지만 피곤하고, 만약에 숫자도 더해줘야한다면 답이 없다.

반복문을 쓴다면 손 쉽게 1~n / 2의배수 나열 등이 가능하다. 한줄마다 안 적어줘도 된다는 것!

var i = 0;
while(i < 10){
    document.write('coding everybody '+i+'<br />');
    i++;
}

var i = 0;
while(i < 10){
    document.write('coding everybody '+(i*2)+'<br />');
    i++;
}

---

5. 반복문의 제어

• break로 반복문을 언제든지 중단시킬 수도 있다.
• continue로 그 순간만 반복문을 종료시키고 반복문은 계속되게 한다.
• 반복문 안에 조건문 / 조건문 안에 반복문이 들어갈 수도 있다.

break

반복작업을 중간에 중단시킬 수 있다. 

for(var i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    document.write('coding everybody'+i+'<br />');
}

결과
coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4

종료조건을 보면 원래는 10행이 출력돼야 하는데 5행만 출력되었다. if(i===5) 에 의해서 i의 갑싱 5일 때 break문이 실행되면서 반복문이 완전히 종료된 것이다. 

continue

실행을 즉시 중단 하면서 반복은 지속돼게 하려면? continue를 사용하면 된다.

for(var i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    document.write('coding everybody'+i+'<br />');
}

결과
coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4
coding everybody 6
coding everybody 7
coding everybody 8
coding everybody 9

숫자 5가 빠졌다. i의 값이 5가 되었을 때, 실행이 중단 됐기 때문에 continue 이후의 구문이 실행되지 않은 것이다. 하지만 반복문은 중단되지 않았기에 나머지 결과가 출력된 것이다.

---

6. 반복문의 중첩 

• 반복문안에 반복문 중첩이 가능하다.
• 디버그는 오류를 제거하는 행위 
• 디버거는 디버그를 도와주는 도구
• 반복문의 진가는 배열, 객체와 결합했을 때 이다.

문자와 숫자를 결합하게 되면 자동으로 JS는 숫자 부분을 문자의 데이터 형식(string)으로 변환해 준다. 그래서 i와 j가 문자열이된다. 이런식으로 coding everybody 00 ~ 99 까지 가능하다.

for(var i = 0; i < 10; i++){
	for(var j = 0; j < 10; j++){
		document.write('coding everybody' + i + j + '<br/>');
	}
}

// 0부터 9까지 변수 i에 순차적으로 값을 할당        
for(var i = 0; i < 10; i++){
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for(var j = 0; j < 10; j++){
    	//이런식이라면 i가 한 번 실행되고, j가 10번 실행되고, for문이 끝나서 다시 바깥쪽의 for문이 실행되는 것.
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i)+String(j)+'<br />');
    }
}

기억해라. ( ) Boolean이 true 면 { } 중괄호가 실행된다!

---

JAVASCRIPT 문법 시리즈

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 조건문