정요섭

정요섭

Front-end 개발자가 되기 위한 코린이

6.class vs object

3 minute read

자바의 개념과 비슷점이 많으므로, 내가 가지고 있는 자바개념과 같이 한번 읽어보는것도 좋을것 같다

Class 란?

  • 1.Class란? 좀더 연관있는 데이터들을 한데 묶어놓는 콘테이너와 같은 역할

  • 2.Class 는 관련있는 필드 와 함수의 집합체이다. (함수와 method는 다른것임을 알아야한다.)

    
class person{
    name; // 필드
    age; // 필드
    speak(); //함수
}

    • 2.1 함수 vs 메서드

    • 함수란 어떤 작업을 수행하기 위해 필요한 집합을 정의한 코드 블럭이다.

    • 메서드란 객체에서 프로퍼티 값이 함수일때 그 함수를 메소드라고 정의한다.

      var person = {
  name: "lee",
  sayhello: function () {
    console.log("안녕하세요");
  },
};

      이때 value인 sayhello에 적용된 function 값을 메소드라고 정의한다.

  • 3.Class의 특징

    • template : 틀만 정의한다.

    • declare once : 한번만 선언한다.

    • no data in : 데이터가 들어있지 않다.

    • 자바스크립트에서는 ES6에서 소개가 되었다.

    즉 데이터가 들어있지 않고, 틀만 정의 하며 한번만 선언하는것이 Class 이다.

  • 4.Class의 선언 (1)

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

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

const ellie = new Person("ellie", 20); // instance 즉 object를 만듬
  • 5.Class의 선언 (2), Getter and Setter (캡슐화)
class Person {
  constructor(name, age) {
    this._name = name;
    this.age = age;
  }
  get name() {
    return this._name.toUpperCase();
  }
  set name(newName) {
    if (newName) {
      this._name = newName;
    }
  }
}
let man = new Person("John", 10);
console.log(man.name, man.age);
man.name = "John Park";
man.age = 20;
console.log(man.name, man.age);

  • Getter and Setter를 사용하는 이유 (1) : 즉, 단순히 사용자는 이름을 얻고자 할뿐, 사용자는 얻는 과정에 있는 내부적인 일(이름이 uppercase인지)은 신경쓰지 않는다. 이러한 원리가 캡슐화의 이점인 정보 은닉이 되며 함수이기때문에 어떠한 기능을 넣을수 있다는 장점도 있다.

  • Getter and Setter를 사용하는 이유 (2) : getter, setter를 통해 접근함으로써, 변수를 보호할 수 있다. 또한, setter를 통해 start와 duration을 설정함으로써, 위에서 발생한 일관성 문제를 해결할 수 있다.

  • Getter and Setter를 사용하는 이유 (3) : 사용자의 실수를 사전에 막기 위해

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

  get age(){
      return this_age;
  }

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

const a = new User('steve','job',-1); //만약 set을 설정하지 않았으면 오류가 뜨지 않았고 사용자는 자신이 아무문제없는 데이터를 넣은줄 알겠쥬~
  • 언더바를 사용하는 이유
class Person {
  constructor(name, age) {
    this._name = name;
    this.age = age;
  }
  get name() {
    return this._name.toUpperCase();
  }
  set name(newName) {
    if (newName) {
      this._name = newName;
    }
  }
}

this.name이 아닌 this_name을 사용한 이유는 , getter setter를 한 상태에서 this.name=name이라고 할경우, name을 함수 name으로 인식해버리기 때문이다. 그래서 getter를 호출해버리고, 또한 뒤에 =name 은 setter를 호출하기 때문에 무한루프를 돌게 된다. 그렇다면 왜 age는 언더바를 안해줬어??? getter , setter를 안했기 때문이지~

  • 6.public & private(최근에 추가됨, 이런게 있다라고말 알아두자)

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

class Experiment {
  publicField = 2;
  //클래스 외부에서도 접근이 가능하다.
  #privateField = 0;
  //클래스 내부에서만 접근이 가능하다.
}

const experiment = new Experiment();

console.log(experiment.publicField); // 2
console.log(experiment.privateField); //undefined
  • 7.static(최근에 추가됨, 이런게 있다라고말 알아두자 , Java에서 배운 static이란 같은듯)

object에 상관없이 즉 들어오는 데이터에 상관없이 공통적으로 클래스에서 사용할때 static과 static 함수를 사용한다.

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(Article.publisher); // Dream Coding
console.log(article1.publisher); // undefined
  • 8.상속과 다형성

상속과 다형석의 예시

  • 상속 : 공통된 요소를 만들어서 재활용하여 코드 낭비를 방지하기 위해서, 재사용 , 유지보수 용이(Shape만 고치면 되므로)

  • 다형성 : 같은 부모한테 상속받지만 클래스마다 메서드가 다르게 구현되는 개념(상속전재 및 오버라이딩) (다양한 형태로 변화가 가능함)

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

  draw() {
    console.log(`drawing ${this.color} color of`);
  }

  getArea() {
    return 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");
const Triangle = new Triangle(20, 20, "red");
  • 8.instanceOf

instanceOf : 특정 클래스에 의해서 만들어진 인스턴스 object(인스턴스)인지 아닌지를 판단하기 위함

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

자바스크립트의 모든 object는 Object를 상속한것이다.

Object 란?

  • 1.Object의 특징

    • instance of a class : 클래스의 인스턴스이다.

      • 인스턴스화(메모리에 우리가 사용하도록 올려놓는거)

      • 인스턴스(클래스의 실현체, 클래스로부터 생선된 객체) == 인스턴스 변수

      • 예를들어

      Contructor ct = new Constructor();

      여기서 Contructor ct 를 인스턴스변수 또는 인스턴스라고 하고

      new Contructor();를 인스턴스화라고 한다.

    • created many times : 재활용이 가능하다. 즉 많이 선언을 할수 있다.

    • data in : 데이터가 들어간다.

    즉 클래스를 이용해 데이터를 넣어서 만드는것이 Object이다. 그리고 클래스는 메모리에 올라가지 않지만 이렇게 데이터를 넣어서 Object로 만들게 되면 데이터에 올라가게 된다.

Leave a comment

You may also enjoy