-
2.21 JavaScript 반복문 for문 while문코드스테이츠 2023. 2. 22. 03:23
for문
JavaScript의 대표적인 반복문인 for문에 대해서 학습해 보겠습니다.
먼저, 1부터 5까지의 수를 차례대로 더한 값을 구하는 코드를 작성해 보겠습니다.
가장 쉽게 떠올릴 수 있는 방법은 1부터 5까지의 수를 모두 직접 입력하는 것입니다.
let result = 0; result = result + 1; result = result + 2; result = result + 3; result = result + 4; result = result + 5; console.log(result); // 15
이런 식으로 작성해도 원하는 결과를 얻을 수 있습니다. 하지만 만약 1부터 5까지의 합이 아니라 100,000까지의 합이라면 어떻게 될까요? 같은 코드를 100,000줄을 반복해서 작성해야 할 것입니다. 코드를 작성하는 것도 힘들지만, 그런 코드는 가독성도 매우 떨어질 수 밖에 없습니다.
이때 **반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있습니다.** 1부터 5까지의 수를 모두 더하는 코드를 for문으로 구현하면 다음과 같습니다.
let result = 0; for (let num = 1; num <= 5; num++) { result = result + num; } console.log(result); // 15
num++ 증감식
++ 혹은 --가 앞에 붙는가 뒤에 붙는가를 잘 보아야한다.
앞에 붙는다면 증가 혹은 감소를 시킨 다음 연산을 하는 것이고
뒤에 붙는다면 연산을 먼저 진행하고 증가 혹은 감소하는 것이다.
이 코드를 살펴보면, 아래와 같은 순서로 진행됩니다.
- for문 내부에 num이라는 변수를 선언하고 1이라는 초기값을 할당한다.
- 변수 num이 5보다 작거나 같은지 확인한다.
- 2의 결과가 true면, 코드블록 내부의 코드를 실행한다.
- 변수 num을 1증가 시킨다.//num++
- 2부터 4까지 반복한다.
- 2의 결과가 false면, 반복문이 종료된다.
이렇게 for문을 사용하면 코드를 몇 번 반복하여 실행할지 결정할 수 있습니다. 조건식만 바꾸면 되기 때문에 1부터 5까지의 합을 구하는 코드와, 1부터 100,000까지의 합을 구하는 코드는 큰 차이가 없습니다.
let result = 0; for (let num = 1; num <= 100000; num++) { result = result + num; } console.log(result); // 5000050000
이처럼 반복횟수가 크다고 해도 for문을 사용하면 간결하게 구현할 수 있습니다.
for문은 다음과 같은 형식으로 이루어져 있습니다.
for (초기값; 조건식; 증감식) { // 실행할 코드 }
for 뒤에 오는 소괄호(())에는 각각 초기값, 조건식, 증감식이 들어갑니다. 코드블록에는 반복해서 실행할 코드가 들어갑니다. for문을 구성하는 각 요소에 대해 하나하나 자세히 살펴 보겠습니다.
- 초기값: 증감식 반복횟수를 카운트하는 역할을 하는 변수입니다. (이때 변수는 정수를 의미하는 ‘integer’의 약자인 i를 주로 사용합니다.) 초기값은 반복문의 코드블록 내부에서만 유효합니다.
// 초기값(i)을 선언하고 1을 할당 for (let i = 1; 조건식; 증감식) { console.log(i); }
- 조건식: 코드블록 내부의 코드를 실행 여부를 결정합니다. true일 경우에는 코드를 실행하며, false일 경우 반복문이 종료됩니다.
// i가 3보다 작거나 같을 경우 코드 실행, 3보다 클 경우 반복문 종료 for (let i = 1; i <= 3; 증감식) { console.log(i); }
- 증감식: 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식입니다.
// 코드가 실행될 때마다 i가 1씩 증가 for (let i = 1; i <= 3; i++) { console.log(i); // 1 2 3 }
위 예제의 실행 순서는 다음과 같습니다.
- for문 내부에서 유효한 변수 i를 선언하고 1을 할당한다.
- 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 1이므로 i <= 3은 true로 평가된다.
- 코드블록 내부의 console.log(i)가 실행되어 1이 출력된다.
- 증감식에 따라 i가 1증가 한다. i는 2가 된다.
- 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 2이므로 i <= 3은 true로 평가된다.
- 코드블록 내부의 console.log(i)가 실행되어 2가 출력된다.
- 증감식에 따라 i가 1증가 한다. i는 3이 된다.
- 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 3이므로 i <= 3은 true로 평가된다.
- 코드블록 내부의 console.log(i)가 실행되어 3이 출력된다.
- 증감식에 따라 i가 1증가 한다. i는 4가 된다.
- 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 4이므로 i <= 3은 false로 평가된다.
- 반복문이 종료된다.
실습1)
0부터 10까지의 숫자를 출력하는 코드를 반복문으로 작성하세요.
for (let i = 0; i <= 10; i++) { console.log(i); }
반복문 활용하기
조건문을 학습한 후 다음과 같이 구구단 n단을 출력했습니다.
let num = 3; if (num >= 2 && num <= 9) { console.log(num * 1); // 3 console.log(num * 2); // 6 console.log(num * 3); // 9 console.log(num * 4); // 12 console.log(num * 5); // 15 console.log(num * 6); // 18 console.log(num * 7); // 21 console.log(num * 8); // 24 console.log(num * 9); // 27 } else { console.log('2와 9사이의 수를 입력하세요.'); }
우변에 들어갈 숫자를 반복문으로 구현하면 어떻게 될까요?
let num = 3; if (num >= 2 && num <= 9) { for (let i = 1; i <= 9; i++) { console.log(num * i); } } else { console.log('2와 9사이의 수를 입력하세요.'); }
구구단 3단이 출력됨
문자열과 반복문
인덱스(index)
문자열의 각 문자는 순서를 가지고 있습니다. 첫 번째 문자의 인덱스는 0입니다.
let str = 'codestates'; console.log(str[0]); // 'c' console.log(str[4]); // 's'
특정 문자의 인덱스를 확인하는 메서드는 indexOf()입니다.
let str = 'codestates'; console.log(str.indexOf('c')); // 0 console.log(str.indexOf('e')); // 3
만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
길이(length)
문자열의 길이는 문자열 뒤에 .length를 붙임으로써 조회할 수 있습니다.
let str = 'codestates'; console.log(str.length); // 10
for문의 초기화, 조건식, 증감식은 모두 숫자 타입과 관련이 있습니다. 만약 문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드를 구현하려면 어떻게 해야 할까요?
let str = 'codestates'; for (let i = 0; i <= 9; i++) { console.log(str[i]); }
위의 코드를 살펴보면, 변수 i가 0부터 9까지 1씩 증가하며 반복문이 실행됩니다. 변수 str에 할당된 문자열 'codestates'의 첫 번째 문자인 ‘c’의 인덱스는 0, 마지막 문자인 ‘s’의 인덱스는 9이므로, 결과적으로 이 코드는 각 문자를 하나씩 차례대로 출력하는 코드가 됩니다.
그런데 이렇게 코드를 구현하려면 문자열의 길이를 알고 있어야만 합니다. 문자열의 길이가 매우 길거나 또는 알 수 없는 상태일 때는 어떻게 해야 할까요?
let str = 'codestates'; for (let i = 0; i <= str.length - 1; i++) { console.log(str[i]); }
문자열 'codestates'의 길이는 10입니다. 0부터 시작하는 인덱스와는 달리, 길이는 말 그대로 문자열에 속한 문자의 개수를 나타냅니다. 따라서, 문자열의 마지막 문자의 인덱스는 문자열의 길이보다 1만큼 작습니다. 위의 예제처럼 i <= str.length - 1(또는 i < str.length)로 조건식을 작성하면, 문자열의 끝까지 순회하는 반복문을 구현할 수 있습니다.
반복문과 조건문
실습1)
1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성하세요.
// 실습1) 1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성하세요. for (let i = 1; i <= 10; i++) { // 조건문을 사용하여 홀수만 출력하도록 코드를 작성하세요. if (i % 2 === 1) { console.log(i); } }
if문은 소괄호 안에 있는 조건식이 true로 평가될 경우, 코드블록 내부의 코드가 실행됩니다. 조건식은 i를 2로 나누었을 때 나머지가 1인지, 즉 홀수인지 여부를 확인하고 있습니다. 따라서 i가 1부터 10까지 차례대로 증가하는 가운데 i가 홀수인 경우에만 i를 출력하고 있는 것입니다.
조금 더 나아가 i가 홀수인지, 짝수인지 여부를 확인하고 싶다면 다음과 같이 코드를 작성하면 됩니다.
for (let i = 1; i <= 10; i++) { if (i % 2 === 1) { console.log(`${i}는 홀수입니다.`); } else { console.log(`${i}는 짝수입니다`); }
실습2)
주어진 문자열의 문자들 중, 인덱스가 짝수인 문자만 출력하도록 코드를 구현하세요.
// 실습2) 주어진 문자열의 문자들 중, 인덱스가 짝수인 문자만 출력하도록 코드를 구현하세요. let str = 'software engineering bootcamp'; // 변수 str에 할당된 문자열의 모든 문자를 순회하도록 for문을 작성하세요. for (let i = 0; i <= str.length; i++) { // false가 입력되어 있는 부분에 알맞은 조건식을 넣어야 합니다. if (i % 2 === 0) { console.log(str[i]); } }
공백도 하나의 문자열로 취급됩니다. O
변수 str의 길이는 29입니다. O
반복문의 중첩
반복문은 중첩이 가능합니다. 다시 말해 반복문 내부에 또 다른 반복문을 사용할 수 있습니다.
다음 예시는 정육면체 주사위 두 개를 굴려서 나올 수 있는 모든 경우의 수를 구하기 위한 코드입니다.
for (let i = 1; i <= 6; i++) { for (let j = 1; j <= 6; j++) { console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`); } }
주사위2개 경우의 수를 구하기 위한 반복문
반복문은 두 개 이상 중첩 가능합니다. 2개의 반복문이 중첩된 경우 이중반복문, 3개의 반복문이 중첩된 경우 삼중반복문이라고 부르기도 합니다. 아래는 3개의 반복문이 중첩된 삼중반복문의 예시입니다.
for (let first = 0; first <= 3; first++) { for (let second = 0; second <= 3; second++) { for (let third = 0; third <= 3; third++) { console.log( `first는 ${first}, second는 ${second}, third는 ${third}입니다.` ); } } }
이중반복문의 좋은 예시 중 하나가 바로 구구단입니다. 구구단을 2단부터 9단까지 모두 출력할 때, 좌변에 있는 숫자는 고정된 상태로 우변에 있는 숫자가 1씩 증가합니다. 우변에 있는 숫자가 9까지 진행된 후에 좌변에 있는 숫자가 1 증가합니다. 이제 이중반복문으로 구구단 전체를 여러분이 직접 구현해 보세요.
실습3
이중반복문으로 구구단 전체를 출력하는 코드를 구현하세요.
// 이중반복문으로 구구단 전체를 출력하는 코드를 구현하세요. for (let i = 1; i <= 9; i++) { for (let j = 1; j <= 9; j++) { console.log(` ${i} x ${j} = ${i * j}`); } }
while 문
초기화, 조건식, 증감식이 모두 필요한 for문과 달리 while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행합니다.let num = 0; while (num < 3) { console.log(num); // 0 1 2 num++ }
위 코드를 for문으로 바꾸면 다음과 같습니다.
for (let num = 0; num < 3; num++) { console.log(num); // 0 1 2 }
while문을 사용할 때는 무한루프를 주의해야 합니다. 무한루프란 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상을 말합니다.
let num = 1; while (num > 0) { console.log(num); num++; }
위 코드에서 num은 항상 0보다 크므로, 무한루프가 발생합니다. 따라서 while문을 작성할 때는 조건식이 false로 평가되는 순간이 있는지 반드시 주의하여야 합니다.
do…while문
do…while문은 while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행합니다. 단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행됩니다.
do { console.log('코드블록 내부의 코드는 최소 한 번은 실행됩니다.') // '코드블록 내부의 코드는 최소 한 번은 실행됩니다.' } while (false)
while 뒤에 오는 조건식이 항상 false임에도 do의 코드블록 내부에 있는 코드가 한 번은 실행되는 것을 확인할 수 있습니다.
for문과 while문
for문과 while문의 용도는 명확하게 구분되지 않습니다. while문으로 할 수 있는 것을 for문으로 구현이 가능하고, for문으로 할 수 있는 것을 while문으로 구현이 가능합니다. 그러나 주로 사용하는 상황은 있습니다. 아래 내용을 참고하여 상황에 맞는 반복문을 사용하시기 바랍니다.
for문을 사용하는 경우
- 반복 횟수가 비교적 명확할 때
- 배열, 문자열 내부를 순회할 때
- 반복문의 중첩이 필요할 때
while문을 사용하는 경우
- 반복 횟수가 명확하지 않을 때
'코드스테이츠' 카테고리의 다른 글
2.22 코플릿 페어과제 조건문 (0) 2023.02.23 2.21 JavaScript 함수 (0) 2023.02.23 2.21 JavaScript 조건문 else문 (0) 2023.02.22 2.21 JavaScript 조건문 if문 (0) 2023.02.21 2.20 JavaScript 변수 활용 (0) 2023.02.21