JavaScript 객체 리터럴 (Object Literal)
1. 정의
객체 리터럴(Object Literal)은 JavaScript에서 중괄호({})를 사용하여 객체를 직접 생성하는 표기법입니다. 이는 new Object() 생성자를 사용하는 방식보다 간결하게 객체를 표현하고 초기화할 수 있는 방법입니다.
2. 기본 구조
객체 리터럴은 0개 이상의 속성(property) 목록을 중괄호 내에 정의하며, 각 속성은 키(key) 와 값(value) 의 쌍으로 이루어지고 콜론(:)으로 구분됩니다. 속성들은 쉼표(,)로 분리됩니다.
{
key1: value1,
key2: value2,
// ...
keyN: valueN
}
- Key: 속성을 식별하는 이름으로, 일반적으로 문자열(String) 또는 심볼(Symbol) 타입이 사용됩니다. 유효한 JavaScript 식별자 규칙에 맞는 키는 따옴표 없이 작성할 수 있으나, 내부적으로는 문자열로 취급됩니다(심볼 제외). 유효한 식별자가 아니거나 예약어인 경우 따옴표로 감싸야 합니다.
- Value: 해당 키에 연관된 데이터입니다. JavaScript의 모든 데이터 타입(원시 타입: String, Number, Boolean, Null, Undefined, Symbol, BigInt / 참조 타입: Object, Array, Function 등)이 값이 될 수 있습니다. 값이 함수인 속성을 메소드(Method) 라고 합니다.
3. 객체 생성 예시
const configuration = {
id: "config-001",
version: 1.1,
enabled: true,
modules: ["moduleA", "moduleB"],
metadata: {
timestamp: Date.now()
},
validate: function(data) {
// validation logic
return data != null;
}
};
4. 속성 접근
객체 리터럴로 생성된 객체의 속성 값에 접근하는 방법은 두 가지입니다.
- 점 표기법 (Dot Notation): 객체명.속성키 형태로 접근합니다. 속성 키가 유효한 JavaScript 식별자일 경우 사용 가능합니다.
console.log(configuration.version); // 출력: 1.1 let isValid = configuration.validate({}); // 메소드 호출 console.log(isValid); // 출력: true
- 대괄호 표기법 (Bracket Notation): 객체명['속성키'] 형태로 접근합니다. 속성 키는 문자열 또는 문자열로 평가될 수 있는 표현식이어야 합니다. 키가 유효한 식별자가 아니거나 동적으로(변수를 통해) 속성에 접근할 때 사용됩니다.
console.log(configuration['id']); // 출력: "config-001" let prop = 'enabled'; console.log(configuration[prop]); // 출력: true
5. 속성 추가, 수정, 삭제
객체 리터럴로 생성된 객체는 기본적으로 가변이므로, 생성 이후에도 속성을 동적으로 관리할 수 있습니다.
- 추가/수정: 존재하지 않는 키에 값을 할당하면 새로운 속성이 추가되고, 존재하는 키에 값을 할당하면 기존 값이 수정됩니다.
configuration.enabled = false; // 기존 속성 값 수정 configuration.retryCount = 3; // 새로운 속성 추가 console.log(configuration.retryCount); // 출력: 3
- 삭제: delete 연산자를 사용하여 객체의 속성을 제거할 수 있습니다.
delete configuration.metadata; console.log(configuration.metadata); // 출력: undefined
6. 주요 용도
- 데이터 구조화: 연관된 데이터를 하나의 단위로 캡슐화하여 관리합니다.
- 설정 객체: 함수나 클래스에 전달할 다수의 옵션이나 설정을 객체 형태로 전달합니다.
- 데이터 전송: 웹 API 통신 등에서 사용되는 JSON 형식의 기반이 됩니다.
- 간단한 맵(Map) 구현: 문자열 키를 사용하여 값을 빠르게 조회하는 용도로 활용됩니다.
7. 일반 객체 리터럴 {} 활용
가장 기본적인 방식으로, {}를 사용해 객체를 만들고 이를 Map처럼 활용합니다.
- 생성: const myMap = { key1: value1, key2: value2 };
- 값 접근: myMap.key1 또는 myMap['key1']
- 값 수정/추가: myMap.key1 = newValue; myMap.newKey = value3;
- 키 존재 여부 확인: 여기가 조금 까다롭습니다.
- 'key' in myMap: true/false를 반환하지만, 해당 객체뿐 아니라 프로토타입 체인까지 거슬러 올라가 확인합니다. 의도치 않게 상속된 속성 때문에 true가 나올 수 있어 주의가 필요합니다. (예: toString 같은 내장 속성도 true가 됨)
- myMap.hasOwnProperty('key'): 객체가 해당 키를 직접 가지고 있을 때만 true를 반환합니다. 프로토타입 체인은 확인하지 않아 더 안전합니다. 하지만 메소드 이름이 길고, Object.create(null)로 만든 프로토타입이 없는 객체에서는 이 메소드 자체가 없어 에러가 발생할 수 있습니다.
- Object.hasOwn(myMap, 'key') (추천): hasOwnProperty의 단점을 보완한 최신(ES2022) 정적 메소드입니다. 객체와 키를 인자로 받아 해당 객체가 키를 직접 소유하고 있는지 안전하게 확인합니다. 가장 권장되는 방식입니다. (Node.js 16.9.0 이상 지원)
- myMap['key'] !== undefined: 값이 undefined가 아닌지로 존재 여부를 간접 판단할 수 있지만, 만약 키에 해당하는 값이 실제로 undefined 라면 존재함에도 없다고 판단하는 오류가 생길 수 있습니다.
- 크기 확인: Object.keys(myMap).length 와 같이 키 배열을 만들어 길이를 재야 합니다. (불편함)
- 키 타입: 주로 문자열(또는 심볼)만 가능합니다. 다른 타입은 문자열로 변환됩니다.
8. Map과의 차이
특징 | 일반 객체 리터럴 {} | new Map() |
주요 용도 | 간단한 데이터 구조, 설정, 문자열 키 기반 맵 |
Key-Value 컬렉션 전용, 다양한 키 타입 지원
|
초기화 | 간결 ({k: v}) |
다소 번거로움 (new Map([...]) or set())
|
키 타입 | 문자열, 심볼 | 모든 타입 가능 |
키 존재 확인 | Object.hasOwn(), hasOwnProperty(), in 등 |
map.has(key) (명확하고 편리)
|
값 얻기 | obj[key], obj.key | map.get(key) |
크기 확인 | Object.keys(obj).length | map.size (편리) |
순서 보장 | (최신 JS는 대체로 보장) | 삽입 순서 보장 |
메소드 | 기본 객체 메소드 |
Map 전용 메소드 다수 (set, delete 등)
|
9.Map과 객체 리터럴 선택 기준
- 1. 간단한 조회 테이블 (예: mirrorMap):
- 키가 문자열이고, 맵의 내용이 미리 정해져 있으며, 주로 값 조회만 필요하다면 객체 리터럴 {} 로 만드는 것이 가장 간결하고 충분히 효율적입니다. 이때 키 존재 여부는 Object.hasOwn()이나 객체[키] !== undefined (값이 undefined가 아님이 확실할 때) 등으로 확인하면 됩니다.
- 2. .has() 메소드의 명확성이 중요할 때:
- 객체 리터럴의 키 존재 확인 방법(hasOwnProperty 등)이 번거롭거나 명확하지 않다고 느껴지고, Map의 .has() 메소드를 선호한다면 new Map() 을 사용하는 것이 좋습니다. 이때 초기화는 객체 리터럴로 먼저 정의한 뒤 new Map(Object.entries(객체)) 로 변환하는 방식이 간결함과 편리함을 둘 다 잡는 좋은 절충안입니다.
- 3. 키로 문자열 외 다른 타입을 사용해야 할 때:
- 이 경우에는 반드시 new Map() 을 사용해야 합니다.
- 4. 요소의 개수(size)가 자주 필요하거나, 추가/삭제가 빈번할 때:
- 이 경우에도 .size 속성이나 .set(), .delete() 메소드를 제공하는 new Map() 이 더 편리합니다.
요약
코딩 테스트에서는 단순 조회 목적의 문자열 키 맵은 {}로도 충분하지만, .has()의 명확성이나 다른 Map 기능이 필요하다면 new Map() (특히 Object.entries 활용)을 사용 권장.
성능 차이 보단 코드의 명확성과 구현 편의성을 우선적으로 고려하여 선택
'JavaScript' 카테고리의 다른 글
단축 속성명 (0) | 2025.04.28 |
---|---|
const -> 주소 재할당 금지 (0) | 2025.04.24 |
for .. of 반복문 (1) | 2025.04.13 |
배열의 범위 기반 for문, forEach() (1) | 2025.04.13 |
map을 이용한 배열의 각 요소 접근 (0) | 2025.04.13 |