.svg)
해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.
속성과 메서드 살펴보기
자바스크립트에는 객체라는 데이터 타입이 있다는 것, 다들 아시죠? 객체 안에는 두 가지 데이터가 들어갈 수 있는데, 바로 속성과 메서드입니다.
내용물이 순수한 데이터인 경우, 우리는 이를 속성이라고 칭하고, 내용물이 함수인 경우, 이를 메서드라고 부릅니다.
속성에 대해 좀 더 직접적으로 살펴보기 위해 객체 예시를 하나 만들어 보았습니다.
const obj = {
name: "Minsu",
age: 20,
getFamilyName: function() {
return "Park"
}
getBloodType() {
return "AB"
}
}
obj.name // "Minsu"
obj.age // 20
obj.getFamilyName(); // "Park"코드 블럭에서 볼 수 있듯이, 객체 내의 속성에 접근하는 방식은 객체 변수명 뒤에 점을 찍고 key 값을 넣어주면 되겠습니다.
당연히 각각 "Kim"과 20이라는 숫자를 값으로 반환할 것입니다.
객체의 세 번째 항목은 key 안에 함수가 들어가 있죠? 따라서 메서드입니다.
메서드 역시 속성과 같은 문법으로 접근할 수 있습니다. 저번 시간에 다룬 것 처럼, 함수 역시도 값을 가진 것으로 취급하기 때문에 속성과 같은 방법으로 접근이 가능하다고 볼 수 있을 것 같습니다.
마지막 항목도 똑같은 메서드인데요, 보시는 것처럼 축약형으로 작성하였습니다. 딱 봐도 마지막 방식으로 쓰는 것이 코드가 더 적어 보이죠?
실제로 저도 객체 내 메서드를 작성할 때 거의 다 네 번째 방식으로 작성했습니다.
코드 블럭에는 굳이 적지 않았습니다만, ES6에서 등장한 화살표 함수로 메서드를 정의해도 괜찮습니다!
특히 화살표 함수는 중괄호를 생략할 수 있을 뿐만 아니라 특정 값을 리턴할 경우 return 키워드도 생략 가능하기 때문에 아주 효율적인 작성 방식입니다.
Getter/Setter
위의 예시를 그대로 갖고 와서, 속성 중 age를 한 번 조작해보려고 합니다.
const obj = {
name: "Minsu",
age: 20,
getFamilyName: function() {
return "Park"
}
getBloodType() {
return "AB"
}
}
obj.age = 21;
obj.age = -20;접근하는 방법을 알고 있으니 수정도 쉽습니다.
음... 그런데 21살로 바꾸는 건 아무 문제가 없어요. 근데 왠 마이너스 20을 넣었습니다. 나이가 어떻게 음수가 되겠어요? 그래서 이걸 막아보려고 한다고 상상하겠습니다.
애석하게도, 우리가 변수를 통해 생성한 객체는 이를 막을 수 있는 방법이 없습니다.
하지만 우리에게는 객체를 만들 수 있는 방법이 하나 더 있어요! 바로 class 문법을 통해 인스턴스 객체를 생성하는 방법입니다.
class Person {
bloodType: string;
constructor() {
this.bloodType = bloodType;
}
}
const p1 = new Person('B')
p1.bloodType // 'B'class를 통해 bloodType을 string이라고 정의했습니다. 따라서 Person이라는 class를 통해 생성한 인스턴스 객체는 bloodType의 값으로 문자열만을 받게 될 것입니다.
예시가 혈액형으로 바뀌었지만, age의 경우에도 같은 방식으로 number만 받는다고 정의해주면 되겠죠.
같은 방식으로 메서드 역시 건네받는 인자에 데이터 타입을 지정할 수 있습니다.
그런데 메서드명을 함수처럼이 아니라 속성명처럼 접근하고 싶을 때 set을 사용할 수 있습니다. 다음 코드 블럭을 참고해 보세요.
(함수명과 속성을 구분하려고 속성 bloodType 앞에 _를 추가했습니다.)
class Person {
_bloodType: string;
age: number;
constructor() {
this._bloodType = bloodType;
}
set bloodType(btype: string) {
this._bloodType = bType;
}
}
const p1 = new Person('B')
p1.bloodType = 'A' 이렇게 set 키워드를 사용하면 메서드임에도 불구하고 속성에 접근하는 것과 같이 객체 메서드를 호출할 수 있습니다.
맨 아래쪽에 원래 B였던 혈액형을 A로 바꾸는 코드를 확인하실 수 있습니다.
이를 setter 방식이라고 하는데, 이걸로는 값을 바꿔줄 수는 있어도 원래 있던 값을 읽어 오지는 못합니다.
여기서 쓰이는 방식이 바로 getter입니다.
class Person {
_bloodType: string;
age: number;
constructor() {
this._bloodType = bloodType;
}
set bloodType(btype: string) {
this._bloodType = bType;
}
get bloodType() {
return this._bloodType
}
}
const p1 = new Person('B')
p1.bloodType // 'B'이렇게 set 대신 get을 통해 메서드를 추가해주면 속성처럼 접근해 값을 불러올 수 도 있습니다.
속성 추가/삭제
자바스크립트에는 동적 바인딩이라는 개념이 있는데, 이 때문에 객체에 속성을 쉽게 추가하고 삭제할 수 있습니다.
const obj = {
name: "Minsu",
age: 20,
}
obj.bloodType = 'B'
obj.isMarried = false
delete obj.age;예시만 봐도 이해가 되시죠? 그냥 .속성명에 값을 할당하기만 해도 객체에는 해당 속성이 추가가 됩니다.
(당연히 기존에 존재하지 않던 속성명이어야겠죠?)
그리고 delete 키워드를 사용해 특정 속성을 지우는 것도 가능합니다.
결과적으로 코드 블럭 내의 obj라는 객체는 age가 사라지고, bloodType과 isMarried 라는 속성이 추가되겠습니다.
