📚 프로퍼티(Property)

: 클래스와 객체에 추가되는 변수 같은 것
(properties are like varialbes attached to classes/objects.)

[ES6] this구문

ES6문법에서는 this 구문을 사용하여 프로퍼티와 생성자함수를 설정할 수 있다.

constructor () {
  this.myProperty = 'value';
} 

[ES7] 클래스에 바로 프로퍼티를 할당

더 최신의 ES7문법에서는 생성자함수를 호출하지 않고 클래스에 바로 프로퍼티를 할당할 수 있다.

myProperty = 'value';

📚 메소드(Method)

: 클래스와 객체에 추가되는 함수 같은 것
(Methods are like funtions attached to claases/objects.)

[ES6] 일반적인 함수

ES6문법에서는 메소드를 작성할 때 일반적인 함수 형태로 구문을 작성한다.

myMethod () {
  ...
}

[ES7] 화살표 함수

더 최신의 ES7문법에서는 화살표 함수를 사용하며 메소드를 작성한다.
간단히 메소드는 값으로 함수를 저장하는 프로퍼티라고 생각하면 되고, 아래처럼 화살표 함수를 사용하여 구문을 작성한다.

myMethod = () => {
  ...
}

이 구문은 프로퍼티의 값으로 화살표 함수를 사용하기 때문에 this 키워드를 사용하지 않아도 된다는 장점이 있다.

🌟 최신 문법 사용하여 작성하기

프로퍼티

생성자함수를 호출하지 않고 클래스에 바로 프로퍼티를 할당

myProperty = 'value';

메소드

화살표 함수를 사용하며 메소드를 작성한다.
프로퍼티의 값으로 화살표 함수를 사용하기 때문에 this 키워드를 사용하지 않아도 된다.

myMethod = () => {
  ...
}

최신 문법으로 작성하기

/*
class Human {
  constructor(){
    this.gender = 'female';    
  }
  
  printGender(){
    console.log(this.gender);
  }
}
*/


//생성자 함수 없이 바로 사용
class Human {
  gender = 'female';
  
  printGender = () => {
    //this 넣어줘야 함
    console.log(this.gender);
  }
}


/* 이렇게 사용하는 대신
class Person extends Human {
  constructor(){
    super();
    this.name = 'Euna';
    this.gender = 'Male';
  }
  
  printMyName(){
    console.log(this.name);
  }
}
*/

//이렇게 사용
class Person extends Human {
  name = 'Euna';
gender = 'Male';

printMyName = () => {
  console.log(this.name);
}
}

const person = new Person();

person.printMyName();
person.printGender();


//결과값으로 이름은 "Euna", gender는 Person에서 확장한대로 "Male"이 뜬다.