정보실

웹학교

정보실

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

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. 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 프로그래밍의 필수 부분이며 반복적인 작업을 자동화하고 코드를 보다 간결하고 효율적으로 만드는 데 사용됩니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 38회 ]  작성일19-10-28 14:10

웹학교