[JavaScript] for문

coolriver·2023년 7월 30일

JavaScript

목록 보기

8/10

JavaScipt for문

for문은 JavaScript의 반복문 중 하나로 괄호 안에 초기식, 조건식, 증감식이 포함된다. 초기문으로 변수를 선언하며, 조건문으로 식이 얼마나 반복될지 정하고, 그 값이 true일 동안에 증감식과 내용 블록을 반복 실행한다.

for문 구문 예시

for (let i = 0; i < 10; i++);{
  실행문
}

괄호 안의 식은 각각 let i = 0 초기식, i < 10 표현식, i++ 증감식 이렇게 구성되어있다. 또한 각각의 식은 ; 구분자를 통해 나뉘어지며 마지막 증감식엔 구분자가 쓰이지 않는다.

for문 순서도

1. 초기식 실행: 변수를 선언합니다.

2. 조건식 실행: 선언한 변수를 조건식에 대입합니다. 값이 true일 경우 실행식으로 넘어가며 false일 경우 for문을 종료합니다.

3. 실행식 실행: 조건식이 true일 때 실행하는 식입니다. 여러 줄을 사용할 경우 블록 스코프{}를 통해 작성 가능하며 아무것도 실행하지 않을 경우 공백문;을 작성합니다.

4. 증감식 실행: 매 반복마다 진행되는 식입니다. 주로 변수를 증감하는 데에 쓰입니다.

for문 예시

for (let i = 0; i < 10; i++){
	console.log(i);
}
// 출력:
0
1
2
3
4
5
6
7
8
9

이런 식으로 초기식이 실행되면서 변수를 할당하고, i를 조건식에 대입하여 10보다 작은지 판단 후 실행문을 돌린다. 실행문이 한 번 돌면 증감식으로 넘어가 i++을 진행하여 i에 +1 값을 준다. 그 후 다시 조건식으로 돌아가고 똑같은 방식으로 흘러간다.

10 이하 짝수의 값

let result = 0;
for(i = 2; i <= 10; i += 2){
  result += i;
  console.log(i);
}
//출력:
2
4
6
8
10

우선 초기식을 2로 시작하여 시작하는 짝수의 값을 선언하고 10 이하까지의 값 설정을 위해 i <= 10을 써 준다. 그리고 다음 증감식에서 홀수를 건너 뛰고 짝수 값만 가져오기 위해 i += 2를 써서 다음 짝수로 넘어갈 수 있게 되어있다.

구구단

for(let i = 1; i < 10; i++){
  for(let x = 1; x < 10; x++){
    console.log(`${i} * ${x} = ${i * x}`);
  }
}
//출력:
1 * 1 = 1
1 * 2 = 2
1 * 3 = 3
1 * 4 = 4
1 * 5 = 5
1 * 6 = 6
1 * 7 = 7
1 * 8 = 8
1 * 9 = 9
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18
…

이런 식으로 이중 for문을 이용하여 구구단도 출력할 수 있다. 외부 for문에서 첫 번째 곱할 수를 정해 주고 내부 for문에서 두 번째로 올 수를 정하여 곱셈 식을 출력한다.

continue

현재 반복을 건너뛰고 다음 반복으로 돌아가 코드를 실행합니다.

continue 예시

for (let i = 0; i < 10; i++){
  if(i === 4)continue;
  console.log(i);
}
// 출력:
0
1
2
3
5
6
7
8
9

이 for문은 0에서부터 10까지 반복하여 console.log에 출력되지만 if(i === 4)continue; 부분을 통해 i가 4일 경우엔 반복을 건너뛰고 다음 실행문으로 가기 때문에 4는 출력되지 않는다.

break

현재 순회하던 반복문을 즉시 종료합니다. 루프 중인 반복문은 완전히 종료되며 다음 실행문으로 넘어갑니다.

break 예시

for (let i = 0; i < 10; i++){
  if (i === 5) break;
  console.log(i);
} 
// 출력:
0
1
2
3
4

0에서 10까지 반복문을 실행하지만 if문에서 i가 5일 시 바로 break를 하기 때문에 5가 되기 전까지만 반복문이 실행된다.

break continue 혼합 응용(1)

function solution(num1, num2) {
  for (let i = 0; i < 10; i++) {
    if (i === 0) continue;
    for (let j = 0; j < 10; j++) {
      if (j === 2) break;
      console.log(`${i} * ${j} = ${i * j}`);
    }
    if (i === 4) break;
  }
}
// 출력:
1 * 0 = 0
1 * 1 = 1
2 * 0 = 0
2 * 1 = 2
3 * 0 = 0
3 * 1 = 3
4 * 0 = 0
4 * 1 = 4

continue와 break가 들어간 이중 for문이다. 외부 for문이 처음에 0으로 시작하지만 바로 if(i === 0) continue;를 만나 현재 루프를 건너뛰고 다음 루프인 i = 1 루프를 실행한다. 그리고 바로 내부 for문으로 들어가 반복을 실행하고 j === 2인 경우 break 되기 때문에 j는 1까지만 출력된다.

그렇게 i가 4까지 돈 후 내부 for문을 나와 다음 루프를 진행하려 하는 순간 if (i === 4) break; 이 부분에 의해 외부 for문이 종료되며 반복문이 전부 끝난다.

break와 continue, 게다가 이중 for문까지 합쳐지니까 복잡하고 어려운데 차근차근 한 단계씩 풀어나가는 게 중요한 것 같다. 그리고 continue와 break가 어디에 위치하는지 어느 스코프에 포함되어 있는지를 잘 보는 게 아주아주 중요하다.

break continue 혼합 응용(2)

function solution(num1, num2) {
    for(let i = 0; i < 10; i++){
        for(let j = 0; j < 10; j++){
            if(i === j){
                console.log(`${i} * ${j} = ${i*j}`)
            }
            break;
        }
        if(i === 2) break;
    }
}
// 출력:
0 * 0 = 0

가장 헷갈렸던 부분인데 이 예시에서 break가 어딨는지가 정말 중요하다. 내가 처음에 생각했을 때는

0 * 0 = 0
1 * 1 = 1
2 * 2 = 4

이렇게 출력이 될 거라고 생각했다. if문을 돌고 다시 내부 for문을 전부 돌고 break가 될 거라고 생각했는데, 1 * 0에서 if문을 빠져 나오면서 바로 내부 for문이 종료되기 때문에 i = 1의 루프가 끝나버린다. 그렇게 다음 루프들도 똑같이 진행되면서 결국 0 * 0 = 0만 출력이 된다.

이 예시에서도 정말 중요하게 느낀 건 break가 어디에 속하는지 확인하는 것이다. 중첩 for문인 경우 어느 for문에 속해 있는지 실행문 뒤에 오는지, 앞에 오는 지 잘 보는 게 정말 중요한 것 같다.

정리

for문은 JavaScript의 반복문 중 하나이며
괄호 안에 초기식, 표현식, 증감식을 넣어 구성한다.

초기식에서 변수 선언 -> 표현식 -> 값이 true인 경우 -> 실행문 -> 증감식 -> 다시 초기식

표현식 값이 false인 경우 반복문이 종료된다.

continue와 break를 통해 반복문의 루프를 건너뛰거나 종료할 수 있으며 이중 for문, 중첩 for문이 가능하다.

코테에 거의 매번 쓰게 되는 for문을 다뤄 봤는데 글로 풀어 내자니 정확하게 몰랐던 부분도 많았던 것 같고 아직 무한루프 부분이나 변수를 두 개 다루는 부분은 어렵다. for문은 진짜 사용할 곳도 많고 응용할 부분도 너무 많기 때문에 앞으로 더 몰랐던 부분이 생기거나 흥미로운 부분이 생기면 더 업데이트 할 예정이다.