Objects (객체)

객체는 데이터를 구조화하는 자바스크립트의 기본 단위다. 아래 가이드는 일관된 선언 방식과 안전한 접근을 통해 객체를 더 읽기 쉽고 예측 가능하게 유지하도록 권장한다.

🧩 Note

객체의 형태, 생성 방식, 변형 방식을 일관된 패턴으로 유지하기.
객체를 다룰 때는 일관성과 불변성을 지켜야 한다.

1. 객체를 생성할 때는 리터럴 문법을 사용

eslint: no-new-object

// bad
const item = new Object();

// good
const item = {};

• new Object()보다, {} 리터럴이 직관적이다.

2. 동적 속성을 갖는 객체는 계산된 속성명을 사용

function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true; // 나중에 'enabled'라는 동적 키를 추가

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true, // 계산된 속성
};

• 객체의 모든 속성을 한 곳에서 정의할 수 있다.
• 구조를 파악하기 쉽고 유지보수가 간단해진다.
• 객체 구조를 선언 시점에 완결시키라는 뜻!

구분	코드	설명
동적 속성 추가	obj[key] = value	객체를 먼저 만들고, 나중에 키를 동적으로 추가함
계산된 속성명	{ [key]: value }	객체 리터럴 안에서 바로 동적 키를 계산해 속성으로 만듦

🧩 동적 속성 (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 }

3. 메서드는 단축 구문을 사용

eslint: object-shorthand

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

• 함수 키워드를 생략하면 가독성이 높고 코드량이 줄어든다.

4. 속성의 단축 구문을 사용

eslint: object-shorthand

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

• 중복을 줄이고 선언을 간결하게 표현할 수 있다.

🧩 속성 단축 구문 (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 });
}

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

5. 단축 구문 속성은 객체 선언의 시작 부분에 모으기

const anakinSkywalker = "Anakin Skywalker";
const lukeSkywalker = "Luke Skywalker";

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

• 단축 구문 속성을 한 곳에 모으면 어떤 속성이 축약된 변수명인지 빠르게 구분할 수 있다.

6. 유효하지 않은 식별자에만 따옴표 속성을 사용

eslint: quote-props

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
  // data-blah는 식별자로 쓸 수 없는 이름, 하이픈- 포함 시 뺄셈으로 인식하기 때문
};

• 코드 하이라이팅이 정확해지고, JS 엔진이 더 쉽게 최적화할 수 있다.

7. Object.prototype의 메서드를 직접 호출하지 마시오

eslint: no-prototype-builtins
Object.prototype 메서드: hasOwnProperty, propertyIsEnumerable, isPrototypeOf 등등

객체의 메서드를 직접 호출하지 말고, Object.prototype에서 안전하게 꺼내서 호출

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // 모듈 스코프에서 한 번 캐시
console.log(has.call(object, key));

/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));

• 이러한 메소드들은 객체의 속성에 의해 가려질 수 있다.
• hasOwnProperty를 덮어쓸 수도 있고, Object.create(null)처럼 프로토타입이 없는 객체도 존재하기 때문이다.

🧩 왜 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('안전하게 검사됨');
}

8. 객체 얕은 복사는 Object.assign대신 전개 연산자를 사용

특정 속성이 생략된 새로운 개체를 가져올 때는 객체 나머지 연산자를 사용.

eslint: prefer-object-spread

// 👎 very bad
// Object.assign(target, source)는 첫 번째 인자(target)를 변형한다.
// 즉, 복사본이 아니라 원본 자체가 수정된다.
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // 원본 변형
console.log(original); // { a: 1, b: 2, c: 3 }

// delete는 여기서 "복사본을 수정하면 원본도 바뀐다"는 걸 보여주기 위한 예시
// 실제로 delete copy.a를 하면 original.a도 함께 사라진다. 불변성 깨짐
delete copy.a;
console.log(original); // { b: 2, c: 3 }

// 👎 bad
// 원본을 유지하려면 첫 번째 인자로 반드시 "빈 객체({})"를 전달해야 한다.
// 하지만 이 방식은 매번 {}를 써야 해서 장황하고, 실수로 순서를 바꾸면 의도치 않은 덮어쓰기가 발생
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 });
console.log(copy); // {a: 1, b: 2, c: 3}

// 👍 good
// 전개 연산자(spread operator)는 가장 간결하고 직관적인 얕은 복사 방법이다.
// 불변성을 유지하면서 새로운 객체를 쉽게 만들 수 있다.
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 };
console.log(original); // { a: 1, b: 2 } 👍 원본 그대로
console.log(copy); // { a: 1, b: 2, c: 3 } 👍 복사 성공

// 특정 속성을 제외하고 복사하고 싶다면 "나머지 연산자(rest operator)"를 사용한다.
// 이 방식은 delete보다 훨씬 안전하고, 불변성도 지킨다.
const { a, ...noA } = copy; // a를 제외하고 나머지를 복사
console.log(noA); // { b: 2, c: 3 }

• 전개 연산자는 명확하고 간결하며, 원본 객체를 변형하지 않는다.
• Object.assign보다 가독성이 좋고 에러를 예방한다.

---

규칙	핵심 원칙	Airbnb의 의도
1. 리터럴 문법 사용	{}가 new Object()보다 명확하고 짧다	생성 일관성
2. 계산된 속성명	객체를 선언 시점에 완결	유지보수성
3. 메서드 단축 구문	function 제거로 가독성 향상	코드 간결화
4. 속성 단축 구문	key: key → key	중복 제거
5. 단축 속성 모으기	시각적 그룹화	구조 명확성
6. 따옴표 속성	유효하지 않은 식별자만 사용	일관성, 최적화
7. Object.prototype 호출	원본에서 안전하게 접근	안정성, 보안
8. Object.assign 대신 Spread	불변성 유지, 코드 간결화	가독성, 유지보수성