JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


JavaScript For 루프


루프는 코드 블록을 여러 번 실행할 수 있습니다.


자바스크립트 루프

루프는 매번 다른 값으로 동일한 코드를 반복해서 실행하려는 경우에 편리합니다.

종종 이것은 배열로 작업할 때의 경우입니다:

쓰는 대신:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

당신은 쓸 수 있습니다:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

다양한 종류의 루프

JavaScript는 다양한 종류의 루프를 지원합니다.

  • for- 코드 블록을 여러 번 반복
  • for/in- 객체의 속성을 통해 루프
  • for/of- 반복 가능한 객체의 값을 반복합니다.
  • while- 지정된 조건이 참인 동안 코드 블록을 반복합니다.
  • do/while- 또한 지정된 조건이 참인 동안 코드 블록을 반복합니다.

For 루프

루프 의 for구문은 다음과 같습니다.

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

명령문 1 은 코드 블록이 실행되기 전에(한 번) 실행됩니다.

명령문 2 는 코드 블록을 실행하기 위한 조건을 정의합니다.

명령문 3 은 코드 블록이 실행된 후 (매번) 실행됩니다.

예시

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

위의 예에서 다음을 읽을 수 있습니다.

명령문 1은 루프가 시작되기 전에 변수를 설정합니다(let i = 0).

명령문 2는 루프가 실행되는 조건을 정의합니다(i는 5보다 작아야 함).

명령문 3은 루프의 코드 블록이 실행될 때마다 값(i++)을 증가시킵니다.



진술 1

일반적으로 문 1을 사용하여 루프에서 사용되는 변수를 초기화합니다(let i = 0).

항상 그런 것은 아니지만 JavaScript는 상관하지 않습니다. 명령문 1은 선택 사항입니다.

명령문 1(쉼표로 구분)에서 많은 값을 시작할 수 있습니다.

예시

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

그리고 문 1을 생략할 수 있습니다(예: 루프가 시작되기 전에 값이 설정된 경우).

예시

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

진술 2

종종 문 2는 초기 변수의 조건을 평가하는 데 사용됩니다.

항상 그런 것은 아니지만 JavaScript는 상관하지 않습니다. 명령문 2도 선택 사항입니다.

명령문 2가 true를 반환하면 루프가 다시 시작되고 false를 반환하면 루프가 종료됩니다.

명령문 2를 생략하는 경우 루프 내부에 중단 을 제공해야 합니다. 그렇지 않으면 루프가 끝나지 않습니다. 브라우저가 충돌합니다. 이 튜토리얼의 뒷부분에서 휴식 시간에 대해 읽어보세요.


진술 3

종종 문 3은 초기 변수의 값을 증가시킵니다.

항상 그런 것은 아니며 JavaScript는 상관하지 않으며 문 3은 선택 사항입니다.

명령문 3은 음수 증가(i--), 양수 증가(i = i + 15) 또는 기타 모든 작업을 수행할 수 있습니다.

명령문 3도 생략할 수 있습니다(예: 루프 내에서 값을 증가시킬 때).

예시

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

루프 범위

var루프에서 사용 :

예시

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

let루프에서 사용 :

예시

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

첫 번째 예에서는 를 사용하여 var루프에서 선언된 변수가 루프 외부에서 변수를 다시 선언합니다.

두 번째 예에서는 를 사용하여 let루프에서 선언된 변수가 루프 외부에서 변수를 다시 선언하지 않습니다.

루프 let에서 i 변수를 선언하는 데 사용되는 경우 i 변수는 루프 내에서만 볼 수 있습니다.


For/Of 및 For/In 루프

for/in루프와 루프 for/of다음 장에서 설명합니다.


while 루프

while루프와 다음 do/while장에서 설명합니다.


연습으로 자신을 테스트하십시오

연습:

0에서 9까지 실행되는 루프를 만듭니다.

let i;
 ( = ;  < ; ) {
  console.log(i);
}