javascript JavaScript에서 For 루프를 생성하는 방법 - JavaScript guide

본문

목차

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에서 시작하는 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

이 경우 첫 번째; 명령문이 생략 된 경우에도 명령문이 초기화, 조건 또는 최종 표현식을 나타내는 지 여부를 나타내는 데 필요합니다.

아래에서 루프에서 조건을 제거 할 수도 있습니다. 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

경고 : 조건을 생략하면 break 문이 포함되어야 합니다. 그렇지 않으면 루프가 무한 루프로 영원히 실행되어 브라우저가 충돌 할 수 있습니다.

마지막으로 루프의 끝에 대신 배치하여 최종 표현식을 제거 할 수 있습니다. 두 세미콜론이 여전히 포함되어 있어야 합니다. 그렇지 않으면 루프가 작동하지 않습니다.

// Declare variable outside the loop
let i = 0;

// Omit all statements
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}

Output

위의 예에서 볼 수 있듯이 세 가지 명령문을 모두 포함하면 일반적으로 가장 간결하고 읽기 쉬운 코드가 생성됩니다. 그러나 나중에 문제가 발생하는 경우에는 설명을 생략 할 수 있습니다.

배열 수정

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