드림코딩 by 엘리_ 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리

---

class vs object, 객체지향 언어 클래스 정리

---

class와 object는 무엇인지?

이 두가지의 개념은 무엇인지?

 

if 자바스크립트에 class나 object가 없다면?

내가 정의한 변수들이 둥둥 떠다니면서 규모있는 프로젝트 만들기가 힘들다.

 

 

클래스는 조금더 연관있는 데이터를 한데 묶어놓는 contaniner 같은 개념이다.

person이라는 class안에는 

name, age 라는 properties가 들어있고 

speak() 라는 함수가 들어있다.

이렇게 class에는 name, age 같은 속성 field가 들어있고,

그리고 speak() 즉 말하는 행동 method가 들어있다.

그래서 class는 조금더 연관있는 데이터들을 묶어놓은 fields와 methods가 종합적으로 묶여있는 것을 말한다.

간혹 class안에는 method는 들어있지 않고, 데이터만 즉 field만 들어있는 경우가 있다.

그렇게도 많이 쓴다. 그런 것을 data class라고 한다.

이렇게 관련있는 변수나 함수들을 묶어놓은 것을 class라 하고 

이 class 안에서도 내부적으로 보여지는 변수와 밖에서 보일 수 있는 변수들을 나누어서 

이런것들을 캡슐화 라고 한다.

 

그리고 class를 이용해서 상속과 다양성이 일어날 수 있는데

이런 모든것들이 가능한것이 바로 객체 지향 언어이다.

 

프로그래밍을 할때도 사물과 물체들을 class, object로 정의해서 프로그래밍 하는 것이

조금더 자연스럽기에 개발자들이 편하고 유연하게 프로그래밍 할수 있도록 도와주는 것이다.

 

객체 지향 언어로 프로그래밍을 잘하는 개발자는 

풀어야되는 문제나 구현해야 되는 기능들을 객체로 잘 정의해서 만들 수 있는 개발자를 말한다.

내 주변을 한번 둘러보면서 내가 저것들을 어떻게 클래스로 만들 수 있을지 생각해보자 :)

 

class

 

 

클래스는 붕어빵을 만들 수 있는 틀을 말한다.

클래스 자체에는 데이터가 들어있지 않고 틀만 template만 정의해 놓는 것이다.

이런 클래스에는 이런이런 데이터가 들어올 수 있다 라고만 정의해놓고 한 번만 선언한다.

그래서 이 클래스를 이용해서 실제로 데이터를 넣어서 만드는것이 바로 object 이다.

 

object

 

 

클래스를 이용해서 새로운 인스턴스를 생성하면 obj가 되는 것이다.

(인스턴스 : 객체 지향 프로그래밍(OOP)에서 인스턴스(instance)는 해당 클래스의 구조로 컴퓨터 저장공간에서 할당된 실체를 의미한다. )

obj는 클래스를 이용해서 굉장히 많이 만들 수 있고

클래스는 정의만 한 것이라서 실제로 메모리에 올라 가지는 않지만 실제로 데이터를 넣으면 obj는 메모리에 올라가게 된다.

그래서 붕어빵이라는 클래스를 만들어서 팥을 넣어 팥붕어빵을 만들면

이 붕어빵 자체는 obj가 되고 붕어빵의 틀은 클래스가 된다.

 

Object-oriendted programming_class

class는 template에 속하고,

이 template을 이용해서 실제로 데이터를 넣어서 만드는 것이 object 이다.

하지만 이 자바스크립트 에서는 클래스가 도입된지 얼마 되지 않았다.

클래스 도입전에는 클래스를 정의하지 않고 바로 obj를 만들 수 있었다.

이 obj를 만들때 function을 이용해서 template을 만드는 방법이 있었다.

이제는 새로 추가된 클래스를 이용해서 template을 만드는 방법을 알아보자.

이 개념이 기존에 자바스크립트 위에 추가된 것이기 때문에 즉 기존에 존재하던 프로토 타입을 베이스로 한것에 기반해서 그위에 간편하게 쓸 수 있도록 문법만 클래스가 추가 된것이다.

이 개념을 syntactical sugar 라고 하는데

문법상으로 달달한 각자의 편리함을 제공하는 그런것들을 의미한다.

 

class declarations

class 라는 키워드를 이용해서 클래스명을 작성하고

{}안에 constructor 생성자를 이용해서 나중에 obj를 만들때 필요한 데이터를 전달한다.

그래서 전달받은 데이터를 현재 클래스에 존재하는 2가지의 fields인 name과 age에 전달된 데이터를 바로 할당해주는 것이다.

그래서 클래스에는 name, age 라는 fields가 있고

speak() 말하는 method도 존재한다.

 

잘 정리한 클래스를 이용해서 obj를 생성한다.

새로운 obj를 만들때는 new 라는 키워드를 쓴다.

그래서 우리가 새로운 사람을 만들것이다.

이 사람에는 클래스 안의 constructor 안에는 name, age가 전달되는데 새로운 데이터를 넣으면 새로운 obj가 만들어 진다.

this라는 것은 생성된 obj.name 이라고 하기때문에 해당 ellie의 이름이 출력되는 것이다.

 

Getter and Setter

클래스를 사용하는 사용자가 아니면 내가 작성한 클래스를 옆에 있는 동료가 잘못 사용해도

우리가 조금 더 방어적인 자세로 만들 수 있도록 해주는 것이 getter와 setter 이다.

 

 

get이라는 키워드를 이용해서 값을 return하고,

set이라는 키워드를 이용해서 값을 설정할 수 있다. 

대신에 set은 값을 설정하기 때문에 우리가 value를 받아와야 한다.

그래서 사용자가 get age를 호출하게 되면 우리가 바로 this.age를 return 해야하고 

새로운 value를 받으면 우리가 this.age를 value로 설정하게 된다.  

그런데 이렇게만 하면 에러가 발생한다.

 

 

age라는 getter을 정의하는 순간 

this.age는 메모리에 올라가있는 데이터를 읽어오는 것이 아니라 getter를 호출하게 된다.

그리고 setter를 정의하는 순간 

값을 할당할때 바로 메모리의 값을 할당하는 것이 아니라 setter를 호출하게 된다.

그말은 우리가 setter 안에서 전달된 value를 this.age에 할당할 때

메모리의 값을 업데이트 하는것이 아니라 setter를 호출하게 된다.

즉 setter로 다시 돌아와서 {}안의 문장은 또 setter를 호출하고 계속 무한정 반복되니까 경고가 나오는 것이다.

 

이것을 방지하기 위해 getter와 setter 안에서 쓰이는 변수의 이름을 조금 다른걸로 만들어줘야 된다.

보통 ' _'기호를 이용해서 getter와 setter에 쓰이는 변수들의 name을 만든다.

 

그래서 User 라는 클래스 안에는 

총 3개의 field가 있는데 

firstName, lastName, _age 3개 이다.

이제 setter가 있기때문에 -값을 쓰지말라는 경고를 보낼 수 있다.

 

그리고 class 내의 field는 _age기호가 들어간 age가 있지만 

우리가 console.log로 .age 라고 호출할 수 있는것

그리고 .age에 값을 할당할 수 있는것은 

내부적으로 getter와 setter를 이용하기 때문이다.

 

public과 private Field

 

 

생성자를 쓰지않고 field가 정의가능한데 그냥 정의하면 public 즉 외부에서 접근이 가능하고

#기호를 붙히게 되면 private field인데 클래스 내부에서만 값이 보여지고 접근이 되고,

값이 변경 가능하지만 클래스 외부에서는 이 값을 읽을 수도, 변경할 수도 없다.

최근에 추가되어진 것이다.

 

Static

클래스 안에 있는 field와 method들은 새로운 obj를 만들때 마다

그대로 복제되어서 값만 우리가 지정된 값으로 변경이 되어서 만들어지는데 

간혹 이런 obj와 상관없이 데이터에 상관없이 클래스가 가지고 있는 고유한값과 이런 데이터와 상관없이 동일하게 반복적으로 사용되어지는 method가 있을수 있는데

그런것들을 static이라는 키워드를 이용하면

obj와 상관없이 클래스 자체에 연결되어 있는데

이게 무슨말이냐면 static은 obj마다 할당되어 지는것이 아니라 클래스 자체에 붙어있기 때문이다.

그래서 static 함수를 호출 시 클래스 이름을 이용해서 출력가능하다.

즉 인스턴스화 시키지않고 객체를 불러오는 것이 가능하다.

 

obj와 상관없이 들어오는 data와 상관없이

공통적으로 클래스에서 쓸 수 있는거라면 static과 static 메소드를 이용해서 작성하는 것이

메모리의 사용을 조금 더 줄여 줄수 있다.

 

★★★ 상속과 다양성

 

 

객체지향 언어의 하이라이트인 상속과 다양성

extends 라는 클래스를 이용해서 Shape class를 연장한다.

즉 이 연장한다는 키워드만 이용하게 되면 Shape 클래스에 있는 모든것들이 Rectangle에 포함된다.

상속을 이용하게 되면 공통되어지는 것들을 일일이 작성하지 않아도 extends를 이용해서 동일한것들을 계속 재사용 할 수 있다.

 

 

다양성이 정말 획기적인 일을 하게되는데 

우리가 필요한 함수만 재정의 해서 사용가능 하다.

이것을 오버라이딩 이라고 한다.

필요한 함수만 오버라이딩 해서 작성 가능한 것이다.

그런데 여기서 draw 메소드를 오버라이딩 했기때문에

더이상 Shape에 정의된 draw함수가 호출되지 않는 것을 볼 수있는데 

Triangle은 우리가 오버라이딩한 함수만 호출되는 것을 볼 수 있다.

우리가 공통적으로 정의한 draw도 그려주면서 조금 더 색다르게 그려주고 싶다면 

super.draw() --> 부모의 draw() 라는 함수를 호출하게 되면 부모의 method도 호출되고 그 뒤에 이어서 우리가 정의한 draw() 메소드가 호출된다.

 

instanceof

object는 클래스를 이용해서 만들어진 새로운 instance 인데 즉 객체이다.

instanceOf는 왼쪽에 있는 obj가 우측에 있는 클래스의 instance가 인지 아닌지

즉 이 obj가 이 클래스를 이용해서 만들어진 것인지 아닌지 확인하는 것이다.

true와 false를 return 한다.

 

 

우리가 자바스크립트에서 만든 모든 object class들은 이 자바스크립트에 있는 object를 상속한 것이다.

이 obj안에 다양하게 이미 지정되어 있는것들이 있다.

그말은 우리가 어떤 obj든지 공통적으로 존재하는 method들을 사용 가능하다는 뜻이다. 

 

 

** https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference

JavaScript 참고서 - JavaScript | MDN