객체
자바스크립트 객체
내장 객체
자바스크립트에서 자주 사용돼서 미리 정의해 둔 객체
문서 객체 모델 (DOM = Document Object Model)
HTML 문서를 자바스크립트로 제어할 수 있도록 만든 구조(트리 구조)
웹 브라우저 객체
웹 브라우저 자체를 제어할 수 있도록 만든 객체
사용자 정의 객체
미리 정의된 객체 뿐 아니라 사용자가 필요할 때마다 객체를 정의해서 사용 가능
사용자 정의 객체
프로퍼티는 '키:값' 형태를 갖고 있음
프로퍼티 값이 함수일 경우 '메서드'라고 부름
키:값
객체명{
키1:값1,
키2:값2,
키3:값3,
...
}
객체 선언하기
let book = {
title : "스트렝스 훈련"
pages : 500
}
객체 프로퍼티 접근
book.title /* 점 표기법, 큰 따옴표 필요 없음 */
book["title"] /* 괄호 표기법, 큰 따옴표 필요 */
프로퍼티 수정하고 추가
객체명.키 = 값
book.author = "구턴"
빈 객체 생성
빈 객체 생성 방법 2가지
let book = {}
let book = new Object()
프로퍼티 삭제
delete 객체명.키
delete book.author
프로퍼티 키는 그대로 두고, 값만 제거하고 싶을 때는 아래와 같이
book.author = undefined
객체 중첩
객체 안에 객체
let student = {
name : "구턴",
score : {
math : 100,
science : 98,
average : function () {
return (this.math + this.science) / 2
}
}
}
student.score.math
student.score.average()
객체 메서드 정의
메서드명 : function() {
...
}
book에 buy라는 메서드 정의
let book = {
title : "스트렝스 훈련",
pages : 500,
buy : function(){
console.log("책 구입");
}
}
에크마스크립트 2015에서는 function이라는 예약어 생략 가능
let book = {
title : "스트렝스 훈련",
pages : 500,
buy(){
console.log("책 구입");
}
}
this
메서드에서 객체 안에 있는 프로퍼티를 사용해야 할 때 유용
let book = {
title : "스트렝스 훈련",
pages : 500,
done : false,
finish : function() {
this.done === false ? console.log("읽는 중") : console.log("완독");
}
}
객체 복사
🎯 객체를 복사할 경우에는 값이 아니라 값이 저장된 메모리 주소가 전달됨.
✅ 따라서 복사된 객체의 값을 변경하면 원본 값도 변경됨
생성자와 클래스
생성자
✅ 생성자
객체의 틀을 만들 때 사용하는 함수
✅ 인스턴스
생성자 함수를 사용해서 만든 객체
생성자 함수 정의
function 함수명(매개변수) {
this.키1 = 값1,
this.키2 = 값2,
...
this.메서드1 = function() {...},
this.메서드2 = function() {...},
...
}
혹은 아래와 같이 표현식 사용도 가능함
const 함수명(매개변수) = function() {
...
}
👨🏫 생성자 함수 첫 글자는 대문자로!
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 예약어를 사용해 인스턴스 만들기
생성자 함수는 객체가 아니라 객체를 만들 수 있는 틀일 뿐입니다.
객체를 만들려면 new라는 예약어를 사용합니다.
const book1 = new Book("스트렝스 기초", 500, false);
const book2 = new Book("스쿼트의 정석", 180, true);
클래스
✅ Syntactic Sugar (신택틱 슈거: 설탕을 살짝 바른 구문)
자바스크립트의 클래스는 생성자 함수를 좀 더 표현하기 쉽게 바꾼 클래스임
클래스 선언
class 클래스명 {
constructor(){
프로퍼티1,
프로퍼티2,
...
}
메서드1() {...}
메서드2() {...}
}
혹은 다음 표현식 사용도 가능
const 클래스명 = class {
...
}
class Book {
constructor(title, pages, done = false) {
this.title = title;
this.pages = pages;
this.done = done;
}
finish() {
let str;
this.done === false ? (str = "읽는 중") : (str = "완독");
return str;
}
}
const book1 = new Book("스트렝스 기초", 500, false);
const book2 = new Book("스쿼트의 정석", 180, true);
객체의 키와 값
객체에 있는 프로퍼티와 값을 탐색해 봅시다.
for...in
for(변수 in 객체) {
...
}
let bag = {
type : "backpack",
color : "blue",
size : 15
}
for (key in bag){
console.log(`${key}`); /* type, color, size 같은 키가 반환됨 */
}
for (key in bag){
console.log(`${key} : ${bag[key]}`); /* type : backpack, color : blue, size : 15 */
}
Object 객체 메서드 - keys(), values(), entries()
Object.keys(객체명) // 키만 반환
Object.values(객체명) // 값만 반환
Object.entries(객체명) // [키, 값] 반환
let book = {
title : "스트렝스 기초",
pages : 500,
buy : function(){
console.log("구매 완료");
}
}
let keys = Object.keys(book);
console.log(keys);
let values = Object.values(book);
console.log(values);
let entries = Object.entries(book);
console.log(entries);
프로토타입과 클래스 상속
✅ 자바스크립트에서는 객체간 상속을 위해 프로토타입을 사용
프로토타입
JavaScript에서 상속을 구현하는 방식
객체가 다른 객체의 속성과 메서드에 접근할 수 있도록 연결해주는 링크
✅ 배열의 프로토타입 = Array 객체
✅ 숫자의 프로토타입 = Number 객체
✅ 문자열의 프로토타입 = String 객체
생성자 함수와 프로토타입 객체
사용자가 정의한 class로 strengthBook이라는 객체를 만들었습니다.
객체의 프로토타입을 확인해 보니까 Object라고 되어 있고, 생성자가 class Book입니다.
즉, Book 프로토타입 객체라는 뜻입니다.
🎯 상속 (Inheritance)
어떤 객체가 다른 객체의 속성(프로퍼티)이나 기능(메서드)을 물려받아 사용할 수 있는 것
JavaScript에서는 프로토타입을 통해 상속이 이루어짐
예: strengthBook은 Book 클래스에서 만들어졌기 때문에 Book의 기능을 사용할 수 있음
__proto__와 prototype 프로퍼티
✅ __proto__
객체의 프로토타입을 가리킴
모든 객체가 가지고 있는 숨겨진 프로퍼티
해당 객체가 상속받는 부모 프로토타입 객체를 참조
✅ prototype
생성자 함수나 클래스가 갖고 있는 프로퍼티
생성자 함수나 클래스에 정의된 프로퍼티나 메서드가 인스턴스에 상속됨
프로토타입 메서드
프로토타입을 사용해서 메서드 정의하기
function newBook (title, pages, done) {
this.title = title;
this.pages = pages;
this.done = done;
}
newBook.prototype.finish = function() {
this.done === false ? str = "읽는 중" : str = "완독";
return str;
}
const nBook1 = new newBook("스트렝스 기초", 500, false);
const nBook2 = new newBook("스쿼트의 정석", 180, true);
이처럼 프로토타입 메서드를 사용해서 함수를 정의하면, 처음에 객체를 처음 설계할 때 모든 함수를 다 알고 있을 필요가 없다.
🎯 프로토타입 메서드를 사용하면 객체가 생성된 이후에도 공통 메서드를 동적으로 추가할 수 있습니다.
✅ 생성자 상속
기존 객체명.call(this, 프로퍼티 or 메서드)
프로퍼티만 상속, 메서드는 따로 prototype 연결 필요
✅ 프로퍼티 연결
Object.setPrototypeOf(하위 객체, 상위 객체)
/* 프로토타입을 이용해서 메서드 정의해 보겠습니다. */
function Book (title, price) {
this.title = title;
this.price = price;
}
Book.prototype.buy = function() {
console.log(`${this.title}을(를) ${this.price}에 구매했습니다.`);
}
const book1 = new Book("세이노의 가르침", 6480);
book1.buy();
/* 앞서 정의한 Book을 상속 받아서 TextBook 객체를 작성해 보겠습니다. */
function TextBook (title, price, section){
Book.call(this, title, price); /* Book의 프로퍼티 재사용 */
this.section = section; /* 새 프로퍼티 */
}
TextBook.prototype.buyTextBook = function() {
console.log(`${this.section} 분야, ${this.title}을 ${this.price}에 구매했습니다.`);
}
/* TextBook의 프로토타입을 Book 프로토타입에 연결합니다. */
Object.setPrototypeOf(TextBook.prototype, Book.prototype);
/* TextBook의 객체를 생성해 보겠습니다. */
const book2 = new TextBook("데일 카네기 인간관계론", 10350, "인문학");
book2.buyTextBook(); /* 새로 선언한 메서드 */
book2.buy(); /* 상속 받은 메서드 */
✅ 클래스 상속
class 새 클래스명 extends 기존 클래스명
프로퍼티 + 메서드 모두 상속
✅ 생성자 상속
super(프로퍼티)
부모 생성자 호출
/* 클래스 선언 */
class Book {
constructor(title, price){
this.title = title;
this.price = price;
}
buy(){
console.log(`${this.title}을(를) ${this.price}에 구매했습니다.`);
}
}
const book1 = new Book("세이노의 가르침", 6480);
book1.buy();
/* extends를 사용한 상속 */
class TextBook extends Book{
constructor(title, price, section){
super(title, price); /* 부모 클래스 생성자 호출 */
this.section = section;
}
buyTextBook(){
console.log(`${this.section} 분야, ${this.title}을 ${this.price}에 구매했습니다.`);
}
}
const book2 = new TextBook("데일 카네기 인간관계론", 10350, "인문학");
book2.buyTextBook();
book2.buy();
끝
'JavaScript' 카테고리의 다른 글
| HTTP 통신과 JSON (0) | 2025.04.22 |
|---|---|
| 배열과 객체 (0) | 2025.04.10 |
| Javascript의 내장 객체 (0) | 2025.03.27 |
| DOM 활용 (0) | 2025.03.26 |
| 이벤트 (0) | 2025.03.23 |