데이터로서의 객체

🔎 객체 리터럴

• 객체 리터럴(객체 생성 표기법)로 객체 생성 - 코드로 객체를 생성

// 객체 문법
type Box = {
    width:number;
    height:number;
    borderRadius:number;
    backgroundColor:string;
    borderWidth?: number;	// ? : optional
    ['className']?: string;	// [] (computed property) : 속성명을 값으로 취급해서 기술하는 표기법
}

// 객체 리터럴
let box: Box = {  // type :Box
    width:200,
    height:200,
    borderRadius:5,
    backgroundColor:'red',
}  // 타입 맞지 않으면 타입스크립트가 체크해줌!

🔎 함수 사용해서 객체 만들기

// 함수 이용해서 객체 생성
type Box = {
    width:number;
    height:number;
    borderRadius:number;
    backgroundColor:string;
    borderWidth?: number;	
    ['className']?: string;	
}

function makeBox(
    width:number,
    height:number,
    borderRadius:number,
    backgroundColor:string,
) : Box {	// Box라는 타입을 리턴
    return {
      width,
      height,
      borderRadius,
      backgroundColor
    }; // 축약형! 데이터 담고 있는 변수와 변수 이름이 속성명으로 될 때 축약형 문법 사용. 
}

makeBox(100,100, 0, 'blue');

📍 객체 리터럴 사용해서 만든 객체와 함수로 만든 객체는
-> 데이터로서의 객체의 전혀 차이는 없고, 코드의 구성상 차이가 있음!

📍 객체 리터럴 : 객체가 구성되어야 할 형식이라는 틀이 있고 틀에 맞춰 데이터 들어가는 구조
-> 틀과 데이터가 하나로 묶여 있어서 분리시키려면 에디터로 직접 코드 수정해야함.

📍 함수로 만든 객체 : 틀과 데이터를 분리한게 함수로 객체를 만든 것.

makeBox(100,100, 0, 'blue'); 는 데이터 바깥쪽에서 공급하고,
makeBox는 데이터 받아서 구조와 합성한 다음에 최종적인 객체를 만들어내는 형식의 프로그래밍 코드 구성.

📍 예시 상황1 _ Box객체를 500개 만들어야한다면?

• 객체 리터럴 사용해서 만들면!
  -> 500개를 데이터 바꿔가면서 만들어야함. 500개 객체가 모두 구성 정보도 갖고 있고, 데이터도 갖고 있게 됨.
  
• 함수로 객체 생성 하면!
  -> 구성 정보 담고 있는 makeBox 는 1개, 데이터만 갖고 있는 makeBox호출하는 코드만 500개 등장하면 됨.
  ( makeBox(100,100, 0, 'blue'); )
  

📍 예시 상황2 _ "Box 객체에 borderRadius는 radius라는 속성명으로 바꾸겠다"

• 객체 리터럴, 함수 사용 객체 => 2개의 코드 상황이 있다!
• 객체 리터럴
  -> 구성 정보와 데이터가 같이 있는 500개의 객체는 500번 고쳐야 함.
• 함수 사용 객체
  ->makeBox의 borderRadius 하나만radius로 바꾸면 됨!
  
  구조 변경에 용이한 구조는?? 당연히 함수를 이용하여 만든 객체가 변화에 훨씬 더 용이한 구조!
  -> 구성 성분이 다른, 데이터와 구조는 완전히 다른데, 이게 같이 있으면 여러 가지 단점이 생김.
  분리해 놓으면 나중에 여러가지 장점이 생긴다~!!

🔎 클래스 사용해서 객체 만들기

• 클래스를 이용해서 객체를 만드는 방법.
• 클래스도 기본적으로 함수의 기반이기 때문에 기본적으로 인스턴스라고 하는 객체를 만드는 문법 구성 요소.
• 인스턴스 객체도 객체이므로 데이터로서의 구성만 가지고 있다고 하면 위에서 함수로 만든makeBox와 똑같은 객체로 만들 수 있음.

// 클래스 이용해서 객체를 만듦
type Box = {
    width:number;
    height:number;
    borderRadius:number;
    backgroundColor:string;
    borderWidth?: number;	
    ['className']?: string;	
}
class Shape implements Box{
    width:number;
    height:number;
    borderRadius:number;
    backgroundColor:string;

    constructor(
        width:number,
        height:number,
        borderRadius:number,
        backgroundColor:string,
    ) {
        this.width = width;
        this.height = height;
        this.borderRadius = borderRadius;
        this.backgroundColor = backgroundColor;
    }
}

const boxShape = new Shape(10, 10, 0, 'blue');

if(boxShape instanceof Shape){ // Shape클래스를 이용해서 만든 인스턴스 객체라면 true
}

📍 구성 내용만 보면 함수로 만든 makeBox와 거의 유사하다.

📍 클래스 문법 형식만 갖고 있을 뿐, 결론적으로 인스턴스 객체를 만든 인스턴스 객체의 모양과
makeBox가 만든 리턴한 객체의 모양은 똑같음.

📍 많이 만들어질 가능성 있는 객체라면 객체를 만드는 전용함수를 만들어 두는 것이 좋음.

📍 그러면 일반 함수를 이용해서 만들까? 클래스를 이용해서 만들까?

• 순수하게 데이터만 들어가 있다면 둘다 무방!
• 클래스로 만든 객체의 장점
  - 클래스가 리턴한 인스턴스 객체(boxShape)를 어떤 클래스로 만든 객체인가 확인해 볼 수 있음.
  -> if(boxShape instanceof Shape)
  
  - makeBox는 어떤 함수로 만들었는지 모름. 규격이 같으면 똑같아 보임.
  하지만 인스턴스 객체는 명확하게 어떤 클래스가 만들어 놓은 인스턴스 객체인지를 확인할 수 있기 때문에 나중에 규격확인 가능.
  
  규격을 확인해야 할 필요가 있을 때 장점이기에 어떤기능이 필요한지에 따라 선택하기!

🔎 객체 변형

type Box = {
    width:number;
    height:number;
    borderRadius:number;
    backgroundColor:string;
    borderWidth?: number;	
    color?:string;
    ['className']?: string;	
}

// 객체 변형
box.borderRadius = 10;	// 코드로 접근하는 방법
box['className'] = 'box rounded';  // 값으로써 접근하는 방법

// 객체 만들고 난 다음 속성 추가하고 싶다면?
box.color='blue';  // js는 이렇게만 하면 되지만, ts는 type지정해줘야함!

// 객체 속성 삭제
delete box.color;
delete box.width; // ts에서 optional아니면 error

// 객체는 아무리 옮겨 다녀도 참조타입이기 때문에 절대로 원본 바뀌지 않음.
const box1 = box;

// 이전 객체와 연결 끊고 값 복사하고 싶을 때. 새로운 객체로 만들고 싶을 때
// 1. Object가 제공하는 assign메소드 사용
const box2 = Object.assign({}, box);

// 2. 전개 연산자
const box4 = {...box, borderRadius: 10}; //  새로운 속성 추가 -> borderRadius: 10

// 3. 복사할 객체를 문자열로 만든 다음 문자열을 다시 객체로 바꿈.
const box3 = JSON.parse(JSON.stringify(box));

1. assign메소드

• 첫번 째 인자로 준 객체에 두 번째, 세 번째, 네 번째 ... 가변인자를 받음. 순서대로 첫 번째 인지한테 오버라이트함.
• 최종적으로 주어진 객체 모두를 하나의 첫 번째 객체 안에다가 모두 결합시킨 다음에 결합된 객체를 리턴. 그래서 어떤 객체에 다른 객체 속성 추가하고 싶다면 그 객체를 첫 번째 인자로 두고, 추가하고 싶은 객체를 뒤에 나열하면 됨.
• 새로운 객체를 만들고 싶다면? 첫 번쨍 인자에 빈 객체를 하나 두고( {} ), 그 다음에 복사하고싶은 객체를 주면 두 번째에 있는 객체의 속성을 빈객체에 추가.
  const box2 = Object.assign({}, box);
  -> box2 box1 다른 객체가 됨.
  
  2. 전개 연산자
• 전개 연산자를 이용해서 새로운 객체를 만들고 기존 객체를 모두 다 풀어헤쳐서 전개시킨 다음에 재구성해서 새로운 객체에다가 넣는 방법
• Object.assign를 사용하는 방법, 전개연산자를 이용한 차이일 뿐 똑같음. 보통은 연산자 이용방법 선호!
  
  3. 객체를 문자열로 만든다 : JSON
• 문자열로 만들어진 JSON을 다시 객체로 바꾸면 원본 객체와 연결이 완전히 끊어짐.
  -> JSON.stringify를 이용해서 복사하고 싶은 객체를 문자열로 바꾼 다음에 즉시 바뀐 문자열을 JSON.parse를 이용해 객체로 변환.
• 변환된 객체를 변수에 넣으면 box3는 새로운 객체 됨.
  
  🔊 객체가 너무 크거나, 객체를 만들면서 새로운 속성을 추가가 번거롭기 때문에 일반적으로 데이터로서 객체를 복사할 때 2번 방법을 많이 사용!