JavaScript (ES6) - class 와 object 객체지향프로그래밍
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!