객체,배열 반복(for...of, for...in)

<목차>

• 객체와 배열의 반복 공통점
• 객체의  반복(for ...in)
• 배열의 반복(for ...of)

---

객체와 배열의 반복 공통점

- 순회 할 객체의 길이만큼 반복을 한다.

---

객체 반복문(for ...in)

               ---> 뽀잉뽀잉(for in for in) 

- 객체의 속성들을 반복하여 작업을 수행한다. 

- for ... in 구문은 객체의 key값에 접근이 가능하지만, value 값에는 접근 불가능하다. (따라서 value 값에 접근하려면 key값을 이용해야함)

const obj = {
 	 a: 1,
   	 b: 2,
   	 c: 3,
};

for (let key in obj){ // 여기서 선언된 key는 임의의 변수로 이름 아무거나 지어도 된다.
 	console.log(key, obj[key]);
}

(x) 두 개의 변수를 만들어주니 뜨는 에러

 

 

올바른 예

 

 

< for..in 좀 더 들여다 보기 >

- for...in 은 특정 순서에 따라 인덱스를 반환하는것을 보장할 수 없다. for...in 반복문은 정수가 아닌 이름을 가진 속성, 상속된 모든 열거 가능한 속성들을 반환한다.

- 반복되는 순서는 구현에 따라 다르기 때문에 배열의 반복이 일관된 순서로 요소를 방문하지 못할 수도 있다. 따라서 방문의 순서가 중요한 배열의 반복시에는 숫자 인덱스를 사용할 수 있는 for 반복문을 사용하는것이 좋다. (혹은Array.prototype.forEach(), for...of를 권장한다.)

-for..in은 객체의 반복을 위해 만들어 졌지만, 배열의 반복을 위해서는 추천되지 않는다. Array.prototype.forEach(), for...of 도 있는데   왜 굳이 for...in을 사용할까? 

 보통 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우  (속성이 'key'의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for ...in을 사용할 수 있다.

(출처:mdn)

 

---

배열의 반복(for ...of)

- 배열의 길이만큼 반복을 한다.

-반복가능한 객체(Array,Map,String,Set...)등에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다. (출처:mdn)

- 각 반복에 서로 다른 속성값이 el(아래 코드예시로)에 할당된다. 

 

<array>

const array = ['a','b','c'];

for (const el of array) {
	console.log(el);
}

// 'a'
// 'b'
// 'c'

<string>

let tata = 'boo';

for (let el of tata) {
	console.log(el);
}

//'b'
//'o'
//'o'

<map>

let tata = new Map([['a',1], ['b',2], ['c',3]]);

for (let el of tata) {
	console.log(el);
}

// [a,1]
// [b,2]
// [c,3]

for (let [key, value] of tata) {
	console.log(value);
}
// 1
// 2
// 3