1. 객체
- 객체란 이름(name)과 값(value)로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. 자바스크립트에서는 숫자(number), 문자열(string), 불리언(boolean), underfined 타입을 제외한 모든 것이 객체다.
- 프로퍼티(property)란 객체의 상태를 나타내는 값이며, 메소드는 프로퍼티를 참조하고 조작할 수 있는 동작이다.
- 콤마(,)로 구분되는 것들을 객체의 속성이라고 부른다.
- 속성은 키와 값이 있다. 키와 값은 키: 값의 관계로 이루어져 있으며, 키는 속성명이고, 값은 속성값이다.
- 속성값은 어떤 값이든 상관없다. 숫자, 문자열, 함수 등이 있다.
- 객체가 보유한 값을 '프로퍼티'이며, 객체가 보유한 함수를 '메소드'라고 부른다.
- 객체 생성 방식으로 객체 리터럴 방식(Object Literal), 생성자 방식(Constructor), object.create() 방식이 있다.
2. 객체 리터럴 방식(Object Literal)
var list = {
nickname: 'pterosaurs',
age: 10,
all: function(){
return `별명은 ${this.nickname}, 나이는 ${this.age}`;
}
};
console.log(list);
- 객체 리터럴 방식은 중괄호({})를 이용해서 객체를 생성한다.
- {} 안에 아무것도 적지 않은 경우는 빈 객체가 생성된다.
- nickname: 'pterosaurs' 와 age: 10 라는 두 개의 속성이 있다. 속성끼리는 쉼표로 구분한다.
- 위 코드에서 nickname, age는 '프로퍼티'이며, all은 '메소드'이다.
3. 생성자 방식(Constructor)
2-1 new Object()
var list = new Object();
list.nickname = 'pterosaurs';
list['age'] = 10;
list.all = function(){
return `이름은 ${this.nickname}, 나이는 ${this.age}`;
}
console.log(list);
- new 연산자를 통하여 object객체의 생성자 함수를 호출한다.
2-2 new 생성자()
var list = new String('pterosaurs');
console.log(list);
- String 말고도 Number, Array 등을 생성할 수 있다.
2-3 new 사용자 정의 생성자()
var list = {
nickname: 'pterosaurs',
age: 10,
all: function(){
return `별명은 ${this.nickname}, 나이는 ${this.age}`;
}
};
console.log(list);
- 직접 생성자 함수를 만들어 객체를 생성한다.
4. Object.create() 방식
- 프로토타입(prototype)에 대한 개념이 필요하므로 생략한다.
5. 프로퍼티 / 메소드 접근 방법
- 객체.key 또는 객체['key] 방식으로 접근한다. 메소드는 마지막에 괄호()를 입력해야 한다.
2-3-1 객체.key 접근
var list = {
nickname: 'pterosaurs',
age: 10,
all: function(){
return `별명 : ${this.nickname} 나이 : ${this.age}`;
}
}
list.nickname;
list.age;
list.all;
2-3-2 객체['key'] 접근
var list = {
nickname: 'pterosaurs',
age: 10,
all: function(){
return `별명 : ${this.nickname} 나이 : ${this.age}`;
}
}
list['nickname'];
list['age'];
list['all']();
'FrontEnd > Javascript' 카테고리의 다른 글
[Javascript] 함수(function) (0) | 2021.08.07 |
---|---|
[Javascript] 배열(array) (0) | 2021.08.06 |
[Javascript] 반복문 (0) | 2021.08.04 |
[Javascript] 조건문 (0) | 2021.08.04 |
[Javascript] 산술 연산자, 대입 연산자, 증감 연산자, 기타 연산자 (0) | 2021.08.03 |