[JS] 반복문 for 와 while

devCecy·2020년 11월 27일
1
post-thumbnail

1. 반복문 (for, while)

반복문은 어떤것을 반복적으로 시행할때 사용하며, 대표적으로 for와 while이 있다.

(1) For문

어떤 특정한 조건이 거짓으로 판별될 때까지 반복하며,for (시작; 조건; 끝) {실행문}와 같은 구성으로 이루어져있다.

아래의 식은 초기값0부터 시작하여 조건값인 5전까지 1씩 추가되며 5번의 '코딩은 재밌어👻'라는 alert을 띄운다.

for (var i = 0; i < 5; i++){
  alert('코딩은 재밌어👻');
}

(2) while문

어떤 조건이 참이기만 하면 문장을 계속 반복하며,
while (조건문) 실행문 으로 구성되어있다. 만약, 조건문이 거짓으로 판별되면 반복을 멈추고 반복문 다음 문장으로 넘어간다.

아래의 식 역시 초기값 0으로 시작하여 조건값인 5전까지 1씩 추가되며, 5번의 '코딩은 짜릿해👻'라는 alert을 띄운다.

var i = 0;
while(i < 5) {
  alert('코딩은 짜릿해👻');
  i++;

(3) 그래서 for 와 while의 차이가 뭐야?

for문은 반복 횟수가 정해진 경우/주로 배열과 함께 사용되며, while은 무한루프나 특정 조건에 만족할때까지 반복하는 경우/주로 파일을 읽고쓰기에 많이 사용한다고 한다. but, 두 반복문은 완벽하게 대치가 가능하다는 점!

2. break와 continue

반복문을 중단(break)하거나 특정 조건을 건너띄고 반복문을 지속 실행(continue)할 수 있는 코드도 알아보자.

(1) break

break문은 현재의 반복문을 종료하고, 그 다음 문으로 넘어간다. 참고로, JS의 for문에는 break문을 사용할 수 없다.
// 이 부분은 some()함수를 이용하면 처리할 수 있다는데 추후 다시 살펴보자.

아래와 같이 i가 5보다 크면 break문 실행하라고 적는다면 0부터 5까지 총 6번의 alert이 뜬 뒤 중단된다.

var i = 0;
while (i < 10) {
  if (i > 5) {
    break;
  }
  alert(i);
  i = i++;
}

(2)continue

continue는 현재 반복문을 끝까지 실행하지만, continue문의 조건값은 실행하지 않고 다음 반복문으로 넘어간다.

아래와 같이 짝수일 경우 건너띄라는 continue문을 작성해 주면, 1,3,5,7,9일 경우만 alert이 뜨게 된다.
(break문에서는 i++;을 alert아래 적어주었는데 continue에서는 alert아래 적으며 오류남!! 알아내거라)

var i = 0;
while (i < 10) {
  if(i % 2 === 0) {
    i++;
    continue;
  }
  alert(i+'홀수만 띄울꺼야');
}

오늘의 생각

for와 while의 기본 코드는 '알았'지만 스스로 반복문을 만들어 손으로 '익히는' 작업은 아직 하지못했다. 반복문을 통해 많은 것을 만들어 낼 수 있을 것만 같다. 작은 것이라도 만들어보자! 코딩은 재밌다.👻

추가 공부해야 할 것

  1. for와 while의 차이점을 글이아닌 손으로 익힐 것.
  2. for문의 반복을 멈춰줄 수 있는 some()함수 알아보기.

참고한 페이지

(for문과 while문 기본)
https://www.zerocho.com/category/JavaScript/post/57341f84420974fa1f92a761
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration
(for문과 while문의 차이점)
https://velog.io/@praconfi/for%EB%AC%B8%EA%B3%BC-while%EB%AC%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
(break문과 continue문)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration
https://backback.tistory.com/372

제가 잘못 이해한 부분이 있다면 꼭 알려주시면 감사하겠습니다!🙆🏻‍♀️

profile
🌈그림으로 기록하는 개발자🌈

0개의 댓글