자바스크립트에서 객체는 프로퍼티와 메서드의 집합체입니다. 객체 리터럴은 가장 일반적이고 간단한 객체 생성 방법 중 하나입니다.
객체란?
자바스크립트에서 거의 모든 것은 객체로 취급됩니다. 객체는 변경 가능한 값으로, 여러 타입의 값을 하나의 단위로 묶어 복잡한 자료구조를 형성합니다. 이는 상태와 동작을 하나로 구조화하여 유용하게 활용할 수 있습니다.
객체 리터럴에 의한 객체 생성
객체 리터럴은 중괄호 안에 프로퍼티와 메서드를 정의하는 것입니다.
javascript
const person = { age: 55, name: "Jung",};프로퍼티와 메서드
프로퍼티는 키와 값으로 이루어져 있으며, 자바스크립트에서 사용 가능한 모든 값이 프로퍼티 값이 될 수 있습니다. 메서드는 프로퍼티 중에서도 함수인 것을 지칭합니다.
프로퍼티 접근
프로퍼티에 접근하는 방법에는 대괄호 표기법과 마침표 표기법이 있습니다. 대괄호 표기법은 동적인 키에 접근할 때 유용하며, 마침표 표기법은 보다 간결한 표기법입니다.
javascript
const obj = { name: "John",}; console.log(obj["name"]); // 대괄호 표기법console.log(obj.name); // 마침표 표기법프로퍼티 값 갱신과 동적 생성 기존 프로퍼티의 값은 새로 할당하여 갱신할 수 있으며, 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성됩니다.
javascript
const example = { a: 1, b: 2,}; example.a = 3; // 값 갱신example.c = 4; // 동적 생성 console.log(example); // { a: 3, b: 2, c: 4 }ES6에서 추가된 객체 리터럴 확장 기능
프로퍼티 축약 표현, 계산된 프로퍼티 이름, 메서드 축약 표현 등의 기능이 추가되었습니다.
javascript
// 프로퍼티 축약 표현const x = 1, y = 1;const example = { x, y }; // 계산된 프로퍼티 이름const prefix = "prop";const obj = { [`${prefix}-${++i}`]: i, [`${prefix}-${++i}`]: i, [`${prefix}-${++i}`]: i,}; // 메서드 축약 표현const obj = { name: "Lee", sayHi() { console.log("Hi! " + this.name); },};ES6의 확장 기능을 통해 코드를 더 간결하게 작성할 수 있고, 가독성을 높일 수 있습니다.
📍틀린 부분이 있다면 말해주세요!
참고
자바스크립트 딥다이브