[JavaScript] 여러 가지 반복문

1. 반복문

반복문(loop문)은 어떤 것을 반복적으로 시행할 때 빠르고 간편하게 사용할 수 있다.
자바스크립트의 반복문은 C언어와 굉장히 비슷하다. C계열의 언어에서는 for, while 정도만 사용했는데 자바스크립트에서는 여러 가지 반복문을 지원해서 그들의 차이를 명확히 알고자 정리하기로 마음 먹었다.

자바스크립트에서 제공하는 반복문은 다음과 같다.
for문 for-in문 for-of문 while문 do-while문

이외에도 반복문을 빠져나오거나 다시 시작할 때 사용되는 break나 continue 등도 있다.

---

1.1 for문

for문은 설정한 조건이 거짓이 될 때까지 반복한다. 형태는 다음과 같다.

for ([초기문]; [조건문]; [증감문]) {
    //code block
}

//ex
let rainbow = ["빨강", "주황", "노랑", "초록", "파랑", "남색", "보라"];
for(int i=0; i<rainbow.length; i++) {
  console.log(rainbow[i]);
}

1. 초기문은 code block이 실행되기 전에 한 번 실행된다. 보통은 반복문에서 카운팅 역할을 하는 변수를 선언 또는 초기화하는 역할을 한다.
2. 조건문에서는 조건이 참인지 거짓인지를 판별한다. 만약 참이라면 code block을 실행한다. 만약 거짓이라면 for문을 종료한다.
3. 증감문이 있다면 code block 실행 이후에 증감문을 실행한다. 그리고 다시 조건문을 판별하는 단계로 돌아간다.
4. 위 예시에서는 i의 값이 7이 되는 순간 i<rainbow.length 조건이 거짓이 되기 때문에 i가 0~6일 때까지 실행되고 for문이 종결된다.

반복문을 사용하지 않고 위 예시와 같은 결과를 얻기 위해서는 다음처럼 하면 된다.

console.log(rainbow[0]); // 빨강
console.log(rainbow[1]); // 주황
console.log(rainbow[2]); // 노랑
console.log(rainbow[3]); // 초록
console.log(rainbow[4]); // 파랑
console.log(rainbow[5]); // 남색
console.log(rainbow[6]); // 보라

요소가 많아질수록 반복문을 사용하는 것이 훨씬 효율적이라는 것을 알 수 있다.

---

1.2 for-in문

for-in문은 배열 뿐 아니라 Object에도 사용할 수 있다. Object는 키(key)-값(value) 쌍으로 데이터를 저장하고 키를 이용해서 읽을 수 있다. for-in문을 이용하면 Object의 키 값의 개수만큼 code block을 실행한다.

for (const key in object) {
  //code block
}

//ex
let profile = {firstName: "gildong", lastName: "Hong", age: 25};
for (const key in profile) {
  console.log(profile[key]); // Object[key] -> 해당하는 키의 값을 출력
}

위의 반복문이 실행되면서 profile Object의 firstName, lastName, age가 key 변수에 할당되고, code block의 profile 객체에 이 key를 전달해서 해당 값을 가져오게 된다.

for-in문을 배열에 사용하는 것은 좋지 않은 습관이라고 하는데 이 부분은 관련 내용을 더 공부하고 정리하려 한다.

---

1.3 for-of문

for-of문은 Array, Map, String, argument object등 반복 가능한 객체에 사용 가능하다.

for (const element of iterable) {
  //code block
}

//ex
let cities = ["Seoul", "Busan", "Daegu", "Gangneung", "Incheon"];
for (const city of cities) {
  console.log(city);
}

그렇다면 for-of와 for-in은 무슨 차이가 있는 걸까?

for-of문으로 Object를 열거해보자.

let obj = {
    "a": 1,
    "b": 2,
    "c": 3
};

for (const item of obj) {
    console.log(item); // Uncaught TypeError: obj is not iterable
}

Object는 반복 가능한 객체가 아니기 때문에 for-of문을 사용할 수 없다.

배열에서는 어떤 차이가 있을까? 참고로 두 반복문 모두 배열에서 사용 가능하다.

let arr = [10, 20, 30, 40];

for (const item in arr) {
    console.log(item); // 0 1 2 3
}

for (const item of arr) {
    console.log(item); // 10 20 30 40
}

for-in문은 객체의 키(key)를 가져왔는데, 배열에서는 인덱스가 키값이 된다. 좀 더 쉽게 생각해 보면 0: 10, 1: 20, 2: 30, 3: 40 으로 생각했을 때 여기서 키(key)만 가져온 것이다.

for-of문은 배열의 값을 가져왔다.
즉, for-in은 객체의 키를 읽고 for-of는 객체의 값을 읽는다.

---

1.4 while문

while문은 조건식이 참인 동안 code block을 실행한다. code block이 실행된 후에 다시 조건식을 판별한다. 만약 조건식이 거짓이 되면 반복문이 종료된다.

while ([조건문]) {
  //code block
}

//ex
let i=1;
while (i<=10) {
  console.log("Number: " + i);
  i++;
}

for문에서의 증감문이 while문에서는 code block에 있다는 것을 주의하자. i의 값을 바꿔주지 않으면 항상 10보다 작거나 같다는 조건을 만족하기 때문에 무한 루프가 발생한다.

배열을 이용한 반복문에서는 for문을 사용하는 것이 편리하지만 그것이 아닌 어느 특정한 조건에서만 반복문을 사용해야 한다면 while문을 사용하는 것이 편리할 수 있다.

---

1.5 do-while문

do-while문은 code block을 먼저 한 번 실행한 후에 조건식을 판별한다. 무조건 한 번은 실행해야 하는 상황이 있다면 do-while문을 사용할 수 있다.

let i=1;
do {
  console.log("Number: " + i);
  i++;
} while (i<=10);

---

2. 참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration