Objects

🧩 Related

• Airbnb Guide: 03.Objects

💡 동적 속성 (Dynamic Property)

이미 만들어진 객체에 나중에 속성을 추가하는 방식이다.
즉, 코드를 실행하기 전에 어떤 키를 쓸지 미리 알 수 없다.

const keyName = 'enabled'; // 변수로 키 이름을 저장
const obj = {};

obj[keyName] = true; // true

• 여가서 keyName이 enabled로 평가되기 때문에, obj.enabled = true와 같은 효과를 내지만 코드를 작성할 때는 키 이름을 몰랐다. 이처럼 키를 나중에 변수나 함수의 결과로 결정하는 것이 동적 속성이다.

💡 계산된 속성명 (computed propery name)

객체 리터럴 안에서 [대괄호]를 사용해 동적 키를 선언 시점에 계산해 포함하는 문법이다.
즉, 대괄호 안에 식이 평가되어 그 결과값이 속성명(key)으로 들어간다.

const keyName = 'enabled';

const obj = {
  [keyName]: true,
};

console.log(obj); // { enabled: true }

💡 속성 단축 구문 (Property Shorthand)

변수 이름과 객체의 속성 이름이 같을 때 key: key 대신 key만 써도 된다.

1. ReactProps 전달 시

React 컴포넌트에서 props를 넘길 때 자주 볼 수 있다.

const user = {
  name: "Binny",
  age: 20,
};

// bad
<User name={user.name} age={user.age} />

// good
<User {...user} />

props가 각각의 변수일 경우

const name = "Binny";
const age = 20;

// bad
<User name={name} age={age} />

// good
<User name age />

• JSX 문법에서도 동일하다.
  name={name} → name, age={age} → age

2. 함수 매개변수로 객체를 전달할 때

function logUser({ name, age }) {
  console.log(name, age);
}

const name = 'Binny';
const age = 20;

// bad
logUser({ name: name, age: age });

// good
logUser({ name, age });

• name, age 변수를 그대로 객체로 전달한다는 의미가 명확하다.

3. API 요청에 데이터 담을 때

const title = 'Hello';
const content = 'This is a post.';

// bad
axios.post('/api/posts', {
  title: title,
  content: content,
});

// good
axios.post('/api/posts', {
  title,
  content,
});

• 이런 패턴은 fetch, axios, supabase등 모든 API 통신에서 흔하게 등장한다.

4. 상태(state) 업데이트 시

const [user, setUser] = useState({ name: '', age: 0 });

function updateUser(name, age) {
  // bad
  setUser({ name: name, age: age });

  // good
  setUser({ name, age });
}

• 가독성이 좋아지고, 불필요한 반복이 사라진다.

💡 왜 Object.prototype에서 직접 호출해야 할까?

자바스크립트의 모든 일반 객체는 Object.prototype을 상속받는다.
즉, 이런 객체도 내부적으로는 아래처럼 연결되어 있다.

const obj = { a: 1 };

// 내부적으로는 이렇게 동작함
obj.__proto__ === Object.prototype; // true

그래서 obj는 Object.prototype 안의 메서드들을 물려받아서 쓸 수 있다.

obj.hasOwnProperty('a'); // true

• 하지만 프로토타입 체인 때문에 오류가 발생할 수 있다.

문제 1. 객체가 같은 이름의 속성을 가질 수도 있다.
객체가 hasOwnProperty라는 키를 직접 가지고 있다면, 상속받은 메서드 대신 덮어쓴 속성이 사용된다.

const obj = {
  hasOwnProperty: false,
  key: 'value',
};

obj.hasOwnProperty('key'); // TypeError: obj.hasOwnProperty is not a function

• obj.hasOwnProperty는 더 이상 함수가 아니다. false 값으로 덮어썼기 때문

문제 2. Object.create(null) 같은 프로토타입이 없는 객체

const pureObj = Object.create(null);

console.log(pureObj.hasOwnProperty); // undefined

• 이 객체는 Object.prototype을 상속받지 않기 때문에 기본 내장 메서드hasOwnProperty를 가지고 있지 않는다. 따라서 pureObj.hasOwnProperty("x")를 호출하면 에러가 발생한다.

그래서 Airbnb의 권장 방식
항상 Object.prototype에서 직접 가져와 써라!

Object.prototype.hasOwnProperty.call(obj, 'key');

• 이렇게 하면, obj가 어떤 구조이든 항상 원래 Object의 정식 메서드를 사용하게 된다.

더 안전한 패턴: 캐시 or 외부 모듈 사용
반복 호출을 줄이기 위해 이렇게 캐시를 권장한다.

const has = Object.prototype.hasOwnProperty;
if (has.call(obj, 'key')) {
  console.log('존재함');
}

또는 아예 검증된 NPM 패키지를 사용하는 방법도 있다.

import has from 'has';
if (has(obj, 'key')) {
  console.log('안전하게 검사됨');
}