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

---

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

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

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

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

루프란 무엇입니까?

루프는 JavaScript에서 반복 작업을 쉽게 수행하는 데 사용됩니다. 이는 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" 값이 "number"인 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. We initialized the "i" and "num" variables.
2. The console logs in the value of "i" (1) before evaluating the loop's condition.
3. The condition is checked, and the value of "i" increments with +1 after each iteration.
4. The loop ends its operation once "i" is greater than "num".

Output

1
2
3
4
5

Although the do-while loop is very much similar to the while loop, there are subtle differences we must note, let’s take another example that compares the difference between the while and do-while loop.

let i = 5;
let num = 4

while( i < num)
{
  console.log(i)
}

This while loop above won't return any result to the console, now why is this so?

1. We initialized the "i" and "num" variables with values of 5 and 4, respectively.
2. The condition checks if the value of "i" is less than "num".
3. If true, it logs in each respective value.
4. Since the initial value of "i" exceeds that of "num", the loop never runs.

now let's take a similar example with the do-while loop.

let i = 5;
let num = 4;

do {
  console.log(i)
}
while ( i < num)

Output

5

The do-while loop ensures the execution of the code block, which returns 5 into the console, although "i" has a higher value than "num" initially, it's still logged in the console once. This representation shows you the difference in functionality between the do-while and while loop.

For loop

The for loop is a unique type of loop and one of the most commonly used loop by programmers, the for loop is a loop that runs a code block for a specific number of time depending on a condition. The for loop has the following syntax below.

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

Expression1: This part of a for loop is also known as the initialization area, it's the beginning of our for loop and the area where the counter variable is defined; the counter variable is used to track the number of times the loop runs and store that as a value.

Expression2: This is the second part of the loop, this part defines the conditional statement that would execute the loop.

Expression3: This is where the loop ends; the counter variable in this section updates its value after each iteration either by increasing or decreasing the value as specified in the condition.

Let's dive into an example using the for loop.

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

From the code snippet above, let's break it down together.

1. First, we've initialized the counter variable "i" with a value of zero.
2. Next, we've created the conditional statement that would keep the code running.
3. We compared the value of "i" with 100, if it passes this test, "Hello World" is logged.
4. This process repeats while the counter increases with +1 after each iteration.
5. The loop ends once the counter's value reaches 100.

Output

Hello World
Hello World
Hello World

...

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

for-each loop

The for-each loop is a method in JavaScript that travels through an array and applies a callback function on each element in that array; a callback function is simply another function passed as a parameter into a function, the callback function works by running sequentially after the main function is done executing.

Let's examine the basic syntax of a for-each loop.

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

The provided code above explains the workings of a for-each loop.

• This loop accepts three parameters, which are the current value, an index, and an array.
• The current value represents the present value of the element in the array.
• The index is an optional parameter that tells you the numbered position of the current element in that array.
• The arr is another optional parameter that tells you what array the element belongs to.

let myArray = [1, 2, 3, 4, 5];

array.forEach((num, index, arr) => {
  arr[index] = num * 2;

  console.log(array);
});

Let's break down the example above:

1. We initialized an array with the variable name "myArray" and stored it with integers ranging from 1 to 5.
2. The for-each array method takes three parameters and applies a callback function on the array.
3. This line; arr[index] = num * 2 multiplies the value of the current element by 2 and assigns the returned value to the current element's index.

Take note, the for-each array method does not return a new array; rather, it modifies the original array and returns it.

Output

[2, 4, 6, 8, 10]

What are for... in and for... of loops in JavaScript?

The for... in and for... of loops are very useful when it comes to iterating over iterable objects, iterable objects refers to any element that is capable of being looped over, common examples of iterables objects are arrays, strings, sets, etc.

The for... in and for... of are similar in how they iterate/move through objects, the main difference between them is shown on how they return values.

for... in loops

A for... in loop is useful when you need to extract the key(s)/properties from an object and it corresponding properties from the parent object, the for... in loop at times might iterate through an object in a manner that is different from the way it was defined in that particular object, let's take an example of a for... in loop in action.

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);

In the example above, we have defined an object named studentScores that contains several student names and their corresponding scores, by using for... in, we were able to retrieve only the names of the students, which represent the keys of the object studentScores, and store them in an array by using the push() method.

Output

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

for... of loops

The for... of loop is a special type of loop that iterates over the values of iterable objects such as arrays, strings, maps, e.t.c., for... of loops does not concern itself with the keys or properties of an object, rather it shows priorities on the values only, the for... of loop is unable to iterate over regular objects and will throw an error since they are not iterable. Let's take an example using the for.. of loop.

let numArray = [1,2,3,4,5]

for (const value of numArray) {
    console.log(value)
}

// Output = 1,2,3,4,5
In summary, the for... in and for... of loops are great way to loop through iterable objects, the main difference is a for... in loop returns the key of an Object while the for... of loop returns only the values of iterable objects.

What is an infinite loop and how can we avoid it?

An infinite loop refers to a loop that continues to run indefinitely; this occurs when a loop has no defined exit condition. Infinite loops are dangerous because they can crash your browser and lead to unwanted actions in your program.

// infinite loop sample
while (true) {
console.log("keep on running")
}
To prevent infinite loops in your program, always ensure that there is an exit condition defined within your loop.

Conclusion

Thank you very much for getting to the end of this article, loops in Javascript are important concept every developer needs to master as it is very valuable to creating a good and optimizable program, I believe with this article you would be able to understand the basics and intricacies of using loops in your program.

위 내용은 초보자를 위한 JavaScript 루프: 기본 사항 배우기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!