본문 바로가기
JAVASCRIPT

같은 동작을 손쉽게 반복하는 반복문

by dongjin6539 2023. 2. 23.
728x90
반응형

반복문

반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다.
반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명력을 반복 실행 할 수 있습니다.
반복문에는 for 문, forEach 문, for in 문, for of문 등이 있습니다.

 

for 문
  • for 문은 자바스크립트에서 가장 많이 사용하는 반복문입니다.
  • for 문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실핼항 때 편리합니다.
  • for 문에서는 몇 번 반복했는지 기록하기 위해 카운터를 사용하고 for 문의 첫 번째 항에서 카운터 변수를 지정합니다.
  • for 문 실행 순서 : 초기값 → 조건식(true, false 초기값이 맞는지 확인) → 실행문 → 증감식 → 초기값 반복
for 문 기본형
for(초깃값; 조건식; 증감식){실행문}
· 초깃값 : 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화                    합니다. 초기값은 0이나 1부터 시작합니다.
· 조건식 : 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for 문에 있는 명령을 반복할 수 있습                  니다. 
· 증감식 : 문장을 실행 한 후 카운터 변수를 증감시키는 부분입니다. 보통 카운터 값을 하나 더 증감시키는 용도로                    사용합니다.
· 실행문 : 초깃값이 조건식 명령에 만족하다면 실행하는 용도로 사용합니다.

 

See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.

 

forEach 문
  • forEach 문은 JavaScript 배열 메소드 중 하나로, 주어진 함수를 배열의 각 요소에 대해 실행하는 역할을 합니다.
  • forEach 문은 for 문과 같은 반복문을 사용하여 배열 요소를 하나씩 처리할 필요 없이 배열의 각 요소에 쉽게 접근할 수 있도록 도와줍니다.
  • forEach 문은 콜백 함수를 인수로 받습니다. 이 콜백 함수는 배열의 각 요소를 처리하기 위해 반복 호출됩니다. 각 호출 시 콜백 함수는 현재 요소의 값, 해당 요소의 인덱스, 그리고 forEach 문이 호출된 배열을 인수로 받습니다. 콜백 함수는 배열의 각 요소를 처리하는 작업을 수행하고, 다음 요소로 이동하기 위해 반환되는 값을 사용할 수 있습니다.

 

See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.

 

for in 문
  • for in 문은 반복해서 객체의 값을 가져와서 처리할 수 있게 합니다.
  • for in 문은 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호[ ] 를 사용합니다.
for in 문 기본형
for(변수 in 객체){실행문}

 

See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.

 

for of 문
  • for of 문은 문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다.
  • forEach 문에서 사용했던 소스 코드를 for of 문에서도 사용할 수 있습니다.

 

See the Pen for of 문 by dongjin6539 (@dongjin6539) on CodePen.


for문을 이용해 테이블 만들기

 

위에서 배운 내용을 토대로 테이블 표를 만들어 보겠습니다!!! 

 

See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.

 

for문을 이용해 구구단 만들기

 

위에 배운 내용을 토대로 구구단 만들어 보겠습니다!!!

 

See the Pen for문을 이용해 구구단 만들기 by dongjin6539 (@dongjin6539) on CodePen.


짝수와 홀수를 구별하는 프로그램 만들기

 

Result 결과를 누르시면 짝수와 홀수를 구별할 수 있는 알림창이 나옵니다!!

 

See the Pen 짝수와 홀수를 구별하는 프로그램 만들기 by dongjin6539 (@dongjin6539) on CodePen.

 

 

참고 홈페이지

https://dongjin6539.github.io/web2023/javascript/javascript02.html

728x90
반응형