[JS] Class 선언과 Object 생성

Class

 

•  Class는 Object를 생성하기 위한 템플릿.

•  연관 있는 데이터들을 종합적으로 묶어 놓은 것.

•  변수 데이터를 fields, 함수 데이터를 method라고 한다.

•  들어올 수 있는 데이터를 정의하여 한번만 선언한다.

•  class는 정의만 한 것이라 data가 메모리에 저장되지는 않는다.

•  ES6에 추가된 문법이다. class가 도입되기 전에는 function을 이용해서 템플릿을 만들었다.

 

1. Class declarations (Class 선언)

 

class 키워드를 이용해서 Person이라는 class를 만들고

constructor를 이용해서 object를 만들 때 필요한 데이트를 전달한다.

전달받은 데이터를 class에 존재하는 fields에 바로 할당해준다.

 

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

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

 

2. Object 생성

 

새로운 object를 만들 때는 new라는 키워드를 쓰고, 전달할 데이터를 입력한다.

 

const eunji = new Person('eunji', 20);

console.log(eunji.name);  // eunji
console.log(eunji.age);  // 20
eunji.speak();  // eunji: hello!

 

3. Getter & Setter

 

•  사용자가 class를 잘못 사용해도 방어적으로 대처할 수 있도록 해주는 것.

•  getter는 object의 property를 읽을 때(가져올 때) 호출

•  setter는 object의 property value를 설정(할당)할 때 호출

 

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

  get age() {
    return this._age;
  } 

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

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

 

set은 값을 설정하기 때문에 object의 값(value)을 받아와야 한다.

call stack이 다 차는 것을 방지하기 위해서 getter와 setter안에서 쓰이는 변수의 이름을

constructor 변수(age)와 다른 것(_age)으로 해준다.

결론적으로 User라는 class안에는 firstName, lastName, _age 총 3개의 field가 있게 된다.

object user1에서 나이를 -1로 잘못 전달해도 0으로 값을 변경하여 출력한다.

 

 

4. Public field & Private field

 

•  최근에 추가된 것으로 현재(2021.1) 많이 사용되지는 않는다.

•  class의 property는 기본적으로 public 하며, class외부에서 접근이 가능하다.

      하지만 #를 추가하여 private class field를 선언할 수 있다.

•  private field는 class 내부에서는 접근이 가능하지만, class외부에서는 접근할 수 없다.

 

class Experiment {
  publicField = 2;  // public field
  #privaterField = 0;  // private field
}

const experiment = new Experiment();
console.log(experiment.publicField);  // 2 : 외부 접근 가능
console.log(experiment.privaterField);  // undefined : 외부 접근 불가능

 

5. Static

 

•  Static도 최근에 추가된 것으로 현재(2021.1) 많이 사용되지는 않는다.

•  static이라는 키워드를 이용하여 정의한다.

•  만들어지는 object 데이터에 상관없이 만들어지는 object에 공통적으로 쓰이는 class 고유의 값이나 method이다.

•  object에 할당되는 것이 아니라 class자체에 정의되어 있다.

      static field와 static method는 호출할 때에도 object이름이 아닌 class이름으로 호출해야 한다.

 

class Article {
  static publisher = `Dream Coding`; // static 필드 정의

  static printPublisher() { // static 메소드 정의
    console.log(`print: ${Article.publisher}!!`);
  }
}

const article1 = new Article();
console.log(article1.publisher); // > undefined
console.log(Article.publisher); // > Dream Coding
Article.printPublisher(); // > print: Dream Coding!!

 

 

 

 

 

 

이 포스팅은 개인 공부를 목적으로 작성한 글입니다.

내용 출처 : 드림 코딩 by 엘리