초보자를 위한 JavaScript 루프: 기본 사항 배우기

우울한 월요일이고 당신은 직장에 있습니다. 월요일이 얼마나 우울한지 다들 아시죠? 당신의 상사가 당신에게 다가와서 말합니다. "야, 주말 동안 우리가 받은 미개봉 이메일이 300통이나 있다. 각 이메일을 열어서 보낸 사람의 이름을 적어두고 다 마친 후에는 이메일을 삭제해 주길 바란다."

이 작업을 수동으로 수행하려고 하면 매우 피곤해 보입니다. 다음으로 생각나는 것은 아마도 Google에 접속하여 이 프로세스를 자동화하고 삶을 더 쉽게 만들어 줄 수 있는 소프트웨어를 찾는 것입니다. 그렇죠?

음, 프로그래밍에서도 비슷한 상황이 있습니다. 완료될 때까지 반복적인 작업을 수행해야 하는 경우가 있습니다. 이 문제를 어떻게 해결합니까? JavaScript에는 루프라고 부르는 것이 있습니다. 루프를 사용하면 작업을 완료하는 데 필요한 코드의 양을 줄여 반복되는 작업을 해결할 수 있습니다.

이 기사에서는 루프가 무엇인지, 어떻게 작동하는지, 프로그램에 루프를 적용하는 데 사용할 수 있는 다양한 방법에 대해 설명합니다.

루프란 무엇입니까?

루프는 JavaScript에서 반복 작업을 쉽게 수행하는 데 사용됩니다. 이는 true 또는 false를 반환하는 조건을 기반으로 합니다.

조건은 루프 실행을 유지하기 위해 전달되어야 하는 표현식입니다. 지정된 조건이 true 값을 반환하면 루프가 실행되고 false 값을 반환하면 중지됩니다.

언제 루프를 사용해야 합니까?

루프는 반복적인 작업을 수행하는 데 유용합니다. 예를 들어, 루프를 사용하면 문제를 해결하는 데 필요한 코드가 단축됩니다. 시간을 절약하고 메모리 사용을 최적화하며 유연성을 향상시킵니다.

루프의 진정한 의미는 코드 길이를 줄이고 반복을 제한하는 것 이상으로 확장됩니다. 배열, 개체 또는 기타 구조의 데이터로 작업할 때도 도움이 됩니다. 또한 루프는 반복 코드를 줄이고 코드 재사용성을 높여 코드 모듈성을 향상시켜 프로젝트의 다양한 부분에서 사용할 수 있는 코드를 생성할 수 있게 해줍니다.

루프 유형

루프에는 진입 제어 루프와 종료 제어 루프라는 두 가지 주요 범주가 있습니다.

항목 제어 루프는 루프 본문을 실행하기 전에 "루프 입구"에서 조건을 평가합니다. 조건이 true이면 본문이 실행됩니다. 그렇지 않으면 몸이 움직이지 않습니다. for 및 while 루프는 입력 제어 루프의 예입니다.

종료 제어 루프는 테스트 조건보다 루프 본문에 중점을 두어 테스트 조건을 평가하기 전에 루프 본문이 최소한 한 번 실행되도록 합니다. 종료 제어 루프의 좋은 예는 do-while 루프입니다.

항목 제어 루프의 몇 가지 예를 살펴보겠습니다.

while 루프

while 루프의 구문은 다음과 같습니다.

 while (condition) { // loop's body }

다음 목록에서는 while 루프의 기능을 설명합니다.

1. while 루프는 괄호 안에 테스트 조건을 사용합니다.

   
   

2. 프로그램은 조건을 확인하여 통과 또는 실패 여부를 확인합니다.

   
   

3. 루프 본문 내의 코드는 조건이 전달되는 한 실행됩니다.

   
   

4. 테스트 조건이 실패하면 프로그램은 작업을 종료합니다.

아래에서는 while 루프의 실제 예를 살펴보겠습니다.

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. 위의 코드 조각은 "arr", "i" 및 "num" 변수를 초기화합니다.

   
   

2. " arr" 변수는 테스트 조건을 통과한 값을 보유하는 배열입니다.

   
   

3. "i" 변수는 각 반복 후 각 증분을 추적합니다.

   
   

4. "number" 변수는 각 반복 후 "i" 값을 해당 값(5)과 비교합니다.

   
   

5. 루프 본문 내의 코드는 "i"가 "number"보다 작거나 같은 한 각 반복 후에 "i"의 각 값을 배열에 푸시합니다.

   
   

6. "i"의 현재 값이 조건에 실패하면, 이 경우 "i" 의 값이 "숫자" 인 6보다 크면 루프 실행이 중지됩니다.

   
   

push() 메서드는 배열 끝에 새 항목을 추가하는 내장 JavaScript 함수입니다.

산출

 [1, 2, 3, 4, 5]

do-while 루프

do-while 루프는 while 루프와 매우 유사합니다. while 과 do-while 루프의 주요 차이점은 do-while 루프가 루프의 조건을 평가하기 전에 적어도 한 번은 코드 실행을 보장한다는 것입니다. do-while 루프에는 아래와 같은 구문이 있습니다.

 do { // loop's body } while (//condition)

do-while 종료 제어 루프의 훌륭한 예입니다. 이는 종료 제어 루프가 테스트 조건 이전에 루프 본문에 우선 순위를 부여한다는 사실에 있습니다. 이제 do-while 루프를 활용하는 실제 코드 예제를 살펴보겠습니다.

예:

 let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num);

이제 이 코드 조각을 분석해 보겠습니다.

1. "i" 및 "num" 변수를 초기화했습니다.

   
   

2. 콘솔은 루프의 조건을 평가하기 전에 "i"(1) 값을 기록합니다.

   
   

3. 조건이 확인되고 각 반복 후에 "i" 값이 +1씩 증가합니다.

   
   

4. 루프는 "i"가 "num"보다 크면 작업을 종료합니다.

   
   

산출

 1 2 3 4 5

do-while 루프는 while 루프와 매우 유사하지만 주목해야 할 미묘한 차이점이 있습니다. while 과 do-while 루프의 차이점을 비교하는 또 다른 예를 살펴보겠습니다.

 let i = 5; let num = 4 while( i < num) { console.log(i) }

위의 while 루프는 콘솔에 결과를 반환하지 않습니다. 지금, 왜 그럴까?

1. "i" 및 "num" 변수를 각각 값 5와 4로 초기화했습니다.

   
   

2. 이 조건은 "i" 값이 "num"보다 작은지 확인합니다.

   
   

3. true인 경우 각 해당 값을 기록합니다.

   
   

4. "i"의 초기 값이 "num"의 초기 값을 초과하므로 루프가 실행되지 않습니다.

   
   

이제 do-while 루프를 사용하여 비슷한 예를 들어보겠습니다.

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

산출

 5

do-while 루프는 콘솔에 5를 반환하는 코드 블록의 실행을 보장합니다. "i"는 처음에 "num"보다 높은 값을 가지지만 여전히 콘솔에 한 번 기록됩니다. 이 표현은 do-while 루프와 while 루프 간의 기능 차이를 보여줍니다.

For 루프

for loop 는 독특한 유형의 루프로 프로그래머가 가장 일반적으로 사용하는 루프 중 하나입니다. for loop 는 조건에 따라 특정 횟수만큼 코드 블록을 실행하는 루프입니다. for 루프에는 아래와 같은 구문이 있습니다.

 for (Expression1...; Expression2....; Expression3...{    //code block }

식 1: for loop 의 이 부분은 초기화 영역이라고도 합니다. 이는 for loop 의 시작 부분이자 카운터 변수가 정의되는 영역입니다. 카운터 변수는 루프가 실행되는 횟수를 추적하고 이를 값으로 저장하는 데 사용됩니다.

식 2: 이것은 루프의 두 번째 부분입니다. 이 부분은 루프를 실행하는 조건문 을 정의합니다.

식 3: 루프가 끝나는 곳입니다. 이 섹션의 카운터 변수는 조건에 지정된 대로 값을 늘리거나 줄여 각 반복 후에 해당 값을 업데이트합니다.

for 루프를 사용하는 예제를 살펴보겠습니다.

 for (let i = 0; i < 100; i++) {  console.log("Hello World" ) }

위의 코드 조각을 함께 분석해 보겠습니다.

1. 먼저 카운터 변수 " i"를 값 0으로 초기화했습니다.

   
   

2. 다음으로, 코드 실행을 유지하는 조건문을 만들었습니다.

   
   

3. 우리는 "i"의 값을 100과 비교했습니다. 이 테스트를 통과하면 "Hello World"가 기록됩니다.

   
   

4. 이 프로세스는 각 반복 후 카운터가 +1씩 증가하는 동안 반복됩니다.

   
   

5. 카운터 값이 100에 도달하면 루프가 종료됩니다.

   
   

산출

 Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ...

for-each 루프

for-each 루프는 배열을 통해 이동하고 해당 배열의 각 요소에 콜백 함수를 적용하는 JavaScript의 메서드입니다. 콜백 함수는 단순히 함수에 매개변수로 전달되는 또 다른 함수입니다. 콜백 함수는 기본 함수 실행이 완료된 후 순차적으로 실행되어 작동합니다.

for-each 루프의 기본 구문을 살펴보겠습니다.

 array.forEach(function(currentValue, index, arr))

위에 제공된 코드는 for-each 루프의 작동을 설명합니다.

• 이 루프는 현재 값, 인덱스 및 배열의 세 가지 매개 변수를 허용합니다.

• 현재 값은 배열에 있는 요소의 현재 값을 나타냅니다.

• 인덱스는 해당 배열에서 현재 요소의 번호가 매겨진 위치를 알려주는 선택적 매개변수입니다.

• arr은 요소가 속한 배열을 알려주는 또 다른 선택적 매개변수입니다.

  
  

 let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); });

위의 예를 분석해 보겠습니다.

1. 변수 이름 "myArray"로 배열을 초기화하고 1에서 5 사이의 정수로 저장했습니다.

   
   

2. for-each 배열 메소드는 세 개의 매개변수를 사용하고 배열에 콜백 함수를 적용합니다.

   
   

3. 이 줄; arr[index] = num * 2 현재 요소의 값에 2를 곱하고 반환된 값을 현재 요소의 인덱스에 할당합니다.

   
   

참고: for-each 배열 메서드는 새 배열을 반환하지 않습니다. 오히려 원래 배열을 수정하여 반환합니다.

산출

 [2, 4, 6, 8, 10]

JavaScript에서 루프의 For...In 및 For...란 무엇입니까?

for... in 및 for... of 루프는 반복 가능한 객체를 반복할 때 매우 유용합니다. 반복 가능한 객체는 반복될 수 있는 모든 요소를 나타내며, 반복 가능한 객체의 일반적인 예로는 배열, 문자열, 집합 등이 있습니다.

for... in 과 for... of 객체를 반복/이동하는 방식이 비슷하지만, 이들 사이의 주요 차이점은 값을 반환하는 방식에 있습니다.

for...in 루프

for... in 루프는 객체에서 키/속성을 추출하고 상위 객체에서 해당 속성을 추출해야 할 때 유용합니다. for... in 루프는 때때로 특정 객체에 정의된 방식과 다른 방식으로 객체를 반복할 수 있습니다. for... in 루프가 작동하는 예를 들어보겠습니다.

 let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray);

위의 예에서는 여러 학생 이름과 해당 점수를 포함하는 StudentScores 라는 개체를 정의했습니다. for... in 사용하여, StudentScores 객체의 키를 나타내는 학생의 이름만 검색하고, push() 메서드를 사용하여 배열에 저장할 수 있었습니다.

산출

 ["John", "Dan", "Tricia", "Jamal", "Jane"]

for... 루프의

for... of 루프는 배열, 문자열, 맵 등과 같은 반복 가능한 객체의 값을 반복하는 특수한 유형의 루프입니다. for... of 루프는 객체의 키나 속성과 관련이 없습니다. , 오히려 값에만 우선순위를 표시합니다.

for... of 루프는 일반 객체를 반복할 수 없으며 반복할 수 없기 때문에 오류가 발생합니다. for.. of 루프를 사용하는 예를 들어보겠습니다.

 let numArray = [1,2,3,4,5] for (const value of numArray) {   console.log(value) } // Output = 1,2,3,4,5

요약하자면, for... in 및 for... of 루프는 반복 가능한 객체를 반복하는 좋은 방법입니다. 주요 차이점은 for... in 루프가 객체의 키를 반환하는 반면 for... of 루프는 반복 가능한 객체의 값만 반환한다는 것입니다.

무한 루프란 무엇이며 어떻게 피할 수 있나요?

무한 루프는 무한정 계속 실행되는 루프를 의미합니다. 이는 루프에 정의된 종료 조건이 없을 때 발생합니다. 무한 루프는 브라우저를 충돌시키고 프로그램에서 원치 않는 작업을 유발할 수 있으므로 위험합니다.

 // infinite loop sample while (true) { console.log("keep on running") }

프로그램에서 무한 루프를 방지하려면 항상 루프 내에 종료 조건이 정의되어 있는지 확인하십시오.

결론

이 기사를 끝까지 읽어 주셔서 감사합니다. Javascript의 루프는 훌륭하고 최적화 가능한 프로그램을 만드는 데 매우 중요하므로 모든 개발자가 숙달해야 하는 중요한 개념입니다. 나는 이 글을 통해 당신이 프로그램에서 루프를 사용하는 기본과 복잡함을 이해할 수 있을 것이라고 믿습니다.