클래스와 오브젝트의 차이점(class, object) 객체지향 언어 클래스 정리

클래스는 연관있는 것들을 묶어놓는 컨테이너 역할을 하는데

즉 클래스는 조금 더 연관있는 데이터들을 묶어놓은 fields와 methods가 종합적으로 묶여있는 것을 말하는데 간혹 클래스 안에는 메소드는 들어있지 않고 데이터(fields)만 들어있는 경우가 있다. 그런것들은 dataclass라고 부른다.

 

이렇게 관련있는 변수나 함수들을 묶어놓은 것을 클래스라고 하고 class안에서도 내부적으로 보여지는 변수와 밖에서 보일 수 있는 변수들을 나눠서 이런 것들을 incapsulation 캡슐화라고 한다.

그리고 class를 이용해서 상속과 다양성이 일어날 수 있는데 이러한 모든것들이 가능한 것이 객체지향언어(OOP)이다.

 

우리가 살아가고 있는 세상은 수많은 물체와 사물들이 존재하는데 프로그래밍 할때도 사물과 물체들을 class로 object로 정의해서 프로그래밍 하는것이 조금 더 자연스럽기 때문에 개발자들이 편하고 유연하게 프로그래밍을 할 수있게 도와주는 것이다.

객체지향 언어로 프로그래밍을 잘하는 개발자는 풀어야되는 문제나 구현해야 되는 기능들을 객체로 잘 정의해서 만들 수 있는 개발자를 말한다. 이 강의를 계기로 주변에 있는 사물들을 어떻게 클래스로 만들 수 있을 지 한번 생각해보자

(쇼핑몰을 만들때, 수강신청 프로그램을 만들때 어떻게 클래스로 정의할 수 있을지 생각해보자)

 

클래스는 붕어빵을 만들수 있는 틀이라고 생각해보자

청사진이라고도 불리고 템플릿이라고도 불리는데 클래스 자체에는 데이터가 들어있지 않고 틀만 템플릿만 정의해 놓는 것이다. 이런 클래스에는 이러한 데이터만 들어올 수 있다라고만 정의해 놓고 한번만 선언한다.

그래서 클래스를 이용해서 데이터를 만드는 것이 오브젝트이다. class를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 되는 것이다. 이 오브젝트는 클래스를 이용해서 굉장히 많이 만들 수 있고 클래스는 정의만 한 것이라서 실제로 메모리에 올라가지는 않지만 실제로 데이터를 넣으면 오브젝트는 메모리에 올라가게 된다.

 

그래서 붕어빵이라는 class를 이용해서 팥을 넣으면 팥붕어빵 크림데이터를 넣으면 크림붕어빵이 되고 피자맛을 야채를 넣으면 야채붕어빵이 되는것이다. 이렇게 만들어진 붕어빵 자체는 오브젝트이고 붕어빵을 만들기 위해 정의한 붕어빵의 틀은 클래스이다.

 

'use strict' 을 이용해서 모던하게 js를 코딩하는 것을 숙지하고 class개념을 학습하면

클래스는 템플릿에 속하고 템플릿을 이용해서 실제로 데이터를 넣어서 만드는 것이 오브젝트이다. 자바스크립트에서는 클래스가 도입된지 얼마안됐다. ES6에 추가되어졌는데 class가 도입되기 전에는 class를 사용하지 않고 바로 오브젝트를 만들 수가 있었다.

그리고 오브젝트를 만들 때 function을 이용해서 template을 만드는 방법이 있었는데 새로추가된 class를 이용해서 template를 만드는 방법을 알아보자

prototype type에 기반해서 그 위에 문법만 클래스가 추가된 것이다. 

class를 쓰는 방법은 매우 간단하다. class라는 키워드를 이용해서 사람이라는 class를 만들고 생성자를 이용해서 오브젝트를 만들 때 필요한 데이터를 전달한다. 전달받은 데이터를 클래스에 존재하는 두 가지 fields(name과 age에 전달된 데이터를 바로 할당해 주는 것이다.) 그래서 클래스에는 이름과 나이라는 fields가 있고 speak이라는 메소드도 있다. 그리고 speak 메소드 안에 클래스에 있는 this.name 이름을 출력하면서 hello라고 인사하는 spaek이다.

잘 정리한 클래스를 이용해서 jay를 만들어보자 새로운 오브젝트를 만들때는 new라는 키워드를 쓴다. 새로운 사람을 만들건데 사람에는 컨스트럭터 안에는 이름과 나이라는 인자가 전달되는데 그래서 이름은 jay이고 나이는 27살이라고 하면 새로운 오브젝트가 만들어진다. 확인하기 위해 콘솔을 찍으면 아래와 같이 나오게 된다.(speak라는 메소드도 사용해서 함수를 호출한다.) 위에서 this라는 것은 생성된 오브젝트.name이라고 하기 때문에 jay의 이름이 출력된다.

두번째로 getter와 setter에 대해서 보면

새로운 유저를 만들건데 이름은 스티브 잡스라고 하고 나이를 -1로 지정해보면 나이가 바로 콘솔창에서 -1이라고 지정이 된다. (객체지향적인 개념에서 이상하다)

이렇게 클래스를 사용하는 사용자가 잘못사용해도 방어적인 자세로 바꾸는 것이 getter와 setter이다. user의 age가 -1이라는 것은 get이라는 키워드를 이용해서 값을 리턴하고 set이라는 키워드를 이용해서 값을 설정할 수 있다.

 

대신 set은 값을 설정하기 때문에 value를 받아와야 한다. 그래서 사용자가 get age를 호출하게 되면 this.age를 리턴해야 하고 this.age를 value로 설정하게 된다. 이렇게 하면 콜스택이 초과되었다고 에러가 뜬다.

 

age라는 getter를 정의하는 순간 this.age는 메모리에 올라가서 읽어오는 것이 아니라, 바로 getter를 호출하게 된다.

그리고 setter을 정의하는 순간 =을 호출 할때(값을 할당할 때) 바로 메모리의 값을 할당하는 것이 아니라, setter를 호출하게 된다. 즉 setter안에서 전달된 value를 this.age에 할당할 때 메모리의 값을 업데이트 하는 것이 아니라 setter를 호출하게 된다. setter로 다시 돌아와서 setter를 호출하고 계속 무한정 반복되니까 콜스택이 닫혔다라고 경고가 나온다.

 

이것을 방지하기 위해서는 getter와 setter에 나오는 변수이름을 다른걸로 지정해줘야 한다. 그래서 User라는 클래스 안에는 총 세개의 필드가 있는데 firstName하나 lastName age 3개가 있다. setter가 있기 때문에 경고를 보내는 문구를 적을 수 있다. 좀더 간단하게 하려면 if문 말고 value가 값이 0이라면 0 아니면 value를 쓰라고 나타낼 수도 있다.

그리고 필드는 기호가 들어간(_age) age가 있지만 사용자가 .age라고 호출할 수 있는것 .age의 값을 할당할 수 있는 것은 은 내부적으로 getter과 setter을 이용하기 때문이다. 

 

세번째로 알아볼 것은 Public & Private Fields이다

이것은 최근에 추가된거여서 많은 자바스크립트 개발자가 쓰고있지는 않다. 추가되었다라고만 알고있자

constructor 생성자를 쓰지않고 필드를 정의할 수가 있는데 그냥 정의하게 되면 public 외부에서 접근이 가능하고 

해쉬기호를 붙이게 되면 privateField인데 class내부에서만 값이 보여지고 접근되고 변경되고 외부에서는 값을 읽을 수도 변경할 수도 없다. 그래서 publicFIeld라고 하면 2가 출력되지만 privateField는 undefined라고 나온다.

 

쓸려면 BABEL을 이용해야하기 때문에 알고만 있자.

다음으로는 Static인데

이것도 이런게 있다라고만 알고있자.

클래스 안에있는 필드와 메소드들은 오브젝트를 만들 때마다 그대로 복제되어서 값만 지정된 값으로 변경이 되어서 만들어 지는데 간혹 이런 오브젝트에 상관없이 클래스가 가지고 있는 고유한 값과 데이터에 상관없이 동일하게 반복적으로 사용되어지는 메소드가 있을 수 있다. 그런 것들을 static이라는 키워드를 이용해서 붙이면 오브젝트에 상관없이 클래스 자체에 연결되어 있는데

 

아래와 같이 article1과 article2를 만들게 되면 만약 여기서 static을 사용하지 않았다면 오브젝트를 이용해서 오브젝트의 publisher을 출력할 수 있었을 것이다. (article1.publisher) 그러면 undefined이 출력되는데 그 말은 오브젝트안에 publisher는 값이 지정되지 않았다고 알 수 있는데 이것은 static은 오브젝트마다 할당되어지는 것이 아니라 Article라는 클래스 자체에 붙어있기 때문이다. 그래서 아래와 같이 나타내면 문구가 올바르게 출력된다.

 

static함수를 호출할 때도 class이름을 이용해서 printPublisher();라고 하면 dreamcoding라고 출력된다.

나중에 타입스크립트 할 때도 많이 쓰이는데 들어오는거에 상관없이 공통적으로 클래스에서 쓸 수 있는 거라면 static과 static method를 이용하는 것이 메모리의 사용을 줄여줄 수 있다.

 

상속과 다양성에 대해서 알아보면 

브라우저에 다양한 도형을 그리는 웹 어플리케이션을 만든다고 가정해보면 각 도형을(네모 세모 동그라미) 클래스로 정의할 때 어떻게 만들까

각 도형의 너비와 높이 그리고 색상같은 것들이 있고 공통적으로 색칠할 수 있고 이런게 있는데 가장 중요한 공통점은 도형이다. shape로 공통적으로 쓰이는 값을 재사용 하면 더 간편하다.(유지보수 또한 쉽다.)

 

아래를 보면 Shape라는 클래스를 만든 다음에 shape라는 클래스 안에는 width, height, color 총 3가지의 fields가 있고 

draw하는 메소드 하나 getArea메소드 하나 총 두개가 있다.

만약 Rectangle이라는 클래스를 만들고 싶으면 동일하게 하기보다 extends라는 키워드를 이용해서 Shape를 바로 연장한다. 이렇게만 정의해도 shape에서 정의한 필드와 메소드가 자동으로 rectangle에 포함이 된다.

아래를 보면 작성한 함수가 바로 호출이 된다.

 

즉 연장한다는 키워드만 이용하게 되면 shape에 있는 모든 것들이 rectangle에 포함이 된다. 또 triangle이라는 클래스를 만들 수 있는데 똑같이 extends 키워드를 써서 shape의 클래스를 확장할 수 있다.

 

getArea를 호출하게 되면 rectangle의 getArea를 호출하면 400이 된다.

triangle도 마찬가지로 400이 출력되는데 이걸 바꾸기 위해서 다양성을 발휘하면 필요한 함수만 재정의 해서 쓰면(오버라이딩) 200으로 출력되게 된다. 즉 필요한 함수들만 오버라이딩해서 쓸 수 있다.

 

또 색다르게 그려보고 싶다 그러면 draw라는 메소드를 오버라이딩해서 삼각형이 출력되도록 할 수가 있다. draw라는 메소드를 오버라이딩 했기 때문에 shape에 정의된 draw함수가 호출되지 않는다.

공통적으로 정의한 draw도 그려주면서 조금 더 색다르게 그려주고 싶다 super.draw()를 호출하게 되면 이어서 draw메소드도 호출이 된다. 

 

triangle에서 오브젝트에 있는 toString라는 함수를 오버라이딩 해보면 의미있게 출력해보면 아래 그림과 같이 나오게 된다.

 

 

여섯번째는 instanceOf operator이다

이 오브젝트는 클래스를 이용해서 만들어진 새로운 인스턴스인데

instanceof는 왼쪽에 있는 오브젝트가 오른쪽에 있는 클래스의 인스턴스인지 아닌지

즉 오브젝트가 클래스를 이용해서 만들어진 것인지 아닌지 확인하는거다. true와 false를 리턴하는데 

shape을 상속했으니까 triangle이 shape 클래스의 인스턴스이고

마지막이 좀 헷갈리는데 triangle은 object의 인스턴스인데 왜냐 자바스크립트에서 만든 모든 클래스들은

자바스크립트의 오브젝트를 상속하는 거다

 

그래서 어떤 오브젝트든지 공통적으로 존재하는 메소드를 쓸 수가 있다. object에 tostring이 있었는데 출력하면 아래와 같이 쓸데없는게 나온다.

 

 

 

 

mdn 사이트에 가서 자바스크립트 내부에 포함되어있는 오브젝트는 어떤것이 있는지 카테고리화로 묶여져 있고 학습해보자

value properties, error objects에는 무엇이있는지 indexed collections에는 어떤 것이 있는지 ,

또 백엔드에서 데이터를 비동기적으로 받아올 수 있는 promise(control abstraction)도 있고, json도 js내부에 포함되어져 있다는 걸 볼 수 있다. 

keyed collections에는 어떤것이 있는지도 참고해보자

 

참고: https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

JavaScript reference - JavaScript | MDN

https://www.notion.so/07dfed016e914c3a8612fc76dd1542f0?v=c6feaeb5b46e4fdeb1e756113cb529c1 

드림코딩 by 엘리 JS 강의 정리