Getter와 Setter 함수

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 이곳으로 문의주세요! 😀

객체 안에 Getter 함수와 Setter 함수를 설정할 수 있다

const numbers = {
	a : 1,
	b : 2
}

numbers.a = 5;
console.log(numbers.a); // 5 출력

위와 같이 직접 멤버에 접근해서 객체의 특정 값을 직접적으로 바꿀 수 있다.

하지만 위 방법과 다르게 Getter 함수와 Setter 함수를 사용하는 방법이 있다.

Getter 함수와 Setter 함수를 사용하면 특정 값을 조회하려고 하거나 바꾸려고 할때, 우리가 원하는 코드를 실행할 수 있다.

const numbers = {
	a : 1,
	b : 2,
	get sum() { //함수명 앞에 get 키워드 붙인다!
		console.log('sum 함수가 실행됩니다!');
	return this.a + this.b;	//Getter 함수에서는 무조건 어떤 값을 반환해줘야 함
									//여기서 this는 numbers 의미!
	}
};

console.log(numbers.sum); //'sum 함수가 실행됩니다! \n3' 출력
numbers.b = 5;
console.log(numbers.sum); //'sum 함수가 실행됩니다! \n3' 출력

Setter 함수

const dog = {
	_name : '멍멍이',
	set name(value){ //Setter 함수는 앞에 set 키워드를 붙이고 무조건 어떤 값을 입력으로 줘야한다!
		console.log('이름이 바뀝니다!' + value); //특정 코드를 실행할 수 있다.
		this._name = value;
	}
};

console.log(dog._name); //멍멍이 출력
dog.name = '뭉뭉이'; //Setter 함수 실행
console.log(dog._name); //뭉뭉이 출력

여기서 객체 내 변수(?)의 이름(key값)이랑 Setter 함수와는 이름이 중복될 수 없으나! 똑같은 이름의 Getter 함수와 Setter 함수를 넣어줄 순 있다!!!

그래서 만약 위 코드에서 Setter 함수와 동일한이름으로 Getter 함수를 선언하면

const dog = {
	_name : '멍멍이',
	get name() {
		console.log('_name을 조회합니다...');
		return this._name;
	},
	set name(value){ 
		console.log('이름이 바뀝니다!' + value);
		this._name = value;
	}
};

console.log(dog.name); //멤버? 출력할 때, dog._name으로 직접 접근하는 것이 아니라 dog.name 으로 Getter 함수 호출하여 사용할 수 있다.
dog.name = '뭉뭉이';
console.log(dog.name); //Getter 함수 사용

Getter 함수와 Setter 함수를 사용한 다른 예시

const numbers = {
	_a : 1,
	_b : 2,
	sum : 3,
	calculate() {
		console.log('calculate');
		this.sum = this._a _ this._b;
	},
	get a() {
		return this._a;
	},
	get b() {
		return this._b;
	},
	set a(value) { //Setter 함수에서는 a 값 변경 후 calculate() 호출해서 값 업데이트 해줌!
		this._a = value;
		this.calculate();
	},
	set b(value) { //Setter 함수에서는 b 값 변경 후 calculate() 호출해서 값 업데이트 해줌!
		this._b = value;
		this.calculate();
	}
};

console.log(numbers.sum);	//'3' 출력
numbers.a = 5; 			//a값 업데이트 하고, calculate()함수 실행하여 'calculate' 출력
numbers.b = 7; 			//b값 업데이트 하고, calculate()함수 실행하여 'calculate' 출력
numbers.a = 9; 			//a값 업데이트 하고, calculate()함수 실행하여 'calculate' 출력
console.log(numbers.sum);	//'16' 출력
console.log(numbers.sum);	//'16' 출력
console.log(numbers.sum);	//'16' 출력

위 예제에서 numbers.sum을 출력하는 부분은 이미 계산되어 있는 부분을 출력하기만 한다!!

그래서 조회할때마다 계산하는 것이 아님!!!

그럼 만약 위의 코드 처럼 짜지 않고, sum이라는 Getter 함수만 사용한다면 어떨까??

const numbers = {
	a : 1,
	b : 2,
	get sum() {
		console.log('sum() 함수 실행');
		return this.a + this.b;	
};

console.log(numbers.sum);	//'sum() 함수 실행 \n3' 출력
numbers.a = 5; 			//a값 업데이트 하고, calculate()함수 실행하여 'calculate' 출력
numbers.b = 7; 			//b값 업데이트 하고, calculate()함수 실행하여 'calculate' 출력
numbers.a = 9; 			//a값 업데이트 하고, calculate()함수 실행하여 'calculate' 출력
console.log(numbers.sum);	//'sum() 함수 실행 \n16' 출력
console.log(numbers.sum);	//'sum() 함수 실행 \n16' 출력
console.log(numbers.sum);	//'sum() 함수 실행 \n16' 출력

위와 같이 사용하면 numbers.sum을 호출할 때 마다 굳이 안해도 되는 연산을 수행하기 때문에 살짝 비효율적이라고 볼 수 있다!!