JS)객체지향,절차지향

백준우·2021년 10월 5일

JavaScript class 객체지향

JavaScript & TypeScript

목록 보기

7/15

객체지향

1. 객체지향

1.1 객체지향 프로그래밍
1.2 OOP Basic Concepts

1. 객체지향

Java Script언어는 객체지향 언어가 아니라 프로토타입 기반 언어입니다.

Java Script에서 객체지향이 이루어지게 하는 class는 prototype을 이용해 구현하는것 입니다.

1.1 객체지향 프로그래밍

이전 객체지향이라는 개념이 등장하기 전에는 절차언어가 있었습니다.

1. 카드 받기
2. 비밀번호 확인 
3. 비밀번호가 맞을시 -> 출금액 입력
   비밀번호가 틀릴시 5번으로 이동 
4. 통장잔액이 출금액수보다 크면 -> 출금실행
   통장잔액이 출금액수보다 작으면 -> 5번으로 이동
5. 통장잔액,비밀번호 불일치로 알림을 띄우고 카드 반환

	절차지향 언어 (Ex.C언어)

이러한 절차지향 프로그래밍이 아닌 객체지향 프로그맹은 하나의 틀을 만들고 그 틀을 바탕으로 다양한 객체를만드는 프로그래밍 패턴이다.

ATM{카드받기 ,
  비밀번호 / 잔액 ,
  출금,
  통장돌려주기,}

고객{카드 기입,
  비밀번호 입력,
    출금희망금액 입력}

절차지향 프로그램에서 하나의 틀이되는 class를 만들고
그 틀을 바탕으로 만드는 객체(Object)를 instatnce라고한다.

class Human{
constructor(name,age){
this.name = name 
this.age = age }
} //Human이라는 class(틀)을 만듬 

const Baek =new Human('baek',26) // Baek이라는 변수에 Human(틀)에 name,age를 입력함 
// *중요*
//틀을 사용할때는 new라고 틀 앞에 붙여주어야 한다. 

Baek // {name : 'baek', age: 26}이라는 인스턴스를 생성함

Tip) 속성, 메소드
class 문법에는 속성과 메소드라는 용어가 사용된다.
사람으로 치면 그사람의 나이, 이름 특징은 속성이 되며
그사람이 하는 행동 먹다,잠들다,바라보다 등 행동적인 특징이 메소드라고 생각하면 편하겠다.

class Human{
constructor(name,age){
this.name = name 
this.age = age }
sleep(){
console.log('${this.name}은 잠에 들었습니다') }} 

//*메소드 호출법
//const Baek = Human('baek',26)
//Baek.sleep() //'baek은 잠에 들었습니다'

명칭	종류
name	속성
age	속성
sleep	메소드

Tip) Prototype,constrctor, this
위 3가지들은 설명하자면 위와 같다.
하지만 Java Script에서만 통하는 개념이다.
this는 좀 더 깊이 알아보고 다시 블로깅하겠다.

1.2 OOP Basic Concepts

위 그림과 같이 Person이라는 class를 통해 person1이라는 객체를 생성하고 사용할수 있다.
이러한 특징으로 미루어 보다 우리는 4가지의 객체지향프로그래밍의 특징을 알 수 있었다.

1.2.1 캡슐화(Encapsulation)

데이터와 기능을 하나의 단위로 묶는것
캡슐화에는 은닉화도 구현됨: 내부데이터,내부구현이 외부로 나타나지 않게 하는것
즉, 캡슐화를 통해 데이터와 기능을 하나로 묶어 언제든 내부를 수정할 수 있으며 외부로 구현된 부분만 보여주면 되기에 은닉화도 가능함
코드를 복잡하지않고 재사용성을 높임

1.2.2 추상화(Inheritance)

내부구현은 아주 복잡하지만 실제로 노출된 부분은 단순하게 만드는것
tv를 볼때 우리는 리모컨의 전원 버튼만 누르면 된다.
하지만 실제로는 리모콘에서 적외선 센서가 TV에 수신기에 신호를 보내고 등등 복잡한 부분이 있다.
이러한 복잡한 부분을 간단히 할수 있는것을 추상화라고 합니다.
덕분에 예상못한 변화가 일어나지 않아 사용상에 변화가 일어나지 않도록 할 수 있습니다.
캡슐화 VS 추상화
캡슐화의 은닉화 부분과 추상화를 자주 헷갈려 할 수 있다.
캡슐화 : 데이터 은닉에 포커스
추상화 : 필요하지않는 메소드 등을 노출시키지 않고 단순히 이름만 노출 (Ex: Tv리모콘에 전원버튼만 노출)
코드를 복잡하지않게하고 단순화된 사용으로 변화에 영향을 최소화 합니다.

1.2.3 상속(Abstraction)

부모 클래스의 특징을 자식 클래스가 물려받는것
부모클래스 사용 예시

class Person {
  constructor( age, gender, interests) {
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }
}
undefined
class Teacher extends Person { 
  //extends를 사용해 person로부터 상속받는다.
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);
// super안에 상속받는 속성을 가지고온다
    this.subject = subject;
    this.grade = grade;
  }
}