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

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

250723(수) 23일차

문법 - 속성과 메소드

 

속성과 메소드의 차이

const user = {
  name: "Min Tae",
  age: 40,
  getFamilyName: function () {
    return "Kim";
  }
};

객체는 데이터와 기능을 함께 담고 있는 구조

name, age : 단순한 값 = 속성(property)

getFamilyName : 값이 함수인 속성 = 메소드(method)

 

메소드 선언 방식의 변화

1) 전통 방식

getFamilyName: function() {
  return "Kim";
}

 

2) ES6 축약형

getFamilyName() {
  return "Kim";
}

 

3) 화살표 함수 사용

getLastName: () => "Kim"

// 화살표 함수는 this 바인딩이 다르므로 클래스 메소드에는 주의 필요

 

값 보호 : 유효하지 않은 데이터 막기

user.age = -500;

객체의 속성은 자유롭게 변경 가능하지만, 유효하지 않은 값을 막을 방법이 없다.

 

이런 상황에선 속성처럼 보이지만 실제로는 함수인 구조로 제어할 수 있는데

이 때 사용하는 것이 바로 getter와 setter

 

클래스와 getter, setter

class Person {
  constructor(bloodType) {
    this._bloodType = bloodType;
  }

  get bloodType() {
    return `${this._bloodType}형`;
  }

  set bloodType(type) {
    if (["A", "B", "AB", "O"].includes(type)) {
      this._bloodType = type;
    }
  }
}

const p1 = new Person("B");
console.log(p1.bloodType); // "B형"
p1.bloodType = "C"; // 무시됨

내부에서는 메소드지만 외부에서는 속성처럼 사용할 수 있음

setter 내부에 유효성 검사 로직을 넣어 입력값 제한 가능

 

이번 강의는 자바스크립트 객체를 구성하는 속성과 메소드에 대해 학습

단순히 객체를 정의하는 것을 넘어서 객체의 설계까지 신경 써야 한다