자바스크립트 익숙해지기 #4

객체

자바스크립트에서 객체는 어떤 것에 대한 속성과 다양한 동작을 키:값형태로 모아놓은 것이다. 자바스크립트에는 자주 사용되는 요소들을 미리 만들어 정의해둔 내장 객체가 존재한다. Number, String, Math, Date 등이 있다. 그리고 이러한 내장 객체 외에 별도로 만들어 사용하는 사용자 지정 객체 또한 제공한다. 사용자 지정 객체는 기본적으로 아래와 같이 작성하여 만들 수 있다.

let person = {
  body: {
    arms: 2, // 속성
    legs: 2 // 속성
  }
  hello: function () {
    console.log("안녕하세요.")
  } // 메서드
}

객체의 속성은 중첩으로 작성할 수 있으며, 객체 내부에 함수를 정의하여 메서드로 활용할 수 있다.

 

객체 내의 속성에 접근할 때는 점 표기법 또는 괄호 표기법으로 접근이 가능하다.

person.body.arm // 2
person[body][arm] // 2

빈 객체를 만들고 속성을 추가할 수 있으며, 속성을 제거할 수도 있다.

let person = {} // 괄호 표기법으로 만들기
let person = new Object() // new 예약어를 이용해 만들기

person.arm = 2
person.leg = 2
person // {arm: 2, leg: 2}

delete person.arm
person // {leg: 2}

그리고 객체 또한 원시 유형의 자료들과 같이 복사가 가능한데 다른 점이 존재한다. 원시 유형 자료의 경우 값 자체를 복사해 버린다. 하지만 객체는 참조 형태로 복사한다. 차이점은 아래와 같다.

// 원시 자료 유형 복사

let book1 = "math"
let book2 = book1

book2 = "english"
book1 // math
book2 // english => 해당 변수 값만 바뀜

// 객체 자료 유형 복사

let book1 = {title: "math", price: 10000}
let book2 = book1

book2.title: "english"
book1 // {title: "english", price: 10000} => 같이 바뀜
book2 // {title: "english", price: 10000}

생성자 함수와 클래스

위와 같은 객체를 생성할 때 그 수가 몇개 되지 않으면 일일이 한땀한땀 만들어도 상관없다. 하지만 수 십, 수 백개를 만들어야 한다면 어떨까? 코드를 짜는 것 자체도 번거롭고, 가독성 상으로도 매우 좋지 못할 것이다. 이를 타개하기 위해 객체를 찍어내는 틀과 같은 역할을 하는 생성자 함수와 클래스가 존재한다.

// 생성자 함수 정의 기본형

function Book(title, price) {
  this.title = title;
  this.price = price;
  this.buy = function () {
    console.log(`${this.title}을 ${this.price}원에 구매하였습니다.`)
  }
}

// 클래스 정의 기본형

class Book {
  constructor () {
    this.title = title;
    this.price = price;
  }
  buy () {
    console.log(`${this.title}을 ${this.price}원에 구매하였습니다.`)
  }
}

// 표현식을 활용한 클래스 정의 기본형

const Book = class {
  constructor () {
    this.title = title;
    this.price = price;
  }
  buy () {
    console.log(`${this.title}을 ${this.price}원에 구매하였습니다.`)
  }
}

객체의 키, 값에 접근

객체에는 여러가지의 속성과 메서드가 담겨있을 수 있는데 뭐가 있는지 모른다면 사용할 수 없다. 객체 내부의 속성과 메서드 값을 알아내는 방법에 대해 알아보자.

for - in

반복문의 형태 중 하나인 for - in으로 가져올 수 있다. 이는 이전에 한번 정리한 바가 있어 생략하도록 하겠다.

Object 내장 객체의 메서드로 가져오기

객체는 애초에 자바스크립트의 내장 객체이다. 이미 정의되어 있는 매서드를 활용하여 키, 값을 가져올 수 있다.

let book1 = {
  title: "math",
  price: 10000,
  author: "Kim"
}

let key = Object.keys(book1)
console.log(key) // ["title", "price", "author"]

let value = Object.values(book1)
console.log(value) // ["math", 10000, "Kim"]

let keyValue = Object.entries(book1)
console.log(keyValue) // [["title", "math"], ["price", 10000], ["author", "Kim"]]

프로토타입과 객체 상속

자바스크립트에서는 객체 간의 상속을 구현하기 위해 프로토타입을 사용한다. 프로토타입이란 객체를 만들어 내는 원형이라 할 수 있고, 상위 객체 또는 부모 객체라고 할 수도 있다. 모든 객체는 프로토타입을 가지며 해당 프로토타입으로 부터 속성과 메서드를 상속받는다.

 

프로토타입은 어떻게 만들어지는 걸까? 프로토타입은 생성자 함수 또는 클래스를 선언하면 동시에 만들어지고, 연결되게 된다.

 

객체의 프로토타입을 확인할 때는 __proto__ 속성을 사용하여 확인할 수 있으며, 생성자 함수에서 확인하고 싶을 때는 prototype 속성을 사용하여 확인할 수 있다.

 

프로토타입을 사용하여 객체의 메서드를 정의할 수 있다.

function Book(title, pages) {
  this.title = title;
  this.pages = pages;
}

Book.prototype.buy = function () {
  this.buy = function () {
    console.log(`${this.title}을(를) 구매하였습니다`)
  }
}

const book1 = new Book("English", 100)

book1.buy // "English을(를) 구매하였습니다."

프로토타입을 상속하는 새로운 객체 만들기

생성자 함수를 통해 만든 프로토타입을 상속하는 또다른 객체를 만들어 보자.

// 생성자 함수 선언과 프로토타입 생성
function Book (title, pages, price) {
  this.title = title;
  this.pages = pages;
  this.price = price;
}

// 위에서 만들어진 프로토타입을 상속할 새로운 객체 생성
function NewBook (title, pages, price) {
  Book.call(this, title, pages, price); // 기존 객체의 속성을 재사용 하기위해 call() 메서드 사용
  this.buy = function () {
    console.log(`${this.title}을(를) ${this.price}에 구매하였습니다.`)
  } // 새로운 메서드 정의
}

// 두 개의 프로토타입을 연결하는 setPrototypeOf 메서드 사용
Object.setPrototypeOf(NewBook.prototype, Book.prototype);

const book1 = new NewBook("math", 100, 10000);
book1.buy // "math을(를) 10000에 구매하였습니다" // 상속받은 Book의 속성을 사용하여 buy 메서드 사용가능

클래스를 통해 상속받기

// 새로운 클래스 작성
class Book {
  constructor (title, price) {
    this.title = title;
    this.price = price;
  }
}

// 상속받는 클래스 작성
class NewBook extends Book {
  constructor(title, price) {
    super(title, price); // 상속받는 속성을 재사용하기 위해 super()메서드 사용
  }
  buy () {
    console.log(`${this.title}을(를) ${this.price}에 구매합니다.`)
  }
}

const book1 = new NewBook("math", 10000);
book1.buy // math을(를) 10000에 구매합니다.