🔎 속성, 메소드는 객체 안에 들어가 있는 2가지 종류의 데이터.
const obj = {
name:'gyomni',
age:25,
getFamillyName:function(){
return 'kim';
}
};
obj.name;
obj.age;
obj.getFamillyName();📍 내용이 함수면 메소드라고 부르고, 내용이 데이터면 속성이라고 부름.
🔎 메소드 기술하기
const obj = {
name:'gyomni',
age:25,
getFamillyName:function(){
return 'kim';
},
// arrow function
getLastname:()=>'kim',
// 축약형
getBloodType(){
return 'B';
}
};
obj.name;
obj.age;
obj.getFamillyName();
obj.getBloodType();
🔎 Getter, Setter
- 객체 내에서는 코드이고 객체 바깥에선 데이터처럼 보이게하는 스텍
- 문제가 있는 값 막고 싶을 때 객체 내부적으로는 실제 함수인데 객체 외부에서는 속성처럼 보이게 하는 것.
- 일반 객체에서는 만들 수 없어서 클래스로 만들어진 인스턴스 객체에서 만들 수 있는 스펙 중 하나.
- 내부의 값을 보호하면서 외부에는 사용하는 편의성을 그대로 유지시켜줄 수 있는 편리한 스펙.
// 객체 리터럴로 객체 생성
const obj = {
name:'gyomni',
age:25,
getFamillyName:function(){
return 'kim';
},
getLastname:()=>'kim',
getBloodType(){
return 'B';
}
};
obj.name;
obj.age;
obj.getFamillyName();
obj.getBloodType();
// 클래스의 인스턴스 객체 생성
class Person{
bloodType:string;
constructor(bloodType:string){
this.bloodType = bloodType;
}
}
const p1 = new Person('B');
p1.bloodType;
p1.bloodType='C'; 📍 혈액형은 C형 없음! -> 문자열이 A형 ,B형 ,AB형 ,O형 만 들어가게 하고 싶음.
📍 방어 코드 작성
setter
const obj = {
name:'gyomni',
age:25,
getFamillyName:function(){
return 'kim';
},
getLastname:()=>'kim',
getBloodType(){
return 'B';
}
};
obj.name;
obj.age;
obj.getFamillyName();
obj.getBloodType();
class Person{
_bloodType:string; // 같은 객체 내에서 속성명과 메소드명이 같으면 안되서 _붙여줬음!
constructor(bloodType:string){
this._bloodType = bloodType;
}
set bloodType(bType:stirng){
if(bType==='A'||bType==='B'||bType==='AB'||bType==='O'){
this._bloodType = bType;
}
}
}
const p1 = new Person('B');
p1.bloodType; // 현재 setter만 존재하기 때문에 값을 그냥 읽을 순 없음. 코드 작동 위해서 값을 바깥쪽에서 읽을 수 있는 getter을 만들어 줘야 함.
p1.bloodType='C'; // 외부에서는 이렇게 속성을 접근하는 것 처럼 사용할 수 있음.
📍 외부에서 쓸 때는
bloodType이 함수가 아니라 대입문 이용해서 속성에다 접근하는 것 처럼 하고싶을 때
=> 메소드 앞에다가set붙여주기 :set bloodType(bType:stirng)
getter
- 값을 꺼내오기
const obj = {
name:'gyomni',
age:25,
getFamillyName:function(){
return 'kim';
},
getLastname:()=>'kim',
getBloodType(){
return 'B';
}
};
obj.name;
obj.age;
obj.getFamillyName();
obj.getBloodType();
class Person{
_bloodType:string;
constructor(bloodType:string){
this._bloodType = bloodType;
}
set bloodType(bType:stirng){
if(bType==='A'||bType==='B'||bType==='AB'||bType==='O'){
this._bloodType = bType;
}
get bloodType(){
return `${this._bloodType} 형`;}
}
}
const p1 = new Person('B');
p1.bloodType = 'A'; // js의 동적 바인딩 기능을 이용해서 자동으로 추가 됨.
p1.bloodType='C'; 🔎 객체 구성
- 객체의 속성이나 메소드를 실제로 구성할 수 있는 기능
- 구성 -> 새로 추가하거나 삭제하는 기능
type MyObject={
name:string;
age:number;
getFamillyName:()=>string;
getLastname:()=>string;
getBloodType:()=>string;
}
const obj:MyObject = {
name:'gyomni',
age:25,
getFamillyName:function(){
return 'kim';
},
getLastname:()=>'kim',
getBloodType(){
return 'B';
}
};
obj.name;
obj.age;
obj.bloodType = 'A'; // js의 동적 바인딩 기능을 이용해서 자동으로 추가 됨.
delete obj.age; // Error!
obj.getFamillyName();
obj.getBloodType();
class Person{
_bloodType:string;
constructor(bloodType:string){
this._bloodType = bloodType;
}
set bloodType(bType:stirng){
if(bType==='A'||bType==='B'||bType==='AB'||bType==='O'){
this._bloodType = bType;
}
get bloodType(){
return `${this._bloodType} 형`;}
}
}
const p1 = new Person('B');
p1.bloodType = 'A';
p1.bloo📍
delete obj.age;Error난 이유
: delete 연산자를 사용할 수 없음. (age는 선택사항 아니고 반드시 있어야하는 속성이라고 MyObject에 명시해놨기 때문)
📍 delete 연산자를 작동시키게 하려면 선택 사항이라고 명시를 해주면 됨.
선택 사항 명시
type MyObject={
name?:string; // ? : 선택 사항이라는 뜻
age:number;
getFamillyName:()=>string;
getLastname:()=>string;
getBloodType:()=>string;
}JavaScript 였다면??
const myObj={
name:'kim',
};
delete myObj.name; // 그냥 제거됨.
// js상태에서 제거 못하게 하고 싶으면 Object라고 하는 최상위 객체가 제공하는 create메소드를 이용해서 객체 생성
const myObj = Object.create(null, {
// 구성 객체 :구성 정보가 어떻게 되어 있냐라는 정보를 객체로 표현해서 넘겨줌.
name:{
value: 'gyomni',
writable: true,
configurable:false
}
});
myObj.name; // gyomni
myObj.name ='haha' // writable: false 라고 되어있으면 이 코드 작동 안함.
delete myObj.name // configurable:false 해놓으면 속성 지울 수 없음, true이면 속성 삭제 가능.
📍 TypeScript에서는 타입의 간단한 규정만으로 이와 같은 동작을 할 수 있다.
type MyObject={ name?:string; readonly age:number; getFamillyName:()=>string; getLastname:()=>string; getBloodType:()=>string; }📍 하지만 JavaScript엔 이런 타입을 정의하는 문법이 없기 때문에 조금 복잡한 방법으로 일부 제약을 줄 수 있음.
Front-end developer 👩💻✍