JavaScript에서 For 루프를 생성하는 방법 - JavaScript guide
본문
목차
- JavaScript 개발자 콘솔을 사용하는 방법
- HTML에 JavaScript를 추가하는 방법
- JavaScript에서 구문 및 코드 구조 이해
- JavaScript로 주석을 작성하는 방법
- JavaScript에서 데이터 유형 이해
- JavaScript에서 문자열로 작업하는 방법
- JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
- JavaScript에서 데이터 유형을 변환하는 방법
- JavaScript에서 변수, 범위 및 게양 이해
- 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
- JavaScript에서 배열 이해
- JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
- JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
- JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
- JavaScript에서 객체 이해
- JavaScript에서 날짜 및 시간 이해
- JavaScript에서 이벤트 이해
- JavaScript에서 JSON으로 작업하는 방법
- JavaScript로 조건문을 작성하는 방법
- JavaScript에서 Switch 문을 사용하는 방법
- JavaScript에서 While 및 Do ... While 루프 사용
- JavaScript에서 For 루프를 생성하는 방법
- JavaScript에서 함수를 정의하는 방법
- JavaScript의 프로토 타입 및 상속 이해
- JavaScript에서 클래스 이해
- JavaScript에서 객체 메소드를 사용하는 방법
- JavaScript에서 This, Bind, Call 및 Apply 이해
JavaScript에서 For 루프를 생성하는 방법
소개
루프는 반복적인 작업을 자동화하기 위해 프로그래밍에 사용됩니다. JavaScript에 사용되는 가장 기본적인 루프 유형은 while 및 do ... while 문이며“JavaScript에서 루프를 구성하는 동안 및 수행하는 방법”에서 검토 할 수 있습니다.
while 및 do ... while 문은 조건부 기반이므로 지정된 문이 true로 평가 될 때 실행됩니다. 조건문을 기반으로 한다는 점과 유사하게 for 문에는 루프 카운터와 같은 추가 기능이 포함되어 있으므로 루프 반복 횟수를 미리 설정할 수 있습니다.
이 학습서에서는 JavaScript 프로그래밍 언어의 필수 요소 인 for ... of 및 for ... in 문을 포함하여 for 문에 대해 학습합니다.
https://www.digitalocean.com/community/tutorials/how-to-construct-for-loops-in-javascript
For Loop
for 문은 코드 블록의 반복 실행을 구현하기 위해 최대 3 개의 선택적 표현식을 사용하는 루프 유형입니다.
그 의미에 대한 예를 살펴 보겠습니다.
for (initialization; condition; final expression) {
// code to be executed
}
위의 구문에는 for 문 내에 초기화, 조건 및 증분이라고도 하는 최종 식의 세 가지 식이 있습니다.
기본적인 예를 사용하여 각 문장의 기능을 보여 드리겠습니다.
// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
// Print each iteration to the console
console.log(i);
}
위 코드를 실행하면 다음과 같은 결과가 나타납니다.
Output
0
1
2
3
위의 예에서, 루프를 0에서 시작하는 let i = 0 으로 for 루프를 초기화했습니다. 조건을 i <4 로 설정했습니다. 즉, 4보다 작게 평가되는 한 루프는 계속됩니다. 운영. i ++의 최종 표현은 루프를 통한 각 반복 횟수를 증가 시킵니다. console.log (i)는 0부터 시작하여 i가 4로 평가 되자마자 숫자를 출력합니다.
루프를 사용하지 않으면 다음 코드를 사용하여 동일한 출력을 얻을 수 있습니다.
// Set initial variable to 0
let i = 0;
// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);
루프가 없으면 코드 블록은 반복적이고 더 많은 줄로 구성됩니다. 더 많은 숫자를 증가 시켜야 한다면 더 많은 코드를 작성해야 할 것입니다.
루프에서 각 표현을 살펴보고 완전히 이해해 봅시다.
초기화
첫 번째 표현은 초기화입니다. 이것이 어떻게 생겼는지 입니다.
let i = 0;
let 키워드를 사용하여 i라는 변수를 선언하고 (키워드 var도 사용될 수 있음) 값을 0으로 지정합니다. 변수의 이름을 지정할 수 있지만 가장 자주 사용됩니다. 변수 i는 반복을 나타내며 일관되며 코드를 간결하게 유지합니다.
조건
while 및 do ... while 루프에서 본 것처럼 for 루프에는 일반적으로 조건이 포함됩니다. 다음은 우리의 상태 진술입니다.
i < 4;
반복 변수 i가 시작하기 위해 0을 나타내는 것으로 이미 설정했습니다. 이제 우리는 이 예제에서 i가 4보다 작은 한 조건이 참이라고 말합니다.
최종 표현식
최종 표현식은 각 루프의 끝에서 실행되는 명령문입니다. 값을 늘리거나 줄이는 데 가장 많이 사용되지만 어떤 목적으로도 사용할 수 있습니다.
i++
이 예에서는 i ++를 사용하여 변수를 1 씩 증가 시킵니다. 이것은 i = i + 1을 실행하는 것과 같습니다.
초기화 및 조건 표현식과 달리 최종 표현식은 세미콜론으로 끝나지 않습니다.
그것을 함께 넣어
for 루프에 포함 된 세 가지 표현식을 검토 했으므로 전체 루프를 다시 살펴볼 수 있습니다.
// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
console.log(i);
}
먼저 i를 선언하고 0으로 설정합니다. 그런 다음 i가 4보다 작을 때까지 루프가 실행되도록 조건을 설정합니다. 마지막으로, 각 반복마다 i를 1 씩 증가 시킵니다. 코드 블록은 i 값을 콘솔에 출력하므로 결과는 0, 1, 2 및 3입니다.
선택적 표현식
for 루프의 세 표현식은 모두 선택 사항입니다. 예를 들어, 루프 외부에서 변수를 초기화하여 초기화 표현식 없이 동일한 for 문을 작성할 수 있습니다.
// Declare variable outside the loop
let i = 0;
// Initialize the loop
for (; i < 4; i++) {
console.log(i);
}
Output
0
1
2
3
이 경우 첫 번째; 명령문이 생략 된 경우에도 명령문이 초기화, 조건 또는 최종 표현식을 나타내는 지 여부를 나타내는 데 필요합니다.
아래에서 루프에서 조건을 제거 할 수도 있습니다. if 문을 break와 결합하여 i가 3보다 크면 루프가 실행을 중지하도록 지시합니다. 이는 실제 조건의 반대입니다.
// Declare variable outside the loop
let i = 0;
// Omit initialization and condition
for (; ; i++) {
if (i > 3) {
break;
}
console.log(i);
}
Output
0
1
2
3
경고 : 조건을 생략하면 break 문이 포함되어야 합니다. 그렇지 않으면 루프가 무한 루프로 영원히 실행되어 브라우저가 충돌 할 수 있습니다.
마지막으로 루프의 끝에 대신 배치하여 최종 표현식을 제거 할 수 있습니다. 두 세미콜론이 여전히 포함되어 있어야 합니다. 그렇지 않으면 루프가 작동하지 않습니다.
// Declare variable outside the loop
let i = 0;
// Omit all statements
for (; ;) {
if (i > 3) {
break;
}
console.log(i);
i++;
}
Output
0
1
2
3
위의 예에서 볼 수 있듯이 세 가지 명령문을 모두 포함하면 일반적으로 가장 간결하고 읽기 쉬운 코드가 생성됩니다. 그러나 나중에 문제가 발생하는 경우에는 설명을 생략 할 수 있습니다.
배열 수정
for 루프를 사용하여 배열을 수정할 수 있습니다.
다음 예에서는 빈 배열을 만들고 루프 카운터 변수로 채 웁니다.
// Initialize empty array
let arrayExample = [];
// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
// Update array with variable value
arrayExample.push(i);
console.log(arrayExample);
}
위의 JavaScript 코드를 실행하면 다음과 같은 결과가 나타납니다.
Output
[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]
i <3이 더 이상 참이 될 때까지 실행되는 루프를 설정하고 각 반복이 끝날 때 콘솔에 arrayExample 배열을 인쇄하도록 콘솔에 지시합니다. 이 방법을 사용하면 배열이 새로운 값으로 어떻게 업데이트 되는지 확인할 수 있습니다.
배열의 길이
때로는 반복 횟수를 확신하지 않고 루프를 여러 번 실행하기를 원할 수 있습니다. 이전 예제에서 했던 것처럼 정적 숫자를 선언하는 대신 배열의 length 속성을 사용하여 배열에 항목이 있는 횟수만큼 루프를 실행할 수 있습니다.
// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];
// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
// Print each item to the console
console.log(fish[i]);
}
다음과 같은 결과가 나옵니다.
Output
flounder
salmon
pike
이 예에서, 우리는 fish [i]로 배열의 각 인덱스를 통해 증가합니다 (예 : 루프는 fish [0], fish [1] 등을 통해 증가합니다). 이로 인해 인덱스는 각 반복마다 동적으로 업데이트 됩니다.
for 문에 대한 자세한 내용은 Mozilla 개발자 네트워크에서 확인할 수 있습니다.
For…In Loop
for ... in 문은 객체의 속성을 반복합니다. 시연하기 위해 이름 : 값 쌍이 몇 개인 간단한 상어 개체를 만듭니다.
const shark = {
species: "great white",
color: "white",
numberOfTeeth: Infinity
}
for ... in 루프를 사용하면 각 속성 이름에 쉽게 액세스 할 수 있습니다.
// Print property names of object
for (attribute in shark) {
console.log(attribute);
}
Output
species
color
numberOfTeeth
속성 이름을 객체의 인덱스 값으로 사용하여 각 속성의 값에 액세스 할 수도 있습니다.
// Print property values of object
for (attribute in shark) {
console.log(shark[attribute]);
}
Output
great white
white
Infinity
그것들을 종합하면 객체의 모든 이름과 값에 액세스 할 수 있습니다.
// Print names and values of object properties
for (attribute in shark) {
console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}
Output
SPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity
toUpperCase() 메서드를 사용하여 속성 이름을 수정 한 다음 속성 값을 지정했습니다. for ... in은 객체 속성을 반복하는 매우 유용한 방법입니다.
자세한 정보는 Mozilla Developer Network에서 검토하십시오.
For…Of Loop
for ... in 문은 객체 속성을 반복하는 데 유용하지만 배열 및 문자열과 같은 반복 가능한 객체를 반복하려면 for ... of 문을 사용할 수 있습니다. for ... of 문은 ECMAScript 6부터 최신 기능입니다. ECMAScript (또는 ES)는 JavaScript를 표준화 하기 위해 작성된 스크립팅 언어 사양입니다.
for ... of 루프의 이 예에서는 배열을 만들고 배열의 각 항목을 콘솔에 인쇄합니다.
// Initialize array of shark species
let sharks = [ "great white", "tiger", "hammerhead" ];
// Print out each type of shark
for (let shark of sharks) {
console.log(shark);
}
for ... of 문에서 다음과 같은 결과가 출력 됩니다.
Output
great white
tiger
hammerhead
entries() 메소드를 사용하여 색인 요소와 연관된 색인을 인쇄 할 수도 있습니다.
...
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
console.log(index, shark);
}
Output
0 'great white'
1 'tiger'
2 'hammerhead'
배열과 같은 방식으로 문자열을 반복 할 수 있습니다.
// Assign string to a variable
let sharkString = "sharks";
// Iterate through each index in the string
for (let shark of sharkString) {
console.log(shark);
}
Output
s
h
a
r
k
s
이 경우 문자열의 각 문자를 반복하여 순차적으로 인쇄합니다.
for ... in과 for ... of의 차이점에 대한 자세한 설명은 Mozilla 개발자 네트워크의 for ... of 루프에 대해 읽으십시오.
결론
이 튜토리얼에서는 for, for ... of 및 for ... in 문으로 구성된 JavaScript에서 for 루프를 구성하는 방법을 배웠습니다.
루프는 JavaScript 프로그래밍의 필수 부분이며 반복적인 작업을 자동화하고 코드를 보다 간결하고 효율적으로 만드는 데 사용됩니다.