#13. 자바스크립트(javascript) - 클래스(Class) 와 생성자(Constructor)

# Class에 대한 구조를 이해하고 정의하는 방법에 대해서 공부해도록 하겠습니다.
# 두번째로는 class에 들어가는 constructor(생성자)에 대해서도 배워보도록 하겠습니다.

# 비전공자가 이해한 Javascript

 

---

CLASS

 

---

 

1) Class 란?

Class(클래스)는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드(method = 함수, function)를 정의하는 일종의 틀입니다.

자바스크립트에서는 클래스를 템플릿이라고 부릅니다. 이 클래스는 "같은 목적을 위한 함수들의 묶음"이라고 할 수 있습니다. 예를 들어 사람(person)이라는 클래스가 있고 이 클래스는 사람이 태어날 때 입력된다고 가정해봅니다.

태어난 사람에 대한 정보는 constructor에 입력받습니다. 이름, 생년월일, 부모, 태어난 곳, 지문 등등을 입력받고 초기값으로 입력됩니다. 

이제 사람의 신체가 할 수 있는 기능들을 한 세트(class)로 묶어보도록 하겠습니다. 말하기, 듣기, 읽기, 쓰기, 손으로 잡기 등등 사람이 할 수 있는 신체적인 능력이 들어갑니다. 이 기능은 필요에 따라 활성화 할 수도 있고, 비활성화 할 수도 있습니다. 말할 때는 말하는 함수만을 출력하고, 글을 쓸 때는 글을 쓰는 기능만 활성화 하는 식입니다.

이렇게 작성된 class는 사람에 대한 정보와 신체능력을 담고 있습니다. "사람에 대한 정보"는 constructor에 들어가는 초기값으로 성별, 나이 등등의 정보를 담고 있습니다. 신체 능력, 신체 기능들을 "같은 목적을 위한 함수들의 묶음"이라고 할 수 있습니다. 이렇게 묶인 패키지는 한번의 호출로 다양한 신체능력을 사용할 수 있습니다.

Class의 구조는 다음과 같습니다.

class person {

    // constructor
    constructor() {
    }
    
    // methods
    speak() {
    }
}

• class를 선언하고, class의 이름일 지정합니다.(person)
• constructor(생성자) 함수로 전달받은 데이터를 할당하거나, 초기화 합니다. (constructor에 대한 자세한 내용은 다음 내용에서 확인하실 수 있습니다.)
• class와 관련된 함수들을 선언합니다. 여기서 함수들은 개수의 제한이 없고, 한 class의 기능에 맞게 함수들을 작성해야합니다.

---

 

2) constructor(생성자)

constructor 함수는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 함수입니다. "constructor"라는 이름을 가진 특수한 함수는 클래스 안에 한 개만 존재할 수 있습니다. 만약 클래스에 여러 개의 constructor 함수가 존재하면 SyntaxError가 발생합니다.

constructor에서 지정한 값으로 class를 호출할 때마다 초기화되거나 할당됩니다.

class person {

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

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

const axce = new person('axce', 30);
console.log(axce.age);
console.log(axce.name);
axce.speak();

axce에 클래스 person을 할당하고, 초기값인 name에 'axce'와 age에 30을 입력합니다.
우리가 만든 초기값에 접근할 수 있는데, 그 방법은 초기값을 설정할 때 사용한 this를 이용하는 방법입니다. 이 this에 대해서는 저도 자세히 알지는 못하지만, 파이썬에서 배웠던 self와 비슷한 기능으로 생각되어집니다. 추후에 this에 대해 자세히 공부할 기회가 생기면 그에 대한 글을 써보도록 하겠습니다.

일단 this.name, this.age로 만든 값들은 할당받은 "변수이름.name", "변수이름.age"로 접근이 가능합니다.
코드에서 보시는 것과 마찬가지로 "axce.name"과 "axce.age"는 각각 처음 class를 할당받을 때 지정한 "axce"와 30으로 출력됩니다.

만약 이 값을 변경하고 싶은 경우 axce.name = "luffy"; 와 같이 선언하면 됩니다.

다음은 class 내부의 함수를 실행시키기 위해 "axce.speak( );" 을 실행시켜줍니다. 현재 초기값은 "axce"와 30으로 정해져있기 때문에 speak( ) 함수에서 사용하는 변수 this.name은 "axce"가 됩니다. 따라서 출력되는 값은 axce: hello! 가 되는 것입니다.

---

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# Javascript Web browser에서 보는 방법: console.log 사용
# MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

 

JavaScript | MDN