반복문
어떠한 조건이 참일 경우 블록 내부의 문장을 반복 실행.
자바스크립트의 반복문에는 while문, do…while문, for문 등이 있다.
while 문
- 괄호 내의 조건식이
true일 경우 블록 내의 문장을 실행. - 블록내의 문장을 모두 실행하고 나면 다시 괄호내의 조건식을 평가해서 조건식이
false가 아니라면 다시 실행되고, 만약 조건식이false면 블록을 벗어나고while 문은 종료.
while (조건식) {
}while문을 사용할 때는 조건문을 false로 만들 수 있는 조건을 만드는 것이 중요하다.
그렇지 않으면 무한 루프에 빠질 위험이 많다.
무한루프
반복문에서 어떠한 조건식이 계속true로 평가되어, 반복문이 종료되지 않고 무한히 계속되는 것
let i = 0;
while (i < 10) {
console.log(i);
i += 1;
}위의 코드를 실행하면 콘솔에 0부터 9까지 순서대로 출력된다.
만약 i의 값을 1씩 증가시켜주는 코드가 while 문 내부에 없으면 무한루프에 빠지게 된다.
조건문의 값이 true라면 false가 될때까지 반복해서 실행한다 ! ! !
예제
let i= 1; while(i<11){ console.log(i); i++; }위 구문은 아래처럼 작성해도 똑같은 값을 출력한다.
let i= 1; while(true){ console.log(i); i++; if(i>=11){ break; } }
do…while 문
while문을 실행 시키기 이전에 do{} 블록으로 둘러싼 부분의 문장은 무조건 실행 시키고 while문의 조건식을 이용해 반복여부를 판단.
do {
// 한번 실행
} while (조건식); do…while 문은 그렇게 많이 쓰이지 않는다.
for 문
for문을 가장 많이 사용한다.
for(초기값; 조건식; 증감식) {
// statement
}
for 문이 실행되면 가장 처음 초기값을 한번 실행시킨다.- 조건식을 확인해서 결과가
true일 경우 블록내의 문장을 실행시키고, 블록이 끝나면 증감식을 실행.- 그리고 다시 조건식과 비교해서
true면 블록내의 문장을 실행시킨다.- 이렇게 조건식의 결과가
false가 될 때까지 블록 내부의 문장을 반복 실행하는 것이 for 문.
for(let i=0; i<10; i++) {
console.log(i);
}예제
1
for(let i=1;i<11;i++){ //i =1 변수 지정 ; i가 11이상일때까지 ; i에 값을 1씩 더해라 console.log(i); };콘솔창에 1부터 10까지의 숫자가 출력된다.
2
<div> <ul> </ul> </div> <script> let li=""; for(let i=1; i<10;i++){ li = li + `<li> ${i} * 2 = ${i*2} </li>`; } } document.querySelector("ul").innerHTML = li; </script>반복적인 내용의 리스트를 작성할 수 있다.
ul을 지정하고 변수li를 출력시켰음으로 위 스크립트를 실행 시ul사이에li들을 만들 수 있다.
이중 for 문
for(let i=2;i<10;i++){ //1부터 10까지의 숫자 for(let j=1; j<10;j++){ //1부터 10까지의 숫자 console.log(`${i}곱하기${j}는 ${i*j}`) } }
for안에도for을 사용할 수 있다.
in 연산자
특정 객체에 속성이 존재하는지를 검사할 때 사용하는 연산자.
in 연산자를 사용하면 배열이나 객체 내에서 원하는 프로퍼티가 있는지 확인할 수 있다.
let arr = [1,2,3,4,5]; console.log(3 in arr); //=> true let obj = {name: 'Alice', age: 7}; console.log('name' in obj); //=> true
in 연산자는 주로for…in구문을 이용해서 객체나 배열의 각 원소를 순서대로 처리할 때 사용된다.
for…in 루프
for…in 문은 객체 내부의 프로퍼티에 대해 순차적으로 루프를 실행하도록 해준다.
for (변수 in 객체) { // statement }
for…in 문사이의 변수에는 객체의 프로퍼티명이 순차적으로 저장되므로 이를 이용해서 블록내에서 여러가지 작업을 할 수 있다.let alice = { name: 'Alice', gender: 'Femail', age: 7 }; for(let prop in alice) { console.log(prop + ": " + alice[prop]); }
for of문 array
let arr = [1,2,3,4,5]
for(let i=0; i<arr.length; i++){
console.log(arr[i])
}
for(let i of arr){
console.log(arr[i])
}forEach문 array, nodelist
arr.forEach(콜백함수)
arr.forEach(function(a,b,c){})
value-------index----array
하나일 때, 두개일 때, 세개일 때 담긴다
let arr = [1,2,3,4,5] arr.forEach((a,b)=>{ if(b!=0){ console.log(a); } })let numArr = [1,2,3,4,5,6,7,8,9,10];forEach를 사용해서
number1(홀수배열), number2(짝수배열)let number1 = []; let number2 = []; numArr.forEach(value=>{ if(value%2){ number1.push(value); }else { number2.push(value); } })
반복문 벗어나기
break 문
break문은 switch 문 혹은 반복문에서 빠져나오기 위해 사용.
예를 들어 for 문 도중 특정 조건을 만족할 경우 더이상 반복을 실행하지 않고 중지하고 싶을 때 사용할 수 있다.
for(let i=0; i<10; i++) { if (i === 3) break; console.log(i); }위의 경우 i의 값이 3이 되는 경우 for문은 종료된다.
따라서 결과는 0, 1, 2를 순차적으로 출력한 후 종료된다.
예제
for(let i=1;i<11;i++){ if(i == 5){ break; } console.log(i); };콘솔창에 1부터 5이전(4)까지의 숫자가 출력된다.
continue
반복문 내부에서 처리를 건너뛰기 위해서 사용.
예를 들어 for문으로 순회 도중 특정 조건을 만족할 경우 처리를 건너뛰고 싶을 때 사용할 수 있다.
for(let i=0; i<10; i++) { if (i === 3) continue; console.log(i); }위의 경우 i의 값이 3인 경우 곧바로 for문 내부의 처리를 건너뛰고 다음 조건식을 평가한다. 따라서 결과는 3을 제외하고 0부터 9까지의 숫자를 순차적으로 출력.
예제
let i = 0; //변수 i에 숫자 0을 지정한다. while(i<10){ // i가 10 미만이라면 i++ // 1씩 더하기를 반복한다. if(i%2 == 0){ //만약 i를 2로 나눈 값이 0이라면(=짝수라면) continue; //제외하고 } console.log(i); //console.log에 작성한다. }위와 아래는 동일한 내용을 다르게 쓴 것이다.
for(let i=1;i<10;i++){ // i가 10 미만이라면 1씩 더하기를 반복한다. if(i%2){ //만약 i를 2로 나눈 값이 1이라면(=홀수라면) console.log(i); //console.log에 작성한다. } }콘솔창에 짝수를 제외한 1부터 10까지의 숫자가 출력된다.
