📖 객체란?
변수) 데이터 값을 하나 밖에 저장하지 못함
객체) 데이터 값을 필요한 대로 만들어 사용할 수 있음
객체의 데이터) '이름: 값'의 쌍으로 이루어져 있음. 이것을 속성(Properties)이라고 함
- 변수에 {이름: 값, 이름: 값, ...}의 형태로 저장이 되면 변수는 객체가 됨
var 변수 = {name: '개감동', age: 6, nationality: '대한민국', ...};- 객체의 속성(Properties) : 프로퍼티(객체의 속성값을 저장함) & 메서드(객체의 함수)로 나뉨
var 변수 = {
name: '개감동', //프로퍼티
age: 6, //프로퍼티
printOut: function() { //메서드
},
...
};- 객체 : 사용자 정의 객체(사용자가 직접 정의) & 내장 객체(자바스크립트에서 제공)로 나뉨
| 객체의 분류 | 종류 | 설명 |
| 사용자 정의 객체 | - 객체 리터럴 - 객체 생성자 함수 - 클래스 (ECMAScript 2015(ES6)) |
사용자가 직접 정의해서 사용하는 객체 |
| 내장 객체 | - Number - String - Array - Math - Date - RegExp |
자바스크립트에서 제공해주는 객체 |
1. 사용자 정의 객체
객체 : '객체 리터럴(Object literal)' & '객체 생성자 함수(Object constructor function)'로 만들 수 있음
1) 객체 리터럴(Object literal)
- 객체 리터럴 : 중괄호{ }로 감싸진 하나 이상의 프로퍼티(Property; 속성) 이름과 프로퍼티 값의 리스트. 일반적으로 객체를 생성하는 방법
=====객체 리터럴 형식=====
var 변수 = {
프로퍼티: 값,
프로퍼티: 값,
메서드: function() {
},
...
};
console.log(변수.프로퍼티);
console.log(변수.메서드());
=====객체 리터럴 예시=====
var info = {
subject: 'css',
credit: 1,
printOut: function() {
return info.subject + ', ' + info.credit + '학점'; /*← 메서드 부분의 info는 자신의 객체를 의미. 이렇게 객체 안에서 '자신의 객체'를 의미할 때는 this 키워드를 사용할 수 있음*/
}
};
console.log(info.subject); //css
console.log(info.credit); //1
console.log(info.printOut()); //css, 1학점
=====this 키워드를 사용하여 메서드 작성해보기=====
info.subject + ', ' + info.credit + '학점'
→ this.subject + ', ' + this.credit + '학점'- '객체 리터럴'의 속성 추가 ・ 삭제 ・ 변경 방법
var info = {
subject: 'css',
credit: 1,
printOut: function() {
return this.subject + ', ' + this.credit + '학점';
}
};
info.days = 20; //속성 추가
console.log(info.days); //20
delete info.credit; //속성 삭제
console.log(info.credit); //undefined
info.printOut = function() { //속성 변경
return this.subject + ', ' + this.days + '일';
};
console.log(info.printOut()); //css, 20일- 심볼(Symbol) 데이터
- ECMAScript 2015 (ES6)에 새로 추가된 원시 데이터 타입
- '유일한 식별자'를 의미
- 동일한 객체의 속성명에 대한 충돌을 방지할 수 있음
- 심볼데이터의 속성명은 '[ ]'으로 표현
=====동일한 객체 속성명 충돌=====
var info = {
subjectName : '자바스크립트',
subjectName : '제이쿼리'
}
console.log(info.subjectName); //제이쿼리
/*subjectName의 속성명이 같기 때문에, 마지막 subjectName이 이전의 subjectName을 덮어쓰는 문제가 발생*/=====동일한 객체 속성명 충돌 방지(by 심볼 데이터)=====
var subjectName = Symbol();
var info = {
[subjectName] : '자바스크립트',
subjectName : '제이쿼리'
}
console.log(info[subjectName] + ', ' + info.subjectName); //자바스크립트, 제이쿼리
/*심볼 데이터([])를 이용하여 동일한 객체 속성명에 대한 충돌을 방지*/
2) 객체 생성자 함수(Object constructor function)
- 객체 리터럴(Object literal)을 사용하면 객체를 쉽게 만들 수 있음
- 하지만, 유사한 객체를 여러 개 만들어야 할 경우가 발생함(ex : 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우)
- 이 때, 'new' 연산자 & 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있음
- 객체 생성자 함수 : 일반 함수와 기술적인 차이는 없음. 다만 생성자 함수는 아래 두 관례를 따름
① 함수 이름의 첫 글자는 대문자로 시작
② 반드시 'new' 연산자를 붙여 실행함
③ Info 함수 안에 this는 함수를 통해 생성되는 객체를 의미
=====객체 생성자 함수 형식=====
function 함수(매개 변수1, 매개 변수2) {
this.프로퍼티 = 매개 변수1;
this.프로퍼티 = 매개 변수2;
this.메서드 = function() {
};
}
var 변수 = new 함수(매개 변수1 값, 매개 변수2 값);
=====객체 생성자 함수 예시=====
function Info(subject, credit) {
this.subject = subject;
this.credit = credit;
this.printOut = function() {
return this.subject + ', ' + this.credit + '학점';
};
};
var sub1 = new Info('html', 1);
console.log(sub1.subject); //html
console.log(sub1.credit); //1
console.log(sub1.printOut()); //html, 1학점
var sub2 = new Info('css', 2);
console.log(sub2.subject); //css
console.log(sub2.credit); //2
console.log(sub2.printOut()); //css, 2학점/*Info 함수 안에 this는 sub1 객체를 의미*/
var sub1 = new Info('html', 1);
/*Info 함수 안에 this는 sub2 객체를 의미*/
var sub2 = new Info('css', 2);- '생성자 함수'로 생성된 객체의 속성 추가 ・ 제거 ・ 변경 : 다른 객체의 속성에는 영향을 주지 X
- sub1 객체에 추가 ・ 제거 ・ 변경된 속성들 : sub1 객체에만 적용됨(sub2 객체's 속성에는 영향X)
- 속성의 추가 ・ 제거 ・ 변경을 모든 객체에 적용하려면 Info 함수 안의 속성들을 수정해야 함
function Info(subject, credit) {
this.subject = subject;
this.credit = credit;
this.printOut = function() {
return this.subject + ', ' + this.credit + '학점';
};
};
var sub1 = new Info('html', 1);
sub1.days = 20; //속성추가
console.log(sub1.days); //20
delete sub1.credit; //속성제거
console.log(sub1.credit); //undefined
sub1.printOut = function() { //속성변경
return this.subject + ', ' + this.days + '일';
}
console.log(sub1.printOut()); //html, 20일
var sub2 = new Info('css', 2);
console.log(sub2.days); //undefined
console.log(sub2.credit); 2
console.log(sub2.printOut()); //css, 2학점
출처 : ⎡반응형 웹 실전 프로젝트 가이드 (김광수, 조혜경)⎦