티스토리 뷰
지금 코드에서 user 객체를 하나 더 만들어 보겠습니다.
const user1 = {
email: 'chris123@google.com',
birthdate: '1992-03-21',
buy(item) {
console.log(`${this.email} buys ${item.name}`);
},
}
const user2 = {
email: 'jerry@google.com',
birthdate: '1997-07-19',
buy(item) {
console.log(`${this.email} buys ${item.name}`);
},
}
그냥 user 하나를 추가했을 뿐인데 코드의 양이 확 늘어났죠?
지금도 이런데 만약 수십 수백 개의 객체를 생성해야 한다면 작성해야 할 코드의 양이 정말 많아지겠죠?
이 문제를 해결할 수 있는 방법이 없을까요?
function createUser(email, brithdate) {
const user = {
email: email,
birthdate: birthdate,
buy(item) {
console.log(`${this.email} buys ${item.name}`);
}
}
return user;
}
const item = {
name: '스웨터',
price: 30000,
};
const user1 = createUser('chris123@google.com','1992-03-21')
const user2 = createUser('jerry@google.com','1995-07-19')
const user3 = createUser('alice@google.com','1993-12-24')
console.log(user1.email); // chris123@google.com
console.log(user2.email); // jerry@google.com
console.log(user3.email); // alice@google.com
user1.buy(item); // chris123@google.com buys 스웨터
user2.buy(item); // jerry@google.com buys 스웨터
user3.buy(item); // alice@google.com buys 스웨터
createUser 라는 함수를 정의하고 email 파라미터와 birthdate 파라미터를 두었습니다.
그리고 함수 안에서는 하나의 user 객체를 Object Literal로 생성하고 email 파라미터와 birthdate 파라미터로 전달받은 값을 그대로 똑같은 이름의 프로퍼티 값으로 대입했는데요. 그리고 마지막으로 이렇게 생성한 user 객체를 그대로 return하고 있습니다.
그리고 여기 있는 코드의 마지막 줄을 보면 이 createUser 함수를 사용해서 user1 객체를 생성한 것을 볼 수 있습니다.
만약 여기서 또 user 객체가 필요하다면 careateUser 함수를 또 호출하면 됩니다.
이렇게 생성할 user의 e-mail과 생일 정보를 createUser 함수에 넣고 실행하면 되는 겁니다.
지금, 이 createUser 함수처럼 객체를 생성해서 return하는 함수를 Factory Funtion이라고 합니다.
Factory는 공장이라는 뜻으로 마치 공장에서 물건을 찍어내듯이 객체를 만들어낸다는 의미에서 Factory Function이라고 하는 겁니다. 이렇게 Factory Function을 사용하면 객체를 조금 더 편하게 만들 수 있습니다.
그러면 이러한 객체들이 잘 생성되었는지 확인해보기 위해서 일단 먼저 item 객체를 생성하고 e-mail 주소를 출력하는 코드와 buy 메소드를 사용하는 코드를 추가하고 그 실행 결과를 확인해볼게요. 그리고 buy 메소드를 사용해 보겠습니다. 그리고 실행을 해보면 각각의 user 객체에 e-mail 주소가 잘 나오고 buy 메소드도 잘 호출된 것을 확인할 수 있습니다.
Factory Function은 객체를 생성하는 방식으로 자주 활용됩니다. Factory Funtion 안에서 어떤 식으로 객체를 생성하고 return하는지 잘 기억해주세요.
지금 createUser 함수 안에서 user 객체를 생성하는 부분을 봅시다. 보면 email 프로퍼티와 email 파라미터, birthdate 프로퍼티와 birthdate 파라미터 이렇게 프로퍼티와 파라미터의 이름이 같을 때에는 값을 대입하는 부분을 아예 생략해도 됩니다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
[객체와 클래스] 05. 객체 만들기 3: Class (0) | 2022.11.04 |
---|---|
[객체와 클래스] 04. 객체 만들기 2: Constructor function (0) | 2022.11.04 |
[객체와 클래스] 01. 객체 지향 프로그래밍이란? (0) | 2022.11.03 |
[인터랙티브 자바스크립트] 11. 이벤트와 버튼 클릭 (0) | 2022.11.02 |
[인터랙티브 자바스크립트] 10. css 선택자로 태그 선택하기 (0) | 2022.11.02 |
- Total
- Today
- Yesterday
- 얕은복사
- 동적(dynamic) 언어
- foreach
- redux-thunk
- 기본형 데이터
- 불변 객체
- some
- redux middleware
- null
- 느슨한 타입(loosely typed)
- filter
- 타입변환
- find
- 참조형 데이터
- map
- 비교 연산자
- redux
- redux thunk
- redux-middleware
- undefined
- findindex
- EVERY
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |