logo

DowanKim

18. 객체

2026년 4월 10일

자바스크립트

1. 객체의 기본 구조

객체는 중괄호 {...}를 이용해 생성하며, '키(key): 값(value)' 쌍으로 구성된 프로퍼티들의 집합입니다.

  • 키(이름): 문자열 또는 심볼형만 가능합니다.
  • 값: 자바스크립트에서 허용하는 모든 자료형이 올 수 있습니다.

생성 방법

  1. 객체 리터럴 (가장 권장): let user = {};
  2. 객체 생성자: let user = new Object();

2. 프로퍼티 접근 및 조작

가장 빈번하게 사용되는 두 가지 표기법을 비교해 보세요.

구분점 표기법 (Dot notation)대괄호 표기법 (Bracket notation)
문법obj.keyobj["key"]
사용 조건키가 유효한 식별자일 때 (공백X, 숫자 시작X)모든 경우에 사용 가능
동적 접근불가능변수나 표현식으로 키 접근 가능
  • 추가: user.isAdmin = true;
  • 삭제: delete user.age;
  • Trailing comma: 마지막 프로퍼티 끝에 쉼표를 붙이면 수정과 이동이 편리합니다.

3. 고급 프로퍼티 기법

① 계산된 프로퍼티 (Computed Property)

객체 리터럴 안에서 키를 대괄호 []로 감싸면, 외부 변수의 값을 프로퍼티 키로 동적으로 사용할 수 있습니다.

let fruit = "apple"; let bag = { [fruit]: 5, // 키가 "apple"이 됨 };

② 단축 프로퍼티 (Property Shorthand)

변수 이름과 프로퍼티 키 이름이 같을 때, 중복을 피하기 위해 한 번만 적어줄 수 있습니다.

function makeUser(name, age) { return { name, age }; // name: name, age: age와 동일 }

4. 프로퍼티 존재 확인 및 순회

'in' 연산자

존재하지 않는 프로퍼티에 접근하면 undefined를 반환하지만, 실제 값이 undefined인 경우와 구분하기 위해 in을 사용합니다.

  • "key" in obj → 존재하면 true, 없으면 false.

'for...in' 반복문

객체의 모든 키를 순회할 때 사용합니다.

for (let key in user) { console.log(key, user[key]); }

5. 객체 정렬 방식 (Ordering)

객체는 정렬에 대한 특별한 규칙을 따릅니다.

  1. 정수 프로퍼티: 크기순으로 자동 정렬됩니다. (예: "1", "41", "49")
  2. 기타 프로퍼티: 객체에 추가한 순서대로 나열됩니다.

🎙️ 기술 면접 대비 (Interview Questions)

Q1. const로 선언된 객체를 수정할 수 있는 이유는 무엇인가요? (기초)

답변: const는 변수 자체의 재할당을 막는 것이지, 변수가 가리키고 있는 객체의 내부(프로퍼티) 수정을 막는 것이 아닙니다. 즉, 객체가 담긴 '상자'를 바꿀 수는 없지만 상자 안의 '내용물'은 자유롭게 바꿀 수 있습니다.

Q2. 점 표기법보다 대괄호 표기법이 더 강력한 이유는 무엇인가요? (중급)

답변: 대괄호 표기법은 런타임에 결정되는 변수표현식의 결과를 키로 사용할 수 있기 때문입니다. 또한 공백이 포함된 문자열이나 숫자로 시작하는 키처럼 유효한 식별자가 아닌 경우에도 접근할 수 있어 유연성이 훨씬 높습니다.


💡 기억해야 할 중요한 내용

  1. 자바스크립트에서 객체는 '참조(Reference)'로 전달됩니다. 서랍장 자체를 옮기는 게 아니라 서랍장이 있는 위치(주소)를 알려주는 방식임을 잊지 마세요.
  2. '1 객체 = 1 개체' 원칙을 지키세요. 하나의 객체가 너무 많은 책임을 가지지 않도록 의미 있는 데이터끼리만 묶어 관리하는 것이 유지보수의 핵심입니다.