5주차 스터디 자바스크립트 객체 지향 기본기 (1) [코드잇 부스트 백엔드 스터디 ]

 

 

 

<자바스크립트 객체 지향 기본기>

 

1. 객체와 클래스 

 

객체 지향 프로그래밍이란?

 

 

객체 간의 상호작용을 중심으로 하는 프로그래밍

 

 

객체

• 객체의 상태를 나타내는 변수

• 객체의 행동을 나타내는 함수

 

ex) 유저 - 변수: 유저의 아이디, 유저의 생일 / 함수: 좋아요, 상품 구매

 

 

 

 

 

💡객체 지향 프로그래밍

→ 프로퍼티와 메소드로 이루어진 각 객체들의 상호 작용을 중심으로 코드를 작성하는 것

 

 

절차 지향 프로그래밍

→ 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것

 

 

 

객체 만들기 1-1 : Object-Literal

 

Object Literal

• 객체를 나타내는 문자열

 

const user= {
  email : 'chris123@google.com', //프로퍼티 
  birthdate: '1992-03-21',

  buy(item){
    console.log(`${this.email} buys ${item.name}`); // this는 현재 객체인 user 객체 자체를 의미
  }//메소드
};//object Literal (객체를 나타내는 문자열)


const item ={
  name: '스웨터',
  price: 30000,
};

console.log(user.email);
console.log(user.birthdate);
user.buy(item);

 

 

 

☑️실행 결과

 

 

 

객체 만들기 1-2 : Factory function

 

Factory function

• 객체를 생성하는 방식으로 자주 사용된다

 

 

function createUser(email, birthdate){
  const user= {
    email : email, //이름이 같으면 생략해도 괜찮음 
    birthdate: birthdate,
  
    buy(item){
      console.log(`${this.email} buys ${item.name}`); 
    }
  };
 return user;

}

const item ={
  name: '스웨터',
  price: 3000,

}

const user1 = createUser('chris123@google.com','1992-03-21');
const user2 = createUser('jerry99@google.com','1997-07-19');
const user3 = createUser('alice@google.com','1993-12-24');

console.log(user1.email);
console.log(user2.email);
console.log(user3.email);

user1.buy(item);
user2.buy(item);
user3.buy(item);

 

 

 

객체 만들기 2 : Constructor function

 

Constructor function

• 객체를 생성하는 함수 (생성자 함수)

• 객체를 생성하려면 new를 붙여서 호출해야함

• 함수의 이름 중 첫 번째 알파벳을 보통 대문자로 적어준다

 

 

function User(email, birthdate){
    this.email = email, // this는 생성되는 객체를 가리킴 
    this.birthdate= birthdate,
    this.buy= function(item){
      console.log(`${this.email} buys ${item.name}`); 
    };
}

const item ={
  name: '스웨터',
  price: 3000,

}

const user1 = new User('chris123@google.com','1992-03-21'); // 객체 생성 
const user2 = new User('jerry99@google.com','1997-07-19');
const user3 = new User('alice@google.com','1993-12-24');

console.log(user1.email);
console.log(user2.email);
console.log(user3.email);

console.log(user1.birthdate);
console.log(user2.birthdate);
console.log(user3.birthdate);

user1.buy(item);

 

 

☑️실행결과 

 

객체 만들기 3: Class

 

class로 객체 생성 

 

class User{

   constructor(email, birthdate){ // 생성자 
    this.email = email;
    this.birthdate= birthdate; // this는 생성되는 객체를 나타낸다 
   }// constructor 안에 프로퍼티를 쓴다 

   buy(item){
    console.log(`${this.email} buys ${item.name}`); 
  }//메소드는 따로 분리 

}

const item ={
  name: '스웨터',
  price: 3000,

}

const user1 = new User('chris123@google.com','1992-03-21');


console.log(user1.email);
console.log(user1.birthdate);
user1.buy(item);

 

 

---

 

객체 만들기 정리 

 

1. Object literal과 Factory function 사용하기

 

function createUser(email, birthdate) {
  const user = {
    email,
    birthdate,
    buy(item) {
      console.log(`${this.email} buys ${item.name}`);
    },
  };
  return user;
}

const user1 = createUser('chris123@google.com', '19920321');
const user2 = createUser('jerry99@google.com', '19950719');
const user3 = createUser('alice@google.com', '19931224');

 

• 객체를 생성하는 Factory function을 만들고, 그 안에서 Object literal로 객체를 생성하여 리턴하는 방법

 

 

 

2. Constructor function 사용하기

 

function User(email, birthdate) {
  this.email = email;
  this.birthdate = birthdate;
  this.buy = function (item) {
    console.log(`${this.email} buys ${item.name}`);
  };
}

const user1 = new User('chris123@google.com', '1992-03-21');
const user2 = new User('jerry99@google.com', '1995-07-19');
const user3 = new User('alice@google.com', '1993-12-24');

• 객체를 생성하는 용도로 사용하는 Constructor function을 정의하고, 그 안에서 this 키워드를 사용하여 생성될 객체의 프로퍼티와 메소드를 설정하는 방법

 

💡Constructor function으로 객체를 생성하려면 그 앞에 new를 붙여서 실

 

 

3. class 키워드 사용하기

 

class User {
  constructor(email, birthdate) {
    this.email = email;
    this.birthdate = birthdate;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);
  }
}

const user1 = new User('chris123@google.com', '1992-03-21');
const user2 = new User('jerry99@google.com', '1995-07-19');
const user3 = new User('alice@google.com', '1993-12-24');

 

• class 키워드를 사용해서 객체의 틀을 정의하고, 마찬가지로 그 앞에 new를 붙여서 객체를 생성하는 방법