for...in 👀 for..of

참조형 데이터 타입의 값 복사를 공부하다가 얕은 복사를 위해 for of를 사용하는 것을 배웠다.
그런데 그 과정을 for in으로 해도 되는거 아닌가 싶어서 for of와 for in 정확한 차이가 궁금해졌다!

결론

결론부터 말하자면 for in은 객체에게 최적화 되어있고, for of는 컬렉션(array, string, map, set)에게 최적화 되어있다. 그 이유는 아래에서 설명하겠다.

𝟏. for...in

for in은 mdn 문서를 바탕으로 설명하자면,

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)
... 중략
임의의 순서로 객체의 속성들에 대해 반복합니다.

그렇다 . for in은 임의의 순서로 객체의 속성들에 대해 반복하기 때문에 index라는 중요한 정보를 포함하고 있는 배열에서 사용하면 말짱 도루묵이라는거다. mdn 문서에서도 for in을 배열에 사용하지 않을 것을 권장하고 있다.

그리하여 인덱스 정보를 무시하는 for in을 배열에 활용하면 안되는 것은 이해했지만, for of의 경우 객체에서도 잘 사용했던거 같은데 뭐가 다르지! 싶었다.

for...of

for of는 mdn 문서를 바탕으로 설명하자면,

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

첫 번째 의문 : 객체도 for...of 잘 썼던거 같은데?
그리하여 아래와 같은 코드를 짜보면

let person = {
	name : 'jisu',
   age : 12
};
for (let i of person) {
	console.log(i); // TypeError : person is not literable! 
}

person 객체를 for of 문에 바로 사용해보면 해당 객체가 반복 가능하지 않다고 나온다! 그래서 Object.keys()나 Object.entries() 등을 사용했구나 싶었다. 쟤네는 배열을 반환하니까 바로 For of문에 사용할 수 있었던거지..

let person = {
	name : 'jisu',
   age : 12
};
for (let [key, value] of Object.entries(person)) {
	console.log(i); 
 	// name jisu
  	// age 12
}

따라서 위와 같이 객체의 키 값이나 밸류, 프로퍼티 전체등을 배열로 반환하는 메서드를 사용하여 for of 문을 사용할 수 있다!

두 번째 의문 : map, set도 된다고?

let a = new Map();
a.set(1,'one');
a.set(2,'two');
// a = Map(2) {1 => 'one', 2 => 'two'}

for (let i of a) {
    console.log(i);
  // [1, 'one']
  // [2, 'two']
}

map 자료구조로 for of 돌리면 배열로 반환함 ㅇㅇ
그럼 set은...

let set = new Set();
set.add(1);
set.add('two');
set.add([3, 'three]);
// set = Set(3) {1, 'two', Array(2)}

for (let i of set) {
	console.log(i, typeof i);
    // 1 'number'
	// two string
	// [3, 'three'] 'object'
}

저번에 야구게임 랜덤 숫자 생성할 때 set으로 하고 (중복 안되게 하려고) 그거 활용할 때, set에서 배열로 바꾸고 다시 스트링으로 바꿨는데 그냥 for of문 돌려서 비교해도 되는 것이었다!!!!!!ㅠㅠ
지금이라도 알아서 다행

verified idiot which is me...