[Javascript] Codecademy 6. Loops

6. Loops

루프는 일련의 명령을 반복하는 데 사용되는 프로그래밍 도구입니다. 반복은 루프 컨텍스트에서 "반복"을 의미하는 일반적인 용어입니다. 루프는 일반적으로 중지 조건으로 알려진 지정된 조건이 충족될 때까지 계속 반복됩니다.

---

6-1. Loop(루프)

루프는 정지 조건이라는 지정된 조건에 도달할 때까지 일련의 명령을 반복하는 프로그래밍 도구입니다. 코드에서 작업을 재사용해야할 경우 해당 작업을 함수에 번들링하는 경우가 많습니다. 마찬가지로, 프로세스가 연속해서 여러 번 반복되어야 할 때, 우리는 루프를 작성합니다. 루프를 사용하면 프로세스를 자동화하는 효율적인 코드를 만들어 확장 가능하고 관리가 용이한 프로그램을 만들 수 있습니다. 특정 조건이 충족될 때까지 작업을 반복하고, 조건이 충족되면 루프가 중지되며 컴퓨터가 프로그램의 다음 부분으로 이동합니다.

 

6-2. For Loop

다음과 같이 반복 작업을 수행할 때마다 동일한 코드를 입력해야 한다면 다소 번거롭고 가독성도 떨어질 것입니다.

const vacationSpots= ['금', '은','동'];
console.log(vacationSpots[0]);
console.log(vacationSpots[2]);
console.log(vacationSpots[1]);

 

같은 코드를 반복해서 쓰는 대신, 루프는 주어진 코드 블록을 컴퓨터가 스스로 반복하도록 할 수 있게 해 줍니다. for loop를 사용하면 컴퓨터에 이러한 지시를 내릴 수 있습니다.

for (let counter= 5; counter < 11; counter++) {
  console.log(counter);
}

for loop(루프)는 세 가지 중요한 정보를 세미콜론(;)으로 구분하여 루프 명령을 선언합니다.

•  초기화는 루프를 시작하고 반복 변수 선언(또는 참조)을 통해 루프를 시작할 위치를 정의합니다.
•  정지 조건은 반복 변수와 비교하여 평가되는 조건입니다. 조건이 참으로 평가되면 코드 블록이 실행되고 거짓으로 평가되면 코드가 중지됩니다.
•  반복문은 루프가 완료될 때마다 반복 변수를 업데이트합니다. 반복 변수에는 아무 이름이나 사용할 수 있지만 설명 변수 이름을 사용하는 것이 좋습니다.

 

6-3. Reverse Loop(역방향 루프)

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

for 루프가 3, 2, 1, 그리고 0으로 기록되도록 하려면 어떻게 해야 할까요? 식을 간단히 수정하면 루프를 뒤로 돌릴 수 있습니다. 루프의 역방향을 실행하려면 다음을 수행해야 합니다.

• 반복 변수 초기화 식에서 원하는 가장 높은 값으로 설정합니다.
• 반복 변수 값이 원하는 양보다 작을 때의 중지 조건을 설정합니다.
• 반복 변수는 반복할 때마다 감소해야 합니다. 1만큼 감소하기 위해 연산자 --를 사용할 수 있습니다.

 

6-4. Looping Through Arrays(배열 반복)

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

루프는 데이터 구조를 반복하는 데 매우 유용합니다. 예를 들어, for 루프를 사용하여 배열의 각 요소에 대해 동일한 작업을 수행할 수 있습니다. 배열의 각 요소를 루프하려면 for 루프가 해당 조건에서 배열의 .length 속성을 사용해야 합니다. 배열의 길이를 .length 속성으로 계산할 수 있고 배열의 .length를 루프의 중지 조건으로 사용할 수 있기 때문에 이 방법은 배열을 루핑하는 데 매우 유용합니다.

 

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

for 루프 안에서 또 다른 for 루프가 작동하는 것을 중첩 루프라고 부릅니다. 내부 루프는 외부 루프의 각 반복에 대해 모든 반복을 실행합니다. 루프의 중첩은 두 배열의 요소를 비교할 때 사용됩니다. 외부 라운드의 각 라운드에 대해 내부 루프가 완전히 실행됩니다.

 

6-6. While Loop

while 루프는 지정된 조건이 true로 평가되는 동안 실행되는 루프를 생성합니다. 루프는 조건이 false로 평가될 때까지 계속 실행됩니다. 조건은 루프 전에 지정되며 일반적으로 루프가 중지되어야 하는 시점을 결정하기 위해 while 루프 본문에서 일부 변수가 증가하거나 변경됩니다.

아래에 counterTwo를 콘솔에 출력하고 counterTwo를 증가시키는 루프의 코드 블록이 있습니다.

for (let counterOne = 1; counterOne < 4; counterOne++){
  console.log(counterOne);
}
 
let counterTwo = 1;
while (counterTwo < 4) {
  console.log(counterTwo);
  counterTwo++;
}

위의 블록 내에서 counterTwo를 증가시키지 않으면 어떻게 될까요? 그러면 counterTwo는 항상 초기 값 1을 갖습니다. 즉, 테스트 조건 counterTwo < 4는 항상 true로 평가되고 루프는 실행을 멈추지 않을 것입니다. 이것을 무한 루프라고 합니다. 컴퓨터의 처리 능력을 모두 차지하여 컴퓨터를 동결시킬 수 있습니다.

 

6-7. Do...While 문

어떤 경우에는 초기 실행 후 코드 조각을 한 번 이상 실행한 다음 특정 조건을 기반으로 루프를 실행하기를 원할 수 있습니다. do...while 문은 작업을 한 번 수행한 다음, 지정된 조건이 더 이상 충족되지 않을 때까지 계속 수행하도록 지시합니다. do...while 문의 구문은 다음과 같습니다.

let cupsOfSugarNeeded= 3;
let cupsAdded= 0;
do{
 cupsAdded++;
 console.log(cupsAdded+ ' cup was added');
} while (cupsAdded < cupsOfSugarNeeded);

while 과 do...while 루프는 다릅니다. while 루프와 달리 do...while은 조건이 true로 평가되는지 여부에 관계없이 한 번 이상 실행됩니다.

 

6-8. break 키워드

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

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

 

루프 내에서 break 키워드를 사용하여 루프를 즉시 종료하고 루프 본문 이후 실행을 계속할 수 있습니다. 즉, break 키워드를 사용하면 루프 블록 내에서 루프를 "중단"할 수 있습니다. break 문은 큰 데이터 구조를 반복할 때 특히 유용할 수 있습니다. 중지 조건 외에 테스트 조건을 추가하고, 그 조건이 충족되면 루프를 종료하는 코드를 작성할 때에도 ‘break’ 키워드를 사용할 수 있습니다.

 

 

 

---

Corner React Starter #1

Editor dori