객체 리터럴

2025. 4. 27. 01:03·JavaScript

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
'JavaScript' 카테고리의 다른 글
  • 단축 속성명
  • const -> 주소 재할당 금지
  • for .. of 반복문
  • 배열의 범위 기반 for문, forEach()
람팜팜~
람팜팜~
:)
  • 람팜팜~
    RumPumPum
    람팜팜~
  • 전체
    오늘
    어제
    • 전체 (123)
      • 🎵 일상 (2)
      • JAVA (5)
        • 김영한의 자바 입문 (3)
      • JavaScript (12)
      • ---------------------------.. (0)
      • [게임 개발] 포트폴리오 (2)
        • RPG (1)
        • 슈터-플랫포머 (1)
      • [게임 개발] 개발 일지 (28)
        • RPG (25)
        • TopDownProject (3)
      • [게임 개발] 언리얼엔진 공부 (9)
        • 이득우의 언리얼 프로그래밍 Part.1 (6)
        • 이득우의 언리얼 프로그래밍 Part.2 (1)
        • 개인 메모 (2)
      • [게임 개발] 알고리즘 공부 (60)
        • 프로그래머스 (8)
        • 백준 (52)
        • 개인 메모 (0)
      • [게임 개발] CPP 공부 (2)
        • 이것이 C++ 이다 (1)
        • Effective C++ (0)
        • Effective Modern C++ (0)
        • 홍정모 그래픽스 새싹코스 (1)
      • [게임 개발] CS 공부 (3)
  • 블로그 메뉴

    • 링크

      • Github
    • 공지사항

    • 인기 글

    • 태그

      참조자
      스레드
      문자열
      해시
      context switching
      투포인터
      dfs
      프로세스
      데드락
      브루트포스
      역참조
      메모리구조
      누적합
      dp
      슬라이딩 윈도우
      우선순위 큐
      그리디
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.3
    람팜팜~
    객체 리터럴
    상단으로

    티스토리툴바