JavaScript - for / in & for / of

목차

• for / in과 for / of 차이
• for / in
• for / of

 

for / in 과 for / of 차이

 

 

둘 다 객체를 순회할 수 있는 명령어이지만 근소한 차이가 있다. 이를 알아보자.

 

 

 

for / in

 

 

객체의 모든 열거할 수 있는 속성을 순회하게 해준다. 속성의 값이 아닌 속성 키를 출력함.

 

const obj = {
    name: 'jack',
    age: 20,
}

const arr = [100, 200, 300];

for (let ele in obj) {
    console.log(ele);   // name, age
}

for (let ele in arr) {
    console.log(ele);	// 0, 1, 2
}

 

배열 for / in 순회

 

배열을 for / in으로 순회하면 배열의 원소가 출력되는것이 아니라 배열 원소의 인덱스가 출력된다.

 

배열의 인덱스가 배열 객체의 키 이기 때문.

 

 

 

for / of

 

반복 가능한 객체를 순회할 수 있도록하는 명령어로 이터러블 객체에만 사용 가능합니다.

 

for / in 과는 다르게 객체의 값들을 순회합니다.

 

자바스크립트에서 이터러블 객체는 Array, Map, Set, arguments

 

const obj = {
    name: 'jack',
    age: 20,
}

for (let ele of obj) {
    console.log(ele);   // 오류 발생 : TypeError: obj is not iterable
}

 

 

이터러블 객체를 순회할 경우 원소값들을 볼 수 있다.

 

const arr = [100, 200, 300];

for (let ele of arr) {
    console.log(ele);   // 100, 200, 300
}

const set = new Set();
set.add(50);
set.add(90);
set.add(10);

for (let ele of set) {
    console.log(ele);   // 50, 90, 10
}