본문 바로가기

💻 개발자/🔨 HTML, CSS, JS

[JS] 반복문 기초 (for문과 while문)

반응형

JavaScript를 학습하면서 제일 이해하기 어려웠던 문법은 바로 반복문이었다.

이제 간단한 반복문 문제와 이중 반복문 문제를 풀 수 있을 정도는 되었지만 감을 잃지 않기 위해서 포스팅을 하기로 결정했다.

왜 그렇게 어렵게 느꼈나 지금 와서 생각해 보니 반복문 안에서 일어나는 일들을 머릿속으로 상상하는 데 어려움을 겪었던 것 같다.

그리고 할당(assignment)이라는 개념도 정확하게 인지하고 있지 않다 보니 더 헷갈렸지 않나 싶다.

 

기본적인 for문

let sum = 1;

for (let i = 2; i <= 4; i++) {
  sum = sum + n;
}
console.log(sum); // 10

동일한 내용의 while문

let sum = 1;
let i = 2;

while(i <= 4) {
  sum = sum + i;
  i++
}
console.log(sum); // 10

위의 두 코드는 동일한 값을 산출한다.

더 많이 쓰인다고 하는 for문의 코드를 일련의 과정으로 설명하면 다음과 같다.

 

1. sum에는 1이 할당되어 있다.

2. i에는 2가 할당되어 있다.

3. i가 4보다 작거나 같을 때까지 이 반복문은 계속 실행된다.

4. i는 1씩 증가한다. (i++는 i = i + i를 간단하게 적은 것)

5. sum은 미리 할당되어 있는 sum(할당된 값: 1)과 n(할당된 값: 2)을 더하여 3이 할당된다.

6. i는 3이 되고, 4보다 작거나 같기 때문에 반복문은 계속 실행된다.

7. sum(할당된 값: 3)과 i(할당된 값: 3)를 더하여 다시 sum에 할당된다.

8. i는 4가 되고, 4보다 작거나 같기 때문에 반복문은 계속 실행된다.

9. sum(할당된 값: 6)과 i(할당된 값: 4)를 더하여 다시 sum에 할당된다.

10. i가 5가 되면 조건에 부합하지 않기 때문에 더 이상 반복문은 실행되지 않는다.

11. console.log(sum)이 실행되고 sum에 할당된 10이 산출된다.

 

이제는 비교적 간단한 JavaScript 반복문 코드를 보면 위에 적어놓은 과정들이 자연스럽게 이해가 된다.

확실히 나는 이해를 하는 데까지는 시간이 꽤 걸리지만 한 번 이해를 한 문제는 확실하게 이해하고 넘어가는 것 같다.

개발자가 되기 위한 첫걸음을 이제 막 떼기 시작했다.

아직은 너무너무나 부족한 학생이지만 코드스테이츠의 과정을 모두 수료하고 지금보다 더 성장한 모습을 기대하며 오늘 하루도 맥북 앞에서 시간을 보낸다.

반응형