반복을 수행할 때 우리는 주로 3가지를 사용한다.
1) for
2) for ... in
3) for ... of

for같은 경우 모두가 익숙하므로 해당 포스팅에서는 다루지 않고 for in과 for of에 대해서만 다루겠다.

for ... in

for ... in은 특정 순서에 따라 인덱스 반환을 보장할 수 없다. 그렇기 때문에 주로 non-iterable(반복할 수 없는) 객체에서 사용한다.

  • 반복할 수 있는 객체에는 Array, Set, Map, String, arguments 등이 있다.
  • 반복할 수 없는 객체에는 Object가 있다.

for ... in의 문법

for (const variable in object) {
	statement
}

variable에는 반복마다 다른 속성이름이 저장된다.
object는 반복할 대상으로 열거형 속성을 가지고 있는 객체이다.

for ... in 사용하기

객체에서 for in을 사용하면 객체의 key를 하나씩 가져올 수 있다.

let obj = { name: "navy", age: 25, feel: "good" }

for (let key in obj) {
  console.log("key is", key)
}

// key is name
// key is age
// key is feel
  • key값을 사용하여 각 객체의 value를 for in을 통해 가져올 수 있다.
let obj = { name: "navy", age: 25, feel: "good" }

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

// navy
// 25
// good

for ... of

  • for ... of의 경우 iterable(반복가능한) 객체에서 사용한다.

for... of의 문법

for (variable of iterable) {
	statement
}

variable에는 반복마다 다른 속성값이 저장된다.
iterable은 반복가능한 객체이다.

for ... of 사용하기

  • 배열, Set, Map에서 for of를 사용해보겠다.

배열에서 for ... of

let list = [0, 1, "a"]

for (let value of list) {
  console.log(value)
}

// 0
// 1
// a

Set에서 for ... of

let set = new Set();

set.add(1)
set.add(2)
set.add(3)

for (let i of set) {
  console.log("i", i)
}

// i 1
// i 2
// i 3

Map에서 for ... of

let map = new Map();

map.set("1", "a");
map.set("2", 2);
map.set("3", "c")

for (let [key, value] of map) {
  console.log(key, value)
}

// 1 a
// 2 2
// 3 c

non-iterable object에서 for ... of 사용

만약 반복할 수 없는 객체에서 for ... of를 사용하면 typeError가 발생한다.

let obj = { name: "navy", age: 25, feel: "good" }

for (let key of obj) {
  console.log(key)
}

// TypeError: obj is not iterable

요약

for in : 반복할 수 없는 객체(Object)에서 사용
for of : 반복할 수 있는 객체(Array, Map, Set 등)에서 사용

profile
Front-End Developer

0개의 댓글