마침내 for…in과 for…of를 구분하게 해주는 암기법

Source: Dev.to

Intro

for...in과 for...of의 차이를 설명하는 글은 많이 있습니다. 여기서는 그 이야기를 하지 않겠습니다.
대신, 제가 계속해서 반복해서 받는 질문에 대한 간단한 답변을 드리겠습니다… 계속, 계속, 계속:

for...in과 for...of를 언제 써야 하는지 어떻게 기억하나요?

💡 for...in은 foreign (외래 키)와 비슷하게 들립니다.

• for...in은 객체의 키를 순회할 때 사용합니다.
• for...of는 컬렉션의 요소를 순회할 때 사용합니다.

그게 전부입니다. 별다른 트릭도 없습니다. 공식 정의와 어떻게 연결되는지 더 알고 싶다면 계속 읽어보세요.

문서에 따르면:

• for...in 문은 객체의 모든 열거 가능한 문자열 속성을 순회합니다.
  for…in - JavaScript | MDN

• for...of 문은 iterable 객체에서 가져온 값들의 시퀀스에 대해 루프를 실행합니다.
  for…of - JavaScript | MDN

Reasoning

for...in의 정의에 따르면, 이는 객체의 속성을 순회하는 데 사용됩니다. 객체 속성은 키라고도 합니다. 실제로 Object.keys()는 객체의 속성을 반환합니다.

그래서 저는 for...in이 “foreign”(외래)처럼 들린다고 생각합니다; 즉 “foreign keys”(외래 키)와 같은 의미죠. 데이터베이스에 익숙하다면 foreign key라는 용어가 낯설지 않을 겁니다(말장난이지만).

따라서 for...in은 키를 순회하는 데 쓰이고, 반대인 for...of는 컬렉션 요소를 순회하는 데 쓰입니다.

📌 for...in: “foreign keys”(외래 키)를 떠올리세요