자바스크립트 Javascript (loop) / for , while, do while 반복문에 대해서 / while과 do while이 차이점.

Java Script(루프)

For loop

1. loop문에는 세 번의 세미콜론(;)이 나온다. 첫째는 ‘초기화’로 루프를 시작하고 반복문 변수를 선언한다.
2. 정지 조건은 , 이 조건이 참일 경우 코드를 실행시키고 거짓이라면 코드를 멈추게하는 조건이다.
   1. 이 조건에 대해 거짓이 되기 시작할 때를 정지 조건이라고 부르기도 한다.
3. 반복 선언은 1번의 반복 변수를 매 루프(매 회차)마다 업데이트 하기 위해 존재한다.
4. 다음은 예시이다.

for (let counter = 0; counter < 4; counter++) {
  console.log(counter);
}

/* 결과는 다음과 같다. 
0
1
2
3

Looping in Reverse (역루프)

• 조금 헷갈림

// The loop below loops from 0 to 3. Edit it to loop backwards from 3 to 0

for (let counter = 3 ; counter >=0; counter--){
  console.log(counter);
}

/*

결과는 3210

---
3
3 => 2
2
2=>1
1
1=>0
0
-1 -> false ; 
---
*/

Array loop 활용

const animals = ['Grizzly Bear', 'Sloth', 'Sea Lion'];
for (let i = 0; i < animals.length; i++){
  console.log(animals[i]);
}

Grizzly Bear
Sloth
Sea Lion

const vacationSpots = ['Bali', 'Paris', 'Tulum'];

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

//
I would love to visit Bali
I would love to visit Paris
I would love to visit Tulum

Nested Loops

루프 안에 루프가 있는 것을 말한다. 어레이 두개를 사용하거나 할 때 활용할 수 있다. 바깥 루프가 한 번돌때 안 루프는 완전히 다 돈다.

아래는 예시이다.

const myArray = [6, 19, 20];
const yourArray = [19, 81, 2];
for (let i = 0; i < myArray.length; i++) {
  for (let j = 0; j < yourArray.length; j++) {
    if (myArray[i] === yourArray[j]) {
      console.log('Both arrays have the number: ' + yourArray[j]);
    }
  }
}

While loop

// 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++;
}

만약 위 예시에서 while 문의 counterTwo 변수를 증가시키는 연산자가 없다면 어떻게 될까? 계속 조건을 만족시켜 True가 지속되므로 ‘무한반복’이 되어버린다. 이것은 지양해야한다.

그렿다면 *while* 은 언제 쓰는 것이 좋을까? 바로 우리가 얼마나 많이 반복을 시켜야하는지 모를 떄이다. 우리가 밥을 먹을 때 얼마나 먹으면 배부를까? 보통 먹다가 배부르면 멈추는 정도가 있는데, 그런 경우처럼 while문은 내가 배고플 동안(while I’m hungry) 먹는 것과 같은 상황에서 쓰는 것이다.

const cards = ['diamond', 'spade', 'heart', 'club'];

// Write your code below
let currentCard ;
while(currentCard != 'spade'){
  currentCard = cards[Math.floor(Math.random() * 4)];
  console.log(currentCard);
}
//위 코드는 0~3의 무작위 숫자를 제공함

Do...While Statements

let countString = '';
let i = 0;
 
do {
  countString = countString + i;
  i++;
} while (i < 5);
 
console.log(countString);

Do while 문은 첫 번 째는 조건 없이 진행하고 싶고 그 이후에는 조건에 맞지 않을 때까지 반복을 시키고 싶을 때 쓰인다.

Do 안에 들어간 코드는 한 번 실행이 되고 , 그 뒤에 while 뒤 조건을 평가하여 다시 실행하는 구문이다. while 과 비슷해보이지만 사실 둘은 다르다.

Do while 과 while은 다르다. 다음의 예시를 보자. while과 다르게 do-while문은 뒤 조건이 false더라도 무조건 한 번은 실행하고 난 뒤에 멈춘다.

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

우리가 계획한 것 보다 일찍 조건문을 끝내야 할 때도 있다. 그럴 때 쓰는 것이 break 키워드이다.

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

///This is the output for the above code:

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

 

For...of 구문 

 ES6에서 지원되는 For of는 for를 간편하게 바꿀수 있는 훌륭한 구문이다. 어레이를 반복할 때 주로 사용된다. 

아래 예시에서는 어레이가 사용되었지만, string , set , 다른 어레이와 비슷한 오브젝트들이 다 사용될 수 있다. 

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

//위의 for 문을 아래로 바꿀 수 있다.
const hobbies = ['singing', 'eating', 'quidditch', 'writing'];
 
for (const hobby of hobbies) {
  console.log(`I enjoy ${hobby}.`);
}

 

Break and Continue

 for ... of 구문에서 마찬가지로 break와 continue를 조건문 안에 넣을 수 있는데

break를 사용하면 거기까지 실행 후 구문을 빠져나오고, continue는 해당 조건을 만족하는 부분은 건너뛰고 진행한다는 뜻이 된다. 

 

요약

• 반목문은 말그대로 반복되는 작업을 수행하게 해준다.
• for 문의 반복자(iterator) 변수를 증가하게 하거나 감소하게 하는 법.
• for 문 안에 다른 for 문을 넣는 법
• while 반복문은 다른 종류의 정지조건(stopping condition)을 넣게 해준다.
• 정지조건은 무한반복문을 피하는데 필수적이다.
• do…while문은 최소 한 번은 코드를 실행시킨다. 첫 번째 실행이후에 정지조건을 체크한다.
• break 키워드는 프로그램을 반복문에서 빠져나오게 해준다.

 

노션으로 작성 후 옮김.