[Codecademy] Learn JavaScript 6. Loops

6. Loops

● Loops

1. Loops : 반복문

 반복문은 특정 조건에 도달할 때까지 일련의 명령을 반복하는 구문이다. 

프로그램이 특정 작업을 반복할 필요가 있을 때 반복문을 사용하면 효율적으로 유지보수하기 쉬운 코드를 작성할 수 있다.

반복문의 동작을 두고 iterate라는 표현을 사용한다.

---

2. Repeating Tasks Manually  : 수동으로 작업 반복하기

 반복문을 사용하지 않고 반복 작업을 수행하려는 경우의 번거로움을 살펴보자.

Instruction

1. 변수 vacationSpots를 문자열 세 개를 가진 배열로 만든다.

let vacationSpots=['A','B','C'];

2. 배열의 각 요소를 console.log()로 출력한다.

console.log(vacationSpots[0]);
console.log(vacationSpots[1]);
console.log(vacationSpots[2]);

---

3. The For Loop : for 반복문

 for 명령어를 이용하는 반복문을 살펴보자.  전형적인 for문은 반복 변수를 포함하고, 반복 변수는 보통  매 수행에 반복적으로 나타난다. 반복 변수는 초기화되고, 반복문 종료 조건에 의해 검사되고, 각 수행에서 새로운 값이 할당된다. 반복 변수에는 아무 이름이나 붙일 수 있지만, 기술적인 이름을 사용하는 것이 좋다. 일반적으로는 index의 약어인 i를 사용한다.

 

for 반복문은 괄호 안에 ; 로 구분되는 세 문장을 갖는다.

1. 첫 번째 문장은 반복 변수를 초기화하는 코드이다.

2. 두 번째 문장은 종료 조건으로, 이 평가식이 false가 되면 반복문이 종료된다.

3. 세 번째 문장은 매 수행에서 반복 변수의 값을 변화시키는 증감문이다.

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

괄호 안에 반복 변수 counter가 선언되며 0으로 초기화되었다.

위 반복문은 counter가 4보다 작을 동안 수행된다.

매 수행이 완료될 때마다 counter++가 동작하며 counter가 1씩 증가한다.

counter의 값이 4가 되면 counter < 4 의 조건을 만족하지 않으므로 반복 작업을 중지한다.

위 반복문은 0, 1, 2, 3을 출력한다.

 

Instruction

1. 5부터 10까지의 숫자를 출력하는 반복문을 작성한다.

for (let n=5;n<=10;n++){
  console.log(n);
}

---

4. Looping in Reverse : 거꾸로 반복하기

for문 내에서 반복 변수가  3, 2, 1, 0으로 줄어드는 반복문을 생각할 수 있을 것이다.

 

Instruction

1. for문을 이용해 반복 변수가 3에서 0으로 줄어드는 코드를 작성한다. 조건식에는 >=을, 증감문에는 --을 이용한다.

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

---

5. Looping through Arrays : 배열을 통한 반복

 for문을 이용해 배열의 요소를 이용한 반복 작업을 쉽게 수행할 수도 있다.

이때 배열의 각 요소를 이용하기 위해서는 배열의 length 속성을 이용해야 한다.

배열의 인덱스는 0부터 시작하므로, 마지막 요소의 인덱스는 해당 배열의 길이 - 1 과 같다. 따라서 배열의 모든 요소에 접근하려면 반복문의 괄호 안을 아래와 같이 작성한다.

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

 

Instruction

1. for문을 작성하라. 반복 변수 i를 이용하여 vacationSpots의 모든 요소에 접근할 수 있다.

for문의 블록 안에는 console.log() 를 이용하여, 문자열 'I would love to visit ' 다음에 vacationSpots의 요소가 오도록 출력하라.

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

---

6. 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 loops have the number: ' + yourArray[j])
    }
  }
};

외부 반복문의 배열 myArray의 모든 요소에 대해, myArray[i]는 내부 반복문이 실행되는 동안 yourArray[j]와 비교된다.

if문에서는 두 요소가 일치할 경우 콘솔에 출력하는 동작을 수행하게끔 하고 있다.

Instruction

1. 네 개의 문자열을 포함하는 배열 bobsFollowers를 선언하라.

2. 세 개의 문자열을 포함하는 배열 tinasFollowers를 선언하되, 그 중 두 개는 bobsFollowers와 같게 한다.

3. 빈 배열 mutualFollowers를 선언하라.

4. 외부 반복문에서 bobsFollowers의 요소를 반복하는 동안 내부 반복문에서 tinasFollowers를 반복하며, 두 요소가 같으면 mutualFollowers에 push한다.

let bobsFollowers=['a','b','c','d'];
let tinasFollowers=['a','b','z'];
let mutualFollowers=[];

for (let i=0;i<bobsFollowers.length;i++){
  for (let j=0;j<tinasFollowers.length;j++){
    if (bobsFollowers[i]===tinasFollowers[j]){
      mutualFollowers.push(tinasFollowers[j]);
    }
  }
}

---

7.  The While Loop : while 반복문

 while문은 괄호 안의 조건이 true일 동안 루프를 수행하는 반복문이다.

 

※ for문을 while문으로 변환한 예시

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

• counterTwo 변수는 전역변수로, while문의 내부에서도 참조할 수 있다.
• while문의 괄호 안의 true가 되면 반복문 안의 코드를 수행한다.
• counterTwo를 출력한 후 counterTwo의 값을 1 증가시킨다.

counterTwo의 값을 증가시키지 않는다면, counterTwo의 값은 항상 1이므로 조건식을 항상 만족시켜 무한 루프에 걸린다.

무한 루프는 바람직하지 않은 동작이므로 피해야 한다.

 

* 어떤 상황에서 for문과 while문을 나눠 써야 할까?

 정해진 구간 안에서 변화하며 반복하면 for문을 택하고, 특정 상태를 만족하거나 하지 않을 때까지 반복하면 while문을 택한다.

Instruction

1. let 명령어로 currentCard를 선언한다.

2. currentCard가 'spade'와 일치하지 않는지 검사하는 조건식을 갖는 while문을 만든다. while문의 안에는 아래 코드를 추가한다.

currentCard = cards[Math.floor(Math.random() * 4)];

Math.floor(Math.random() * 4)는 0부터 3까지의 랜덤 수를 반환한다. 이를 cards 배열의 인덱스로 사용해, currentCard가 랜덤 값을 갖게 할 것이다.

3. while문의 안에서, currentCard가 새 값을 할당받을 때마다 그 값을 콘솔에 출력하도록 한다.

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

---

8. Do...While 구조

 어떤 경우에는, 코드를 한 번 이상 실행한 다음 조건에 따라 루프를 수행할 수 있다. 

do { } while ( );  구조를 사용하면 코드를 우선 최초로 한번 실행한 후 조건을 충족하는지 검사하고 다음 루프를 수행할지 결정한다.

아래 예시에서는 i가 0일 때부터 4가 될 때까지 countString = countString + i 를 수행하므로 의 출력 결과는 01234이다.

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

Instruction

1. cupsOfSugarNeeded 변수를 만들고 숫자 하나를 할당한다. cupsAdded 변수를 만들고 0을 할당한다.

2. cupsOfSugarNeeded가 0이더라도 반복문을 한 번 이상 수행하려 한다. do...while문으로 cupsAdded가 cupsOfSugarNeeded보다 작은 값을 가지는 동안 cupsAdded를 1씩 증가시키도록 한다. 이때 cupsAdded의 변화를 알 수 있게끔 출력한다.

let cupsOfSugarNeeded = 2;
let cupsAdded = 0;

do {
  console.log(++cupsAdded);
} while (cupsAdded<cupsOfSugarNeeded);

---

9. The break Keyword : break 예약어

반복문을 도중에 탈출하려면 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!');

위의 예시에서는

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

가 출력된다.

Instruction

1. for문과 반복 변수 i를 이용해 rapperArray의 각 요소를 출력한다.

2. for문 이후에, "And if you don't know, now you know."를 출력하도록 한다. 문자열 중에 작은따옴표(')가 있음에 주의할 것.

const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"];

// Write your code below
for (let i=0;i<rapperArray.length;i++){
  console.log(rapperArray[i]);
  if (rapperArray[i]==="Notorious B.I.G.")
  break;
}
console.log("And if you don't know, now you know.");

3. 현재 루프에서의 rapperArray의 요소가 'Notorious B.I.G.'일 때 반복문을 탈출하도록 break를 추가한다.

---

Corner React Starter #2

Editor 유즈