Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- leetcode977
- Python
- React
- 프로토타입
- 기초
- JS
- 커스텀알림
- css
- 파이어베이스로그인
- 자바스크립트
- Spread
- youtube iframe
- react-firebaseui
- firebaseui
- 커스텀알락
- leetcode189
- Rest
- 리액트
- mac
- 파이썬
- 구조분해할당
- react-native
- 타입스크립트
- nvm
- 백준
- Next.js
- nvmrc
- yarn-berry
- 다리놓기
- iP
Archives
- Today
- Total
JadeCode
[리뷰] 객체 지향 프로그래밍 본문
객체 지향 프로그래밍은, 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한곳에 묶어서 처리한다.
속성과 메서드가 하나의 "객체"라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object(이하, object literal)와는 다르게, 클래스(Class)라는 이름으로 부른다.
메서드 호출은 객체.메서드()과 같이 객체 내에 메서드를 호출하는 방법을 의미한다.
let counter1 = {
value: 0,
increase: function() {
this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다
},
decrease: function() {
this.value--
},
getValue: function() {
return this.value
}
}
counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2
클로저를 이용해 매번 새로운 객체 생성하기
function makeCounter() {
let value = 0;
return {
increase: function() {
value++;
},
decrease: function() {
value--;
},
getValue: function() {
return value;
}
}
}
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1
let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2
만약 위에처럼 단 하나의 객체만 만들 수 있다면. 만약 똑같은 기능을 하는 카운터가 여러 개가 필요하다면, 이 코드를 여러 번 만들어야해서 같은 코드를 복붙 해야하므로 재사용성이 떨어진다.
객체를 어떤 식으로 만드는지 살펴보면, 그냥 일반적인 함수를 정의하듯 만든다. 이때 함수를 이용하는 방법이 조금 다르다. 그냥 실행하는 것이 아니고 new 키워드를 써서 만든다. 이는 새로운 인스턴스를 만드는 방법이다. 일반적인 다른 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만듭니다. 일반적인 함수는 적절한 동사를 포함하고 소문자로 시작합니다.
클래스를 만드는 새로운 문법이 ES6(ECMAScript 6)에 도입되었다. 바로 class 키워드이다. 여기서 보이는 함수는, 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부른다. 인스턴스가 만들어질 때 실행되는 코드이다. 참고로 생성자 함수는 return 값을 만들지 않는다
인스턴스를 만들 때에는 new 키워드를 사용한다. 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된다. 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.
class Car{
constructor((brand, name, color){
this.brand = brand
this.name = name
this.color = color
}
refuel(){
}
drive(){
console.log(this.name + "가 운전을 시작합니다.")
}
}
OOP(Object Oriented Programming)
properties/attribute
methods/behaviours
- Encapsulation (캡슐화)
- Inheritance (상속)
- Abstraction (추상화)
- Polymorphism (다형성)
캡슐화 encapsulation
- 데이터와 기능을 하나의 단위로 묶는 것
- 은닉(hiding): 구현은 숨기고, 동작은 노출시킴
- 느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음
추상화
내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념
이러한 추상화를 통해 인터페이스가 단순해집니다. 너무 많은 기능들이 노출되지 않은 덕분에 예기치 못한 사용상의 변화가 일어나지 않도록 만들 수 있다.
캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.
추상화는 정의는 해 놓는데 정확한 정의는 아니고 명세서느낌으로 해놓는다고 이해하면 된다.
예)
장보기: 간장, 계란, 우유을 사야해 - 추상화
OO브랜드 간장, oo짜리 계란, 서울우유 - 구체화 의무를 강제한다.
상속
사람(Human)이라는 클래스가 있다고 가정하자. 사람은 기본적으로 이름과 성별, 나이와 같은 속성, 그리고 먹다, 자다 등과 같은 메서드가 있다고 볼 수 있다. 추가적으로 학생(Student)이라는 클래스를 작성한다고 생각해 봅시다. 그런데 이때 앞서 구현했던 사람(Human) 클래스의 속성과 메서드를 다시 구현한다면 비효율적일 것이다. 학생의 본질은 결국 사람이므로, 상속을 이용하여 학생(Student) 클래스는 사람(Human) 클래스를 상속받을 수 있다. 학생은 추가적으로 학습 내용, 공부하다 와 같은 속성(메서드)를 추가한다.
다향성
같은 이름을 가진 메서드라도 조금씩 다르게 작동하는 것
OOP의 주요 개념에 대한 장점
캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높인다. 추상화는 마찬가지로 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화한다. 상속 역시 불필요한 코드를 줄여 재사용성을 높인다. 다형성으로 인해 동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해진다.
'개발 > 웹' 카테고리의 다른 글
[리뷰] 비동기 (0) | 2022.05.30 |
---|---|
[리뷰] 프로토타입 (0) | 2022.05.27 |
[리뷰] 고차함수 (0) | 2022.05.24 |
[리뷰] Section1 회고 (0) | 2022.05.23 |
[리뷰] DOM (0) | 2022.05.23 |
Comments