자바스크립트에서 데이터를 나타내는데 많이 사용되는 객체는 때에 따라서 수정되야 하고 동적으로 생성되야 한다.
이런 경우에, 유용하게 사용될 수 있는 문법들을 정리해보기로 하였다.
Computed Property Names ⛅️
객체에서 프로퍼티의 이름을 동적으로 생성할 수 있게 해주는 문법이다. 대괄호 안에 변수를 넣음으로써, 해당 변수의 값이 프로퍼티의 이름이 되게 한다.
const name = "park";
const target = false;
const obj = {
[name]: target,
}
console.log(obj); // {park: false}
객체 확장하기
기존에 존재하는 객체를 바탕으로 새롭게 더 많은 데이터, 프로퍼티를 가지는 객체를 생성하게 되야 하는 경우도 있다.
혹은 여러 객체를 합쳐야 하는 경우도 있는데, 다음과 같은 방법들을 사용할 수 있다.
Object.assign(obj1, obj2, obj3);
Object Spread {...obj1, ...obj2, ...obj3}
const obj1 = {"a": 1};
const obj2 = {"b": 2};
const obj3 = {"a": 3};
const oa = Object.assign({}, obj1, obj2, obj3);
console.log(oa);
const os = {...obj3, ...obj2, ...obj1};
console.log(os);
위의 예제를 확인해보면, 더 나중에 추가된 객체의 프로퍼티 값이 기존의 값에 덮어쓰기된다. (a)
이 외에도 Object.keys, Object.values, Object.entries 등으로 객체 값에 접근하여 객체 데이터를 처리할 수 있다.
☀️ 참고 문서
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer
Object initializer - JavaScript | MDN
An object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}). Objects can also be initialized using Object.create() or by invoking a constructor function with the
developer.mozilla.org
'JavaScript' 카테고리의 다른 글
await와 then 함께쓰기? (0) | 2023.10.29 |
---|---|
MutationObserver 사용하기 (DOM을 구독하여 알림 주기) (0) | 2023.10.28 |
URLSearchParams로 Url Query String 가져오기 (0) | 2023.10.03 |
BFS(Breadth-First Search) 알고리즘 구현하기 (자바스크립트) (0) | 2023.09.30 |
syntactic sugar in Javascript (Class와 Async Await) (0) | 2023.09.18 |