문법 - 속성과 메소드(with 객체)

자바스크립트에서는 실제 순수한 데이터를 속성이라고 하고  내용물이 함수(function())가 들어간 속성을 메소드라고 한다.

이는 객체생성을 통해 쉽게 확인할 수 있다.

 

const obj = {
  name: "minseung",
  age: "31",
  getFamilyName: function () {
    return "Kang";
  },
  getLastName: () => "Kang",
  getBloodType() {
    return "O";
  },
};

obj.name; // minseung
obj.age; // 31
obj.getFamilyName(); // Kang 
obj.getLastName(); // arrow 함수
obj.getBloodType(); // O, function과 콜론을 제거하는 축약형 문법

---

 

또한 자바스크립트에서 객체를 만드는 방법에는 크게 3가지가 존재한다.

 

첫번째는 방금 전과 같이 객체리터럴을 사용하여 만들 수 있으며,

 

두번째는 클래스를 만들어 인스턴스 객체를 만들 수 있다. 여기서 Class는 객체를 생성하기 위한 템플릿을 말한다.

 

// typescript

class Person {
  _bloodType: string;

  constructor(bloodType: string) {
    this._bloodType = bloodType;
  }
  
  // 클래스를 만들고나서  인스턴스 객체를 만들때 초기값 세팅을 해줄 수 있는 것이 바로 constructor!
  
  bloodType(btype:string){
  	this._bloodType = btype
  }
  
}

const minseung = new Person("O");

 

여기서 외부에서 접근할때 메소드의 접근방식(minseung.bloodType() = 'c')이 아닌 대입문을 이용해서 속성(minseung.bloodType = 'c')으로 접근하고 싶을때는 메소드 앞에 set을 입력해주면 된다.(이것이 바로 setter와 getter)

 

 

class Person {
  _bloodType: string;

  constructor(bloodType: string) {
    this._bloodType = bloodType;
  }
  set bloodType(btype: string) {
    if (btype === "A" || btype === "B" || btype === "O" || btype === "AB") {
      this._bloodType = btype;
    }
  }
  get bloodType() {
    return `${this._bloodType}형`;
  }
}

const minseung = new Person("O");
minseung.bloodType; // 'O형'

 

 

Getter와 Setter는 일반적인 객체에서는 형성할 수 없고 클래스 내에서만 형성할 수 있는 특별한 스펙이다.

 

 

마지막 세번째는 Object(최상위 객체)가 제공하는 create 메소드를 이용한다.

 

 

const Myobj = Object.create(null, {
  name: {
    value: "Gang minseung",
    writable: true,
    configurable: false,
  },
});

 

 

create 메소드의 첫번째 인자는 부모 객체로써 작동되게 될 객체를 입력받는다(이 부분은 프로토타입과 관련 되어있다고 한다. 지금은 이해가 되지 않음으로 pass).

 

두번째 인자는 구성객체(구성정보가 어떻게 되어있냐를 객체로 표현해서 넘겨준 것)이다.

wraitable속성은 값을 true를 해주면 다른 값으로 바꿀 수 있다.

즉 , false로 되어있으면 Myobj.name = "가나다라마바사" 가 안되는 것!  (readonly느낌이라고 생각하면 이해하기 편하다)

 

여기서 Myobj의 name 객체를 삭제하고 싶을때는 delete Myobj.name과 같이 변수명 앞에 delete를 붙여주면 되는데,

 

삭제를 하고 싶을때는 configurable을 true로하면 된다. 반대로 false로 해두면 삭제할 수 없다.