객체(Object)

1. 구성

{key: value}

배열에는 index라는 순서가 존재한다. 우리는 이를 이용해 배열 내 값에 접근할 수 있는데, 이와 반대로 객체에는 순서가 존재하지 않는다. 대신 key가 존재해 각각의 값들을 분류하고 그 그룹을 상징하는 이름을 붙일 수 있다. 이렇게 쌍을 이룬 'key: value'를 속성(property)라 부른다.

let testObj = {
  id: 123,
  product: {
    book type: "non-fiction",
    title: "My trip",
    page: 500
  }
};

객체의 값으로는 number, boolean, string 타입 이외에도 배열 혹은 또 다른 객체가 들어갈 수도 있다.

※ key에 대하여 짚고 넘어가자

let myDog = {
    name: "puppy",
    legs: 4,
    tails: 1
};

let myDog = {
    "name": "puppy",
    "legs": 4,
    "tails": 1
};

객체 myDog 안에 존재하는 name, legs, tails라는 key들은 사실 각각 string 타입으로 "name", "legs", "tails"라 적혀야한다. 그러나 JavaScript에서는 key에 한해서 ""를 생략하고 써도 동일하게 인식 되도록 만들어져 있다. 이는 아래에서 다룰 [속성 접근자]-[괄호 표기법]에서 중요한 포인트가 되니 기억해두자.

2. 생성

1) 빈 객체

let testObj = new Object();

2) 일반 객체

let testObj = {
    id: 35,
    seatNumber: 20
}

3) 생성자 함수를 통해 만들어진 객체

//생성자 함수 생성
function seatEntry(userId, userSeatNumber)
{
	this.id = userId;
	this.seatNumber = userSeatNumber;
}

//객체 생성
let testObj1 = new seatEntry(2, 11); //seatEntry {id: 2, seatNumber: 11}
let testObj2 = new seatEntry(5, 20); //seatEntry {id: 5, seatNumber: 20}

3. 속성 접근

1) 점 표기법(Dot notation)

let testObj = {
    hat: "ballcap",
    "shirt": "jersey"
};

let hatValue = testObj.hat;
let shirtValue = testObj.shirt;

2) 괄호 표기법(Bracket notation)

let testObj = {
    entree: "hamburger",
    "the drink": "water"
};

let entreeValue = testObj["entree"];
let drinkValue = testObj["the drink"];

※ 점 표기법 vs 괄호 표기법

점(dot)은 key가 아래의 조건에 만족하는 경우에만 사용할 수 있다.
① key는 '유효한 변수 식별자'이어야 한다.
② 해당 식별자에는 공백이 존재해서는 안된다.
③ 해당 식별자는 숫자로 시작해서는 안된다.
④ 해당 식별자에는 달러 기호($)와 언더바(_)를 제외한 특수 문자가 들어서는 안된다.

let testObj = {
    book_title: "System Software",
    "book page": 500,
    16: "good"
};
let testNumber = 16;

let test1 = testObj.book_title; //가능
let test2 = testObj.book page; //불가능
let test3 = testObj["book page"]; //가능
let test4 = testObj.16; //불가능
let test5 = testObj["16"]; //가능
let test6 = testObj.testNumber; //불가능
let test7 = testObj[testNumber]; //가능, test5와 동일한 결과

이렇게 보면 점 표기법은 제약이 많아보인다. 역으로 생각한다면 변수를 통한 동적 접근이 필요할 때 주로 괄호 표기법이 많이 사용됨을 알 수 있다.

(+) 식별자(identifier): 사용자가 임의로 지정한 변수, 상수, 함수, 사용자 정의 타입 등의 이름

4. 속성 관리

let myDog = {
    name: "puppy",
    legs: 4,
    tails: 1,
    bark: "woof"
};

1) 속성 추가

myDog.breed = "poodle";

2) 속성 삭제

delete myDog.tails;

5. 클래스(Class)

동일한 형태의 object를 여러개 만들고 싶을 때, Ctrl+c Ctrl+v로 잔뜩 복사해서 값을 수정할 수가 있지만 생성자(constructor)가 있는 class를 정의해주는 방법 있다. 클래스를 통해 만들어진 객체들은 인스턴스(instance)라 불린다.

class Member {
	contructor(id, name) {
		this.id = id,
		this.name = name	
	};
};

const member1 = new Member(111, "LEE");
const member2 = new Member(222, "KIM");

※ 객체지향 프로그래밍

Class는 사실 객체지향 프로그래밍 개념에서 나온 것이다. 객체지향의 가장 대표적인 특성 '캡슐화(Encapsulation)'는 정보를 날 것 그대로를 내보이는 대신 method를 사용해 최대한 은닉시킴으로써 외부로부터 직접적인 접근을 줄이려고 한다. 이는 조금 복잡해도 나중에 유지보수와 소프트웨어 확장시 오류를 최소화시킬 수 있다는 장점이 있다.

//object의 경우
let ray = {  
  name: 'Ray',  
  price: 2000000,   
  
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  
    return this.price;  
  }
}

//class의 경우
class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }
}