자바스크립트는 객체 기반의 언어인 만큼 우리가 알고 있는 자바스크립트를 구성하는 원시 값을 제외한 거의 모든 것은 객체이다 (함수, 배열,등).
객체는 키(key)와 그 키에 대한 값(value)으로 구성되어 있는 0개 이상의 속성(property)으로 구성된 복합적인 자료 구조이다.
객체를 생성하기 앞서 인스턴스(Instance)에 대해서 짚고 넘어가자.
인스턴스(Instance)란 클래스(Class)에 의해 생성되어 메모리에 저장되는 실체를 뜻하며, 여기서 객체는 클래스와 인스턴스를 포함한 개념이고 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다. 그렇기에 인스턴스는 객체가 메모리에 저장되어 실제로 존재하는 것에 초점을 맞춘 용어이다.
→ 클래스 관련 내용은 추후에 다룰 것이기에 여기서는 인스턴스를 생성하기 위한 템플릿이라고만 알아두자.
✍ 객체 선언 방법
객체 만드는 방법은 다음과 같다.
- Object literal {key : value} : 객체 리터럴은 객체를 생성하기 위한 표기법을 뜻한다.
- 생성자 함수
- Object.create() 메서드
- 클래스 (ES6)
우선 여기서는 객체 리터럴 방식으로 객체를 만들어보자.
// PROPERTY
// key 값이 될 수 있는 것 - 문자, 숫자, 문자열, 심볼
// value 값이 될 수 있는 것 - 원시값, 객체(함수)
let wework = {
firstFloor : 'Emart-24',
secondFloor : 'Start-up',
thirdFloor : 'Wecode',
numOfMembers : 50
}
// 만약 key 값과 value 값이 동일하다면 다음과 같이 짧게 작업이 가능하다.
let name = 'HYUNSANG'
let age = 31
const profile = {name:name,age:age}
// const profile = {name,age} 로 간편하게 줄일 수 있음✍ 객체 속성 접근 법
wework.firstFloor // 'Emart-24' => Dot Notation
wework['secondFloor'] // 'Start-up' => Bracket Notation
// 한 가지 주의해야 할 것이, Bracket Notation으로 접근 시 key 값은 문자열로 작성해야 한다. → 정적으로 접근 할 경우 Dot Notation이 간편하지만 동적으로 접근 할 경우 (예를 들어, 함수), Bracket Notation 이 용이하다.
✍ 객체 속성 추가 및 삭제 방법
wework.open = '07:00 AM' // 추가 : key 값과 함께 값 부여
delete wework.open // 속성 삭제✍ 객체 내 함수 관리 방법
자바스크립트에서 함수는 일급 객체(추후 다룰 예정)이므로 값으로 취급 될 수 있어 위에서도 언급 하였 듯이 프로퍼티의 값으로 사용되어 다음과 같이 객체 내에 담을 수 있다. 그리고 객체 내 함수를 언급할 때는 일반적인 함수와 혼동하지 않기 위해 메서드라 칭한다.
→ 함수는 객체와 아주 밀접한 관계를 가지는데, 밑에서 생성자 함수와 같이 함수로 객체를 만들 수 있으며 함수 자체가 객체이기도 하다. 그렇기에 함수를 이해하기 위해서는 객체를 이해해야 한다.
const wework = {
firstClass : "CSS",
secondClass : "JavaScript",
show: function (){
console.log(`${this.firstClass} : WoW`); //객체 내 자기 자신의 속성에 접근할 때는 this
},
}
// or ES6 에서는 다음과 같이 메서드를 쓸 수 있다.
const wework = {
firstClass : "CSS",
secondClass : "JavaScript",
show(){
console.log(`${this.firstClass} : WoW`);
},
}
wework.show() // CSS : WoW✍️ 생성자 함수
중복된 형태의 객체를 생성할 때 생성자 함수를 사용 한다.
⇒ 속성과 자세한 내용은 다음에 함수내용을 다룰 때 더 자세히 알아볼 예정이다.
//예를 들어 2개의 객체가 다음과 같을 때;;
const wework = {
firstClass : "CSS",
secondClass : "JavaScript",
show(){
console.log(`${this.firstClass} : WoW`); //객체 내 자기 자신의 속성에 접근할 때는 this
},
}
const egoing = {
firstClass : "NodeJs",
secondClass : "Express",
show(){
console.log(`${this.firstClass} : Neat`); //객체 내 자기 자신의 속성에 접근할 때는 this
},
}
//중복되는 객체를 다음과 같은 생성자 함수로 바꿀 수 있다.
function Instructor(firstClass, secondClass) {
this.firstClass = firstClass;
this.secondClass = secondClass;
this.show = () => {
console.log(`${this.firstClass}: Wow`);
};
return this; // 자바스크립트 내에서 자동으로 처리해 주기 때문에 생략이 가능하다.
}
// wework와 egoing이라는 객체를 만들고 싶으면 다음과 같이 작업하면 된다.
const wework = new Instructor('CSS','JavaScript');
const egoing = new Instructor('NodeJs','Express');