자바스크립트에서 반복문 사용방법

2024. 5. 13. 21:32·웹개발/JavaScript
728x90

프로그래밍에서 동일하거나 유사한 동작이 반복될때, 같거나 비슷한 코드를 여러번 사용하는 것은 매우 귀찮고 비효율적인 일이다.

따라서 이때는 반복문(loop)를 사용하여 효율성을 높일 수 있다.


예를들어 1부터 100까지 콘솔에 출력한다고 해보자.

반복문을 사용하지 않으면 1부터 100까지 console.log를 이용하여 출력해야한다.

console.log(1);
console.log(2);
(...)
console.log(99);
console.log(100);
for(int i=0; i <= 100; i++){
 console.log(i);
 }

하지만 반복문을 사용하면 간결하게 줄일 수 있다.


for 문의 사용법

for문의 사용법은 다음과 같다.

for (초기식; 조건식; 증감식) {
  실행할 명령
}

for문은 초기식을 가지고 조건식과 일치하지 않을 때까지 반복하면서 중괄호에 있는 명령어를 수행하게 됩니다.

 

for (let idx = 1; ① idx <= 100; ② idx++ ③) {
  console.log(idx); ④
}
더보기

① 반복문에 사용할 변수를 초기화하는 식입니다. 초기식은 처음에 한 번만 수행합니다. 초기식에서 선언한 변수는 반복할 때마다 ③의 증감식으로 값이 변동되기 때문에 카운터 변수라고도 합니다. 카운터 변수는 보통 하나를 선언하지만 둘 이상의 카운터 변수가 필요할 경우에는 콤마(,)를 이용 해 구분합니다. 카운터 변수는 반복문 외부에서는 사용할 수 없습니다.


②
조건식은 언제까지 반복할 것인지 정의하는 식입니다. 반복할 때마다 조건을 검사하여 조건이 참 이면 반복을 계속하고 거짓이면 반복을 멈춥니다. 조건식 idx <= 100;은 초기식에서 선언한 카 운터 변수 idx가 100을 초과하면 반복을 종료하겠다는 뜻입니다.

③ 증감식은 반복할 때마다 카운터 변수를 증가 또는 감소하는 식입니다. 이 코드처럼 증감 연산자인 ++과 --를 주로 사용하는데, 가끔은 복합 대입 연산자를 쓰기도 합니다. 증감식 idx++은 반복할 때마다 변수 idx의 값을 1씩 증가합니다.

④ 반복 수행의 대상이 되는 명령은 반복할 때마다 실행됩니다. 중괄호 블록 안에서는 초기식에서 정 의한 카운터 변수를 사용할 수 있습니다. 이 명령은 카운터 변수 1이 101이 될 때까지 모두 100번 에 걸쳐 반복 실행합니다.


for 반복문의 강제 종료 및 건너뛰기

break문을 사용하면 조건식에서 정의한 반복문의 종료조건과 상관없이 반복을 강제로 종료할 수 있습니다.

break를 사용한 강제종료

for (let idx = 1; idx <= 100; idx++) {
  if (idx > 10) { ①
    console.log("반복문 종료!");
    break;
  }
  console.log(idx);
}

// 출력
// 1
// (...)
// 10
// 반복문 종료!

조건식을 만족하면 콘솔을 출력 후, break를 사용하여 반복하지 않고 바로 종료합니다.

 

continue를 사용한 건너뛰기

for (let idx = 1; idx <= 10; idx++) {
  if (idx % 2 === 0) { 
    continue;
  }
  console.log(idx);
}

// 출력
// 1
// 3
// (...)
// 9

continue 문은 break문과 달리 종료하지 않고 다음 스텝으로 건너뜁니다.

변수 idx를 2로 나누어 나머지가 0이라는 것은 idx가 짝수라는 의미입니다.

이후 continue를 만나면 console.log를 실행하는 것이 아닌, 패스하고 바로 다음 반복 스텝으로 넘어가게 됩니다.

728x90

'웹개발 > JavaScript' 카테고리의 다른 글

자바스크립트와 스코프  (0) 2024.05.15
자바스크립트 함수  (0) 2024.05.13
자바스크립트의 조건문  (2) 2024.05.13
자바스크립트 형 변환  (0) 2024.05.13
자바스크립트의 자료형  (0) 2024.05.13
'웹개발/JavaScript' 카테고리의 다른 글
  • 자바스크립트와 스코프
  • 자바스크립트 함수
  • 자바스크립트의 조건문
  • 자바스크립트 형 변환
튼튼발자
튼튼발자
프론트엔드 개발자입니다. 헬스를 가끔해서인지 몸이 튼튼한거 같습니다. 그래서 튼튼한 개발자 => 튼튼발자입니다. 프론트엔드 및 관련 개발 내용 블로그 글로 정리해서 올려둡니다.
    250x250
  • 튼튼발자
    튼튼발자
    튼튼발자
  • 전체
    오늘
    어제
    • 분류 전체보기 (192)
      • 튼튼발자의 끄적끄적 (10)
      • 웹개발 (94)
        • HTML (5)
        • CSS (2)
        • JavaScript (40)
        • TypeScript (5)
        • REACT (22)
        • Next.js (13)
        • GIt (7)
      • 기타 (3)
        • 일상 (3)
      • 프로젝트 (27)
        • Componique: UI 컴포넌트 라이브러리 (18)
        • GitHub Profile Viewer (8)
        • 잇핏 (1)
      • 프론트엔드 개발자로 취업준비 (1)
        • 기술 면접 (7)
        • 코딩 테스트 준비하기 (0)
        • 자기소개서&지원서&이력서 (0)
      • 컴퓨터과학 (12)
        • 운영체제 (6)
        • 알고리즘 (6)
      • 전공 공부 (37)
        • AI(인공지능) (2)
        • 컴퓨터네트워크 (19)
        • 네트워크프로그래밍 (3)
        • SW소프트웨어응용설계 (7)
        • 클라우드컴퓨팅 (3)
        • 웹서비스프로그래밍 (3)
      • PT (0)
      • 취준일기 (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    트랜스포트계층
    프론트엔드
    NextJs
    tailwind
    데이터전송
    JS
    react
    ui컴포넌트
    JavaScript
    네트워크
    componique
    상태관리
    자바스크립트
    코딩
    리액트
    프론트엔드개발
    프로그래밍
    웹개발
    github
    TCP
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
튼튼발자
자바스크립트에서 반복문 사용방법
상단으로

티스토리툴바