Loops

이 글은 자바스크립트의 Loops(반복문)에 대한 개념 및 문법을 정리하기 위해 작성하였습니다.

---

 

< Loops >

To repeat a set of instructions until a specified condition, called a stopping condigion is reached.

 

 

---

< The For Loop >

Instead of writing out same code over and over, to repeat a given block of code on its own.

 

for (let iterator-variable = 0; iterator-variable < 5; iterator-variable ++) {
	// code block
}

 

1. initialization : Starts the loop and can also be used to declare the iterator variable.
   -> in this case, let iterator-variable = 0
2. stopping condition :  The condition that the iterator variable is evaluated against.
   if the condition evaluates to true the code block will run, and if it evaluates to false the code will stop.
   -> in this case, iterator-variable < 5
3. iteration statement : To update the iterator variable on each loop.
   -> in this case, iterator-variable ++

 

• Iterator variable is initialized, checked against the stopping condition, and assigned a new value on each loop iteration.
• In initialization, Do not use const.

 

 

---

< Looping through Arrays >

For loops are very handy for iterating over data structures, like Array.

 

• Should use .length property

 

ex)

const vacationSpots = ['America', 'Uyuni', 'Singapore'];

for (let i = 0; i < vacationSpots.length; i++) {
	console.log(`I would love to visit ${vacationSpots[i]}`);
}

// I would love to visit America
// I would love to visit Uyuni
// I would love to visit Singapore

 

 

---

< Nested Loops >

• For each round of the outer for loop, the inner for loop run completely.

 

ex)

const myArray = [1, 5, 10];
const yourArray = [5, 10, 15];

for (let i = 0; i < myArray.length; i++) {
	for (let j = 0; j < yourArray.length; j++) {
    	if (myArray[i] === yourArray[j]) {
        	console.log(`Both array have the number : ${myArray[i]}`);
        }
    }
}

// Both array have the number : 5
// Both array have the number : 10

 

 

---

< The While Loop >

Another way to use loops.

 

ex)

// A for loop that prints 1, 2, and 3
for (let counterOne = 1; counterOne < 4; counterOne++){
    console.log(counterOne);
}
 
// A while loop that prints 1, 2, and 3
let counterTwo = 1;
while (counterTwo < 4) {
    console.log(counterTwo);
    counterTwo++;
}

 

• If you know how many times the loop should run : use for
• If you don't know how many times the loop should run : use while

 

 

---

< Do... While Statements >

To run a piece of code at least once.

 

ex)

const firstMessage = 'I will print!';
const secondMessage = 'I will not print!'; 
 
// A do while with a stopping condition that evaluates to false
do {
 console.log(firstMessage)
} while (true === false);
 
// A while loop with a stopping condition that evaluates to false
while (true === false){
  console.log(secondMessage)
};

 

 

---

< The break Keyword >

To stop a loop.

It is especially helpful when we're looping through large data structures.

 

ex)

for (let i = 0; i < 99; i++) {
  if (i > 1) {
     break;
  }
  console.log('Banana.');
}
 
console.log('Orange you glad I broke out the loop!');

// Banana.
// Banana.
// Orange you glad I broke out the loop!

 

 

---

< For... of Statements >

A shorter way of for loops.

 

ex)

// For loop
const hobbies = ['singing', 'eating', 'quidditch', 'writing'];
 
for (let i = 0; i < hobbies.length; i++) {
  console.log(`I enjoy ${hobbies[i]}.`);
}

// For...of loop
const hobbies = ['singing', 'eating', 'quidditch', 'writing'];
 
for (const hobby of hobbies) {
  console.log(`I enjoy ${hobby}.`);
}

 

reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of