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
반응형