[JS문법]for...of와 for...in

✅ for...of와 for...in은 무엇일까?

결론부터 말하자면

for...of문은 배열을 순회할 때, 배열의 특정 위치에 관심이 없는 상황에서 쓰기편하다.

for...in문은 iterable이 배열이든 객체든 key의 value를 순회한다.

🤔 for...0f

✔️ 반복 가능한 객체(iterable)를 순회할 수 있도록 해준다.

✔️ Array, Map, Set, arguments, String 등이 해당된다. (Object는 해당 X)

 

구문

for (variable of iterable) {
  statement
}

파라미터

variable

각 반복에 서로 다른 속성 값이 variable에 할당된다.

 

iterable

반복되는 열거가능(enumerable)한 속성이 있는 객체

 

const arr = ['a', 'b', 'c', 'd'];

for (const item of arr) {
  console.log(item); // 'a', 'b', 'c', 'd'
}

arr에 들어있는 value들을 하나씩 꺼내서 item이라는 변수에 할당해준다. 

 

// Array 
for (const val of ['a', 'b', 'c']) {
	console.log(val); // 'a','b','c' 
} 

// String 
for (const val of 'abc') { 
	console.log(val); // 'a','b','c' 
} 

// Object 
for ( let val of {1 :'a', 2 :'b', 3 :'c'} ) {
	console.log(val); // TypeError: object is not iterable 
}

for ...in문이 객체의 모든 열거 가능한 속성을 대상으로 하는 것과 달리, for ...of문은 [Symbol.iterator] 속성을 가지는 것들만을 대상으로 한다. 아래 예제들 중 맨 아래를 보면, 객체는 이에 해당하지 않기 때문에 for ...of문을 사용하면 TypeError를 발생시킨다.

🤔 for...In

✔️ Iterable object이면 모두 대상으로 함

✔️ 객체의 모든 열거 가능한 속성에 대해 반복

✔️ key를 리턴 (배열의 경우에는 index)

 

문법

for (const variable in object) {
  statement
}

파라미터

variable

매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정된다.

 

iterable

반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.

 

for...in문은 "키가 지정된 모든 열거 가능한 속성에 대해 반복"한다. (keys는 열거 가능한 속성, valueOf는 열거 불가능한 속성) 그렇기 때문에 for...in문은 객체의 key 값에는 접근이 가능하지만, value값에 직접적으로 접근하는 방법은 제공하지 않는다. 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않는다.

const arr = ['a', 'b', 'c', 'd'];

for (const index in arr) {
  console.log(arr[index]); // 'a', 'b', 'c', 'd'
}

 

const obj = {
  color: 'red',
  width: 200,
  height: 200
}

for(const key in obj) {
  console.log(key); // 'color' 'width' 'height'
}

배열에 for...in문을 사용하면 배열의 위치 값. object일때는 키의 값을 받아온다.

 

for...in 문을 사용할 때는 몇 가지 주의할 점들이 있다. 

1. for ...in문에서는 순서가 보장되지 않기 때문에 속성들 간의 순서가 중요한 경우에는 for...in문을 사용하지 않는 것이 좋다.
2. length 연산자를 사용 할 수 없다.
3. value값은 string이라 연산이 불가능하다.

 

 

 

참고자료

https://joooing.tistory.com/entry/Iteration2-for-in%EB%AC%B8-for-of%EB%AC%B8

https://jsdev.kr/t/for-in-vs-for-of/2938