JavaScript의 중첩 For 루프 내부를 이해하려고 시도한 방법

이 가이드에는 어떤 내용이 포함되어 있나요?

자바스크립트에서 중첩된 "for 루프"에 대해 단계별로 설명하려고 노력한 기본 가이드입니다. 브라우저 콘솔에 단색 사각형 패턴을 인쇄하는 프로그램을 작성하여 루프의 논리와 반복을 자세히 분석합니다. 루프 내부에서 무슨 일이 일어나는지, 중첩 루프 내부의 반복과 작동 순서에 대해 설명하겠습니다.

누구를 위한 가이드인가요?

이 가이드는 기본 JavaScript 기본 사항을 배웠거나 "for 루프"의 작동 순서에 대해 혼란스러워하는 완전 초보자를 대상으로 합니다.

전제 조건: 기본 JavaScript, 데이터 유형(문자열, 숫자), 연산자(=, <, >, , =) 및 For 루프

이 기사는 원래 Webdevstack.hashnode.dev에 게시되었습니다

소개

단색 정사각형 패턴을 인쇄하는 것은 초보자 수준의 도전입니다. 이 과제는 주어진 문자를 사용하여 콘솔에 단색 사각형 모양을 만드는 패턴을 인쇄하는 프로그램을 작성하는 것입니다. 이 가이드 전반에 걸쳐 for 루프를 사용하여 프로그램을 단계별로 작성하여 루프 작동 방식을 이해하고 각 단계를 for 루프가 작동하기 시작할 때 내부에서 일어나는 일을 자세히 설명합니다.

문제 이해

4 × 4 문자 그리드 크기로 # 등의 임의 문자로 구성된 정사각형 모양의 패턴을 시각화합니다. 즉, 4개의 문자로 구성된 4줄이 4 x 4 크기(열 및 행)의 정사각형을 구성한다는 의미입니다. 콘솔에서는 다음과 같이 표시됩니다.

패턴의 순서를 이해하는 것이 필요합니다. 각각의 새로운 문자는 4개의 문자(열 수)로 행을 만듭니다. 특정 패턴을 인쇄하려면 새 줄마다 이 세트를 4번 반복해야 합니다.

기본 시작하기

먼저 일부 값을 저장하는 변수를 선언하는 것부터 시작해 보겠습니다. 첫 번째 변수는 패턴을 계산하는 데 필요한 숫자 4를 저장하는 크기입니다. 두 번째는 최종 출력을 저장하기 위해 빈 문자열이 할당된 결과입니다. 문자열 값을 보유하므로 빈 문자열이 결과의 초기 값으로 할당됩니다. (빈 문자열을 저장하지 않으면 마지막에 출력, 반환 내용을 확인할 수 있습니다)

let size = 4;
let result = "";

(변수를 초기화하지 않고도 가능하지만 더 나은 유지 관리를 위해 변수를 사용합니다. 또한 for 루프 외에도 while 루프나 다른 방법을 사용하여 프로그램을 작성할 수 있지만 이것이 우리의 목표는 아닙니다. 이 가이드)

예를 들어 루프를 작은 단계로 나누어 이해하기 위해 기본 'for 루프'를 작성해 보겠습니다. 기본 사항을 명확하게 이해하면 다음 단계를 더 쉽게 고려할 수 있습니다.

let size = 4;
let result = "";

기본 설정 이해

• 변수 설정

  크기 = 4; - 루프가 반복되는 횟수.

  결과 = ""; - 최종 출력을 저장하기 위한 빈 문자열입니다.

• 루프 초기화: 개수 = 0; "For 루프"의 시작 값을 설정합니다.

• 루프 조건화: count < 크기; count가 size보다 작은지 확인합니다. 조건이 false를 반환할 때까지 루프가 실행됩니다.

• 루프 본문: 결과 = "#"; 각 for 루프 반복의 결과에 "#" 문자를 추가합니다.

• 루프 변수 업데이트: count ; 각 반복이 끝날 때마다 1씩 증가합니다.

  카운트 → 카운트 = 카운트 1

  증분해야 합니다. 그렇지 않으면 루프가 무한히 실행됩니다.

추가: 기존 값 끝에 새 값을 추가합니다. 예를 들어 text = “Hello”라고 가정합니다. text = "World"와 같이 다른 값을 텍스트 변수에 연결하면; 기존 값 "Hello"에 문자열 "World"를 추가하여 결과적으로 "HelloWorld"가 출력됩니다. text = “World” → text = text “World” → text = “Hello” “World” → text = “HelloWorld”

각 반복에서 어떤 일이 발생합니까?

크기 = 4; 결과 = ““;

반복 1:

• 개수 = 0; → 카운트 < 크기; → 0 < 4 → 조건 참 → Loop Body

• 결과 = "#"; → 결과 = 결과 "#"; → 결과 = "" "#" → 결과 = "#";

• 카운트 → 카운트 = 카운트 1 → 카운트 = 0 1 → 카운트 = 1

반복 2:

• 개수 = 1; → 카운트 < 크기; → 1 < 4 → true → Loop Body

• 결과 = “#”; → 결과 = 결과 “#”; → 결과 = “#“ “#” → 결과 = “##”;

• 카운트 → 카운트 = 카운트 1 → 카운트 = 1 1 → 카운트 = 2

반복 3:

• 개수 = 2; → 2 < 4 → true → 루프 본문

• 결과 = “#”; → 결과는 “###”

• 횟수 → 횟수는 3

반복 4:

• 개수 = 3; → 3 < 4 → true → 루프 본문

• 결과 = “#”; → 결과는 “####”

• 횟수 → 횟수는 4

반복 종료:

• 개수 = 4; → 4 < 4 → false → 루프가 중지됩니다.

console.log(결과); 결과의 최종 값을 콘솔에 인쇄합니다. 최종 값은 마지막으로 업데이트된 값입니다. 이 경우 출력: ####

둥지 짓기 - 패턴 구성

지금까지 For 루프를 사용하여 한 줄(행이라고 함)에 4개의 "#" 문자(각 문자를 열로 간주할 수 있음)를 인쇄했습니다. 정사각형의 치수를 구축하려면 총 4줄의 유사한 문자 세트 ####가 필요합니다. ✅

루프를 새 루프 안에 배치하여 전체 루프를 4번 반복하면 이를 달성할 수 있습니다. 이 새로운 루프는 각 문자 세트 ####를 4번 생성합니다. 이는 다른 루프 내부의 루프, 내부 루프 및 외부 루프를 의미하는 중첩 루프를 형성합니다.

?외부 루프가 실행될 때마다 내부 루프도 실행되며 이 역시 4번 반복됩니다. 이는 외부 루프의 4번 반복이 내부 루프를 4번 실행하여 내부 루프에 대해 총 16번의 반복이 발생함을 의미합니다. 다음과 같습니다.

우리 아이디어에 따라 코드를 변경하고 이에 따라 루프의 변수 이름도 업데이트해 보겠습니다. 내부 루프의 이름은 열 개수를 통해 문자를 배치하므로 "col"이고, 외부 루프의 이름은 "row"입니다.

let size = 4;
let result = "";

두 루프 모두 조건 행 < 크기 및 열 < 크기가 거짓이 됩니다. 행과 열은 각 반복에서 한 번에 하나씩 자체 값을 증가시킵니다.

이제 코드를 실행하면 출력은 다음과 같습니다: ################. 이는 원하는 출력이 아닙니다. 이는 각 행마다 새 줄을 나누지 않았기 때문에 발생합니다.

• 각 세트 ####을 담당하는 내부 루프로서 내부 루프 뒤이지만 여전히 외부 루프의 본문 내에 있는 동일한 변수 결과에 새 줄 문자 "n"을 추가합니다. 결과 = "n ";

for(let count = 0; count < size; count++){
    result += "#";
}
console.log(result);
// Play with this code on a code playground or on console.

• 각 행에 대해 내부 루프는 결과에 "#" 문자를 추가합니다. 문자 추가가 완료되고 종료되면 외부 루프는 결과 변수에 "n"을 추가하여 새 줄로 이동합니다.

중첩된 반복 제동

➿ 외부 루프

반복1: 행 = 0 → 행 < 크기 → 0 < 4 → 참

-- 외부 루프 몸체

--- 내부 루프

--- Iteration1: col = 0: result = “#”, 결과는 “#”, col

--- Iteration2: col = 1: result = “#”, 결과는 “##”, col

--- Iteration3: col = 2: result = “#”, 결과는 “###”, col

--- Iteration4: col = 3: result = “#”, 결과는 “####”, col

--- 내부 루프 종료

--result = "n": 개행 문자가 추가되므로 결과는 "####n"이 됩니다.

행 → 행 값을 1로 증가

반복2: 행 = 1 → 행 < 크기 → 1 < 4 → 참

-- 외부 루프 몸체

--- 내부 루프

--- Iteration1: col = 0: result = “#”, 결과는 "####n#", col

이 됩니다.

--- Iteration2: col = 1: result = “#”, 결과는 "####n##", col

이 됩니다.

--- Iteration3: col = 2: result = “#”, 결과는 "####n###", col

이 됩니다.

--- Iteration4: col = 3: result = “#”, 결과는 "####n####", col

--- 내부 루프 종료

-- 결과 = "n": 개행 문자가 추가되므로 결과는 "####n####n"이 됩니다.

행 → 행 값을 2로 증가

이후 프로세스 반복

-Iteration3: 행 = 2 → 2 < 4 → true → "####n####n####n" → 행 증분 값은 3

-Iteration4: 행 = 3 → 3 < 4 → true → "####n####n####n####n" → 행 증분 값은 4

-반복 끝: 행 = 2 → 2 < 4 → false → 정지

➿ 외부 루프 출구

마지막 줄 console.log(result); 최종 값을 인쇄합니다.

"####n####n####n####n"은 결과 변수가 마지막에 저장하는 최종 값입니다. "n"은 콘솔에 출력을 인쇄하는 동안 라인 브레이크를 실행합니다.

let size = 4;
let result = "";

결론

다차원 데이터 구조 반복 및 표시와 같은 복잡한 작업을 수행하려면 중첩 루프를 사용하는 경우가 많습니다. 지금까지 우리는 기본 이해를 위한 기반을 구축하기 위해 기본 프로그램의 중첩 루프 내부를 탐색했습니다. 기본 루프와 중첩 루프에 대한 반복 단계를 세분화했습니다. 더 많은 연습을 위해 사용자가 패턴의 크기와 문자를 입력하도록 허용하거나 직사각형 패턴을 생성하거나 동일한 프로그램을 다른 방법으로 구현하는 등 이 프로그램의 다양한 변형을 작성해 보는 것이 좋습니다.

console.log("읽어주셔서 감사합니다");

위 내용은 JavaScript의 중첩 For 루프 내부를 이해하려고 시도한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!