[JavaScript] 객체 만들기

객체

관련된 정보와 동작을 함께 모아 놓은 것
프로퍼티는 '키 : 값' 형태를 가지고 있고, 값이 함수일 경우 이것을 '메서드'라고 한다.

• 내장 객체
  - 자주 사용하는 요소들이 자바스크립트에 미리 정의되어 있는 객체
• 문서 객체 모델 (DOM)
  - 웹 문서 자체, 이미지, 링크, 폼 객체 등과 document 객체, 웹 문서 안의 이미지를 관리하는 image 객체 등 
• 웹 브라우저 객체
  - 현재 사용 중인 웹 브라우저 정보를 담고 있는 native 객체, history 객체, location 객체, screen 객체 등
• 사용자 정의 객체
  - 사용자가 필요할 때마다 자신의 객체를 정의해서 사용할 수 있다.

---

사용자 정의 객체

객체 선언

// 객체 형식
let book1 = {
    title : "JavaScript",
    pages : 648,
    ...
}

---

객체 프로퍼티에 접근

book1.title
// 점 표기법
book1["title"]
// 괄호 표기법

---

프로퍼티 수정하고 추가하기

// 수정
book1.pages = 50
book1
>> {title: "JavaScript", pages: 50}

// 추가
book1.author = "오시연"
book1
>> {title: "JavaScript", pages: 50, author: "오시연"}

---

빈 객체 작성 후 프로퍼티 추가하기

let book2 = {}
let book2 = new Object()

book2.title = "JavaScript"
book2.pages = 500
book2.author = "오시연"
book2
>> {title: "JavaScript", pages: 500, author: "오시연"}

---

프로퍼티 삭제하기

delete book2.pages
book2
>> {title: "JavaScript", author: "오시연"}

book2.author = undefined
book2
>> {title: "JavaScript", author: undefined}

---

객체 중첩하기

// 객체 안에 객체가 들어간 모습
let student = { // 객체 1
    name : "Seay0",
    score : { // 객체 2
        java : 90,
        javascript : 100,
        average : function() {
            return (this.java + this.javascript) / 2
        }
    }
}

student.score.java
>> 90
student.score.average()
>> 95

---

객체의 메서드 정의

let book3 = {
    title : "JavaScript",
    pages : 500,
    buy() { // buy : function() 이 요약됨
        console.log("이 책을 구매함");
    }
}

book3.buy()
>> 이 책을 구매함

---

메서드와 this

let book4 = {
    title : "JavaScript",
    pages : 500,
    author : "오시연",
    done : false,
    finish() {
        /* book4.done === false ? console.log("읽는 중") : console.log("완독"); */
        this.done === false ? console.log("읽는 중") : console.log("완독");
    }
}

book4.finish()
>> 읽는 중

• this 는 현재 객체를 가리킨다.
• 같은 프로퍼티를 가지는 여러 객체를 만들 경우에는 this.done 처럼 사용해야 한다.

---

생성자 함수와 클래스

• 생성자 함수
  - 객체의 틀을 만들 때 사용하는 함수
• 인스턴스 (객체)
  - 생성자 함수를 사용해 찍어내는 객체
• 클래스
  - 신택틱 슈거 라고 부르며, 완전히 새로운 개념이 아니라 기존 문법을 쉽게 바꿨다는 의미이다.

---

생성자 함수 정의

function Book(title, pages, done = false) {
    this.title = title;
    this.pages = pages;
    this.done = done;
    this.finish = function () {
        let.str = "";
        this.done === false > str = "읽는 중" : str = "완독";
        return str;
    }
}

---

new 예약어를 사용해 인스턴스 만들기

let book1 = new Book("Java", 550, false);
let book2 = new Book("JavaScript", 500, true);

console.log(`${book1.title} - ${book1.pages}쪽 - ${book1.finish()}`);
console.log(`${book2.title} - ${book2.pages}쪽 - ${book2.finish()}`);
>> Java - 550쪽 - 읽는 중
>> JavaScript - 500쪽 - 완독

---

클래스 선언

class Book {
    construntor(title, pages, done) {
        this.title = title;
        this.pages = pages;
        this.done = done;
    }
    
    finish() {
        let str = "";
        this.done === false > str = 읽는 중 : str = "완독";
        return str;
    }
}

let book1 = new Book("Java", 550, false);
let book2 = new Book("JavaScript", 500, true);

console.log(`${book1.title} - ${book1.pages}쪽 - ${book1.finish()}`);
console.log(`${book2.title} - ${book2.pages}쪽 - ${book2.finish()}`);
>> Java - 550쪽 - 읽는 중
>> JavaScript - 500쪽 - 완독

• class 예약어 다음 클래스 명을 작성하고, 중괄호 안에서 프로퍼티와 메서드를 분리해 작성한다.
• constructor() : 안에는 프로퍼티를 넣고 밖에는 메서드를 정의한다.

---

프로토타입과 클래스에서의 상속

• 상속
  - 부모 객체의 프로퍼티나 메서드를 가져와서 사용할 수 있다.
• 프로토타입
  - 객체를 만들어 내는 원형 / 상위 객체, 부모 객체라고도 할 수 있다.

---

프로토타입

let arr = new Array();

arr
▼ []
  length:
  ▶ [[Prototype]]: Array(0)

• arr 배열의 프로토타입은 Array 객체이고, arr 배열은 Array 객체의 프로퍼티와 메서드를 상속받아 사용할 수 있다.
• 이 때 Array 객체를 arr 배열의 프로토타입 이라고 한다.

---

생성자 함수 프로토타입 객체

const Book = function(title, pages, done) {
    this.title : title,
    this.pages : pages,
    this.done : done
    this.finish() = function() {
        this.done === false ? str = "읽는 중" : str = "완독";
        return str;
    }
}

const book1 = new Book("JavaScript", 500, false);