JS FOR LOOP
loop는 코드 블록을 여러번 실행할 수 있다.
JavaScript Loops
루프는 매번 다른 값으로 동일한 코드를 반복해서 실행하려는 경우에 사용한다.
대부분 배열로 작업할 때 사용한다:
Different Kinds of Loops
The For Loop
for 루프의 구문은 다음과 같다.
for (statement 1; statement 2; statement 3) {
// code block to be executed
}Statement 1은 코드 블록이 실행되기 전에(한 번) 실행된다.
Statement 2는 코드 블록을 실행하기 위한 조건을 정의한다.
Statement 3은 코드 블록이 실행된 후 (매번) 실행된다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
위의 예시를 해석해보자.
Statement 1은 루프가 시작되기 전에 변수를 설정한다(let i = 0).
Statement 2는 루프가 실행되는 조건을 정의한다(i는 5보다 작아야 함).
Statement 3은 루프의 코드 블록이 실행될 때마다 값(i++)을 증가시킨다.
Statement 1
일반적으로 statement 1을 사용하여 루프에서 사용되는 변수를 초기화다(let i = 0).
항상 그런 것은 아니지만 JavaScript는 신경 쓰지 않습니다. statement 1은 선택 사항이다.
statement 1(쉼표로 구분)에서 여러 값을 초기화할 수 있다.
그리고 statement 1을 생략할 수 있다(예: 루프가 시작되기 전에 값이 설정된 경우).
Statement 2
종종 Statement 2는 초기 변수의 조건을 평가하는 데 사용된다.
항상 그런 것은 아니지만 JavaScript는 신경 쓰지 않다. Statement 2도 역시 선택 사항이다.
Statement 2가 true를 반환하면 루프가 다시 시작되고 false를 반환하면 루프가 종료된다.
Statement 2를 생략하는 경우 루프 내부에break을 제공해야만 한다. 그렇지 않으면 루프가 끝나지 않기 때문이다. 브라우저가 충돌한다. 이 튜토리얼의 뒷부분에서break에 대해 읽어보자.
Statement 3
종종 Statement 3은 초기 변수의 값을 증가시킨다.
항상 그런 것은 아니지만 JavaScript는 상관하지 않으며 Statement 3 선택 사항이다.
Statement 3은 음수 증가(i--), 양수 증가(i = i + 15) 또는 기타 모든 작업을 수행할 수 있다.
Statement 3도 생략할 수 있다(예: 루프 내에서 값을 증가시킬 때).
Loop Scope
var를 loop안에서 사용할 때 :
let를 loop안에서 사용할 때 :
첫 번째 예시에서는 var를 사용하여 루프에서 선언된 변수가 루프 외부에서 변수를 다시 선언합니다.
두 번째 예시에서 let을 사용하면 루프에서 선언된 변수가 루프 외부에서 변수를 다시 선언하지 않는다.
let을 사용하여 루프에서 i 변수를 선언하면 i 변수는 루프 내에서만 표시된다.
For/Of and For/In Loops
for/in 루프와 for/of 루프는 다음 장에서 공부한다.
While Loops
while 루프와 do/while 역시 다음 장에서 공부한다.
