TIL 33 - JS - for...in 활용법

오늘은 for...in 반복문의 활용법을 알아봅시다!

---

What is for...in?

for...in loop은 for loop을 특정한 case에서 사용하기 위해 구체화 시켜 만들어진 for loop의 특별한 '버전(?)' 이라고 볼 수 있다.

결론부터 정리하면, for...in의 용도는 크게 2가지가 있는데:

• Array에 대한 (특정 case의)loop을 더 간단하게 만들어주고
• Object에 대한 loop을 가능하게 한다

[Array] 와 for...in

다음의 for loop을 한번 보자:

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

When iterating over all of the elements of an array, for (let i = 0; i < arr.length; i++)는 정말 정말 자주 쓰이는 표현인데, 이 표현을 매번 안써도 되게 이를 함축해서 별도의 반복문 형식으로 만들어 놓은게 바로 for...in loop이다.

위 for loop을 for...in loop 으로 나타내면:

for (let i in arr) {
  console.log(arr[i]);
}

위 두개의 코드 결과가 동일하다!

{Object} 와 for...in

또한!
Object는 array와 다르게 항목들에 index 값이 따로 없고 순서대로 나열되지 않기 때문에 각 property의 key와 value를 access 하려고 해도 for (let i = 0; i < arr.length; i++) 같은 표현을 object에 직접 사용할 수가 없는데, object에 대한 loop을 가능하게 하는 것이 바로 for...in loop 이다!

for (let key in obj) {
  console.log(key);
  console.log(obj[key]);
}

---

Syntax

for...in syntax:

for (*variable* in *object*) {
  code block;
}

• *object* 는 array 혹은 object가 될 수 있다
• 이 처럼 for...in은 array나 object에 쓸 수가 있는데, 각 경우에 따라 *variable* 이 나타내는게 달라진다:
  
  - Array에 사용하는 경우 - the for...in loop iterates over each element of the array and the *variable* represents each element's index
  - Object에 사용하는 경우 - the for...in loop iterates over each property (key:value pair) of the object and the *variable* represents each property's key

---

Examples

• Array 예시

let arr = ['morning', 'noon', 'evening']
for (let i in arr) {
  console.log(i);
};
for (let i in arr) {
  console.log(arr[i]);
};

위 코드의 결과는 다음과 같다:

0
1
2
morning
noon
evening

• Object 예시

let obj = {
  morning: '9am', 
  noon: '12pm', 
  evening: '6pm'
};
for (let key in obj) {
  console.log(key);
};
for (let key in obj) {
  console.log(obj[key]);
};

위 코드의 결과는 다음과 같다:

morning
noon
evening
9am
12pm
6pm

이것이 for...in 이다!