[드림코딩]자바스크립트 기초 정리 ④ 클래스 오브젝트 차이점 (class vs object) , 객체지향 언어 클래스 정리

class 클래스란?

 

class person {

name;

age;

speak(); }

 

: 자바스크립트의 class란 관련 있는 변수나 함수를 묶어놓은 것으로

위의 코드를 통해 이해할 수 있는 건 name, age 같은 속성 (field)와 speak 같은 행동 (method)가 존재한다.

반면 필드는 있지만 메소드가 없는 경우도 많은데 이는 data class 데이터클래스라 부른다.

 

 

 

여기서 class는 붕어빵을 만들 수 있는 틀이라고 생각하면 이해하기 쉽다

이 class 자체에는 데이터는 존재하지 않고 틀만 정하는 것이다.

 

(그러고보니 학점은행제에서 배우는 객체지향 프로그래밍 언어에서도 class와 object 설명을 해줄 때

다들 붕어빵 틀에 비유해서 설명해줬다. 비유가 찰떡이라 그런가 보다,,!)

 

 

Object 오브젝트란?

 

위의 class를 이용해 데이터를 넣어서 만드는 것이 object이다.

class를 통해 새로운 인스턴스를 생성하면 그것이 object가 되는 것이고, class는 정의만 한 것이라 실제 메모리에

올라가진 않지만 이렇게 데이터를 넣게 되면 object는 메모리에 올라간다.

 

즉, 붕어빵을 만들기 위해 정의한 붕어빵 틀은 class이고 이를 통해 만들어진 붕어빵 자체는 object 가 된다.

그리고 class는 정의만 한 것이고 메모리에 올라가는 건 실제 데이터가 들어있는 object이다.

 

 

class 예시

 

person이라는 클래스를 만들고 constructor 생성자를 이용해서 나중에 오브젝트를 만들 때 필요한 데이터를 전달한다.

그리고 매개변수로 전달받는 데이터는 클래스에 존재하는 this.name, this.age에 바로 할당해준다.

그래서 클래스에는 name, age라는 fields가 존재하고, speak()이라고 정의한 method도 존재한다.

speak() 코드 블록 안에 this.name 은 위에 fields에서 정의한 this.name과 같다.

 

 

위에서 정의한 class로 새로운 object를 만들 땐 new라는 키워드를 사용하여 new Person(인자 값)을 해준다.

 

 

Getter and Setter 게터와 세터?

사용자가 자신의 나이를 입력할 때 실수로 -1이라고 입력하면 말이 안 되는 상황이다. 하지만 자바스크립트는

당연히 나이를 -1로 입력받아서 바로 출력하게 된다.

이렇게 class를 사용하는 사용자 또는 우리가 작성한 class를 동료가 잘못 사용하여도 이를 조금 더 방어적인

자세로 만들어주는 것이 바로 자바스크립트의 getter and setter이다.

 

 

유저의 나이가 -1이라는 건 말이 안 되기 때문에

get이라는 키워드를 이용하여 값을 리턴하고,

set 키워드를 이용해 값을 설정해야 한다.

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

 

하지만 위에처럼 작성하면 옆 콘솔 창에 풀 스택이 초과되었다는 에러 메시지가 뜬다. 왜 그럴까?

 

 

우리가 age라는 getter (위의 get)를 정의하는 순간,

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

그리고 밑의 setter를 정의하는 순간, =age를 호출할 때 (값을 할당할 때) 바로 메모리에 값을 할당하는 것이 아닌

setter를 호출하게 된다. setter 안에서 전달된 value를 this.age에 할당할 때,

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

 

즉, setter로 다시 돌아와서 this.age = value 코드는 또다시 setter를 호출하고.. 이걸 무한 반복한다

그래서 콜 스택이 초과되었다는 에러 메시지가 뜨는 것이다.

 

 

이와 같은 상황을 방지하기 위해선 getter와 setter 안에서 사용되는 변수명을 조금 다르게 설정할 필요가 있다.

여기선 _ 이렇게 언더바를 붙여서 _age로 변수명을 정의했다

 

이제 User class는 3개의 필드가 존재하고 (노란색 형광팬 밑줄) setter가 있기 때문에 마이너스 값을 주어도 0으로 바꾸어 리턴이 가능하다. 그리고 필드는 기호가 들어간 _age가 있지만,. age라고 호출할 수 있고,. age에 값을 할당할 수 있는 이유는 내부적으로 getter와 setter를 이용하기 때문이다.

 

 

상속과 다양성?

공통되는 속성을 재사용한다. 이렇게 재사용을 하면 유지보수가 쉬워진다.

예를 들면, 삼각형 원형 사각형은 모두 높이와 너비, 색을 갖고 있는데 여기서 공통적인 속성은 이 세 가지 모두

'도형'이라는 사실이다.

 

 

Shape class 에는 width, height, color라는 세 가지의 필드가 존재하고,

draw, getArea라는 두 가지의 메서드가 존재한다.

밑의 extends라는 class를 통해서 Shape을 바로 연장하면 Shape class가 자동적으로 Rectangle class에 포함된다.

이렇게 상속을 하면 공통되는 것들을 일일이 작성하지 않아도 동일하게 재사용이 가능하다.

 

 

Overriding 오버 라이딩?

오버라이딩이란 필요한 함수만 재정의해서 사용하는 것이다.

 

 

console.log(rectengle.getArea());는 결괏값으로 400이 출력된다.

이와 마찬가지로 triangle에도 getArea를 호출하면 똑같이 400이 출력된다. (20*20)

하지만 triangle 즉, 삼각형의 면적을 구할 때는 width*height / 2를 해줘야 한다.

그래서 필요한 함수만 재정의하는 'Overriding 오버라이딩' 을 사용하여 triangle만 코드를 재정의한다.

재정의를 할 메서드를 클래스의 코드 블록{} 안에 정의하고 그 안에서 오버라이딩을 하여 결괏값이 200으로 출력하게 한다.

 

 

draw()에 오버라이딩으로 console.log('🔺')를 넣으면 원래 있던 'drawing red color!'는 사라지고

위의 빨간 삼각형 이미지로 대체된다.

만약 공통적으로 정의한 draw를 함께 출력하고 싶다면 super.draw();를 사용한다. 이는 부모의 draw를 호출해준다.

오버라이딩과 super을 함께 사용하면

부모의 메서드 + 우리가 직접 정의한 메서드가 둘 다 나온다 (= 'drawing red color'와 🔺)

 

InstanceOf ?

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

(즉, 왼쪽 오브젝트가 오른쪽 클래스를 통해 만들어진 아이인지 아닌지 구분)

 

 

4번째: 우리가 shape을 상속했으니 triangle / shape의 관계도 true!

5번째: 우리가 자바스크립트에서 만든 모든 클래스들은 자바스크립트에 있는 오브젝트를 상속한 것이라 true!

 

 

오늘은 자바스크립트의 class, object의 차이점과 객체지향 언어 클래스에 대해 정리해봤다.

프로그래밍 언어 하나를 제대로 배워놓으면 다른 프로그래밍 언어를 배우기 수월해진다는 얘기를 들었는데,

확실히 공감이 된다. 물론 하나를 끝내고 그다음 언어를 배우는 게 아닌 두 언어를 동시에 공부하느라 쉽다고는 말하지 못하지만.. 그래도 자바와 자바스크립트 모두 객체지향 언어라 겹치는 개념이 상당히 많이 나온다.

 

새롭게 정리할 겸 객체지향 언어와 절차 지향 언어의 차이점에 대한 글을 다음에 작성해봐야겠다

 

 

 

Ref

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