<목차>
-
for ... of문
-
for ... in문
-
for..in / for...of 차이점
1. for ... of
for..of명령문은 반복가능한 객체(Array, Map, set, String, arguments 객체 등)에 대해 반복하고 각 속성값에 실행되는 문이 있는 반복 후크를 호출하는 루프를 생성한다.
<문법>
for (variable of iterable) {
statement
}- variable: 각 반복에 서로 다른 속성값이 variable에 할당된다.
- iterable: 반복되는 열거가능한 속성이 있는 객체.
< 예시 >
const array = ['a', 'b', 'c'];
for (let element of array) {
console.log(element);
}
// > "a"
// > "b"
// > "c"2. for ... in
for ...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 열거 가능한 속성에 대해 반복해준다.
<문법>
for (const variable in object) {
statement
}- variable: 매 반복마다 다른 속성이름으로 변수가 지정된다.
- object: 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.
-
for...in문은 임의의 순서로 객체의 속성을 반복한다. -
일반적으로 현재 속성 외에는 반복하는 동안 객체의 속성을 추가하거나 제거하지 않는 것이 좋다.
< ex >
const Jun = { name: 'jun' ,
age: 28,
nickname : 'giant' }
for (const property in Jun) {
console.log(`${property}: ${Jun[property]}`);
}
// expected output:
// "name: jun"
// "age: 28"
// "nickname: giant"
왜 for...in문을 사용할까?
for...in문이 객체의 반복을 위해 만들어졌지만, 배열의 반복을 위해서는 추천되지않는다. 이미 forEach()문과 for...of문이 존재하기 때문이다.
이 문법은 객체의 속성을 확인 할 수 있기 때문이다. 키/값 이 같이 선호되는 데이터의 경우 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in문을 사용한다.
3. for...in / for...of 차이점
결론부터 말하자면 for...in문은 객체의 모든 열거가능한 속성에 대해 반복되고 for...of문은 컬렉션 전용으로 반복 가능한 객체(주로 배열)의 반복에서 사용된다.
for ...in => 객체 순환
for ...of => 배열 값 순환
4. 회고
오늘은 지난번 배열에 이어서 기존 페어와 함께 객체에 대하여 학습을 해보았다. 배열을 지난주에 학습을 해서 그런지 이어서 객체를 학습하니 크게 어려웠던 점은 없었다. 다만 객체와 배열 내 순회를 할 때 for...in,for...of중 어떤걸 써야하는가 헷갈리기도 하여 리마인드 할겸 간단하게 내용과 차이점을 정리해보았다.
