[Section 01] JavaScript 기초

---

< 05. 반복문 >

1. 반복문

• 지정한 조건이 참(true)으로 평가되는 동안 지정된 블록 문을 반복 실행할 때 사용하는 문법
• 변수를 선언하지 않아도 자바스크립트 엔진은 자동으로 var를 붙여 준다.
  그러나 var 보다는 let이나 const가 더 적당하므로 붙여주는 것이 좋다

1.1. do .. while

• do 부분을 먼저 실행하고 반복 여부 평가
• 실무에서는 잘 사용하지 않음

do {
  // 무조건 한 번은 실행
  // 한 번 이후에 expr이 참이면 실행 
} while (expr)

- while 문이 true 값이 될 때만 로직 실행 됨.

ex)
let count = 1;
do {
  count += 1;
  console.log(count);
} while (true);

- 이렇게 작성하면 while 문이 true 값만 있기 때문에 영원히 작동함, 오류 발생
- 무한 반복문!!

let count = 0;
do {
  //반복 로직을 작성
  count += 1;
  console.log(count);
} while (count < 3);

- 반복문이 종료될 수 있는 경우의 수(조건)를 넣어줘야 종료가 됨

1.2. while

• 소괄호 () 안의 표현식이 참이면 블록 { } 안의 코드를 실행시킴
• 반복 여부를 평가하고 코드 블럭 { } 실행

while(expr){
  // expr이 참이면 실행
}

ex)
let count = 0;
while (count < 10) {
  //code block
  count += 1;
  console.log(count);
}

1.3. for

for (초기값; 조건식; 증감식){
  // code block
}

ex)
for (let count = 1; count <= 3; count++) {
  console.log(count);
}

1.4. for .. in

• 배열이나 객체를 반복할 때 사용
• 배열은 index, 객체는 key를 식별자로 많이 사용한다.

ex)
const strArr = ["H", "e", "l", "l", "o"];
for (let index in strArr) {
  console.log(strArr[index]);
}            // strArr.index 안 됨

const userObj = {
  name: "철수",
  age: 20,
};
for (let key in userObj) {
  // console.log(userObj.key);
  console.log(userObj[key]);
  console.log(userObj.name);
}            // userObj.key 안 됨

1.5. for .. of

• 배열을 반복할 때 사용, 객체를 반복할 순 없다
• 직접적으로 배열을 반복하려고 했을 때 실제 값에 접근함
• 식별자는 value를 많이 사용

ex)
const strArr = ["H", "e", "l", "l", "o"];
const userObj = {
  name: "철수",
  age: 20,
};
for (let value of strArr) {
  console.log(value);
}  // 배열에 접근 가능
for (let value of userObj) {
  console.log(value);
}  // 객체에 접근 불가

※ 래퍼 객체

const str = "Hello";
str[0] = "B";     // ↓ 이렇게 해도 B가 아닌 H가 출력됨
console.log(str); // Hello 출력
console.log(str.length); // 배열 길이 5 출력
// `Hello`가 배열이 아니라 객체지만, 유사 배열 객체로 처리되어 배열 길이 출력
// 유사 배열 객체 : 배열은 아니고 객체인데, 배열처럼 보이는 것
// 문자열은 유사 배열 객체로 취급됨.

const strArr = ["H", "e", "l", "l", "o"];
strArr[0] = "B";      //    ↓ B가 출력됨
console.log(strArr);  // [ 'B', 'e', 'l', 'l', 'o' ] 출력
console.log(strArr.length); // 5 출력, 

strArr.push(".");     // 배열에 맨 뒤에부터 내용을 추가할 때 사용
console.log(strArr);  // [ 'B', 'e', 'l', 'l', 'o', '.' ]
console.log(strArr.length); // 배열 길이 6 출력

ex)
const strArr = ["H", "e", "l", "l", "o"];
for (let i = 0; i < strArr.length; i++) {
  console.log(strArr[i]);
}

출력 :
H
e
l
l
o

---

2. 무한 반복문

• 반복이 무한으로 실행되어 오류가 생길 수 있음, 주의!

---

3. continue, break

3.1. continue; 반복문을 건너 뛰게 하는 키워드

let i = 0;
while (i<5){
    i++
    if (i === 2) continue;
    console.log(i);
}                             // 2만 건너뛰고 출력됨

for (let i = 0; i < 5; i++) {
    if( i === 2 ) continue;
    console.log(i);
}                             // 2만 건너뛰고 출력됨

3.2. break; 반복문을 종료할 때 쓰는 키워드

for (let i = 0; i < 5; i++) {
    if( i === 2 ) break;
    console.log(i);
}                             // 0 1 출력, 2가 되면서 멈춰서 출력 안 됨

---

4. 다중 반복문

4.1. 단일 반복문

for(let i = 0; i < 2; i++){
    console.log(i);
}

4.2. 이중 반복문 / 다중 반복문

• 몇 번이든 반복해서 중첩 가능
• 실무에서는 사용할 일이 거의 없다. 구조 파악이 어려움

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

for(let i = 0; i < 2; i++){
    console.log(`i: ${i}`);
    for(let j = 0; j <3; j++){
        if(j === 1) continue;
        console.log(`j: ${j}`);
    }
}
// continue가 영향을 주는 것은 자기 자신, 겉에 있는 반복문에는 영향 x
// break도 똑같음