[생활코딩] 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 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)