JavaScript (ES6) - class 와 object 객체지향프로그래밍

글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다.

https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7

 

 

Class와 Object 개념 정리

 

Java를 배우면서 객체지향에 대해 조금이나마 배운 적이 있는데 이번에 자바스크립트를 배우면서 다시 한번 정리할 필요성이 있다고 느껴졌다

​

class 란 생성하고자 하는 물체의 종류 또는 틀이라고 생각하면 편하겠다

 

 

class person {
  name;
  age;
  spaek();
]

 

위는 person 이라는 클래스를 만들었는데 사람은 이름과 나이라는 프로퍼티를 가지고 있고

spaek() function이 있는데

​

name과 age를 속성 ( field )

spaek() 를 행동 ( method ) 라고 한다

즉 클래스란 fields 와 method가 종합적으로 묶여있는 것을 말한다

간혹 클래스 내부에 method는 들어있지 않고 field만 들어있는 경우를 data class 라고 말한다

​

 

 

 

클래스를 붕어빵의 틀이라고 가정해 보았을 때 클래스 자체에는 데이터가 들어있지

않고 어떤 데이터만 들어올 수 있다고 지정해놓는 것이다

 

실제로 이 클래스를 이용하여 데이터를 넣어서 만드는 것이 바로 object ( 객체 ) 이다 .

 

 

 

 

 

클래스에 팥이라는 field를 넣어 만든 object !

 

object는 클래스를 이용하여 굉장히 많이 만들 수 있다

클래스는 정의만 하는 것이라서 실제로 메모리에 올라가지 않지만

오브젝트는 메모리에 올라가는 것이다

 

 

---

 

 

Class를 선언하는 방법

 

자바스크립트에는 최근인 ES6 이후에 클래스라는 개념이 도입되었기 때문에

그 이전에는 오브젝트로만 만들었다고 한다.

 

클래스의 앞 글자는 항상 대문자여야 한다고 배웠다

 

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

 

 

위와 같이 Person 이라는 클래스에 생성자 함수 constructor를 이용해 name 과 age 데이터를 전달받아

이 클래스 내에 존재하는 this 로 표현된 name 과 age 에 할당하게 된다

// 이것이 fields !

​

그리고 그 아래에

 

spaek() {
  console.log(`${this.name}: hello!`);
}

 

이렇게 method 를 선언하면 된다

method의 콘솔에 출력되는 값은 ( this.name에 받아온 값 ) : hello ! 라는 결과가 출력이 된다

 

 

---

 

Object 생성

 

위에서 만든 클래스 안에 Song 이라는 객체를 만들어 보도록 하자

예시를 위해 위에서 생성한 클래스를 기준으로 하면

 

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  spaek() {
    console.log(`${this.name}: hello!`);
  }
}

 

이렇게 선언된 클래스에 new 키워드를 사용하여 song이라는 Object를 생성해 보도록 하자

 

 

const song = new Person('song', 25);

​

위와 같이 new 키워드를 사용해 object를 생성하였다

괄호 안에 순서대로 'song'은 name에, 25라는 값은 age에 할당된다

​

이제 이 값을 출력함과 동시에 speak 메소드도 사용해보도록 하자

 

console.log(song.name);  
console.log(song.age);
song.spaek();

 

위에서 Object의 이름을 song 으로 네이밍 했기 때문에 song 뒤에 . 을 붙여서 name 프로퍼티를 가져온다

아래도 마찬가지 !

​

결과값은 아래와 같이 출력된다 !

 

song
20
song: hello!

 

 

---

 

Getter & Setter

 

getter 는 클래스에 설정하는 것이며

객체 내부의 특정 값을 조회할 때 나와지는 값을 설정하는 것이다

 

 

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
 get age() {
   return this._age;
}

 

 

위에서 선언한 클래스에 get이라는 함수를 사용하여 Person 클래스로 만들어진 오브젝트에 age 를

조회하려고 할 때 this._age 라는 값이 출력되도록 한다

​

이때 getter와 setter 함수 내부에 프로퍼티 이름은 _ 를 사용하여 구분해야 한다!

 

 

setter 는 객체의 값에 새로운 값을 삽입하려고 할 때 특정한 조건을 주어 조건에 주어진 값의 범위를

벗어나게 되면 지정한 값이 삽입되어지는 것이다

삽입하려는 값이 value 매개변수로 들어간다

 

set age(value) {
  if ( value < 0 ) {
    console.log('age 에 0 보다 작은값을 삽입할 수 없습니다');
}

 

이렇게 if 문을 통해 0보다 작을 경우 경고 메시지를 출력하게 한다

​

다른 방식으로 삼항연산자를 통해 0보다 작으면 0이 삽입되고

아닐 경우에는 value 값이 삽입되도록 하는 방식이다

 

set age(value) {
  this._age = value < 0 ? 0 : value;
}

 

 

---

 

상속 & 다양성

 

상속은 쉽게 말해서 상속세를 내는 것처럼

부모의 클래스의 데이터를 자식의 데이터에서 상속받아 똑같이 쓸 수 있게 해주는 것이다

 

 

class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height= height;
    this.color= color;
  }

  draw() {
    colsole.log(`drawing ${this.color} color of`);
  }
  getArea() {
    return this.width * this.height;
  }

 

 

위와 같이 Shape 이라는 클래스 안에 필드와 메소드들을 Triangle 이라는 클래스를 생성하여 상속을 하려면

​

 

class Triangle extends Shape {}

 

 

위와같이 extends 라는 키워드를 이용하면 Shape안에 있는 필드와 메소드들을 연장하여 Triangle 클래스에서

사용할수 있는 것이다

​

이제 객체를 생성하여 Triangle 클래스에서 Shape에 선언된 필드와 메소드들을 사용해보자

 

 

const triangle = new Triangle (20, 20, 'blue');
triangle.draw();

 

 

이렇게 width에 20, height에 20, color 에 'blue'를 삽입하고

draw라는 메소드도 호출한 결과를 보자

 

drawing blue color!

 

Triangle 에서 Shape에서 선언된 메소드를 사용하여 출력을 할 수 있다!

 

 

 

다양성은 상속을 받은 클래스에서 메소드를 재정의 하는 것을 말한다

​

예를들어

 

 

class Triangle extends Shape {
  getArea() {
    return (this.width * this.height) / 2;
}

 

 

위와같이 Shape에서 선언한 getArea 메소드를 재정의하여 사용할 수 있는 것이 다양성이다

​

Triangle에서 재정의한 getArea 메소드를 호출한 값을 보자

 

colsole.log(triangle.getArea());

 

이렇게 호출하여 출력을 하게되면

 

 

200

 

위와같이 다른 연산을 하게되어 200 이라는 값이 나오게 된다 !

​

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

 

 

 

---

 

 

instanceof

 

 

instanceof는 밑의 예시와 함께 살펴보면 쉽게 이해가 가능하다

 

 

console.log(triangle instanceof Triangle);

 

 

왼쪽에 있는 triangle 이라는 오브젝트가 Triangle 이라는 클래스의 인스턴스인지 아닌지를

true와 false로 출력해 주는 것이다

위의 결과는 true !

​

또 다른 예시로 아래를 살펴보자

 

 

console.log(triangle instanceof Shape);

 

 

위처럼 triangle 오브젝트가 Shape 클래스를 상속받았기 때문에 true!