[TIL]2023.05.29 Class 문법(ES6 도입) (미완)

Nick·2023년 5월 29일
0

TIL: 오늘을 돌아보자

목록 보기
12/95
post-thumbnail
post-custom-banner

TMI : javascript의 클래스 문법은 ES6에서 도입됐다.
자바스크립트 기반이 아닌 다른 언어에서는 대게 클래스 기반의 프로그래밍 개발 기법(생성자, 상속 등..)을 사용하는데, 그 개발자들이 자바스크립트로 넘어와서 자꾸 클래스 ‘처럼’ 개발하려 노력하다보니 JS 사이드에서도 그 니즈를 반영한것

기초개념 Class vs 인스턴스

공장에서 '상품'을 다량으로 생산해내기 위해 '설계도'를 만든다. 설계도를 토대로 각각 특징있는 '상품'을 찍어내는데

  • 클래스(Class) : 책상을 만드는 '설계도' 와 비슷하다. 설계도를 통해 어떤 종류의 책상인지, 책상의 특징( 변수 또는 속성과 메서드)이 무엇인지 알 수 있다.
  • 인스턴스(Instance) : 설계도를 보고 만들어진 '실제 책상'이라 생각할 수 있다. 설계도를 통해 책상의 모양, 크기, 색상, 재료 등이 결정된다.
    -> 따라서, 클래스객체를 만들기 위한 설계도 역할이고, 설계도를 바탕으로 만들어진 실제 객체인스턴스라 부른다.

클래스, 인스턴스 개념을 위한 코드 연습

//클래스 설계도 작성
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;   
    }
    
    //메서드 형태의 동사 표현
    sayHello() {
       // console.log(this.name + "님 안녕하세요:)" + " 올해 " + this.age + "세 이시군요!^0^");
       console.log(`${this.name}님 안녕하세요:) 올해 ${this.age}세 이시군요!^0^"`)
    }

    myAge() {
       console.log(`내 나이는 올해 ${this.age}세 입니다:)`)

    }
}

// 설계도를 통해 인스턴스를 만들어 보자
const person1 = new Person("홍길동","30");
const person2 = new Person("홍길순","25");

person1.sayHello();
person2.sayHello();

person1.myAge();
person2.myAge();


// forEach 를 이용해, 대량 생성도 가능할것이다.

Constructor

Constructor는 Class의 생성자 함수다. 생성자 함수는 객체를 생성할 때 호출되며, 객체를 초기화하는 역할을 한다.

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

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person = new Person('Alice', 20);

위 코드에서 constructor 메소드는 name과 age를 인자로 받아 this.name과 this.age 속성을 초기화한다.

Getter와 Setter

Class에서는 getter와 setter를 사용하여 Class의 속성에 접근할 수 있다.
getter는 속성 값을 반환하는 메소드이며, setter는 속성 값을 설정하는 메소드이다.
이를 통해 생성한 인스턴스를 정해진 규격 안에서 자유자제로 변경할 수 있다.

상속(Inheritance)

Static Method

profile
배우고 도전하는것을 멈추지 않는 개발자 입니다.
post-custom-banner

0개의 댓글