Getter & Setter

김현준·2024년 4월 12일

자바스크립트

목록 보기

11/20

프로그래밍 Getter & Setter 개념

객체 지향 프로그래밍에서 사용되는 개념이며, 일종의 메서드

Getter: 객체의 속성(property) 값을 반환하는 메서드
Setter는 객체의 속성 값을 설정, 변경하는 메서드

일반적으로 user 객체의 프로퍼티에 접근하는 방법

const user = {
	name: 'inpa',
    age: 50
}

console.log(user.name); // inpa

user.name = 'tistory';

getName(), setName() 메서드를 통해 경유해서 설정하도록 하는 기법

const user = {
	name: 'inpa',
    age: 50,
    
    // 객체의 메서드(함수)
    getName() {
    	return user.name;
    },
    setName(value) {
    	user.name = value;
    }
}

console.log(user.getName()); // inpa

user.setName('tistory');

Getter & Setter 활용하기

굳이 번거롭게 Getter와 Setter를 사용할 이유는?

객체 내부 속성에 직접 접근하지 않아 객체의 정보 은닉이 가능
옳지않은 값을 넣으려고 할때 이를 미연에 방지

옳지않은 값을 넣으려고 할때 이를 미연에 방지하는 예시
user.age 프로퍼티에 400이라는 나이값은 옳지않은 값이니 이를 할당하지 못하도록 해야되는데, Setter 메서드를 통해 경유하도록 설정하면 메서드 내에서 if문을 통해 값을 필터링

const user = {
	name: 'inpa',
    age: 50,
    
    getAge() {
    	return user.age;
    },
    setAge(value) {
    	// 만일 나이 값이 100 초과일 경우 바로 함수를 리턴해서 user.name이 재설정되지 않도록 필터링
    	if(value > 100) {
        	console.error('나이는 100을 초과할 수 없습니다.')
            return;
        }
        	
    	user.name = value;
    }
}

user.setAge(400); // 나이는 100을 초과할 수 없습니다.

자바스크립트 Getter & Setter

ES6 최신 자바스크립트부터는 Getter와 Setter를 간단하게 정의할 수 있는 문법이 별도로 추가

객체 리터럴 안에서 속성 이름 앞에 get 또는 set 키워드만 붙여 Getter와 Setter를 정의할 수 있게 됨

const user = {
	name: 'inpa',
    age: 50,
    
    // userName() 메서드 왼쪽에 get, set 키워드만 붙이면 알아서 Getter, Setter 로서 동작된다
    get userName() {
    	return user.name;
    },
    set userName(value) {
    	user.name = value;
    }
}

이때의 Getter와 Setter 은 함수 호출 형식이 아닌, 일반 프로퍼티처럼 접근해서 사용
getter와 setter 메서드를 구현하면 객체엔 userName이라는 가상의 프로퍼티가 생기는데, 가상의 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지 않는 프로퍼티

console.log(user.userName); // inpa

userName = 'tistory';

접근자 프로퍼티

자바스크립트의 객체의 프로퍼티는 크게 두 종류

데이터 프로퍼티(data property)
객체 내부에 저장된 실제 데이터 값으로서 우리가 일반적인 프로퍼티라고 부르는 대상
접근자 프로퍼티(accessor property)
일반적인 프로퍼티와 달리 키(key)와 값(value)을 가지지 않고 getter와 setter라는 함수를 가지는 특수한 프로퍼티
Getter와 Setter 함수 자체가 접근자 프로퍼티

let person = {
  /* 데이터 프로퍼티 */
  firstName: "John",
  lastName: "Doe",
  
  /* 접근자 프로퍼티 */
  get fullName() {
    return this.firstName + " " + this.lastName;
  },
  set fullName(name) {
    let names = name.split(" ");
    this.firstName = names[0];
    this.lastName = names[1];
  }
};

console.log(person.firstName); // "Jane" 출력
console.log(person.lastName); // "Doe" 출력

console.log(person.fullName); // "John Doe" 출력
person.fullName = "Jane Doe"; // Setter 호출

Getter & Setter 주의점

Getter 만 선언할시
만일 Getter만 선언하고 Setter은 선언 안했을시, 아래 예시의 fullName 접근자 프로퍼티는 getter 메서드만 가지고 있기 때문에 값을 할당하려고 하면 에러가 발생

let user = {
  get fullName() {
    return `...`;
  }
};

user.fullName = "Test"; // Error (프로퍼티에 getter 메서드만 있어서 에러가 발생합니다.)

Setter 무한 루프
만일 아래와 같이 데이터 프로퍼티명과 접근자 프로퍼티명이 둘이 같을 경우 Setter의 무한 루프에 빠져 버리게 된다. 따라서 접근자 프로퍼티의 이름을 중복이 되도록 하면 안된다.

let user = {
	name : 'inpa',
    
    get name() {
    	return user.name;	
    },
    
    set name(value) {
    	user.name = value;
    }
}

// user 객체의 name 프로퍼티 값을 변경
user.name = 'inpa2';