[JS] 다양한 반복문의 표현 (for)

자바스크립트에는 다양한 방식으로 반복문을 사용할 수 있다

반복을 실행하는 객체의 메서드들까지 찾아보면 굉장히 많겠지만, 일반적으로 반복문 하면 for을 떠올릴 것이다.

하지만 for 뿐만이 아니라 다양한 다른 방식들도 존재한다

각각 비슷하면서도 사용법과 결과값이 조금씩 다르니 자세히 알아보자 

---

1. for ... in 

'상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복'  이라고 MDN에 정의되어 있으나 쉽게 말하면 객체의 프로퍼티 키 열거 전용이다. 

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// Expected output:
// "a: 1"
// "b: 2"
// "c: 3"

일반적으로 for 구분을 사용할 때 변수 i를 사용했던 것처럼 변수 property를 선언하고 객체 안을 순회하도록 하는 것이다.

이 때 property는 객체의 키 값을 가르키기 때문에 출력을 하면 객체의 키 값들을 얻을 수 있다.

 

하지만 객체의 키 열거 전용이라고 해서 배열(Array)에 사용하면 안 되나?

분명히 아니라고 대답할 수 있다 하지만 객체에 사용할 때와는 차이점이 있기에 이를 잘 숙지한다면 상관없다.

const arr = [1,2,3]

for(const property in arr) {
	console.log(`${property}: ${arr[property]}`);
}

// expect output :
// "0 : 1"
// "1 : 2"
// "2 : 3"

결과값을 보면 property 값은 인덱스를 나타낸다는 것을 알 수 있을 것이다.

웬만해서는 for...in 을 객체에만 사용하면 좋겠지만 가끔 알고리즘 문제를 풀다가 도움이 됐던 적이 있었기에 차이점만 알아두는 것을 추천한다

 

---

2. for ...of

반복가능한 객체(Array,String,Map 등)에 대해서 반복한다.

즉 이터러블 순회 전용 반복문인 것이다.

 

- Array에 대한 반복 

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

for ...in에서 원했던 결과가 for ...of에서 나타났다. 이 두 가지 차이점에 대해서도 잘 알아두자

 

 

- String에 대한 반복 

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

 

 

🧐 객체(object)는 for ...of 사용 못하나요 ? 

객체에는 for ...of 구문 사용이 불가능하다.객체는 반복이 가능한 요소로 지정이 되어 있지 않기 때문에 이터러블 순회 전용인 for ...of 는 사용할 수 없는 것이다코드를 돌려봐도 에러가 뜬다.

const object = { a: 1, b: 2, c: 3 };

for (const property of object) {
  console.log(property);
}

// console - TypeError: object is not iterable​

 

---

3. forEach()

forEach() 는 배열 전용 반복문이다. 

Array의 메서드이기 때문에 다른 것에는 사용이 불가능하다.

for ...of 와 동일한 결과를 나타내지만 사용방법에 차이가 있다.

    arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

콜백 함수의 매개변수로 총 세 가지의 값을 받는다

currentValue : 처리할 현재 요소.

index : 처리할 현재 요소의 인덱스

array : forEach()를 호출한 배열.

* thisArg : callback을 실행할 때 this로 사용할 값.

 

const arr = [1, 2, 3];

arr.forEach((curVal, idx, arr) => {
  console.log('curlVal :', curVal, 'idx :', idx, 'arr : ', arr);
});

// curlVal : 1 idx : 0 arr :  [ 1, 2, 3 ]
// curlVal : 2 idx : 1 arr :  [ 1, 2, 3 ]
// curlVal : 3 idx : 2 arr :  [ 1, 2, 3 ]

만일 매개변수를 하나만 둔다면 for ...of 를 사용한 것처럼 동일한 결과가 나올 것이다.

반복 하는 방법들을 많고 많지만 이 세 가지는 꼭 기억하고 차이점을 알아두자