5.3 JavaScript Getter, Setter

지구·2023년 7월 20일
0

JavaScript

목록 보기
27/30

Getter: 값을 얻는 용도의 메소드
Setter: 값을 지정하는 용도의 메소드

Getter 예시

class User {
	constructor(first, last) {
		this.firstName = first
		this.lastName = last
	}
	**get fullName: function() {
		return `${this.firstName} ${this.lastName}`
	}**
}

const jigu = new User('jigu', 'Kim') // 생성자 함수

**console.log(jigu.fullName)** // jigu Kim

jigu.firstName = 'Neo'

**console.log(jigu.fullName)** // Neo Kim

Setter 예시

class User {
	constructor(first, last) {
		this.firstName = first
		this.lastName = last
	}
	get fullName: function() {
		return `${this.firstName} ${this.lastName}`
	}
	set fullName: function(value) {
		console.log(value)
	}
}

const jigu = new User('jigu', 'Kim') // 생성자 함수

console.log(jigu.fullName) // jigu Kim

jigu.firstName = 'Neo'

console.log(jigu.fullName) // Neo Kim

**jigu.fullName = 'Neo Anderson' // Neo Anderson**
console.log(jigu) // {firstName: Neo, lastName: Kim} 

fullName이라는 setter 함수를 통해 값을 받아 console.log하여 ‘Neo Anderson’이 출력되었지만 아직 jigu라는 객체의 firstName, lastName은 Neo, Kim인 상태이다. 따라서 아래와 같이 코드를 변경하여 setter함수로 받은 값으로 jigu 객체의 값을 변경해주어야한다.

class User {
	constructor(first, last) {
		this.firstName = first
		this.lastName = last
	}
	get fullName: function() {
		return `${this.firstName} ${this.lastName}`
	}
	set fullName: function(value) {
		[this.firstName, this.lastName] = value.split(' ')
	}
}

const jigu = new User('jigu', 'Kim') // 생성자 함수

console.log(jigu.fullName) // jigu Kim

jigu.firstName = 'Neo'

console.log(jigu.fullName) // Neo Kim

jigu.fullName = 'Neo Anderson' // Neo Anderson
console.log(jigu) // Neo Anderson

위 코드와 같이 setter 함수를 이용해 받은 값을 split를 이용해 띄어쓰기를 기준으로 나눈 뒤 jigu 객체의 값을 변경해주었다.

따라서 setter는 위 처럼 값을 할당할 때 사용한다.

profile
프론트엔트 개발자입니다 🧑‍💻

0개의 댓글