객체 - 데이터로서의 객체(생성법과 변환법)

jake·2021년 8월 6일
0

JavaScript문법

목록 보기
15/21
post-thumbnail

Typescript로 만들었다.

  • 함수로 객체 만들기
interface Box {
    name:string;
    bloodType:string;
    height:number;
    birthday?: number;
}
function makebox(
    name:string,
    bloodType:string,
    height:number
): Box {
    return {
        name, // name: name이렇게 써줘야하는데 키,값이 동일한 이름이면 생략해서 쓴다.
        bloodType,
        height
    };
}
  • 객체 리터럴로 객체만들기
let makefox:Box = {
    name: 'Jake',
    bloodType: 'B',
    height: 175
}

객체리터럴보다 함수로 객체를 만들어야 나중에 구조변경도 용이하다.

  • 클래스를 이용해서 객체를 만드는 방법
interface Box {
    name:string;
    bloodType:string;
    height:number;
    birthday?: number;
}
class Person implements Box {
    name:string;
    bloodType:string;
    height:number;
    birthday?: number;
	<br>
    constructor(
        name:string,
        bloodType:string,
        height:number,
        birthday?: number
    ) {
        this.name = name;
        this.bloodType = bloodType;
        this.height = height;
        this.birthday = birthday;
    }
}
const Jake = new Person ('Jake','B',175)

클래스로 객체를 만드는 방법은 규격을 확인해야 할 필요가 있는 상황에서 장점이있다.if (Jake instanceof Person){ } 이런식으로Jake기 Person class의 인스턴스 객체인지 확인해보면 어떤 규격을 따랐는지 알 수 있으니까.

  • 객체의 동적바인딩
  1. 자바스크립트에서 Jake라는 객체에 adress라는 속성을 추가하고 싶다면 옆 코드처럼 추가해주면된다.Jake.adress = 'Seoul'
    삭제하고 싶다면 delete Jake.adress
  2. 타입스크립트에서는 Type의 규격을 정해 놨기 때문에 규격에서 옵션optional인 ? 속성을 추가해줘야한다. optional로 되어있어야 추가 삭제가 가능하다.
  • 객체를 변환하거나 객체를 합치는 동작
  1. const Jake1 = Jake;
    객체는 참조되기때문에 Jake 1도 Jake객체를 가르킨다.
  2. const Jake2 = Object.assign({}, Jake)
    첫번째 인자에 속성이 추가될 객체를 두고, 두번째 인자부터 추가할 속성이 있는 객체를 넣어준다. 그러면 Jake2는 Jake의 속성이 추가된 새로운 객체가 된다.
    만약 Jake와 같은 객체를 만들고 싶다면 첫번째 인자에 빈 객체를 두고, 두번째 인자에 Jake를 주면 Jake가 첫번째인자 빈객체로 들어가고 Jake2는 Jake와 같은 새로운 객체가 된다.
  3. const Jake3 = {...Jake, address:'seoul'};
    전개 연산자를 이용해서 새로운 객체를 만들고(Jake3)
    거기다가 기존객체를 모두 풀어헤쳐서(첫번쨰 인자 ...Jake)전개시키고
    재구성 해서 새로운 객체에 넣는 방법.
    2번 Object.assing과 동일한지만 주로 전개 연산자를 사용한다.
    새로운 속성도 추가해서 객체를 만들고싶다면 두번째인자에 속성(address:'seoul')을 추가해주면된다.
    4.const Jake4 = JSON.parse(JSON.stringify(Jake));
    복사하고자하는 객체를 문자열로 만든 다음에(JSON.stringify(Jake))
    문자열을 다시 객체로 바꾼다. JSON.parse
    그럼 원본객체와 연결이 끊어져서 새로운 객체를 만들 수 있다.
    객체가 너무 크거나 새로운 속성을 추가 하기 번거롭기 때문에 3번 전개연산자가 제일 많이쓰인다.
profile
열린 마음의 개발자가 되려합니다

0개의 댓글