JavaScript
[JS기초] 객체와 클래스
염두리안
2024. 11. 10. 23:34
728x90
반응형
- 객체 지향 프로그래밍? 객체 간의 상호작용을 중심으로 하는 프로그래밍 | 오늘날 많이 사용하는 방법
- 객체? 실제 존재하는 무언가
- 변수 : 객체의 상태를 나타냄(프로퍼티)
- 함수 : 객체의 행동을 나타냄(메소드)
- 절차 지향 프로그래밍 : 변수와 함수를 가지고 작업 순서에 맞게 코드를 작성하는 것 | 이전까지는 이 형태를 사용
- 객체? 실제 존재하는 무언가
- Object Literal : 객체를 나타내는 문자열
// 중괄호를 쓰고 그 사이에 프로퍼티와 메서드를 넣음
const user = {
email : 'duran@gmail.com',
birthdate : '1999-11-10',
buy(item){
console.log(`${this.email} buys ${item.name}`);
},
}
- Factory function : 객체를 생성해서 리턴하는 함수
function createUser(email, birthdate) {
const user = {
// 프로퍼티와 파라미터 이름이 같다면, 파라미터 생략 가능
email,
birthdate,
buy(item) {
console.log(`${this.email} buys ${item.name}`);
},
};
return user;
}
const item = {
name: '스웨터',
price: 300000,
};
const user1 = createUser('hello1@google.com', '1992-03-21');
const user2 = createUser('bye222@google.com', '1995-07-19');
console.log(user1.email); // hello1@google.com
console.log(user2.email); // bye222@google.com
user1.buy(item); // hello1@google.com buys 스웨터
user2.buy(item); // bye222@google.com buys 스웨터
- Constructor Function : 생성자 함수
- 기억해야 할 점
- constructor 객체를 생성하려면 new를 붙여 호출해야 함
- 객체를 생성하는 함수는 이름 앞을 대문자로 시작하는 게 규칙
- this 키워드 : constructor를 생성할 수 있는 해당 객체
- 기억해야 할 점
// 객체를 생성하는 함수 = Constructor Function
function User(email, birthdate) {
this.email = email;
this.birthdate = birthdate;
this.buy = function (item) {
console.log(`${this.email} buys ${item.name}`);
};
}
const item = {
name: '스웨터',
price: 300000,
};
const user1 = new User('christ1234@google.com', '1992-03-21');
console.log(user1.email); // christ1234@google.com
console.log(user1.birthdate); // 1992-03-21
user1.buy(item); // christ1234@google.com buys 스웨터
- Class : 좀 더 직관적이고, 객체 지향 할 수 있게 도와줌
- 보통 클래스에선 프로퍼티들은 constructor 안에, 메서드들은 그 밖에서 사용
class User {
constructor(email, birthdate) { // 생성자
this.email = email; // (매번) 생성되는 객체들
this.birthdate = birthdate;
}
buy(item) { // 메서드
console.log(`${this.email} buys ${item.name}`);
}
}
const item = {
name: '스웨터',
price: 300000,
};
// new를 붙여 객체 생성
const user1 = new User('christ1234@google.com', '1992-03-21');
console.log(user1.email); // christ1234@google.com
console.log(user1.birthdate); // 1992-03-21
user1.buy(item); // christ1234@google.com buys 스웨터
728x90
반응형