[JS] 자바스크립트 | 객체(object type)와 객체지향 프로그래밍

객체란 변수에 여러 데이터를 담을 수 있게 해주는 자바스크립트 자료형을 말합니다.

https://icon-icons.com/ko/

객체는 중괄호{ } 를 열었다 닫아줌으로써 표현할 수 있습니다.

객체 데이터는 { 키:값 } 으로 채울 수 있습니다.

                       - - - - - 

                        속성(property : 객체 데이터를 이루는 키:값을 '속성'이라 합니다. ) 

                       

객체를 보다 정확히 이해하기 위해 객체와 함께 참조자료형에 속하는 배열을 알 필요가 있습니다.

// 국어, 영어, 수학, 과학 점수
let student1 = [90, 70, 80, 60];

console.log(student1[0]); // 국어 점수
console.log(student1[1]); // 영어 점수 
console.log(student1[2]); // 수학 점수

위와 같은 코드블럭을 배열이라 하는데요

이러한 배열의 단점은 직관적이지 않다는 점 입니다. 

 

이 코드를 보는 상대방이 각각의 점수가 국어, 영어, 수학점수라는 것을 한 번에 파악할 수 있을까요?

그렇지 않겠죠.. 주석이 없다면 누구라도 해당 값이 무엇을 의미하는지 잘 모를겁니다.

 

- - - 

 

이럴 때 살펴볼 것이 바로 객체 입니다.

let student1 = {
koreanScore:90, // 국어 점수
englishScore:70, // 영어 점수 
mathScore:60 // 수학 점수
};

//대괄호 연산자
// -> 대괄호 연산자의 경우 문자열 안에서 띄어쓰기 가능!
// -> console.log(student1["korean Score"]);
console.log(student1["koreanScore"]);

// 점(닷. 마침표) 연산자
console.log(student1.englishScore);

객체의 경우 앞서 키와 값으로 나타낼 수 있다고 했는데요,

앞에서 봤던 배열과는 다른 키의 식별자명으로 인해서 각각의 값이 어떠한 데이터를 나타내는지 식별할 수 있게 되는 것이죠.

 

- - -

 

흔히 객체지향 프로그래밍을 레고에 빗대어 표현하기도 하는데,

객체가 레고의 조각이라면 레고 조각을 조립해서 무언가를 만드는 방식을 객체지향 프로그래밍이라고 합니다.

쉽게 만들면서도 실수를 줄이기 위해 등장한 것이 객체지향 프로그래밍 입니다.

 

https://www.wired.com/2016/12/heres-much-lego-brick-stepped-worth/

또한 객체는 레고조각과 유사하게 여러군데에서 재사용할 수도 있는데

이는 객체의 부품화와 재사용성이라는 객체지향 프로그래밍의 특징을 보여주는 것이기도 합니다.

이외에도 객체지향 프로그래밍은 추상화, 캡슐화, 상속, 다형성 이라는 특징을 지닙니다.

 

  

https://www.reddit.com/r/ProgrammerHumor/comments/418x95/theory_vs_reality/

 

그림으로 보면 위와 같이 표현될 수 있겠네요.

 

이를테면 TV의 속성들을 쭉 나열한 객체가 있다고 해봅시다.

 

let name = 'SAMSUNG STORE'

let tv1 = {
  name: 'super tv',
  price: 200,
  size: '50inch'
}

let tv2 = {
  name: 'ultra tv',
  price: 200,
  size: '27inch'
}

let tv3 = {
  name: 'grand tv',
  size: '36inch'
}

 

tv3 변수에서처럼 중도에 하나의 속성값(price)을 빠뜨린 경우라면,

내가 원하는 값이 정상적으로 출력되지 않을 것입니다.

 

이렇듯 객체를 연이어 생성할 때 생기는 실수를 방지하기 위해 나온 것이 class 입니다. 

변수 tv에 어떤 속성이 있고, 어떤 기능들이 있는지를 쭉 정의해둔 작업 지시서라고 할 수 있습니다.

 

class TV {
  name='';
  price=0;
  size='';
}

let tv1 = {
  name: 'super tv',
  price: 200,
  size: '50inch'
}

let tv2 = {
  name: 'ultra tv',
  price: 200,
  size: '27inch'
}

let tv3 = {
  name: 'grand tv',
  size: '36inch'
}

 

위 처럼 상위에 TV 라는 class를 생성해줬습니다.

아래 속성값들처럼 class 안에 값을 집어넣으려면 어떻게해야 할까요?

클래스에는 우리가 갖고있는 속성들에 값을 넣어주는 클래스에서 제공하는 함수가 있습니다.

바로 constructor(생성자) 라는 건데요, 클래스에 있는 속성값들을 초기화 시켜주는 기능을 합니다.

 

값을 받아오기 위해 매개변수로 클래스 안에 있는 키값을 넣어줍니다.

 

class TV {
  name='';
  price=0;
  size='';
  constructor(name, price, size) { //생성자
  this.name=name
  this.price=price
  this.size=size
}
}

 

각각의 매개변수에 매칭되는 값을 넣어주면 constructor가 생성됩니다.

클래스 안에 있는 해당되는 매개변수를 호출할 수 있도록 this 생성자를 앞에 붙여줍니다.

해석: 다른 곳에 있는 name 아니고 여기 클래스 안에 있는 name 을 가져와!

 

class TV {
  name='';
  price=0;
  size='';
  constructor(name, price, size) { //생성자
    this.name = name
    this.price = price
    this.size = size
    }
}

let tv1 = new TV("super tv", 200, "50inch");
let tv2 = new TV("ultra tv", 200, "27inch");
console.log(tv2.price);

let tv1 = {
  name: "super tv",
  price: 200,
  size: "50inch",
};

let tv2 = {
  name: "ultra tv",
  price: 200,
  size: "27inch",
};

 

클래스 이하 매개변수 구성을 토대로

tv1, tv2 값을 호출하는 식을 각 변수마다 한 줄로 짧게 줄여쓸 수 있게됩니다.

 

그렇다면, tv 전자제품 외 다른 카테고리 상품이 추가된다면 어떨까요?

 

class TV {
  name='';
  price=0;
  size='';
  constructor(name, price, size) { //생성자
    this.name = name
    this.price = price
    this.size = size
    }
}

class AC {
    name='';
    price=0;
    type='';
  }

class lapTop {
    name='';
    price=0;
    weight='';
  }

 

tv 클래스 밑에 에어컨과 노트북 클래스를 추가해줍니다.

만들다보면 공통되는 속성들이 보이게 되는데요(name, price)

 

반복을 피하기 위해 공통속성들만으로 구성된 product 클래스를 추가해줍니다.

(TV, 에어컨, 노트북은 모두 하나의 '제품'이라는 공통된 성질로 묶을 수 있죠?)

그리고 나머지 하위 클래스에서 겹치는 정보들은 지워줍니다. 

 

겹치고, 공통되는 요소들을 빼서 보다 상위 개념으로 만들어주는 것을 '추상화'라고 합니다.

다른 예시로 자동차, 오토바이, 자전거, 기차 라는 각 개체의 공통적인 기능(타는 것)을 추출하여

'이동 수단'이라는 하나의 인터페이스로 정의하는 것이 그렇습니다. 

 

class Product {
  name='';
  price=0;
 }

class TV {
  size='';
  constructor(name, price, size) { //생성자
    this.name = name
    this.price = price
    this.size = size
    }
}

class AC {
    type='';
  }

class lapTop {
    weight='';
  }

 

위와 같이 수정해준 후에,

각 클래스별로 name, price 값들을 어떻게 불러올 것인지를 정해줍니다.

 

공통된 속성 요소들을 제거한 각 클래스명(TV, AC, lapTop) 우측에 extends Product 를 작성합니다.

이를 '익스텐즈 확장'이라 하고, 상속의 개념을 의미합니다.

 

해석은 다음과 같이 합니다.

해석: Product 라는 상위 클래스에서 가져올거야

 

class Product { //추상화
  name='';
  price=0;
 }

class TV extends Product { //상속
  size='';
  constructor(name, price, size) { //생성자
    this.name = name
    this.price = price
    this.size = size
    }
}

class AC extends Product { //상속
    type='';
  }

class lapTop extends Product { //상속
    weight='';
  }

 

프로덕트라는 공통된 상위 클래스 요소를 생성해줌으로써 반복을 피할 수 있고,

프로덕트 입장에서는 자기를 상속하는 요소들이 어떤 게 있는지 한 눈에 볼 수 있으니

관리가 수월하다는 장점이 있습니다.

 

또한 추가적인 속성(color)의 삽입이 필연적일 때,

각 클래스마다 매번 넣어줄 필요 없이 상위 클래스 하나에만 추가해주고, 나머지는 익스텐즈 확장해주면 되니

프로젝트를 좀더 수월하게 진행할 수 있겠죠?

 

기존 TV 클래스 하위 this.name, this.price도 고로 없애줘야 합니다.

(해당 요소들은 전부 상위 프로덕트 클래스로 보냈으니까요!) 

 

대신 super( ) 라는 추가 생성자를 만들어줍니다. 이것의 해석은 다음과 같습니다. 

해석: 상위 클래스에 포함된 해당 매개변수값을 불러오겠다 

 

class Product { //추상화
  name='';
  price=0;
  constructor(name,price) {
  this.name = name;
  this.price = price;
  }
 }

class TV extends Product { //상속
  size='';
  constructor(name, price, size) { //생성자
	super(name,price);
    this.size = size;
    }
}

class AC extends Product { //상속
    type='';
  }

class lapTop extends Product { //상속
    weight='';
  }

 

만약 출력된 값에 "만원" 이라는 단위를 추가하고 싶다면 함수를 이용할 수도 있습니다.

상위 클래스 아래 getPrice 함수를 불러오기 하고, 가격에 문자열 "만원"을 붙여 반환하겠다 선언하면 됩니다.

 

class Product { //추상화
  name='';
  price=0;
  constructor(name,price) {
  this.name = name;
  this.price = price;
  }
  getPrice() {
  return this.price + "만원";
  }
 } //캡슐화

 

변수와 변수에 관련된 함수들을 같은 클래스에 넣어 정의하는 것을 '캡슐화'라고 합니다.

각 용어에 대한 자세한 정의는 하단 자료 출처 3번째 코드스테이츠 부분을 참고하면 이해가 쉽습니다!

 

 

- - - 

 

*이해에 도움이 됐던 강의 & 자료 출처:

https://youtu.be/eQ4cz8GLAgo

https://youtu.be/fECCYukfVok

https://www.codestates.com/blog/content/%EA%B0%9D%EC%B2%B4-%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%ED%8A%B9%EC%A7%95