[JavaScript]Class 와 Object 차이, 객체지향 언어 클래스 정리

클래스는 연관있는 데이터를 묶어놓는 container같은 것. 

클래스 안에는 속성(fields)와 행동(methods)가 있다. 클래스는 fields와 methods가 묶여 있는 것. 

종종 클래스 안에 fields만 들어있는 경우가 있고 이것을 데이터 클래스라고 한다. 

수많은 물체와 사물들을 클래스, 오브젝트로 정의해서 프로그래밍 하는 것이 편하고 유연하게 프로그래밍이 가능하다. 구현해야할 기능들을 객체로 잘 정의해서 만들 수 있는 개발자. 

클래스는 틀을 말한다. template. 클래스 자체에는 값이 들어있지 않다. 한 번만 선언한다. 

 

클래스를 사용하여 새로운 인스턴스를 생성한 것을 object라고 한다.object는 여러번 만들 수 있다. 

클래스는 정의만 한 것이어서 실제로 메모리에 올라가지는 않지만 실제로 데이터를 넣으면 그 오브젝트는 메모리에 올라가게 된다. 붕어빵 틀은 class 붕어빵은 object이다. 

 

자바스크립트에 클래스가 도입된지 얼마 되지 않았다. (ES6)그 전에는 클래스를 정의하지 않고 바로 함수를 사용해서 오브젝트를 만들었다.

 

syntactical sugar : 문법적 기능은 그대로인데 그것을 읽는 사람이 직관적으로 쉽게 코드를 읽을 수 있게 만든다는 것이다.

 

1. Class declarations

class Person{
	//생성자. 
	constructor(name,age){
		this.name=name;
		this.age=age;
	}
	//methods
	speak(){
		console.log(`${this.name}:hello!`);
	}
}
//오브젝트 생성
const ellie=new Person('ellie',20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();

 

2. Getter and Setter

일반적으로 프로그래밍을 할 때, 객체들의 데이터(필드)를 외부에서 직접적으로 접근하는 것을 막아놓는다. 

필드들을 private 접근 제한자로 막아두고, 각 필드의 getter, setter로 접근하는 방식을 사용한다. 

이렇게 프로그래밍 하는 이유는 객체의 무결성을 보장하기 위함이다. 

 

캡슐화 

접근 제한자는 객체지향의 캡슐화, 그리고 그를 통한 코드 은닉화를 위한 도구이다. 데이터를 외부로부터 숨기거나, 접근을 막고, 또는 접근에 처리를 강제화한다. 캡슐화는 오브젝트 외부에서는 x에 직접 접근은 커녕 오브젝트 내부에 실제로 x라는 변수가 있는지 없는지 신경 쓸 필요도 없게 만드는 것을 말한다. 

 

setter

setter는 변수의 값 대입이 여러 곳에서, 제한없이 가능한 것을 접근 제한자로 막고, 접근 범위에 한해서 메소드로 대입전 값을 처리 후 대입되게 하기 위해 사용된다. 

 

getter/은닉성

getter는 왜 쓰는 걸까. 어차피 그 값에 영향을 미치지 않으면 값을 가져오는 것은 자유롭게 하면 되는 것이 아닐까? 

큰 프로젝트에서 엄청 긴 코드를 다룬다고 생각해보자. 다른 사람의 코드 속 모든 변수 값을 가져올 필요도 없을 뿐더러, 가져올 수 있는 것이 마냥 편한 일도 아닐 것이다. 따라서 클래스 안의 변수의 접근을 private 처리해서 해당 클래스 안에서만 노출되게 바꾸고, 다른 사람들도 사용할 필요가 있는 주요 변수만을 getter를 이용해 드러낸다. 이렇게 변수들의 외부 노출을 제한하고, 노출 범위를 정해주는 것이 getter이고 그러한 속성이 은닉성이다. 

// 2. Getter and setters
class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

//user1.age를 실행할 때 실행되는 코드
  get age() {
    return this._age;
  }

//user.age=value를 실행할 때 실행되는 코드
  set age(value) {
    // if (value < 0) {
    //   throw Error('age can not be negative');
    // }
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

위의 get과 set 부분에서 _age를 사용하는 이유는 다음을 참고해라. 

참고 : https://axce.tistory.com/59

#14. 자바스크립트(javascript) - getter 와 setter

 

3. Fields(public, private)

// 3. Fields (public, private)
// Too soon!
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields
class Experiment {
  publicField = 2;
  #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);	//2
console.log(experiment.privateField);	//undefined

private fields는 #를 붙이고 이것은 클래스 안에서만 읽고 접근이 가능하다. 외부에서 접근 불가. 

이것은 너무 최근에 추가되어서 아직 지원하는 곳이 많지 않다.

 

4. static

오브젝트에 상관없이 클래스 자체에 붙어있는 값. 따라서 오브젝트로 호출이 불가능하고 클래스 자체로 호출을 해야한다.

// 4. Static properties and methods
// Too soon!
class Article {							
  static publisher = 'Dream Coding';
  constructor(articleNumber) {
    this.articleNumber = articleNumber;
  }

  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.publisher);	//undefined 출력
console.log(Article.publisher);		//Dream Coding 출력
Article.printPublisher();

타입스크립트에서 오브젝트에 상관없이 공통적으로 클래스에서 쓸 수 있으면 static 을 쓰는 것이 좋다. 

 

5. 상속

// 5. Inheritance
// a way for one class to extend another class.
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 {
  draw() {
    super.draw();
    console.log('🔺');
  }
  getArea() {
    return (this.width * this.height) / 2;
  }

  toString() {	//Object 자체에 존재하는 toString() 메서드도 오버라이딩이 가능하다. 
    return `Triangle: color: ${this.color}`;
  }
}

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());

extends로 상속을 한다. 수정이 쉽고 효율적이다. 

다형성. 다형성이란 하나의 객체를 다양한 타입으로 선언하고 사용할 수 있다는 뜻이다.

필요한 함수만 재정의 할 수 있는 오버라이딩. super.는 부모의 메서드를 호출해주는 것이다. 

 

6. instanceOf

오브젝트 instanceof 클래스

해당 오브젝트가 해당 클래스를 사용하여 만들어진것인지 아닌지 t/f로 알려주는 것이다.

// 6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle);	//true
console.log(triangle instanceof Rectangle);		//false
console.log(triangle instanceof Triangle);		//true
console.log(triangle instanceof Shape);			//true
console.log(triangle instanceof Object);		//true  - 만든 모든 오브젝트 클래스들은 자바스크립트의 Object를 상속한 것이다. 
console.log(triangle.toString());				//따라서 공통적으로 존재하는 이미 존재하는 메서드들을 쓸 수 있다. 따라서 toString()과 같은 것을 오버라이딩 할 수 있다. 	

let obj = { value: 5 };
function change(value) {
  value.value = 7;
}
change(obj);
console.log(obj);

웹사이트 javascript mdn reference 페이지 참고하여 공부하면 좋다. 

 

출처 : 유튜브 드림코딩 by 엘리