패스트캠퍼스 환급챌린지 27일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250727(일) 27일차

문법 - 객체 - 데이터로서의 객체

 

객체 생성

객체를 만드는 가장 기본적인 방법은 객체 리터럴

익숙한 문법이지만 타입을 지정하고 그에 맞춰 객체를 생성한다는 구조적인 접근은 새롭게 느껴짐

const box: Box = {
  width: 100,
  height: 100,
  borderRadius: 5,
  backgroundColor: 'blue'
};

Box라는 타입은 타입스크립트의 타입 별칭으로 정의되며 옵셔널 속성과 컴퓨터 프로퍼티까지 포함할 수 있다

단순히 값을 담는 그릇이 아닌 데이터 구조를 설계하는 도구

 

함수로 객체를 만드는 이유

function makeBox(width, height, borderRadius, backgroundColor): Box {
  return { width, height, borderRadius, backgroundColor };
}

하나의 객체 들에 수많은 데이터를 대입해서 객체를 반복 생성할 때 이 구조가 엄청난 장점이 된다

ex) 박스 500개를 만들어야 한다면 리터럴 방식은 500줄을 다 고쳐야하지만 함수 방식은 makeBox( )를 500번 호출하면 끝

 

클래쓰까지 확장되는 객체 생성

class Shape {
  constructor(width, height, borderRadius, backgroundColor) {
    this.width = width;
    this.height = height;
    this.borderRadius = borderRadius;
    this.backgroundColor = backgroundColor;
  }
}

box instanceof Shape  // true

객체의 속성과 생성자를 통해 데이터를 주입하는 방식.

클래스 기반 객체는 인스턴스 판별이 가능

 

객체 조작

객체를 만든 뒤에도 자바스크립트에서는 속성을 자유롭게 추가/삭제할 수 있지만

타입스크립트에서는 이런 동작을 위해 타입 정의에 옵셔널 속성이 명시돼야 오류없이 처리된다

 

그동안 객체는 그냥 데이터 담는 틀이라고만 생각했지만

이번 강의를 통해 객체는 설계와 구조, 유지보수성, 확장성까지 고려해야 한다는 것을 체감함