2021. 1. 6. 22:41ㆍfront-end/JavaScript
1~10 까지의 수를 console.log() 함수를 이용하여 로그를 출력하려면 어떻게 코드를 작성 해야할까?
console.log('1')
console.log('2')
console.log('3')
console.log('4')
.
.
.
console.log('10')
위 코드처럼 작성할 수 있다. 그렇다면 1~100은? 1~1000000은 어떻게 작성해야할까? 사실상 위처럼 작성한다는 것은 말이 안됩니다. (할 수는 있겠지만.. 매우 비효율적이다.)
이를 위해 '반복문'을 사용할 수 밖에 없습니다. 실제 웹페이지에서는 반복문을 이용하여 메뉴를 보여주기도 하고 수백, 수천개의 게시글을 보여줄 때도 사용합니다.
반복문은 for과 while 이 대표적입니다.
for 문
for(let i=0; i<10; i++){
console.log(i+1);
}
위의 코드를 작성하여 크롬 콘솔에서 실행해보면 위와 같은 결과가 출력됩니다.
단 세줄로 1~10 까지 1~100000000까지 출력이 가능합니다.
위의 예시를 분석해보면 시작은 let i = 0;으로 변수를 선언해주고 , 조건은 i < 10이고, 마지막에 i++ 를 작성해줍니다.
i가 10이하인 조건일 경우에만( i 가 10이 될 때까지 ) i++ 은 계속 반복 됩니다.
위의 예시에서 i에 +1 을 해주었는데, 만약 1을 더해주지 않는다면 0부터 시작하여 9까지 숫자가 출력될 것입니다.
i를 0으로 설정해주었기 때문입니다.
While 문
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
위의 코드를 작성하여 크롬 콘솔에서 실행해보면 위와 같은 결과가 출력됩니다. for 문과 비슷하지만 +1 을 해주지 않아 0~9 까지 나오게 되었습니다.
while은 조건밖에 없기 때문에 몇 번 반복될 지 모를 때 사용합니다. 그리고 for문은 몇번 반복할 지 횟수를 알 경우에 사용됩니다.
* 반복문을 사용할 때 주의 할점!
반복문이 무한으로 반복되지 않게 주의 해야합니다. 예를 들어 위에 코드에서 i는 0이고 i<10 조건에서 'i++' 을 넣지 않았다면 i는 0으로 무조건 10보다 작은 수이기 때문에 무한으로 반복문이 돌아가게 됩니다. 그럴 경우 웹페이지가 멈춰버릴 수 있습니다.
do.. while
let i = 0;
do {
console.log(i);
i++;
} while (i < 10)
do.. while 은 while 과 비슷하다. do.. while은 내용을 먼저 실행하고 나서 조건을 비교합니다. do.. while은 내용을 실행하고 나서 조건을 비교하기 때문에 내용이 최소 한번은 꼭 실행된다. 그 이후에 조건에 따라 멈추거나 반복된다. ( for문과 while문에 비해 잘 쓰이지 않는다.)
break, continue
break
:멈추고 빠져나옴
while(true){
let answer = confirm('계속 할까요??')
if(!answer){
break;
}
}
확인창에서 확인을 누르게 되면 answer 는 true 이기 때문에 계속 창이 나오게 됩니다.
그러나 취소를 눌러서 answer의 값이 false 가 되면 confirm 창은 더 이상 뜨지않습니다.
break 가 실행되면서 반복문이 멈추고 빠져나오게 됩니다.
continue
:멈추고 다음 반복으로 진행
for(let i=0; i<10; i++){
if(i%2){
continue;
}
console.log(i)
}
위의 코드에서는 i 가 홀수일 경우에만 continue 를 실행합니다.
continue 가 실행되었을 때, 반복문은 계속 돌지만 continue 아랫 부분은 실행되지않고 다음으로 넘어갑니다. 그렇기때문에 짝수일경우에만 출력이 되었습니다. continue는 반복문에서 예외를 두고싶을 때 사용하면 됩니다.
반복문은 기초이지만 한번 쯤 짚고 넘어가면 좋을 것 같아 작성하게 되었습니다.
감사합니다 : )
'front-end > JavaScript' 카테고리의 다른 글
JavaScript (6) - 호이스팅(Hoisting), 변수 선언의 실행 시점 (2) | 2023.12.04 |
---|---|
JavaScript (5) - Array.from() , Array.prototype.reduce() 사용방법 (0) | 2022.10.13 |
JavaScript (4) - getElementById vs querySelecter (0) | 2022.04.03 |
JavaScript (3) - Window Size, Window.scrollTo, Window.scrollBy, Window Load 설명 (0) | 2022.04.03 |
JavaScript (2) - find() , filter() 함수 설명 (0) | 2022.04.03 |