04-1. Object Literal

객체 리터럴 (Object Literal)

객체 리터럴 정의

• 객체 리터럴은 JavaScript에서 객체를 생성하는 가장 간단하고 직관적인 방법입니다.
• 중괄호 {}를 사용하여 객체의 내용을 정의하며, 객체의 속성(프로퍼티)들은 키:값 형태로 나열됩니다.

객체 생성 예시

javascript

코드 복사

let user = { name: '홍길동', age: 20, isMember: true, order: { productId: 2, count: 10 } };

프로퍼티 접근

• 객체의 프로퍼티는 점(.) 표기법을 사용하여 접근할 수 있습니다.
• 예를 들어, user 객체의 name 프로퍼티에 접근하려면 user.name을 사용합니다.
• 만약 user 객체의 order 프로퍼티가 객체이고, 이 객체의 productId에 접근하려면 user.order.productId로 접근할 수 있습니다.

함수의 프로퍼티

• 객체의 프로퍼티로 함수를 포함할 수 있습니다. 이 함수를 메서드라고 부릅니다.
• 예를 들어:

javascript

코드 복사

let user = { name: '홍길동', greet: function() { return `안녕하세요, ${this.name}입니다.`; } }; console.log(user.greet()); // "안녕하세요, 홍길동입니다."

프로퍼티와 메서드

• 객체 지향 프로그래밍에서 변수는 데이터(상태)를 나타내고, 함수는 행동(동작)을 나타냅니다.
• 객체의 변수는 객체의 특성을 표현하는데 사용됩니다. 예를 들어, name이라는 프로퍼티는 사용자의 이름을 나타냅니다.

---

객체의 this

• 객체 내의 메서드에서 다른 프로퍼티에 접근할 때 this를 사용합니다.
• this는 해당 객체를 참조하며, 메서드가 호출된 객체를 가리킵니다.

javascript

코드 복사

let user = { name: '홍길동', age: 20, greet: function() { return `안녕하세요, ${this.name}입니다.`; } }; console.log(user.greet()); // "안녕하세요, 홍길동입니다."

• 화살표 함수와 this:
  • 일반 함수에서의 this는 호출한 객체를 가리키지만, 화살표 함수에서는 상위 스코프의 this를 그대로 사용합니다.
  • 따라서 화살표 함수 내부에서는 객체의 프로퍼티에 접근하기 위해 this를 사용할 수 없습니다.

축약형 프로퍼티 등록

• 객체 리터럴에서 외부에 선언된 변수를 프로퍼티로 등록할 수 있으며, 프로퍼티 이름과 변수가 동일하면 축약형으로 작성할 수 있습니다.

javascript

코드 복사

let name = '홍길동'; let age = 20; let user = { name, // name: name, age // age: age };

외부에서 객체 멤버 등록

• 객체를 선언한 후에도 객체에 새로운 프로퍼티를 추가할 수 있습니다.

javascript

코드 복사

let user = { name: '홍길동', age: 20 }; user.isMember = true; // 새로운 프로퍼티 추가 user.order = { productId: 2, count: 10 }; // 또 다른 프로퍼티 추가

요약

• 객체 리터럴은 객체를 간단하게 정의하는 방법으로, 다양한 속성과 메서드를 포함할 수 있습니다.
• this 키워드를 통해 객체의 멤버에 접근할 수 있으며, 화살표 함수와 일반 함수의 this 동작 방식은 다르므로 주의해야 합니다.
• 프로퍼티 등록 시 축약형을 사용하고, 필요 시 외부에서 객체 멤버를 추가하는 것도 가능합니다.