18. 객체
2026년 4월 10일
자바스크립트
1. 객체의 기본 구조
객체는 중괄호 {...}를 이용해 생성하며, '키(key): 값(value)' 쌍으로 구성된 프로퍼티들의 집합입니다.
- 키(이름): 문자열 또는 심볼형만 가능합니다.
- 값: 자바스크립트에서 허용하는 모든 자료형이 올 수 있습니다.
생성 방법
- 객체 리터럴 (가장 권장):
let user = {}; - 객체 생성자:
let user = new Object();
2. 프로퍼티 접근 및 조작
가장 빈번하게 사용되는 두 가지 표기법을 비교해 보세요.
| 구분 | 점 표기법 (Dot notation) | 대괄호 표기법 (Bracket notation) |
|---|---|---|
| 문법 | obj.key | obj["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", "41", "49")
- 기타 프로퍼티: 객체에 추가한 순서대로 나열됩니다.
🎙️ 기술 면접 대비 (Interview Questions)
Q1. const로 선언된 객체를 수정할 수 있는 이유는 무엇인가요? (기초)
답변:
const는 변수 자체의 재할당을 막는 것이지, 변수가 가리키고 있는 객체의 내부(프로퍼티) 수정을 막는 것이 아닙니다. 즉, 객체가 담긴 '상자'를 바꿀 수는 없지만 상자 안의 '내용물'은 자유롭게 바꿀 수 있습니다.
Q2. 점 표기법보다 대괄호 표기법이 더 강력한 이유는 무엇인가요? (중급)
답변: 대괄호 표기법은 런타임에 결정되는 변수나 표현식의 결과를 키로 사용할 수 있기 때문입니다. 또한 공백이 포함된 문자열이나 숫자로 시작하는 키처럼 유효한 식별자가 아닌 경우에도 접근할 수 있어 유연성이 훨씬 높습니다.
💡 기억해야 할 중요한 내용
- 자바스크립트에서 객체는 '참조(Reference)'로 전달됩니다. 서랍장 자체를 옮기는 게 아니라 서랍장이 있는 위치(주소)를 알려주는 방식임을 잊지 마세요.
- '1 객체 = 1 개체' 원칙을 지키세요. 하나의 객체가 너무 많은 책임을 가지지 않도록 의미 있는 데이터끼리만 묶어 관리하는 것이 유지보수의 핵심입니다.