#9. 자바스크립트(javascript) - while문 , for문

# 자바스크립트의 반복문(loop)인 while문과 for문에 대해서 공부해도록 하겠습니다.
# while문 , for문: 조건이 참일 때까지 반복되는 구문

# Visual Studio Code 및 Extension 설치 방법 << Click!

# 비전공자가 이해한 Javascript

 

---

1. while문

 

---

 

1) 기본 문법

조건이 참일 때까지 반복하는 구문입니다. 조건에 거짓이 오게 되는 경우 반복문을 멈추고 다음 단계로 넘어갑니다.

 

---

 

2) while

let i = 3;
while ( i > 0 ) {
  console.log(`while: ${i}`);
  i--;
}

• 변수 i 가 3에서 시작해서 3이 0보다 작아지면 멈추는 while문입니다.
• 한번 반복될 때마다 실행되는 "i--;"는 "i = i - 1"과 같은 의미입니다.

 

---

 

2) do while

do while문은 먼저 블록을 실행하고 while 조건을 확인하는 방식입니다.

let z = 3;
do {
  console.log(`do while: ${z}`);
  z--;
} while (z > 0);

• while문과 다른 점은 do while문은 변수 z의 값이 -1이어도 일단 블록을 실행한다고 생각하시면 됩니다.
• 다음 예제를 보시면 더 명확히 그 차이를 아실 수 있습니다.

while문 (왼쪽)    do while문 (오른쪽)

 

---

2. for문

 

---

 

1) 기본 문법

• 시작 변수 자리는 처음 for문이 실행될 때 단 한번만 실행됩니다.
• 조건이 참일 경우 "실행할 구문"을 실행한 후 단계 부분을 실행합니다.
• 단계를 거쳐 다시 조건을 확인하고 "실행할 구문"을 실행한 후 다시 단계 부분을 실행합니다.

 

---

 

2) for문

let x = 3
for (x; x > 0; x--) {
  console.log(`for: ${x}`);
}

위의 코드를 풀어서 설명하자면,

1. x에 3을 할당합니다.
2. for문의 시작 변수에 x를 넣습니다. x의 시작은 3 입니다.
3. x가 0보다 큰 값인지 확인합니다.
4. x가 0보다 크기 때문에 console.log를 실행해 for: 3 값을 출력합니다.
5. x의 값인 3에서 -1을 합니다. x의 값은 2가 됩니다. (x-- 의 의미는 x = x - 1 입니다.)
6. 3번으로 돌아가 과정을 반복하고, x과 같거나 작아지면 for문을 중단합니다.

 

---

 

3) for문 안에서 지역 변수 선언

for문 안에서는 지역 변수를 선언해 for문 안에서만 사용이 가능합니다.
for문이 끝나는 동시에 for문 내에서 선언한 변수를 밖에서 사용할 수 없습니다.

---

 

4) nested loops

for문은 중첩해서 사용할 수 있습니다. 단, for문 간에도 지역변수 개념은 사라지지 않습니다.
즉, 1번 for문안에 있는 2번 for문에서 정의한 변수를 1번 for문 안에서는 사용할 수 없습니다.

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j: ${j}`);
  }
}

상단 일부

 

---

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# Javascript Web browser에서 보는 방법: console.log 사용
# MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

JavaScript | MDN