🍌 JavaScript

---

Object

Object(객체)는 이름과 값을 한 쌍으로 묶은 데이터를 여러개 모은 것으로, 0개 이상의 property(프로퍼티)로 구성된 집합이다.

✔ property(프로퍼티) : 객체의 상태를 나타내는 값
✔ method(메서드) : 프로퍼티를 참조하고 조작할 수 있는 동작

📌 프로퍼티 값이 함수일 경우에는 method라고 부름

---

Object Literal

Object Literal(객체 리터럴)은 중괄호({}) 내에 0개 이상의 프로퍼티를 정의한다.

let card = { suit: "하트", rank: "A" };

📌 객체 리터럴의 중괄호는 코드 블록을 의미하는 것이 아니라 값으로 평가되기 때문에 닫는 괄호 뒤에는 세미콜론(;)을 붙임

Property

Property(프로퍼티)는 객체에 포함된 데이터 하나를 가르키며 key(키)와 value(값)로 구성된다.

• 프로퍼티는 쉼표(,)로 구분
• key와 value는 콜론(:)으로 구분

✔ key : 프로퍼티의 이름, 모든 식별자와 빈 문자열 포함한 문자열 리터럴(예: suit, rank)
✔ value : 프로퍼티의 값, 모든 데이터 타입의 값과 표현식(예: 하트, A)

let card = { "suit": "하트", "rank": "A" };

이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 이전의 것을 덮어쓰며 에러도 발생하지 않음

let me = {
  name: "Kim",
  name: "Lim",
};

console.log(me); // {name: 'Lim'}

Access Property

프로퍼티 값을 읽거나 쓰기 위해 프로퍼티에 접근하는 2가지 방법이 있다.
✔ Dot Notation(마침표 표기법) : 마침표 프로퍼티 접근 연산자(.) 사용
✔ Bracket Notation(대괄호 표기법) : 대괄호 프로퍼티 접근 연산자([ ]) 사용

let card = { suit: "하트", rank: "A" };

console.log(card.suit); // 하트
console.log(card["rank"]); // A

• 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환

console.log(card.color); // undefined

• 객체 리터럴 안에 어떠한 프로퍼티도 작성하지 않으면 빈 객체 생성

let obj = {};
console.log(obj); // {}

📌 대괄호 표기법을 사용할 때는 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표(" ")로 감싼 문자열이어야 함

Property Add, Delete and 'in' Operator

Add Property

• 없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가 됨

let card = { suit: "하트", rank: "A" };
card.color = "red";
console.log(card); // {suit: '하트', rank: 'A', color: 'red'}

Delete Property

• delete 연산자를 사용하여 프로퍼티 삭제

delete card.rank;
console.log(card); //{suit: '하트', color: 'red'}

'in' Operator

• in 연산자를 사용하여 객체에 특정 프로퍼티가 있는지 확인

let card = { suit: "하트", rank: "A" };
console.log("suit" in card); // true
console.log("color" in card); // false

console.log("toString" in card); // true
// card가 Object객체를 상속받았기 때문

📌 in 연산자는 그 객체가 가진 프로퍼티와 그 객체가 상속받은 모든 프로터피를 확인

Method

Method(메소드)는 객체의 속성인, 즉 프로퍼티의 저장된 값의 타입인 함수이다. 일반적으로 메소드는 메소드에 속한 객체의 프로퍼티 값을 바꾸는 용도로 사용한다.

let circle = {
  center: { x: 1.0, y: 2.0 }, // 원의 중점을 표현하는 객체
  radius: 2.5, // 원의 반지름 
  area: function () { // 원의 넓이를 구하는 메소드
    return Math.PI * this.radius * this.radius;
  },
};

console.log(circle.area()); // 19.634954084936208

• Method 또한 프로퍼티의 일종이므로 나중에 객체에 추가할 수 있음

circle.translate = function (a, b) {
  this.center.x = this.center.x + a;
  this.center.y = this.center.y + b;
};

circle.translate(1, 2);
console.log(circle.center); // {x: 2, y: 4}

📌 this는 그 함수를 메서드로 가지고 있는 객체를 가리킴
(위의 코드에서는 circle를 가리킴)

Object is Reference Type

생성된 객체는 메모리의 한 영역을 차지한다. 객체를 변수에 대입하면 그 변수에는 객체의 참조, 메모리에서의 위치 정보가 저장된다. 이때의 변수 상태를 가리켜 그 객체를 참조하고 있다고 표현한다.

let card = { suit: "하트", rank: "A" }; // 객체를 변수에 대입, 변수 card는 객체를 참조하고 있음
let ref = card; // 변수 reference는 card의 객체를 참조함

console.log(ref.suit); // 하트

ref.suit = "스페이드";
console.log(card.suit); // 스페이드
console.log(ref.suit); // 스페이드

따라서 객체지향 언어에서 데이터와 그 상태를 바꾸는 메서드를 하나로 묶는 용도로 객체를 사용한다.

---

참고문헌,
이소 히로시, 『모던 자바스크립트 입문』, 서재원 역, 길벗, 2019,
https://velog.io/@nxnaxx/Javascript-객체-리터럴