[JS] 6.5. Class

참고 자료

boostcourse 생활코딩: 자바스크립트의 시작

시작 전 주의사항

• 자바스크립트는 가장 빠르게 발전하는 언어 중 하나
• Class는 ES6에 새롭게 추가된 문법이므로 ES5 이하의 버전까지 지원하는 브라우저에서는 구현이 안 된다.
• 이를 위한 타파 방법을 알아보자.

Can I use

• 링크 : Can I use
• 현재 모든 브라우저 상에서 어떤 문법이 가능한지 확인하는 사이트
• HTML, CSS, JS 등 많은 언어 지원
• 사용 인구 분포도를 통해 사용 여부를 결정 가능

Babeljs

• 링크 : Babeljs.io
• ES6 문법을 과거 모든 버전에서 지원하는 문법으로 변환

class의 생성

이전에 constructor(생성자)와 prototype(원형)을 이용해 객체를 생성했다면, 이제는 class라는 문법을 활용해 객체를 생성한다.

// Class
class Person {}

var kim = new Person();
console.log(kim); // Person {}

• 클래스에 클래스명을 쓰고 중괄호로 범위를 설정
• 객체를 출력하면 클래스명(Person)과 중괄호가 출력

객체의 생성 함수 : constructor

• 클래스를 통해 객체가 만들어짐과 동시에 실행되도록 약속된 메서드 : constructor
• constructor 메서드명은 바꿀 수 없다!!
• 객체를 생성할 때 자동으로 constructor() 함수 실행

// Class
class Person {
  constructor() {
    console.log("constructor");
  }
}

var kim = new Person();
console.log(kim);

constructor 함수 내에 ‘constructor’를 출력하는 코드를 넣고 객체 선언 후 출력

constructor
Person {}

객체의 생성과 동시에 자동으로 호출되는 함수이므로 어떠한 명령들보다 먼저 실행된다.

Class의 내용과 함께 생성

그동안 했던 것처럼 함수에 parameter로 전달한 뒤, 함수 내부에서 this를 이용해 객체에 대한 argument를 parameter로 객체 내부에 지정한다.

// Class
class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
}

var kim = new Person("kim", 10, 20);
console.log(kim);

이 코드의 결과는 다음과 같다.

Person { name: 'kim', first: 10, second: 20 }

객채 생성 시 argument로써 전달한 정보들이 객체에 저장되어 출력되었다.

Class에 메서드 정의

prototype 함수 그대로 때려넣기

// Prototype
class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
}

Person.prototype.sum = function () {
  return "prototype : " + (this.first + this.second);
};

var kim = new Person("kim", 10, 20);
console.log(kim.sum());

클래스는 특별히 다른 문법이라기보다는 기존 방식에 얹어서 사용할 수 있는 양념과 같기 때문에, Prototype 함수를 그대로 사용해서 객체에 적용할 수 있다.

클래스 내부 method로 정의

클래스 내부에 함수형태로 정의한다.

// Method in Class
class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }

  sum() {
    return "class method > " + this.name + " : " + (this.first + this.second);
  }
}

var kim = new Person("kim", 10, 20);
var lee = new Person("lee", 20, 30);
console.log(kim.sum());
console.log(lee.sum());

function을 사용하지 않기 때문에 보다 간결하다. 아래의 결과를 살펴보자.

class method > kim : 30
class method > lee : 50

• 클래스 내부에 정의된 method는 같은 클래스에 속해있는 모든 객체가 공유하는 함수!!
• 한 객체만 특별하게 다른 함수를 쓰고 싶다면, prototype 때처럼 객체 생성 후 객체에 함수를 정의해주면 된다.

Chapter 06. clear

첫 번째 시도에서 10개 중 2개를 틀려 80점을 맞았다.

하나는 객체를 조회하는 for in문에서 객체에 key를 참조해 console.log로 출력할 때, Obj[‘key’]인지, Obj[key]인지를 묻는 문제였다. 그동안 실습에서 coworkers[‘programmer’] 같은 방식으로 출력을 했기 때문에 Obj[‘key’]를 선택했는데, 이러면 정말로 key의 이름이 ‘key’인 항목을 찾아 출력할 것이다. Obj[key]가 맞다.

다른 하나는 Obj.prototype.method()인데, 이미 constructor 함수 내에서 method()가 정의가 되어 있었고, 밑에는 객체 자체에 오버라이딩해서 객체만의 메서드를 만든 코드였다. 이런 상황에서 결과 중에 틀린 것을 고르는 것인데, 중간에 constructor에 대한 prototype 메서드를 재정의한 뒤에 constructor를 통해 객체를 하나 더 만들었다.

해당 객체는 마지막에 생성되었는데 중간에 prototype으로 재정의한 함수대로 출력되지 않고 처음에 정의한 constructor 내부의 메서드의 로직대로 출력되었기 때문에 선택했지만, prototype 메서드의 우선순위보다도, constructor 함수 내부의 메서드가 더 우선순위가 높기 때문에 기존 메서드의 로직대로 출력되는 것이 맞다.

이렇게 2문제를 틀렸다!