JavaScript&TypeScript 12. 속성&메소드

(1) 속성과 메소드( Attribute & Method ) ( TypeScript )

     Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/12_Attribute%26Method

     1) 속성과 메소드는 객체 안에 들어가 있는 2가지 종류의 데이터이다.

     2) '속성'은 실제 순수한 데이터이다.
          ex) 
              const obj = {
                   name: 'B C',
                   age: 27,
              };
          <1> 속성 자체에 속성을 객체 외부에서 내가 원하지 않는 값으로 바뀌는 것을 막을 방법은 없다.
          <2> 속성을 내가 원하지 않는 값으로 바뀌는 것을 막으려면 setter 와 getter 를 만들어줘야 한다.
              ( setter 와 getter 는 클래스객체에서만 사용할 수 있다. )

     3) '메소드'는 내용물이 코드의 묶음인 함수가 들어가 있는 속성이 메소드이다.
          <1> 객체에서 함수를 여러개 정의할 때는 , 로 구분한다.
          ex) 기본형
              const obj = {
                   getFamilyName: function() {
                        return 'SHIN';
                   },
              };
          ex) 축약형 ( function 생략가능 )
              const obj = {
                   getBloodType() {
                        return 'A';
                   },
              };
          ex) 에로우 함수형
              const obj = {
                   getLastName: () => 'SHIN',
              };

     4) 클래스를 사용해서 객체를 만드는 방법
          ex) 
              class Person {
                   _bloodType: string;
                   constructor(bloodType: string) {
                        this._bloodType = bloodType;
                   }
              }

          <1> Getter 와 Setter 
               1> Setter
                    1. 객체 외부에서 객체의 속성값을 안전하게 셋팅하고 싶을때 사용한다.

                    2. 객체 내에서는 코드이고 객체 바깥쪽에서는 데이터처럼 보이게 하는 스펙이다.

                    3. 외부에서 접근할때 bloodType('A'); 이런식으로 메소드로 접근하는게 아니라, 

                        bloodType = 'A'; 이런식으로 속성처럼 접근하고 싶을때 setter 를 사용한다.

                        ( 메소드 앞에 set 을 붙인다. )
                         ex)
                             class Person {
                                  _bloodType: string;
                                  constructor(bloodType: string) {
                                       this._bloodType = bloodType;
                                  }
                                  set bloodType(btype: string) {
                                       this._bloodType = btype;
                                  }
                             }
                             const p1 = new Person('A');
                             p1.bloodType = 'B';

                    4. 만약에 bloodType 에 'A', 'B', 'O', 'AB' 만 들어가게 제한하고 싶을경우에는 이렇게 한다.
                         ex) 
                             set bloodType(btype: string) {
                                  if(btype === 'A' || btype === 'B' || btype === 'O'|| btype === 'AB') {
                                       this._bloodType = btype;
                                  }
                             }

               2> Getter
                    1. 객체 외부에서 객체의 속성값을 안전하게 가져오고 싶을때 사용한다.

                    2. 객체 내에서는 코드이고 객체 바깥쪽에서는 데이터처럼 보이게 하는 스펙이다.

                    3. 외부에서 접근할때 bloodType(); 이런식으로 메소드로 접근하는게 아니라, 

                        bloodType; 이런식으로 속성처럼 접근하고 싶을때 getter 를 사용한다. 

                        ( 메소드 앞에 get 을 붙인다. )
                          ex)
                              class Person {
                                   _bloodType: string;
                                   constructor(bloodType: string) {
                                        this._bloodType = bloodType;
                                   }
                                   get bloodType() {
                                        return this._bloodType;
                                   }
                              }
                              const p1 = new Person('A');
                              p1._bloodType;

                    4. 혈액형 알파벳 뒤에 무슨무슨 형 이렇게 붙여주고 싶을때는 이렇게 한다.
                         ex) 
                             get bloodType() {
                                  return `${this._bloodType} 형`;
                             }

               3> Getter 와 Setter 모두 기본적으로 코드이기 때문에 하고싶은 무엇이든 할 수가 있다. 

               4> Getter 와 Setter 는 일반 객체에서는 만들 수가 없고, 클래스로 만들어진 인스턴스 객체에서 

                    만들 수 있는 스펙중에 하나이다.

               5> 내부의 어떤 객체의 값을 보호하면서, 외부에는 사용하는 편의성을 그대로 유지시켜 줄 수있는

                    아주 편리한 스펙이다.

     5) 객체의 속성이나 메소드를 구성 할 수 있는 기능( 추가하거나 삭제하는 기능이다. )
          <1> JavaScript 의 동적 바인딩 기능을 이용해서 자동으로 추가, 삭제 해주는 스펙이다.
          <2> 추가
               ex) const obj = {
                        name: 'B C',
                        age: 27,
                   }
                   obj.bloodType = 'A';
                   ( TypeScript 에서는 에러가 발생한다. JavaScript 에서만 가능하다. )

          <3> 삭제
               ex) const obj = {
                        name: 'B C',
                        age: 27,
                   }
                   delete obj.name;
                   ( TypeScript 에서는 에러가 발생한다. JavaScript 에서만 가능하다. )

          <4> 경우에 따라서는 delete 연산자로 객체의 속성을 삭제가 안되게 하고 싶을때가 있는데 그럴때는 

                 이렇게 한다.
               1> TypeScript 의 경우
                    1. 먼저 type 을 만든다.
                         ex) 
                             type MyObject = {
                                  name: string;
                                  age: number;
                                  getFamilyName: () => string;
                                  getLastName: () => string;
                                  getBloodType: () => string;
                             }
                    2. type 에서 옵셔널이 아닌경우에는 반드시 있어야하는 데이터가 되므로 delete 연산자를 

                        사용할 수 없게 막아준다.

                    3. delete 연산자로 삭제 가능하게 하려면 ? 를 사용해서 옵셔널로 설정해줘야한다.
                         ex) 
                             type MyObject = {
                                  name?: string;
                                  age?: number;
                                  getFamilyName: () => string;
                                  getLastName: () => string;
                                  getBloodType: () => string;
                             }

               2> JavaScrip 의 경우
                    1. 객체를 만드는 3번째 방법을 사용한다.
                    2. Object 라고 하는 최상위 객체가 제공하는 create 라고하는 메소드를 이용해서 객체를 

                        만드는 방법이다.
                    3. create 메소드의 첫번째 인자는 부모객체로써 작동되게 될 객체를 입력받고,
                       두번째 인자로는 구성객체라고 하는 객체를 받는다.

                       ( 즉, 그 객체의 정보, 구성정보를 입력한다. )
                         ex) 
                             const myObj = Object.create(null, {
                                  name: {
                                       value: 'SHIN',
                                       writable: true,
                                       configurable: false,
                                  }
                             });
                    4. 여기서 writable 을 true 로 하면 이 객체의 속성값을 바꿀 수가 있게된다.
                    5. configurable 을 false 로 해놓으면 이 속성을 삭제할 수 없게 된다.