객체란? 👾
자바스크립트의 기본 타입(data type)은 객체(object)입니다.
객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.
프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.
자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다.
하지만 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 됩니다.
var person =
{
name: "홍길동", // 이름 프로퍼티를 정의함.
birthday: "030219", // 생년월일 프로퍼티를 정의함.
pId: "1234567", // 개인 id 프로퍼티를 정의함.
fullId: function() // 메소드 선언
{
return this.birthday + this.pId;
}
};person이라는 객체을 선언했습니다.
그럼 객체 내에 프로퍼티나 메소드을 어떻게 접근해야 할까요.
객체의 프로퍼티 참조
- 객체이름.프로퍼티이름
- 객체이름["프로퍼티이름"]
person.name // 홍길동
person["name"] // 홍길동객체의 메소드 참조
객체이름.메소드이름()
person.fullId() // 0302191234567
person.fullId; // function () { return this.birthday + this.pId; } 주의사항
메소드를 참조할 때, 메소드 명 뒤에 괄호을 붙이지 않으면,
메소드가 아닌 프로퍼티 그 자체을 참조하게 됩니다.
따라서 괄호를 사용하지 않고 프로퍼티 그 자체를 참조하게 되면
해당 메소드의 정의 그 자체가 반환됩니다.
객체 내 데이터을 참조 하는 법을 알았습니다.
그러면 객체을 생성하는 방법에는 어떤 것이 있을까요?
자바스크립트에서 객체를 생성하는 방법은 다음과 같습니다.
객체를 생성하는 방법 🐱👤
리터럴 표기(literal notation)
var 객체이름 =
{
프로퍼티1이름 : 프로퍼티1의값,
프로퍼티2이름 : 프로퍼티2의값,
필요한 만큼 생성...
};각각의 프로퍼티는 이름과 값을 콜론:으로 연결하고,
쉼표,를 사용해 다른 프로퍼티와 구분 합니다.
프로퍼티의 이름은 자바스크립트의 식별자(identifier)나 문자열을 사용할 수 있습니다.
var kitty =
{
name: "겨울이",
family: "사모예드",
age: 2,
weight: 3
};
document.write("우리 집 강아지의 이름은 " + kitty.name + "이고, 종은 " + kitty.family + "입니다.");생성자 함수(constructor function) 🧂
new 연산자를 사용하여 객체를 생성하고 초기화할 수 있습니다.
이때 사용되는 메소드를 생성자(constructor)라고 하며,
이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 합니다.
자바스크립트는 원시 타입을 위한 생성자를 미리 정의하여 제공합니다.
var day = new Date(); // new 연산자를 사용하여 Date 타입의 객체를 생성함.
document.write("올해는 " + day.getFullYear() + "년입니다.");자바스크립트에서 제공하는 생성자를 사용할 수도 있으며, 사용자가 직접 객체 생성자 함수(object constructor function)를 작성하여 사용할 수도 있습니다.
Object.create() 메소드
Object.create() 메소드를 이용하여 객체를 생성할 수도 있습니다.
Object.create() 메소드는 지정된 프로토타입(prototype) 객체와 프로퍼티를 가지고 새로운 객체를 만들어 줍니다.
따라서 이 메소드를 이용하면 사용자가 프로토타입 객체를 직접 명시할 수 있으므로, 상당히 유용합니다.
Object.create()
메소드의 첫 번째 인수로는 프로토타입으로 사용할 객체를 전달합니다.
두 번째 인수로는 새로운 객체의 추가할 프로퍼티 정보를 전달합니다.
var obj = Object.create(null,
{ // null 프로토타입을 사용하여 새로운 객체를 만들고
x: { value: 100, enumerable: true }, // x좌표를 나타내는 열거할 수 있는 프로퍼티와
y: { value: 200, enumerable: true } // y좌표를 나타내는 열거할 수 있는 프로퍼티를 추가함.
});
obj.x; // x좌표
obj.y; // y좌표
Object.getPrototypeOf(obj); // 객체의 프로토타입을 반환해 줌.
위에 3가지 방법으로 생성되 메모리에 대입된 객체를 인스턴스(instance)라고 합니다.
생성하는 법을 알아봤는데, Oject.create()에서는 프로토타입 객체라는 것으로 새 객체를 생성했습니다.
그러면 프로토타입이란 무엇일까요?
프로토타입(prototype) 🎶
프토토타입의 사전적 의미는 전형적인 예 , 기초 , 표준을 뜻합니다.
자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있습니다.
모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다.
이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며,
이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.
프로토타입이 새로운 객체을 구성하는데 있어서 기본 기틀,구성을 잡아주는 객체라는 것을 알았습니다.
그러면 상속이라는 개념은 무엇일까요?
상속이란 (inheritance)
새로운 클래스에서,
기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다.
-
상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있습니다.
-
또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있습니다.
이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 됩니다.
헌데...
하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 다르게,
자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어입니다.
프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다릅니다.
자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 합니다.
자, 그러면 이제 새 객체을 생성할 때,
기본적인 틀을 잡기 위해서,
프로로타입을 객체를 상속 해야하는 것도 알았습니다.
그런데, 상속에서는 객체 간의 관계가 형성 된다고 했습니다.
객체 간의 관계는 어떻게 형성이 되는 걸까요?
프로토타입 체인 (prototype chain)
자바스크립트에서는 객체 이니셜라이저를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입을 가집니다.
또한, new 연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 상속받습니다.
var obj = new Object(); // 이 객체의 프로토타입은 Object.prototype입니다.
var arr = new Array(); // 이 객체의 프로토타입은 Array.prototype입니다.
var date = new Date(); // 이 객체의 프로토타입은 Date.prototype입니다.하지만 Object.prototype 객체는 어떠한 프로토타입도 가지지 않으며, 아무런 프로퍼티도 상속받지 않습니다.
또한, 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 바로 Object.prototype 객체를 프로토타입으로 가집니다.
var date = new Date(); // 이 객체는 Date.prototype 뿐만 아니라 Object.prototype도 프로토타입으로 가집니다.위와 같이 프로토타입이 상속되는 가상의 관계를 프로토타입 체인(prototype chain)이라고 합니다.
Object.prototype 객체는 이러한 프로토타입 체인에서도 가장 상위에 존재하는 프로토타입입니다.
따라서 자바스크립트의 모든 객체는 Object.prototype 객체를 프로토타입으로 상속받습니다.
이번엔 프로토타입 자체를 생성해 객체를 생성해보겠습니다.
프로토타입의 생성
프로토타입을 생성하는 가장 기본적인 방법은 객체 생성자 함수(object constructor function)를 작성하는 것입니다.
생성자 함수를 작성하고 new 연산자를 사용해 객체를 생성하면, 같은 프로토타입을 가지는 객체들을 생성할 수 있습니다.
function Dog(color, name, age)
{ // 강아지에 관한 생성자 함수를 작성함.
this.color = color; // 색에 관한 프로퍼티
this.name = name; // 이름에 관한 프로퍼티
this.age = age; // 나이에 관한 프로퍼티
}
var myDog = new Dog("흰색", "겨울이", 2); // 이 객체는 Dog라는 프로토타입을 가짐.
document.write("우리 집 강아지는 " + myDog.name + "라는 이름의 " + myDog.color + " 털이 매력적인 강아지입니다.");주의사항
객체 생성자 함수를 작성할 때에는 관례상 이름의 첫 문자만을 대문자로 작성합니다.
프로토타입 객체을 생성해서, 프로토타입을 사용해서 새 객체를 만들었습니다. 그런데 이렇게 생성자로 생성한 객체에 프로퍼티나 메소드를 추가하고 싶으면 어떻게 해야할까요.
function Dog(color, name, age)
{
this.color = color;
this.name = name;
this.age = age;
}
var myDog = new Dog("흰색", "겨울이", 2);
//새로운 프로퍼티 추가
myDog.family = "사모예드";
//새로운 메소드 추가
myDog.breed = function()
{
return this.color + " " + this.family;
}
document.write("우리 집 강아지는 " + myDog.breed() + "입니다.");
이렇게 추가한 프로퍼티,메소드는 myDog 인스턴스에만 추가됩니다.
다른 Dog객체나 차후 생성되는 Dog 객체에 영향을 끼치지 않습니다.
이제 사용하던 프로토타입에 프로퍼티나 메소드을 추가해보겠습니다.
프로토타입 프로퍼티,메소드 추가
프로토타입에 새로운 프로퍼티나 메소드를 추가하는 것은 객체에 추가할 때와는 다른 방법을 사용해야 합니다.
프로토타입의 경우에는 생성자 함수에 직접 추가해야만 이후에 생성되는 모든 다른 객체에도 적용할 수 있습니다.
function Dog(color, name, age) {
this.color = color;
this.name = name;
this.age = age;
this.family = "사모예드"; // 프로토타입에 프로퍼티를 추가할 때에는 기본값을 가지게 할 수 있음.
this.breed = function() {
return this.color + " " + this.family;
};
}또는 prototype 프로퍼티를 이용하면 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있습니다.
function Dog(color, name, age) {
this.color = color;
this.name = name;
this.age = age;
}
// 현재 존재하고 있는 Dog 프로토타입에 family 프로퍼티를 추가함.
Dog.prototype.family = "사모예드";
// 현재 존재하고 있는 Dog 프로토타입에 breed 메소드를 추가함.
Dog.prototype.breed = function() {
return this.color + " " + this.family;
};직접 생성한 프로토타입은 위와 같이 새로운 프로퍼티나 메소드를 마음껏 추가하거나 삭제할 수 있습니다.
