20220523_TIL : OOP

✍🏼 OOP : 객체지향형 프로그래밍

객체가 담긴 변수를 하나가 아닌 여러개의 변수를 생성할 때
그 변수들 중 키는 동일하고 데이터만 달라지는 경우,
새로운 객체 속성을 추가하기 위해 모든 변수를 수정한다거나 변수를 여러개 설정하면서 오타가 발생해 오류를 수정, 보완하는 동안 개발 효율이 떨어진다.
프로그램을 유연하고 변경이 쉽게 만들기위해 객체지향형 프로그래밍을 사용한다.

// 데이터만 넣으면 변수에 적용해주는 함수
// 그리고 그 객체를 결과로 받을 수 있는, 속성을 추가하는 경우 -> class
class Player {
  	// 클래스 내에 존재하기 때문에 메서드라고 부른다.
  	// 이 메서드는 원래 함수이기 때문에 인자를 받을수있음.
	constructor(name, health,skill){
      //this : 클래스 내의 속성 및 메서드를 지칭하는 방법
		this.name = name;
		this.health = health;
		this.skill = skill;
      	//속성 추가시,
      	this.xp = 0;
	}
	sayHello(){
		return `Hi, my name is ${this.name}`
	}
}

const bill = new Player(“Bill Gates”, 85, “Programmer”)
const elon = new Player(“Elon Musk”, 90, “Legend”)

//클래스는 다양한 종류의 메서드를 생성할 수 있다.
// sayHello(){} 메서드를 넣고 변수에서 호출하면 그 결과가 반영되서 나온다.
bill.sayHello() // Hi, my name is Bill Gates

같은 속성을 가지고 있고, 데이터값만 변경되는 bill, elon 등의 여러 객체를 생성할 수 있고 오타나 속성을 추가할 때 오는 번거로움이 적다.

🤓 객체지향형 프로그래밍의 4가지 특징

캡슐화 - 데이터와 데이터를 다루는 함수를 캡슐 혹은 컨테이너(class) 안에 두는 것

class Entrepreneur {
	constructor(
		private Name : string,
		private shares : number,
		private company : string,
	) {}
	public calcuateNetWorth(){
		return this.shares * getSharePrice(this.company)
	}
}

const elon = new Entrepreneur(“Elon Musk”, 17000, “TSLA”)
elon.calcuateNetWorth()
// 메서드에 인자를 넣어줄 필요 없이 this를 통해서 데이터 접근할 수 있음

캡슐화는 클래스 정보에 접근 혹은 수정할 수 있는 권한을 제공한다.
=> private로 작성된 속성은 해당 클래스가 아닌 다른 필드에 액세스하거나 수정할 수 없다. 예를 들어, elon.shares = 0; 이런 코드는 작동하지 않는다.
클래스 내부의 속성을 공개하려면 관련 메소드를 public 으로 생성해주면 된다.

추상화 - 구현 세부 정보를 숨기는 일반 인터페이스를 지정하는 행위

const Arr = new Array(3).fill(1) // [1,1,1]
Arr.push(1) // 인터페이스
console.log(Arr) // [1,1,1,1]

push라는 메서드가 어떻게 구현되는 지 그 세부 로직은 알지 못하지만 push라는 인터페이스를 통해 Arr라는 배열에 ‘1’을 추가할 수 있다.

상속 - 자식 클래스가 부모 클래스의 속성을 가지는 것 이로 인해 코드 중복을 줄이고 코드를 재사용 가능한 조각으로 나눌 수 있다.

class Human {
  	constructor(
		this.name = name;
	) {}
}

//상속받을 자식 클래스에게 부모 클래스를 확장하면된다.
class Baby extends Human {
	constructor(name) {
		//Human이라는 클래스는 이름을 인자로 받아야 작동하는 상태.
		//자식 클래스에서 부모 클래스의 메서드(constructor)를 호출하기 위해 super method를 사용
		super(name)
		this.cute = true;
	}
	cry() {
		return “응애”
	}
}

인간이라는 클래스의 속성을 가진 Baby라는 클래스가 있고 해당 클래스마다 개별적인 메서드를 가질 수 있다.

다형성 - 자식 컴포넌트마다 메서드의 결과가 다르게 보여지게 할 수 있다.
메소드 오버라이딩 : 같은 메소드를 사용하지만 다르게 구현되는 것

class Person{
	public sayHi() {
		return “👋🏻”
	}
}
// 자식 컴포넌트만의 메소드를 재정의하면 결과가 다르게 나타난다.
class Korea extends Person {
	public sayHi() {
		return “안녕”
		//string이 아닌 다른 형태의 데이터를 불러오면 ts 에러 발생.
    	//부모 class 에서 문자열을 return하기 때문.
	}	
}
const 박씨 = new Korea()
박씨.sayHi() // “안녕”