JS : for...in과 for...of 차이

daymoon_·2022년 3월 24일
0

JAVASCRIPT

목록 보기
14/23
post-thumbnail

for...in

🔗 참고자료
MDN for...in
W3SCHOOLS JavaScript For In

for...in문은 객체 속성에 대해 반복문을 수행한다.

심볼(Symbol)로 키가 지정된 속성은 무시한다.


⚙️ 구문

for (variable in object) { ... }

for...in

1. 심볼(Symbol) 사용 X

const person = {
  name: 'Jhon',
  age: 23,
  phone: '010-2345-1234'
}


for(const info in person ) {
  console.log(info);
  // name
  // age
  // phone
}

2. 심볼(Symbol) 사용 O

  • for...in에서는 심볼(Symbol)이 제외되지만 일반 출력은 제외되지 않는다.
const person = {
  name: 'Jhon',
  age: 23,
  phone: '010-2345-1234',
  
}

const phone = Symbol('secondPhone');
person[phone] = "02-123-1234";


for(const info in person ) {
  console.log(info);
  // name
  // age
  // phone
}


console.log(person);
// {
//   name: 'Jhon',
//   age: 23,
//   phone: '010-2345-1234',
//   [Symbol(secondPhone)]: '02-123-1234'
// }

🛑 for...of

  • TypeError: person is not iterableat Object.이라는 에러가 발생한다.
const person = {
  name: 'Jhon',
  age: 23,
  phone: '010-2345-1234'
}


for(const info of person ) {
  // TypeError: person is not iterable at Object.
  console.log(info);
}

for...of

🔗 참고자료
MDN for...in
W3SCHOOL JavaScript For Of

for...of문은 반복가능한 객체(array, map, set, string, typedArray, arguments 객체 등을 포함)에 대해서 반복문을 수행한다.


⚙️ 구문

for (variable of iterable) {
  statement
}

for...of

  • 요소를 반환한다.
const color = ['red', 'plum', 'aliceblue', 'blue', 'black', 'white'];

for(let item of color) {
  console.log(item);
  // red
  // plum
  // aliceblue
  // blue
  // black
  // white
}

for...in

  • 인덱스(index)를 반환한다.
const color = ['red', 'plum', 'aliceblue', 'blue', 'black', 'white'];

for(let item in color) {
  console.log(item);
  // 0
  // 1
  // 2
  // 3
  // 4
  // 5
}

결론

  • for...in 반복문은 객체의 모든 열거 가능한 속성에 대해 반복한다.
  • for...of 구문은 컬렉션 전용이다. 즉, 모든 객체보다 [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복한다.
profile
미지의 공간🌙

0개의 댓글