[JS문법 종합반] 5주차_Class와 Instance

오늘의 학습내용 :  Class

 

◆ Class 생성하기

자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다. 다만 생성자, 상속 등 클래스를 기반으로 하는 다른 언어에 익숙한 개발자들이 적응할 수 있도록 ES6부터 class가 추가되었다. ES6에서 기존 자바스크립트가 가지고 있던 많은 단점들이 개선되었다. 그리고 배워야 할 것도 늘어났다 class를 통해 코드를 직관적으로 읽고 편리하게 작성할 수 있다.

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. (참고: 모던 JavaScript 튜토리얼)

 

class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    alert(this.name);
  }
}

 

클래스를 만드는 방법은 위와 같다. 여기서 constructor()는 객체의 기본 상태를 설정할 수 있는 생성자 메서드이다. User 클래스는 name 속성을 갖고 있으며 sayHi 메소드를 정의한다. 클래스와 인스턴스는 마치 설계도와 그것을 바탕으로 만들어진 물건처럼 작용한다. 클래스를 통해 만들어진 객체를 Instance 객체로 칭하며, 각 인스턴스는 고유한 속성과 메서드를 가진다. 인스턴스가 초기화될 때 실행하는 생성자 함수를 통해 함수에 인자를 넣듯이 인스턴스에 속성을 부여할 수 있다.

 

◆ Getter, Setter : Class의 속성에 접근하기

클래스의 속성에 접근하기 위해서는 getter와 setter를 사용할 수 있다. 두 메서드는 각각 클래스의 속성 값을 반환하고, 설정한다. 

class User {

  constructor(name) {
    // setter를 활성화
    this.name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 4) {
      alert("이름이 너무 짧습니다.");
      return;
    }
    this._name = value;
  }

}

let user = new User("보라");
alert(user.name); // 보라

user = new User(""); // 이름이 너무 짧습니다.

 

◆ 상속(Inheritance)

상속을 통해 클래스에 다른 클래스의 기능을 물려줄 수 있다. (상속을 받는 클래스: subclass / 상속을 하는 클래스: superclass)

class Animal {

  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// Animal 클래스를 상속받는 Dog 클래스 만들기
class Dog extends Animal {
	// speak를 재정의
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let d = new Dog('Merry');

d.speak(); // "Merry barks."

 

질문 & 더 알아보기

 

: 변수 이름 짓기 규칙?

오늘 배운 내용과는 조금 거리가 있지만, 그동안 코드를 작성하면서 필요에 따라 변수나 함수 이름을 정하고 직접 사용하는 과정에서 변수 이름을 어떻게 지어야 알아보기 쉽고 수정할 때 편리할지 고민했다. 변수에도 나름의 네이밍 규칙이 있는데, 기존에 알고 있던 카멜 표기법(camel case)를 주로 쓰던 중 구글링을 통해 다른 변수 이름 규칙들을 알게 되어 정리했다.

• 카멜 표기법  단어와 단어 사이를 대문자로 구분하는 방식.  helloWorld
• 파스칼 표기법  모든 단어의 첫 번째 글자를 대문자로 표기하는 방식.  HelloWorld
• 언더바 표기법(snake case)  모든 단어 사이를 언더바(_)로 구분하는 방식.  Hello_world

(참고: https://toma0912.tistory.com/32)

변수 네이밍 규칙(Naming rules)