[JavaScript] for...in, for...of 차이 / obj[key], obj.key 차이

for…in

• object에 사용
• 객체의 속성 확인용 → 디버깅
• enumerable한 것만 출력
• 부모의 prototype에 저장된 것도 출력
• 특정 값을 가진 키가 있는지 확인

for…of

• array, 문자, arguments, NodeList, Map, Set에 사용
• Nodelist에 사용 가능

class Object {
  constructor({ imgSrc, position, splitFrames = { x: 1, y: 1 } }) {

// default value object 설정

obj[key]

• when you want to use a value as the property key that is determined at runtime
• dynamic key name
• 런타임 실행시 사용

const key = "ArrowUp";
const obj = {};
obj[key] = "value";
console.log(obj); // Output: { ArrowUp: "value" }

obj.key

• obj.key → JavaScript treats “key” as a literal property name. conventional way
• 키와 값의 이름을 문자그대로 설정시 사용

const obj = { key: "value" };
console.log(obj); // Output: { key: "value" }