자바스크립트 getter, setter (게터 세터) 분석하기

 

 

 

 

 

 

※ 게터와 세터가 너무 이해가 안돼서 개인적으로 알아보기 쉽게 작성한 코드이니 정답이 아닐 수 있습니다.

혹시 더 좋은 설명 있으시면 코멘트 부탁드려요~

 

 

class User{
	constructor(firstName, lastName, age){
		this.firstName = firstName;
		this.lastName = lastName;
		this.data = age;
	}
	get data(){
		console.log('게터getter');
		return this._newInstance;
	}

	set data(value){
		console.log('세터setter');
		this._newInstance = value;
		}
	}

const chloe = new User( 'Chloe', 'Kim', 20 )

console.log(chloe.data);
// 20
console.log(chloe);	
// User {firstName: 'Chloe', lastName: 'Kim', _newInstance: 20}

 

 

 

 

1. chloe 인스턴스 생성해서 User 생성자함수에 적용한다.

this.firstName은 firstName 인자 'chloe'

this.lastName은 lastName 인자 'Kim'

this.data는 get과 set이 설정되어있으니 먼저 불러온다.

 

 

 

 

 

2. 설정하는 set 먼저 동작한다.

새로운 인스턴스 this._newInstance에 value값 = 20을 넣는다.

 

 

 

 

3. set 설정 후, 데이터 갖고오는 get이 동작한다.

반환하는 값은 set에서 설정한 this._newInstance을 갖고와서 value 값, 즉 20이 나온다.