자습서: JavaScript의 중첩된 For 루프

소개

JavaScript에서 for 루프의 예를 간략하게 제공하는 것으로 시작하겠습니다.

const arr = [1, 2, 3, 4, 5, 6];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//Returns --->
1
2
3
4
5
6

위의 예에서는 arr이라는 변수를 선언하고 여기에 1에서 6까지의 숫자를 포함하는 배열을 할당합니다.

다음으로 for 루프를 만들고 루프의 카운터 역할을 하는 i라는 변수를 초기화합니다.

다음으로 루프 실행을 중지해야 하는 경우에 대한 조건을 사용합니다. 우리의 경우 i가 arr 배열의 길이보다 작은 동안 루프를 계속 실행할 것입니다.

마지막으로 업데이트 프로그램의 경우 루프가 실행될 때마다 i를 증가시켜야 한다고 말합니다.

루프 본문 내부에서 콘솔 로그를 사용하여 루프가 실행될 때 인덱스 i에 있는 arr 배열의 요소를 출력합니다.

그 결과 arr 배열의 모든 요소가 출력됩니다.

때로는 중첩 배열과 같은 더 복잡한 데이터 구조가 표시될 수 있습니다. 이러한 유형의 데이터 구조와 함께 위의 루프를 사용할 때 어떤 일이 발생하는지 살펴보는 것으로 시작하겠습니다.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//Returns ---> 
[1, 2]
[3, 4]
[5, 6]

위의 예에서 동일한 for 루프를 사용하지만 이번에는 arr 배열에 세 개의 중첩 배열이 포함되고 각 중첩 배열에는 두 개의 값이 포함됩니다. 루프가 실행되면 각 중첩 배열이 반환됩니다. 중첩 배열의 개별 요소에 액세스하려면 어떻게 해야 합니까? 여기에서 중첩된 for 루프가 유용해집니다.

중첩 루프

중첩 루프를 사용하여 중첩 배열의 개별 요소에 액세스할 수 있습니다. 위의 예에서 이것이 어떻게 작동하는지 예를 살펴보겠습니다.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  for(let j = 0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}
//Returns --->
1
2
3
4
5
6

중첩 루프의 결과 중첩 배열 내의 각 개별 요소를 나열할 수 있습니다. 이제 여기서 무슨 일이 일어나고 있는지 분석해 보겠습니다. 우리는 이미 외부 루프가 각 중첩 배열에 액세스한다는 것을 알고 있습니다. 이 경우 내부 루프는 중첩 배열의 각 요소를 통과합니다. 따라서 콘솔 로그는 기본적으로 i의 배열 요소에 대해 말하고 있습니다. 이는 이러한 요소를 통해 j를 사용하여 1과 2를 포함하는 배열입니다. 좀 더 자세히 살펴보겠습니다. 루프의 첫 번째 반복에 대해 다음을 얻습니다.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(`I am the outer loop ${arr[i]}`)
  for(let j = 0; j < arr[i].length; j++) {
    console.log(`I am the inner loop ${arr[i][j]}`)
  }
}
//Returns --->
I am the outer loop 1,2
I am the inner loop 1
I am the inner loop 2

따라서 외부 루프는 요소 1과 2를 포함하는 첫 번째 중첩 배열을 반환합니다. 그런 다음 내부 루프는 중첩 배열의 각 요소를 차례로 반복합니다. 따라서 우리는 1을 얻은 다음 2를 얻습니다.

이 프로세스는 중첩 배열의 전체 배열에 대해 실행됩니다. 따라서 이러한 콘솔 로그가 포함된 최종 출력은 다음과 같습니다.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(`I am the outer loop ${arr[i]}`)
  for(let j = 0; j < arr[i].length; j++) {
    console.log(`I am the inner loop ${arr[i][j]}`)
  }
}
//Returns --->
I am the outer loop 1,2
I am the inner loop 1
I am the inner loop 2
I am the outer loop 3,4
I am the inner loop 3
I am the inner loop 4
I am the outer loop 5,6
I am the inner loop 5
I am the inner loop 6

문자열 배열

이 접근 방식은 단어 배열이 있고 각 개별 문자를 반복하려는 경우에도 동일하게 유용할 수 있습니다. 예를 들어 보겠습니다.

const names = ["Abby", "Bobby", "Freddy"];
for(let i = 0; i < names.length; i++) {
  console.log(names[i]);
}
//Returns --->
Abby
Bobby
Freddy

for 루프를 사용하여 이름 배열을 반복하고 이름 배열의 각 요소에 액세스할 수 있습니다. 이것은 훌륭하지만 이름의 개별 요소에 액세스하려는 경우 중첩 루프는 매우 유용한 패턴입니다.

const names = ["Abby", "Bobby", "Freddy"];
for(let i = 0; i < names.length; i++) {
  console.log(`I am the outer loop ${names[i]}`)
  for(let j = 0; j < names[i].length; j++) {
    console.log(`I am the inner loop ${names[i][j]}`)
  }
}
//Returns --->
I am the outer loop Abby
I am the inner loop A
I am the inner loop b
I am the inner loop b
I am the inner loop y
I am the outer loop Bobby
I am the inner loop B
I am the inner loop o
I am the inner loop b
I am the inner loop b
I am the inner loop y
I am the outer loop Freddy
I am the inner loop r
I am the inner loop e
I am the inner loop d
I am the inner loop d
I am the inner loop y

이 기사를 즐겼기를 바랍니다. 댓글, 질문 또는 피드백을 자유롭게 게시하고 더 많은 콘텐츠를 보려면 저를 팔로우하세요!