클래스

추상화란 여러 개체들 간의 공통된 특징을 뽑아내는 것을 의미한다.
프로그래밍에서의 추상화는 구현하고자 하는 프로그램들 중 공통된 속성이나 기능을 묶어서 이름을 붙이는 것이다.
객체지향적 관점에서 추상화를 시킨 대상이 클래스가 되는 것이다.

자바스크립트에서의 다양한 사용 방법은 참고 링크를 확인한다.

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

객체와 인스턴스

위키백과의 정의를 따르면 오브젝트는 클래스에서 정의한 것을 토대로 실제 공간(메모리)에 할당된 것으로 프로그램에서 사용되는 데이터나 식별자에 의해 참조되는 공간을 의미한다고 한다.
쉽게 설명하면 클래스를 실체화 한 것을 오브젝트라고 한다.
객체와 인스턴스를 같다고 볼 수 있지만 자세히 살펴보면 객체는 클래스에 따라 구현할 대상이 되는 것이고 인스턴스는 구현된 실체를 의미한다.
예를 들어 설명하면 어떤 건축물의 설계도를 클래스, 설계도를 통해 지을 건축물을 객체, 실제로 지은 건축물을 인스턴스 라고 볼 수 있다.

참고 : https://cerulean85.tistory.com/149

클래스와 객체, 인스턴스 간의 관계를 그림으로 표현하면 다음과 같다.

상속

상위 개념을 하위 개념이 물려받는 것을 의미한다.
객체지향에서는 어떤 클래스가 다른 클래스를 상속받게 되면 부모 클래스의 속성과 행위들을 물려받게 된다.

그림과 같이 탈것이라는 부모 클래스가 존재한다고 했을 때 바퀴가 달린 탈 것들이라는 자식 클래스를 생성한다면 자식 클래스는 부모 클래스의 여러 속성들을 지님과 더불어 바퀴의 속성까지 지닌 클래스가 되는 것이다.

상속을 통해 부모 클래스에서 이미 구현된 내용들을 다시 구현할 필요가 없기 때문에 코드의 재사용성이 향상된다.

다형성

하나의 속성이나 행위가 다양하게 해석될 수 있음을 의미한다.
객체지향에서는 부모 클래스에서 물려 받은 함수를 자식 클래스에서 오버라이딩 하여 사용하는 것을 의미한다.

그림과 같이 동물이라는 부모 클래스가 존재하고 내부에 이동이라는 함수가 존재한다고 하자.
자식 클래스들 역시 동물이기 때문에 이동이라는 함수가 존재해야 하는데, 클래스 마다 이동 방식이 다를 수 있다.
따라서 이동 방식이 다른 경우는 자식 클래스에서 이동 방식을 재정의 하여 사용할 수 있다.

참고 : https://gracefulprograming.tistory.com/130

class와 prototype

좀 더 공부를 한 후에 업데이트 할 예정
참고 : https://medium.com/@flqjsl/js-class-%EC%99%80-prototype-%EC%9D%98-%EC%B0%A8%EC%9D%B4-7dc1d7531ae0
https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

this와 super

this는 현재 클래스의 인스턴스를 의미한다. 현재 클래스의 멤버변수를 지정할 때 사용한다.

super는 자식클래서에서 상솟받은 부모 클래스의 멤버변수를 참조할 때 사용한다.

자바스크립트 객체 비교 방법들

Object.entries 사용하기

Object.entries(obj)는 array를 리턴하는데, key와 value값을 담고 있는 배열을 리턴한다.

const obj = {
	a : 1,
    b : 2
};

위와 같은 객체가 있을 때 Object.entries(obj)를 하면 [[a,1][b,2]]를 반환해 준다.
이렇게 반환된 내용을 toString()을 이용하여 문자열로 만든 후 다른 객체와 비교할 수 있다.
Object.entries(obj).toString() 과 같이 이용할 수 있다. 반환된 결과는 'a,1,b,2'가 된다.

JSON.stringify 사용하기

JSON.stringify(obj)는 obj에 들어가는 객체, 배열, 문자열 등 모든 값들을 문자열로 묶어주는 역할을 한다.
위의 예시를 활용하면 JSON.stringify(obj)를 사용하면 '{"a":"1","b":"2"}'가 된다.

lodash 라이브러리 사용하기

lodash 라이브러리를 통해 배열이나 객체, 문자열 등을 다룰 때 좀 더 수월하게 진행할 수 있다.
그 중 객체 비교를 위해 _.isEqual(obj1,obj2)를 사용할 수 있다.
만약 두 객체가 같다면 true를, 아니면 false를 반환해 준다.
동작 방식은 object를 비교하다가 다른부분이 있으면 함수를 종료하는 방식을 사용한다.

효율성

문자열 화 시키는 것들은 객체 전체를 비교하는 반면 lodash 라이브러리를 사용하는 것들은 다른 부분이 있으면 바로 종료 하는 방식을 사용한다.
객체가 깊지 않고 간단한 경우는 문자열 화 시키는 방식을 사용하고, 반대의 경우라면 lodash 라이브러리를 사용하는 것이 좋을 것이다.

참고 : https://slee2540.tistory.com/49
https://velog.io/@junghyunhao/%EA%B0%9D%EC%B2%B4-%EA%B0%92-%EB%B9%84%EA%B5%90%ED%95%98%EA%B8%B0

더 알아보기

• SOLID 원칙 : SRP 단일책임원칙, LSP 리스코프교환원칙
• 자바스크립트에서의 객체지향 사용 방법
• https://techblog.woowahan.com/2502/