Programing/JavaScript

[JavaScript] JavaScript의 객체 리터럴, Optional Chaining, Map, Set

유니얼 2024. 12. 26. 01:27
728x90

JavaScript에서 데이터를 정의하고 다루기 위해 자주 사용하는 객체 리터럴(Object Literal), Optional Chaining, Map, 그리고 Set은 각기 다른 특징과 장점을 제공합니다. 이 글에서는 이러한 개념을 이해하기 쉽게 정리하고, 활용 방법을 소개합니다.

1. 객체 리터럴(Object Literal)

객체 리터럴의 기본 개념

객체 리터럴은 JavaScript에서 객체를 생성하는 가장 기본적인 방식입니다. 키-값 쌍으로 데이터를 저장하며, 필요한 속성을 추가하거나 수정할 수 있습니다.

const objectName = {
    key1: 'value1',
    key2: 'value2'
};
console.log(objectName.key1); // value1

ES6의 개선된 객체 리터럴 문법

축약 문법: 변수 이름과 키 이름이 동일하다면, 더 간단한 문법으로 정의할 수 있습니다.

const a = 1, b = 'text';
const obj = { a, b };
console.log(obj); // { a: 1, b: 'text' }

메서드 정의 간소화: function 키워드를 생략하여 메서드를 정의할 수 있습니다.

const obj = {
    greet() {
        console.log('Hello!');
    }
};
obj.greet(); // Hello!

계산된 프로퍼티 이름: 키를 동적으로 생성할 수 있습니다.

const dynamicKey = 'key';
const obj = { [dynamicKey]: 'value' };
console.log(obj.key); // value

2. Optional Chaining

Optional Chaining은 깊이 있는 객체 구조에서 존재 여부를 확인하면서 안전하게 속성을 접근할 수 있게 해줍니다. 없는 속성을 참조하려고 하면 에러 대신 undefined를 반환합니다.

기본 사용법

const user = {
    profile: { name: 'Alice' }
};

console.log(user.profile?.name); // Alice
console.log(user.settings?.theme); // undefined

함수 호출과 함께 사용

const obj = {
    greet() {
        return 'Hello!';
    }
};

console.log(obj.greet?.()); // Hello!
console.log(obj.farewell?.()); // undefined

 

3. Map

Map은 키-값 쌍을 저장하는 데이터 구조로, 객체와 달리 모든 데이터 타입을 키로 사용할 수 있습니다.

특징

  1. 키 타입의 유연성: 숫자, 문자열, 객체 등 어떤 값도 키로 사용할 수 있습니다.
  2. 순서 보장: 삽입된 순서를 유지합니다.

사용 방법

const map = new Map();
map.set('key1', 'value1');
map.set(123, 'value2');
map.set({ objKey: true }, 'value3');

console.log(map.get('key1')); // value1
console.log(map.has(123)); // true
map.delete(123);
console.log(map.size); // 2

반복문 사용

Map은 for...of 루프를 사용하여 순회할 수 있습니다.

for (const [key, value] of map) {
    console.log(key, value);
}

 

4. Set

Set은 고유한 값만 저장하는 데이터 구조입니다. 중복된 값은 자동으로 제거됩니다.

특징

  1. 중복 제거: 동일한 값은 한 번만 저장됩니다.
  2. 순서 보장: 삽입된 순서를 유지합니다.

사용 방법

const set = new Set();
set.add('a');
set.add('b');
set.add('a'); // 중복 값은 무시
console.log(set.has('a')); // true
console.log(set.size); // 2

반복문 사용

Set은 for...of 루프를 통해 순회할 수 있습니다.

for (const value of set) {
    console.log(value);
}

 

요약

개념 설명 예제
객체 리터럴 객체를 생성하는 간단한 방식. ES6부터 축약 문법과 동적 키 사용 가능. { key: value }, { [key]: value }
Optional Chaining 존재하지 않는 속성을 안전하게 참조 가능. obj?.key, arr?.[index]
Map 키-값 쌍을 저장하며, 모든 데이터 타입을 키로 사용 가능. map.set(key, value)
Set 고유한 값만 저장하며, 중복이 자동 제거됨. set.add(value)

결론

JavaScript의 객체 리터럴, Optional Chaining, Map, Set은 데이터를 다루는 다양한 방법을 제공합니다.

  • 객체 리터럴은 간결하고 직관적인 데이터 표현을 가능하게 하고,
  • Optional Chaining은 안전한 데이터 접근을 보장하며,
  • Map과 Set은 더 정교한 데이터 구조를 제공합니다.

이 기능들을 적절히 활용하면 코드의 안정성과 효율성이 크게 향상됩니다. JavaScript의 데이터 구조를 잘 이해하고 프로젝트에 적합하게 활용해 보세요!

반응형