javascript class와 오브젝트의 차이점, 객체지향 언어 클래스 정리

class

• 연관있는 데이터를 묶어놓는 컨테이너 같은 것이다.

class person {
	name;
	age;
	speak();
}

이렇게 사람이란 클래스 안에, 이름과 나이 (fields) 그리고 말할 수 있는 행동(method) 이 들어있다.

class에는 데이터(fields)만 들어있는 경우도 많다. 이런 것들을 데이터클래스라고 부른다.

이렇게 관련있는 변수나 함수를 묶어놓는 것을 클래스라고 한다.

클래스 안에서도 내부 변수와 밖에서 보여지는 변수를 나누어서 캡슐화 하기도 한다.

그리고 상속과 다형성도 일어난다. (객체지향)

• 클래스 자체에는 데이터가 들어있지 않고 틀만 정해놓는 것이다.
• (이러이러한 데이터를 넣을거야 라는 것을 선언)
• 한 번만 선언한다.

자바스크립트 class는 es6에서 새로 추가되었다. 클래스가 도입되기 전에는 클래스를 정의하지 않고 바로 오브젝트를 만들 수가 있었다. 이 오브젝트를 만들 때에는 function을 이용해서 만들기도 했다.

class 선언 방법

class Person {
	//constructor (생성자) : 생성자를 이용해서 obj를 만들 때 필요한 데이터를 전달한다.
	//전달받은 데이터를 name과 age에 바로 할당해준다.
	constructor (name, age) {
		//fields
		 this.name = name;
		 this.age = age;
	}

	//methods
	speak() {
	console.log(`${this.name} : hello!`);	
	}
}

this라는 것은 생성된 object.name 이라는 뜻이다.

이제 fields는 전달받은 생성된 object.name을 name 안에 바로 할당해주는 것이다.

object 생성

const ellie = new Person('ellie', 20);
//class를 새로불러올 때 new 라는 것을 사용한다. 이렇게 하면 새로운 obj가 만들어 진다.
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();

getter and setter

getter와 setter를 쉽게 이해할 수 있는 방법 (feat. 캡슐화)

 

우리 앞에 자판기 커피가 있다고 생각해본다. 자판기 커피에는 자판기 커피의 개수가 있을 것이고, 동전을 넣을수 있는 method가 있을 것이고, 커피를 만드는 method가 있을 것이다.

이 자판기 커피의 수는 -1이 되면 안된다 커피의 수가 -1이라는 것은 있을 수가 없다.

하지만 사용자가 자판기 커피의 수를 임의로 -1을 하지 못하게 막아야한다. 그래서 setter를 사용해서 사용자가 -1로 만들었다고 하더라도 0으로 변환할 수 있도록 만들어주어야 한다.

그리고 이 setter에서 기껏 만드는데 이것을 사용자가 접근해서 -1로 만들 수도 있다 이것을 방지하기 위해 접근을 private로 만들어주어야 한다. (나만 가능하게)

그리고 이렇게 해주는 것이 바로 캡슐화이다.

 

class User {
	constructor(firstName, lastName, age) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.age = age;
	}
}

const user1 = new User('steve', 'job', -1); <-사용자가 실수로 나이를 -1로 지정함
console.log(user1.age); <- 클래스를 사용하는 사용자가 잘못 사용해도 방어적인 자세로 만들어야 함

 

 

 

getter와 setter는 우리의 fields 에서 this.age를 호출할 때 바로 get age가 호출되고 = age를 호출할 때

set age(value)가 호출된다. 여기서 set age에서 this.age = value;를 하면 value가 계속 set age를 호출하게 된다. 메모리를 계속계속 만들면서 호출하게 된다.

이걸 방지해주고자 우리는

이렇게 _age로 get과 set을 지정해준다. (이름을 다르게 지정)

이렇게 해주면, this.age 에서 get age를 받아와서 this._age;를 리턴한다. 그리고 = age에서 가져온 set age도 this._age 이기 때문에 무한반복 되지 않고 _age로 지정해준다.

class User {
	constructor(firstName, lastName, age) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.age = age;
	}
	get age() {
		return this._age;
	}
	set age(value) {
	 //if (value < 0) {
	 //	throw Error ('age con not be negative);
	 //	}
		this._age = value < 0 ? 0 : value;
	}
}

이렇게 0보다 작을 시 0으로 해주고 아니면 value값을 호출하는 과정으로 만들어주면 된다.

Public & Private

생성자를 사용하지 않고 , fields 를 정의할 수가 있다.

그냥 정의하게 되면 public 이고

#← 이것을 하게 되면 private이 된다.

클래스 내부에서는 값이 변경되고 사용할 수 있지만, 클래스 외부에서는 사용이 불가능하다.

class Expreiment {
	publicField = 2;
 #publicField = 2; <- private
}

static

클래스 안에 있는 필드와 메소드들은 새로운 obj를 만들 때마다 그대로 복제되어서 값만 지정된 값으로 변경이 되어서 만들어지는데, 간혹 오브젝트 데이터에 상관없이 클래스가 가지고 있는 고유한 값과 동일하게 반복적으로 사용되어지는 메소드가 있을 수 있는데,

이것을 static이라는 키워드를 붙이면 클래스 자체에 붙어있는다는 뜻이다.

article1 은 undefined고, Article 클래스 자체에서 사용해야만 가능하다.

상속, 다양성

네모, 세모, 원 같은것은 반복되어지는 것들이 있다. 이것을 각각 따로 만들어서 반복하는것보다 공통점을 묶어서

한번에 정의 한 다음에 공통적으로 쓰이는 속성값을 계속 재사용하면 간편하도록 한다.

재사용이 가능하기 때문에 유지보수도 쉽다. 문제가 있다면 공통적인 shape에 와서 해결하면 된다.

상속

이렇게 클래스를 생성하고, class Reactangle에 extends 라는 키워드를 이용해서 Shape를 상속받으면,

이렇게 rectangle을 이용해서 new Rectangle(너비, 높이, 컬러) 를 지정해주고 draw 메소드를 사용해주면,

우리가 선언해놓은 shape 클래스를 사용한 것을 알 수 있다.

이렇게 상속을 이용하게 되면, 공통되어지는 것들을 일일히 작성하지 않아도 이렇게 extends를 이용해서 동일한 것들을 재사용할 수 있다.

다형성

class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }
  draw() {
    console.log(`drawing ${this.color} color`);
  }
  getArea() {
    return this.width * this.height;
  }
}

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

const rectangle = new Rectangle(20, 20, "blue");
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(20, 20, "red");
triangle.draw();
console.log(triangle.getArea());

이렇게 다형성을 이용해서 triangle의 getArea() 부분만 다르게 설정해줄 수 있다. 이것을 오버라이딩이라고도 한다.

우리가 triangle 에서 draw에도 다형성있게 다른 부분을 추가하고 싶다.

class Triangle extends Shape {
  draw() {
    super.draw();
    console.log("삼각삼각");
  }
  getArea() {
    return (this.width * this.height) / 2;
  }
}

이렇게 재정의 하되, 앞의 shape 클래스에 있는 draw의 내용들도 가져오고 싶다면,

super.draw() 를 해주면 된다.

instance Of

instanceof로 오브젝트가 왼쪽의 오브젝트에 포함되어 있는 지 아닌 지를 알아보는 것이다.

console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle  instanceof Shape);
console.log(triangle instanceof Object);

가장 상위 개념으로 생각을 하면 된다 오브젝트가 제일 상위 개념이고 그다음 shape 그 다음 자식들이 rectangle과 triangle 이다.

instance of 는 boolean 형으로 true나 false 형태로 반환된다.

자바스크립트 reference

JavaScript reference - JavaScript | MDN

JavaScript reference - JavaScript | MDN