JS | 객체지향 프로그래밍 (Object Oriented Programming) 이해하기 - class, this, constructor, 추상화, 상속, super, 캡슐화, 객체와 인스턴스

 

원래라면 ....

let name = 'apple store'

let tv1 = {
  name: 'noona tv',
  price: 200,
  size: '56inch'
}

let tv2 = {
  name: 'ultra tv',
  price: 200,
  size: '27inch'
}

let tv3 = {
  name: 'grand tv',
  price: 200,
  size: '36inch'
}

// and so on ...

 

--> tv가 추가될 때 마다 하나하나 만들어야 된다고 ???? 너무 번거롭고 실수 확률도 너무 높아 ...

 

Class

객체의 설계도(like 작업지시서)

객체의 속성과 메서드를 정의함

TV를 만들 때는 name, price, size 속성이 반드시 필요하다는 것을 명시

class TV{ 
  constructor (name, price, size ) { 
    name = name // '이 클래스 안에 있는 name이야 !'
    price = price
    size = size
    }
  }

 

--> 여기서 문제는 'name = name' 이라고 하면 무엇을 의미하는지 명확하게 알 수 없음

 

this

자바스크립트에서 현재 객체를 참조하는 특별한 키워드

객체 지향 프로그래밍에서 this는 주로 생성자 함수나 메서드 내부에서 사용되어, 해당 객체의 속성이나 메서드에 접근하거나 수정할 때 사용됨

 

class TV{ 
  constructor (name, price, size ) { 
  // 클래스에 있는 속성들에 값을 초기화 시켜주는 함수, 생성자 함수
  // 값을 받아줄 수 있게 매개변수 넣어줌
    this.name = name // '이 클래스 안에 있는 name이야 !'
    this.price = price
    this.size = size
    }
  }

 

생성자 함수에서 this

this는 생성자 함수 내부에서 새로 생성되는 객체를 참조합니다. 생성자 함수는 객체를 초기화하는 역할을 하며, this를 사용하여 객체의 속성을 설정합니다.

class TV {
  constructor(name, price, size) {
    // 생성자 함수: 객체가 생성될 때 호출됩니다.
    // 매개변수로 전달된 값을 객체의 속성에 할당합니다.
    this.name = name; // this는 새로 생성되는 객체를 참조합니다.
    this.price = price;
    this.size = size;
  }
}​

 

this의 역할

 

1. 새 객체의 속성 초기화:

• this.name = name;: 새로 생성되는 객체의 name 속성을 매개변수 name으로 초기화합니다.

• this.price = price;: 새로 생성되는 객체의 price 속성을 매개변수 price로 초기화합니다.

• this.size = size;: 새로 생성되는 객체의 size 속성을 매개변수 size로 초기화합니다.

2. 객체 참조:

• this는 현재 생성되고 있는 객체를 참조하므로, 생성자 함수 내부에서 this를 사용하여 객체의 속성에 접근하거나 값을 설정할 수 있습니다.

 

용어 정리

1. 클래스 (Class):
• 객체를 만들기 위한 템플릿입니다.
• 여기서는 TV가 클래스입니다.

2. 객체 (Object):
• 클래스의 인스턴스입니다.
• 클래스 템플릿을 사용하여 만들어진 개별적인 실체입니다.
• 예를 들어, let tv1 = new TV('Samsung', 500, '55 inch');에서 tv1이 객체입니다.

3. 속성 (Property):
• 객체가 가지는 데이터입니다.
• 여기서는 name, price, size가 속성입니다.

 

 

construnctor 메서드

클래스의 인스턴스를 초기화하는 함수

 

// 원래 코드
let tv1 = {
  name: 'noona tv',
  price: 200,
  size: '56inch'
}

// 클래스 문법 사용 코드, 더욱 더 간결해짐
// TV 클래스의 인스턴스 생성
let tv1 = new TV('noona tv', 200, '56inch')
let tv2 = new TV('ultra tv', 200, '27inch')
console.log(tv1) // TV { namme: 'noona tv', price = 200, size: '56inch' }
console.log(tv1.price) // 200

 

 

클래스와 객체와 인스턴스

클래스는 건축 설계도
• 클래스는 건축 설계도와 같습니다. 건축 설계도는 건물을 짓기 위한 계획서입니다. 설계도에는 건물이 어떻게 생겼고, 어떤 재료가 사용될지, 방의 크기와 위치 등이 자세히 나와 있습니다.
• 설계도는 실제 건물이 아니지만, 설계도를 바탕으로 건물을 지을 수 있습니다.

// 클래스 예시 (건축 설계도)
class House {
  constructor(rooms, color) {
    this.rooms = rooms;
    this.color = color;
  }
  
  describe() {
    return `This house has ${this.rooms} rooms and is painted ${this.color}.`;
  }
}​

 

객체는 실제 건물

• 객체는 속성과 메서드를 포함하는 데이터 구조입니다. 객체는 클래스를 사용하지 않고도 직접 만들 수 있습니다.

// 객체 생성 (클래스를 사용하지 않고 직접 생성)
const car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2021,
  start: function() {
    console.log('The car is starting');
  }
};

console.log(car.brand); // 'Toyota'
car.start(); // 'The car is starting'​

 

인스턴스는 클래스의 구체적인 실체

• 인스턴스는 특정 클래스에서 생성된 객체를 의미합니다. 클래스의 구조와 동작을 따르는 구체적인 실체입니다.

// 클래스에서 인스턴스 생성 (설계도를 사용하여 실제 건물 생성)
const myHouse = new House(3, 'blue');

console.log(myHouse.describe()); // "This house has 3 rooms and is painted blue."

	객체	인스턴스
공통점	객체와 인스턴스는 모두 속성(property)과 메서드(method)를 가진다는 점에서 동일합니다. 인스턴스는 본질적으로 객체이므로, 모든 인스턴스는 객체입니다. (모든 객체가 인스턴스는
차이점	데이터와 그 데이터를 처리하는 함수를 포함하는 구조 클래스의 존재 여부와 상관없이 직접 생성될 수 있습니다.	클래스에서 생성된 객체 특정 클래스의 구조와 동작을 따릅니다.
예시	const obj = { key: value };	const myCar = new Car('Toyota', 'Corolla', 2021);

 

 

다른 class를 추가한다면 ?

class TV{ 
  constructor (name, price, size ) { 
    this.name = name
    this.price = price
    this.size = size
    }
  }

class AC {
  constructor(name, price, type) {
    this.name = name 
    this.price = price
    this.type = type;
  }
}

class Laptop {
  constructor(name, price, weight) { 
    this.name = name
    this.price = price
    this.weight = weight; 
  }

 

--> name, price의 경우 중복됨 ! 더 간단하게 처리할 수는 없을까 ?

 

추상화 작업

공통된 정보를 빼서 상위 클래스로 만들어주는 것

class Product {
  constructor(name, price) {
    this.name = name
    this.price = price
  }
}

 

부모 클래스(Product)에만 추가하면 자식 클래스(TV, AC, Laptop)에 자동으로 입력됨

--> 어떻게 ? 상속 !

 

상속

class 자식 클래스 extends 부모 클래스

부모클래스에 있는 것을 마치 내가 가지고 있는 것 처럼 쓰겠다 !

class TV extends Product {  // Product 클래스를 상속받아 TV 클래스를 정의
  // Product 클래스의 생성자를 호출하여 name과 price를 초기화하고, TV 클래스의 고유 속성인 size를 초기화
  constructor (name, price, size) { 
    super(name, price) // Product 클래스의 생성자가 호출됨(여기에서 또 쓰지 않고 부모요소꺼 가져오기)
    this.size = size // 자식 클래스에서만 사용하는 속성 초기화
  }
}

class AC extends Product {
  // Product 클래스의 생성자를 호출하여 name과 price를 초기화하고, AC 클래스의 고유 속성인 type를 초기화
  constructor(name, price, type) { // 생성자 추가
    super(name, price); // Product 클래스의 생성자를 호출
    this.type = type; // 자식 클래스에서만 사용하는 속성 초기화
  }
}

class Laptop extends Product {
// Product 클래스의 생성자를 호출하여 name과 price를 초기화하고, Laptop 클래스의 고유 속성인 weight를 초기화
  constructor(name, price, weight) { // 생성자 추가
    super(name, price); // Product 클래스의 생성자를 호출
    this.weight = weight; // 자식 클래스에서만 사용하는 속성 초기화
  }

 

super

자바스크립트에서 부모 클래스의 생성자나 메서드를 호출하는 데 사용되는 키워드

자식 클래스에서 부모 클래스의 기능을 상속받고 이를 확장할 때 사용

부모 클래스의 기능을 자식 클래스에서 재사용하고 확장하기 위해 사용

 

캡슐화

객체의 데이터를 외부로부터 보호하고, 객체 내부의 구현 상세를 숨기며, 객체와의 상호작용을 공용 인터페이스(메서드)로 제한하는 것

코드의 유지 보수성과 재사용성을 높이고, 객체의 무결성을 유지할 수 있음

  class Product {
    constructor(name, price) {
      this.name = name
      this.price = price
    }
    
    // 변수들과 변수에 관련된 함수들을 같은 클래스 안에 넣을 수 있음
    // price 속성을 반환하는 메서드로, 가격 뒤에 ‘만원’을 붙여서 반환
    getPrice() {
    return this.price + '만원'
    }
    
    // 속성과 관련된 함수를 같은 클래스 안에 넣을 수 있음
    // price 속성을 설정하는 메서드로, 입력 값이 0보다 작으면 에러를 발생시킴
    setPrice(price) {
    if(price < 0) {
      throw Error('마이너스 값 안됨')
    }
    this.price = price
    }
  }

 

class TV extends Product {   
  constructor (name, price, size) { 
    super(name, price) // Product 클래스의 생성자가 호출됨(여기에서 또 쓰지 않고 부모요소꺼 가져오기)
    this.size = size // 자식 클래스에서만 사용하는 속성 초기화
  }
}

// 인스턴스 생성
let tv1 = new TV('noona tv', 200, '56inch')
console.log(tv1.getPrice()) // 200만원

tv1.setPrice(-1000) // 에러 발생
console.log(tv1.getPrice()) // getPrice 실행되지 않음, Error: '마이너스 값 안됨' 출력

 

setPrice() 메서드 호출:
• tv1.setPrice(-1000);: 가격을 -1000으로 설정하려고 시도합니다.
• setPrice(price) 메서드가 호출되어 입력 값이 0보다 작은지 확인합니다.
• 입력 값이 -1000이므로 조건문 if (price < 0)이 참이 되어 throw Error('마이너스 값 안됨');이 실행됩니다.
• 이로 인해 에러가 발생합니다.


에러 발생 및 처리:
• 에러가 발생하여 Error: '마이너스 값 안됨' 메시지가 출력됩니다.
• 이 에러로 인해 프로그램이 중단되므로 다음 줄의 console.log(tv1.getPrice());는 실행되지 않습니다.

 

 

---

https://youtu.be/fECCYukfVok?si=4fudslkm578lygJS

위 영상 설명, 필기를 기반으로 포스팅이 작성되었습니다