[Do it! 모던 자바스크립트 프로그래밍의 정석] 09. 자바스크립트 객체 만들기

09. 자바스크립트 객체 만들기

객체 알아보기

객체

• 프로그래밍) 데이터를 저장하고 처리하는 기본 단위
• 자바스크립트) 관련된 정보와 동작 함께 모아 놓은 것

 

• 내장 객체: 프로그래밍 할 때 자주 사용하는 요소들 -> 미리 정의해 놓은 객체
  • 문서 객체 모델(DOM): 웹 문서 자체(객체)/ 웹 문서에 포함된 것 각각 별도의 객체(이미지 객체, 링크 객체 등)
  • 브라우저 객체 모델: 웹 브라우저가 사용하는 정보 -> 객체로 지정
• 사용자 정의 객체: 필요할 때마다 사용자가 만들어 사용하는 객체

---

사용자 정의 객체

객체: 여러 개의 프로퍼티로 구성

프로퍼티: '키 : 값' 형태

• 객체 만들 때 객체 이름 다음에 중괄호({}) 사용
• 중괄호 사이에 '키 : 값' 형식으로 필요한 프로퍼티 나열
  • 키: 문자열, 숫자, 심벌
  • 프로퍼티: 쉼표(,) 넣어 구분

객체명 {
	키1 : 값1,
    키2 : 값2,
    ...
}

// 1. 객체 선언
// ex. 책 정보 담고 있는 book1
let book1 = {
	title: "웹 표준의 정석",
    pages: 648
}
book1 // { title: "웹 표준의 정석", pages: 648 }

// 2. 객체 프로퍼티에 접근
// 점 표기법 or 괄호 표기법(키의 문자열 -> 큰따옴표)
book.title 
book1["title"]

// 3. 객체 프로퍼티 수정 및 추가
// 객체명.키 = 값
book1.pages = 50
book1.author = "고경희"
book1 // { title: "웹 표준의 정석", pages: 50, author: "고경희" }

// 빈 객체 만든 후 프로퍼티 추가하며 객체 만들기
let book2 = { } // or 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: "고경희 }

---

객체 중첩하기

let student = {
	name = "Doremi",
    score : {
    	history : 85, 
        science : 94, 
        average : function () {
        	return (this.history + this.science) / 2
        }
    }
}

student.score.history // 85
student.score.average() // 89.5

---

객체 메서드 정의하기

메서드(method)

• 객체의 프로퍼티 중 객체의 동작을 지정하는 함수
• 선언하는 방법은 일반적인 함수를 선언하는 것과 비슷

메서드명: function() {
	...
}

let book3 = {
	title : "점프 투 파이썬",
    pages : 360,
    buy : function () {
    	console.log("이 책을 구입했습니다.");
    }
}

// ES6
let book3 = {
	title : "점프 투 파이썬",
    pages : 360,
    buy() {
    	console.log("이 책을 구입했습니다.");
    }
}

---

메서드와 this

this: 메서드에서 객체 안에 있는 프로퍼티 값을 사용할 때, 현재 객체를 가리키는 예약어

let book4 = {
	title : "",
    pages : 500,
    author : "고경희",
    done : false,
    finish : function() {
    	this.done === false ? console.log("읽는 중") : console.log("완독");
    }
}

book4.finish(); // "읽는 중"

 

---

객체 복사하기

• 원시 유형 자료 복사: '값' 복사
  • 복사한 자료의 값 변경 -> 원래 자료의 값은 그대로
• 객체 복사: '주소' 복사
  • 복사한 자료의 값 변경 -> 원래 자료의 값도 바뀜

---

생성자 함수와 클래스

생성자 함수

• 객체마다 반복되는 프로퍼티와 메서드가 있다면 객체 틀 미리 정의해 놓고 필요할 때마다 그 틀 사용해서 객체 만들 수 있음
• 객체의 틀 만들 때 사용하는 함수
• 인스턴스 = 인스턴스 객체: 생성자 함수를 사용해서 찍어 내는 객체

---

생성자 함수 ~> 객체 정의

• 일반적인 함수와 같은 형식
• 함수 이름의 첫 글자: 대문자
• 함수 내부에서 this 사용

// ver1
function 함수명(매개변수) {
	this.키1 : 값1,
    this.키2 : 값2,
    ...
    this.메서드1 : function() {...},
    this.메서드2 : function() {...},
    ...
}

// ver2
const 함수명(매개변수) = function () {
...
}

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

let book1 = new Book
let book2 = new Book
console.log(`${book1.title} - ${book1.pages}쪽 - ${book1.finish()}`);
console.log(`${book2.title} - ${book2.pages}쪽 - ${book2.finish()}`);

---

클래스 ~> 객체 정의

// ver1
class 클래스명 {
	constructor() {
    	프로퍼티1, 
        프로퍼티2,
        ...
	}
	메서드1() {...}
	메서드2() {...}
}

// ver2
const 클래스명 = class {
...
}

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;
	}
}

---

객체의 키와 값에 접근하기

• 객체: 클래스 타입으로 선언
• 인스턴스: 객체가 메모리에 할당되어 실제 사용

for...in 사용하기

객체의 키만 가져옴

for(변수 in 객체) {…}

let bag = {
	type : "backpack",
	color: "blue",
	size: 15
}

for (key in bag) {
	console.log(`${key} : ${bag[key]}`);
	// type : backpack, color : blue, size : 15
}

---

keys(), values(), entries() 메서드 사용하기

Object.keys(객체명) // 객체의 키만 배열로 반환
Object.values(객체명) // 객체의 값만 배열로 반환
Object.entries(객체명) // 객체의 [키, 값] 쌍을 배열로 반환

let book1 = {
	title : "웹 표준의 정석",
	page : 648,
	buy : function() {
		console.log("이 책을 구입");
	}
}
let keys = Object.keys(book1);
console.log(keys);
let values = Object.values(book1);
console.log(values);
let entries = Object.entires(book1);
console.log(entries)

---

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

프로토타입

• 자바스크립트 객체) 객체를 만들어 내는 원형
• 모든 객체는 프로토타입 가지고 O, 프로토타입 -> 프로퍼티, 메서드 상속 받음
• 속성, 메소드 -> 각 객체 인스턴스 X 객체 생성자의 prototype 속성에 정의 O
• 프로토타입 체인
  • Object.prototype
    • <- String.prototype <- String instance
    • <- Number.prototype <- Number instance
    • <- Data.prototype <- Data instance
• 모든 객체는 자신의 부모 역할을 하는 객체와 연결
  부모 역할을 하는 객체: 프로토타입
• ex. [[Prototype]]: Array(0)
  • [[Prototype]] 속성: arr 객체가 어디서부터 온 것인지 알려주는 속성
  • arr 배열의 프로토타입: Array 객체/ arr 배열은 Array 객체의 프로퍼티, 메서드 상속 받음
  • Array 객체를 arr 배열의 프로토타입(prototype)이라고 함

---

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

생성자 함수 선언하는 순간 자동으로 프로토타입 객체가 만들어짐

const Book = function (title, pages, done) {
...
}

const book1 = new Book("웹 표준의 정석", 648, false);

• Book 객체의 프로토타입 Book.prototype
  • {constructor: f}
    // Book의 프로토타입: 프로토타입 객체
    • constructor: f Book{title, pages, done = false}
    • [[Prototype]] : Object
      // 프로토타입 객체의 프로토타입: Object 객체
• 인스턴스 객체 book1의 프로토타입 book1
  • 생성자 함수 Book() ~> 만들어진 객체
  • -> book1 객체의 프로토타입: Book 프로토타입 객체
  • -> book1 객체에서 Book() 함수에 있는 pages 프로퍼티를 사용할 수 있음

---

__proto__와 prototype

모든 객체가 가지고 있는 프로퍼티

• __proto__프로퍼티
  
  • 인스턴스 객체에서 자신에게 연결된 프로토타입 객체 확인할 때 사용
  • book1.__proto__ : book1에 연결된 프로퍼티 객체는 Book 객체임을 확인
• prototype 프로퍼티
  
  • 프로토타입에서 자기 자신을 확인할 때 사용
  • 이 객체가 어떤 생성자 함수 사용했는지, 어떤 프로퍼티와 메서드 가지는지 등의 정보 확인할 수 있음
  • Book.prototype

---

프로토타입 메서드

생성자 함수 밖에서 프로토타입 사용 -> 새로운 메서드 정의할 수 있음

function newBook (title, pages, done) {
	this.title = title;
    this.paegs = pages;
    this.done = done;
}

newBook.prototype.finish = function() {
	this.done === false ? str = "읽는 중" : str = "완독";
    return str;
}

const nBook1 = new newBook("웹 표준의 정석", 648, false);
const nBook2 = new newBook("점프 투 파이썬", 360, true);

---

프로토타입 상속

기존 객체명.call(this, 프로퍼티)
Object.setPrototypeOf(하위 객체, 상위 객체)

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

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

// Book 객체를 상속하는 Textbook 객체
function Textbook(title, price, major) {
	Book.call(this, title, price); // Book 객체 재사용
	this.major= major;    // 새로운 프로퍼티
}

extbook.prototype.buyTextbook= function() {
	console.log(`${this.major} 전공 서적, ${this.title}을 구매했습니다.`);
}

Object.setPrototypeOf(Textbook.prototype, Book.prototype);

---

클래스 상속

super()

• 부모 클래스 생성자, 메서드 호출하는데 사용하는 메소드
• 부모 클래스의 생성자를 물려받거나, 부모 클래스의 메소드 오버라이딩할 때 사용
  메소드 오버라이딩(method overriding)
  : 서브 클래스/ 자식 클래스 -> 슈퍼 클래스/ 부모 클래스 중 하나에 의미 제공된 메서드를 특정한 형태로 구현하는 것
  / 메서드 새로 만드는 것 X, 내용만 새로 작성하는 것 O -> 선언부 부모와 일치해야 함(이름, 매개변수, 반환 타입)

class 새 클래스명 extends 기존 클래스명
super(프로퍼티)

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

const book1 = new BookC("자료 구조", 15000);
book1.buy();

// BookC 클래스를 상속하는 TextbookC 클래스
class TextbookCextends BookC {
	constructor(title, price, major) {
 		super(title, price); // 기존 클래스의 프로퍼티 재사용
		this.major = major;   // 새로운 프로퍼티
	}
 	buyTextbook() {   // 새로운 메서드
	console.log(`${this.major} 전공 서적, ${this.title}을 구매했습니다.`);
	}
}

---

출처

Do it! 모던 자바스크립트 프로그래밍의 정석