[JavaScript & TypeScript] - 속성과 메소드

Parkboss·2022년 5월 30일
0

JavaScript / TypeScript

목록 보기
7/8
post-thumbnail
post-custom-banner

축약형 메소드

const obj = {
  name: 'Jin yang',
  age: 31,
  getFamliyName: function() {
   return 'Park';
},
getLastName; () => 'Park',
getBloodType() {
  return'B';
 }
};

obj.name;
obj.age;
obj.getFamilyName();
obj.getBloodType();
  • 내용이 함수면 메소드이고 데이터면 속성이다.
  • gerBloodType( )
    function과 콜론을 제거하는 방향의 문법이 추가되었다.
  • getLastName:( ) =>
    애로우 함수로 리턴과 브레이스를 생략해서 많이 쓰인다.

Getter와 Setter

문제가 있는 값을 세팅하는 걸 막고 싶을 때 객체의 내부적으로 함수인데 객체 외부에서는 속성처럼 보이는 방법은 GetterSetter이다.

class Person {
  bloodType: string;

  constructor(bloodType: string) {
   this.bloodType = bloodType;
  }
}

const p1 = new Person('B');

p1.bloodType;
p1.bloodType = 'C'

1. 클래스에 인스턴스 객체를 만든다.
2. 'C'는 존재하지 않기 때문에 방어 코드를 작성해야 된다.
3. 그 방법은 GetterSetter

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;
}
}
const p1 = new Person('B'); 

p1.bloodType;
p1.bloodType = 'C'; 

1. this.bloodType과 bloodtype이 이름이 똑같다고 경고가 나온다. 그 이유는 속성명과 메소드명을 같은 객체 내에서 같으면 안 된다. 그래서 _를 붙여서 사용한다.
2. 메소드 앞에 set을 붙여준다.
3. p1.bloodType = 'C'; 여기서 아무 값도 세팅이 안된다. 그 이유는 if 문에서 걸리기 때문이다.

값을 꺼내 오는 방법은 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 p1 = new Person('B'); 

p1.bloodType;
p1.bloodType = 'C'; 

1. p1.bloodType; 값을 불러올 수 없다. 값을 바깥쪽으로 읽을 수 있는즉,Getter를 사용한다.
2. getter에 뒤에 무슨 형을 붙이고 싶다 하면 위에 예시 코드처럼 작성하면 된다.

SetterGetter는 일반 객체에서 만들 수 없고 class로 만들어진 인스턴스 객체에서 만들 수 있다.
내부의 어떤 객체의 값을 보호하면서 외부에는 사용하는 편의성을 그대로 유지시켜 줄 수 있는 편리한 스펙이다.


객체 구성

추가는 obj.bloodType= 'A'; 또는 삭제는 delect obj.bloodType; 사용하여 추가와 삭제를 할 수 있다.

객체 속성을 삭제하지 못하게 하는 3가지 방법이 있다.

1. 타입스크립트 경우

type MyObject = {
  name?: string;
  age: number;
  getFamilyName: () => string;
  getLastName: () => string;
  getBloodType: () => string;
}

const obj : MyObject = {
  ame: 'Jin yang',
  age: 31,
  getFamliyName: function() {
   return 'Park';
},
getLastName; () => 'Park',
getBloodType() {
  return'B';
 }
};

obj.name;
obj.age;
delete obj.name;
obj.getFamilyName();
obj.getBloodType();
  • delete obj.name에서 삭제가 되지 않는다. 왜냐하면 선택 사항이 아니어서이다.
  • name?: string; ?를 사용해 선택 사항을 적어 간단히 처리해 준다.

2. 자바스크립트 경우

const myObj = Objexct.create(null, {
  name: {
    value: 'park jinyang',
    writable :true,
    configurable: true
}
});

myObj.name = '하하하'; 

1. object라고 하는 최상위 객체가 제공하는 create 메소드를 이용해서 객체를 만드는 방법이 있다.
2. 메소드를 첫 번째 인자는 부모 객체로써 작동되게 될 객체를 입력받는다.
예제에는 부모 객체가 없으므로 null 넣는다.
3. 메서드의 구성이라고 하는 정보가 value만 있지 않다.
writableconfigurable 추가적인 정보들이 있다.
4. writable을 true로 해주면 만들어진 객체에다가 다른 것으로 바꿀 수 있다.
그러면 myObj.name이 하하하로 변경이 된다.
5. configurable를 false로 변경하면 속성을 지울 수 없다. true로 하면 delete 할 수 있다.

자바스크립트에는 타입을 정의하는 문법이 없기 때문에 이렇게 복잡한 방법으로 일부 제약을 줄 수 있다.

profile
ur gonna figure it out. just like always have.
post-custom-banner

0개의 댓글