티스토리 뷰
기존에는 함수로 객체를 생성했다면, ES6(ES2015)부터는 클래스를 통해 객체를 생성한다. 함수로 객체를 생성하는 방법부터 클래스로 객체를 생성하는 방법까지 단계별로 알아보도록 하겠다.
1. 공장 함수 (Factory function)
어떤 함수가 객체를 반환할 때, 이 함수를 공장 함수 혹은 팩토리 함수라고 부른다. 객체를 찍어내는 형태이기 때문에 붙은 이름이다.
1
2
3
4
5
6
7
8
9
10
|
function createInfo() {
return {
type: 'fruit',
name: 'apple',
color: 'red',
};
}
console.log(createInfo());
// {type: 'fruit', name: 'apple', color: 'red'}
|
cs |
다른 함수처럼 매개변수를 활용하여 객체를 변경 후 반환할 수 있다. 이때 생성된 세 개의 객체는 각각 새로 생성되었기 때문에 서로 참조하지 않는다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function createInfo(type, name, color) {
return { type, name, color };
}
const info1 = createInfo('fruit', 'apple', 'red');
const info2 = createInfo('fruit', 'banna', 'yellow');
const info3 = createInfo('fruit', 'kiwi', 'green');
console.log(info1);
// {type: 'fruit', name: 'apple', color: 'red'}
console.log(info2);
// {type: 'fruit', name: 'banna', color: 'yellow'}
console.log(info3);
// {type: 'fruit', name: 'kiwi', color: 'green'}
|
cs |
2. 생성자 함수(Constructor function)
유사한 객체를 여러 개 생성해야 할 때, 팩토리 함수처럼 각각 생성해야 할까? 생성자 함수를 활용하면 유사한 객체를 더 쉽고 간단하게 만들 수 있다.
생성자 함수 관례
- 함수의 이름은 대문자로 시작한다.
- 함수 실행 시 반드시 앞에 'new'를 붙인다.
함수의 매개변수로 전달받은 값을 객체의 속성에 할당하기 위해 this라는 키워드를 사용한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
const staff1 = new Person('Mike', 25, 'M');
const staff2 = new Person('Jane', 31, 'W');
console.log(staff1); // Person {name: 'Mike', age: 25, gender: 'M'}
console.log(staff2); // Person {name: 'Jane', age: 31, gender: 'W'}
console.log(staff1.name); // Mike
console.log(staff2.age); // 31
|
cs |
staff1과 staff2라는 인스턴스(객체)를 생성하기 위해 Person이라는 생성자 함수를 활용하였다. 이와 같이 생성자 함수는 재사용할 수 있기 때문에 객체 생성이 쉬워진다.
생성자 함수 알고리즘
1
2
3
4
5
6
7
8
9
10
|
function Person(name, age, gender) {
// 1) this = {};
// 2) this에 프로퍼티 추가
this.name = name;
this.age = age;
this.gender = gender;
// 3) return this;
}
|
cs |
1) this에 빈 객체를 담아둔다.
2) 함수가 실행되면 this에 새로운 프로퍼티를 추가해 비어있던 this를 수정한다.
3) 수정된 this를 반환한다.
※ 프로퍼티: 멤버변수라고도 하며, 프로퍼티에는 객체에서 사용하는 정보와 결괏값이 저장된다.
반드시 new를 붙여 함수를 호출해야 하며, 붙이지 않을 경우 this가 window가 되기 때문에 원하는 결괏값을 얻을 수 없다.
3. 클래스(Classes)
ES6에서 추가된 클래스 문법은 서로 연관된 변수와 함수를 묶어주는 템플릿 역할을 한다. 생성자 함수를 더 편리하게 쓸 수 있도록 도입하였다. 객체 단위의 코드를 그룹으로 묶어주며 당연히 재사용이 가능하다.
class 키워드를 사용하여 클래스를 선언한 후, constructor 메서드 안에 코드를 작성하면 된다. 클래스명 앞에 new를 붙여서 호출하면 constructor 함수가 실행되면서, 객체가 반환된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
class Person {
constructor(name, age, gender, evaluation) {
this.name = name;
this.age = age;
this.gender = gender;
this.evaluation = evaluation;
}
}
const staff1 = new Person('Mike', 25, 'M', 50);
const staff2 = new Person('Jane', 31, 'W', 90);
console.log(staff1); // Person {name: 'Mike', age: 25, gender: 'M', evaluation: 50}
console.log(staff2); // Person {name: 'Jane', age: 31, gender: 'W', evaluation: 90}
|
cs |
'JavaScript' 카테고리의 다른 글
[Javascript] forEach(), for in 문, for of 문 특징과 비교 (0) | 2021.10.22 |
---|---|
[Javascript] 변수 var과 let 차이, var의 클로저(Closure) 이슈 (0) | 2021.10.22 |
[Javascript] 객체의 참조, 얕은 복사, 깊은 복사 (0) | 2021.10.19 |
[Javascript] JSON 객체 - parse(), stringify() 같이 사용하여 깊은 복사하기 (0) | 2021.10.18 |
[Javascript] e.preventDefault(), e.stopPropagation(), 이벤트 버블링(event bubbling) (0) | 2021.10.18 |