객체 - Getter와 Setter 함수

Getter와 Setter 함수

 

사용하는 이유는 캡슐화, 정보은닉을 위해서 사용합니다.

단순히 사용하여서 결과를 얻을수 있지만, 얻는 과정의 내부로직은 알 수 없게 하는 이점이 있습니다. 

 

 

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

 

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

number.a =5;
console.log(numbers); // Object { a: 5, b: 2}

const numbers = {
	a: 1,
    b: 2,
    get sum() {
    	console.log('sum 함수가 실행됩니다!');
        // 함수를 무조건 반환해야합니다.
        return this.a = this.b;
    }
}

console.log(numbers.sum); // sum함수가 실행됩니다, 3  
                          //--> 조회만 했을 뿐인데 함수가 실행된것
number.b =5; 
console.log(numbers.sum); // sum함수가 실행됩니다, 6

getter함수는 조회하려고 할때 특정 코드를 실행하는것

함수의 실행 numbers.sum() 이 아닌 numbers.sum 조회 만 하였을뿐인데 함수가 실행된 것이다. 

 

const dog = {
	_name : '멍멍이' // _를 사용하는것은 setter함수와 변수명을 겹치지 않으려고 사용하는것
    set name(value) {
    	console.log('이름이 바뀝니다..'+value);
    	this._name = value;
    }
};

console.log(dog._name); // 멍멍이
dog.name = '뭉뭉이'; // 이름이 바뀝니다.. 뭉뭉이
console.log(dog._name); // 뭉뭉이



// get과 set의 이름은 같게 만들수 있다. 
// dog.name을 조회하면 get/set 둘 다 조회가 되어서 나간다.

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

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){
    	this._a = value;
        this.calculate();
    },
    set b (value){
    	this._b = value;
        this.calculate();
    }
};

console.log(numbers.sum); 3 calculate
numbers.a = 5; //calculate
numbers.b = 7; //calculate
numbers.a = 9; //calculate --> sum값이 자동으로 업데이트
console.log(numbers.sum); //16  --> ( 7 + 9 )가 되어서 16이 나온다.
console.log(numbers.sum); //16
console.log(numbers.sum); //16

//값을 설정할때마다 sum값이 자동으로 업데이트
//조회를 할때마다 계산되는것이 아니라 값이 바뀔때마다 계산되는것

const numbers ={
	a :1,
    b :2,
    get sum (){
  		console.log('sum');
        return this.a + this.b;
    }
};
console.log(nubmers.sum); // sum
                             3
numbers.a = 5;
numbers.b = 7; 
numbers.a = 9; 
console.log(numbers.sum); //sum
                            16
console.log(numbers.sum); //sum
                            16
console.log(numbers.sum); //sum
                            16
                            
// 조회할때 마다 값을 구한다. ( 비효율적 )

Setter 함수를 설정 할 때에는 함수의 앞부분에 set 키워드를 붙입니다.

Setter 함수를 설정하고 나면, numbers.a = 5 이렇게 값을 설정했을 때 5 를 함수의 파라미터로 받아오게 됩니다.

위 코드에서는 객체 안에 _a, _b 라는 숫자를 선언해주고, 이 값들을 위한 Getter 와 Setter 함수를 설정해주었습니다.

아까 전에는 만든 객체에서는 numbers.sum 이 조회 될 때마다 덧셈이 이루어졌었지만, 이제는 a 혹은 b 값이 바뀔 때마다 sum 값을 연산합니다.