[JavaScript] 7. 객체 리터럴

📖 모던 자바스크립트 교재) 10장. 객체 리터럴

 

01. 객체란?

자바스크립트는 객체(object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다.
원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식)은 모두 객체다.

• 객체는 변경 가능한 값이다.
• 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.
• 프로퍼티의 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다.

 

 

객체는 객체의 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있음

-> 상태와 동작을 하나의 단위로 구조화할 수 있어 유용.

 

---

02. 객체 리터럴에 의한 객체 생성

※ 클래스 기반 객체지향 언어(C++나 자바 등) : 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체 생성

※ 인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체 - 객체가 메모리에 저장되어 실제로 존재하는 것에 초점

※ 클래스 : 인스턴스를 생성하기 위한 템플릿의 역할

※ 객체는 클래스와 인스턴스를 포함한 개념

 

자바스크립트는 프로토타입 기반 객체지향 언어로, 다양한 객체 생성 방법을 지원한다.

그 중 객체 리터럴을 사용하는 방법이 가장 일반적이고 간단하다.

 

※ 객체 리터럴 : 객체를 생성하기 위한 표기법

 

🖥️ 예제코드

var person = {
    name: 'Lee',
    sayHello: function() {
        console.log(`Hello! My name is ${this.name}.`);
    }
};

console.log(typeof person); // object
console.log(person); // {name: "Lee", sayHello: f}

 

⚠️ 주의

객체 리터럴 : 코드 블록 (X),  값으로 평가되는 표현식 (O)

따라서 객체 리터럴의 닫는 중괄호 뒤에는 세미콜론을 붙인다.

 

---

03. 프로퍼티

객체는 프로터피의 집합이며, 프로퍼티는 키와 값으로 구성된다.

프로퍼티를 나열할 때는 쉼표(,)로 구분한다.

• 프로퍼티 키 : 식별자 역할(빈 문자열을 포함하여 모든 문자열 또는 심벌 값)
• 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

🖥️ 예제코드

var person = {
    // 프로퍼티 키는 name, 프로퍼티 값은 'Lee'
    name: 'Lee',
    // 프로퍼티 키는 age, 프로퍼티 값은 20
    age: 20
};

 

⚠️ 프로퍼티 키

• 식별자 네이밍 규칙을 따르는 경우 - 따옴표 생략 가능
• 식별자 네이밍 규칙을 따르지 않는 경우 - 반드시 따옴표 사용
• 이미 존재하는 프로퍼티 키 선언 - 덮어씀

---

04. 메서드

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다.
즉, 메서드는 객체에 묶여 있는 함수를 의미한다.

 

🖥️ 예제코드

var circle = {
    radius: 5, // <- 프로퍼티

    // 원의 지름
    getDiameter: function () {  // <- 메서드
        return 2 * this.radius; // <- this는 circle 을 가리킨다.
    }
};

console.log(circle.getDiameter()); // 10

 

---

05. 프로퍼티 접근

프로퍼티에 접근하는 방법

• 마침표 표기법 : 마침표 프로퍼티 접근 연산자(.) 사용
• 대괄호 표기법 : 대괄호 프로퍼티 접근 연산자([...]) 사용

 

🖥️ 예제코드

var person = {
    name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee

⚠️ 대괄호 표기법 - 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열

⚠️ 이때, 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

 

---

06. 프로퍼티 값 갱신

이미 존재하는 프로퍼티 값을 할당하면 프로퍼티 값이 갱신된다.

 

🖥️ 예제코드

var person = {
    name: 'Lee'
};

person.name = 'Kim';

console.log(person); // {name: "Kim"}

 

---

07. 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

 

🖥️ 예제코드

var person = {
    name: 'Lee'
};

person.age = 20;

console.log(person): // {name: "Lee", age: 20}

 

---

08. 프로퍼티 삭제

delete 연산자를 통해 객체의 프로퍼티를 삭제할 수 있다.

 

🖥️ 예제코드

var person = {
    name: 'Lee'
};

person.age = 20;

delete person.age;

// person 객체에 address 프로퍼티가 존재하지 않는다.
// 하지만 이때 에러가 발생하지 않는다.
delete person.address;

console.log(person); // {name: "Lee"}

 

 

📖 참고자료

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard

[무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의