본문 바로가기

자바스크립트

getter,setter

getter: 객체의 속성(property)값을 반환하는 메서드

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

 

const user = {
	name: 'cho',
      age: 30,
    
    getName() {
    	return user.name;
    },
    setName(value) {  //value -> kim
    	user.name = value;
    }
}

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

user.setName('kim');

 

 

사용이유?

1. 객체 내부 속성에 직접 접근하지 않아서 정보 은닉에 좋다( 보안강화, 코드 안전성 )

2. 옳지 않은 값을 사전에 방지할 수 있다. -> if문을 사용해서 값을 필터링 할 수 있다.(아래 예시처럼)

const user = {
	name: 'cho',
    age: 30,
    
    getAge() {
    	return user.age;
    },
    setAge(value) {
    	if(value > 100) {
        	console.error('나이는 100을 초과할 수 없습니다.')
            return;
        }
        	
    	user.name = value;
    }
}

user.setAge(400);

 

[사용법]

과거) get프로퍼티명() , set프로퍼티명()

요즘) 객체 안에서 속성 이름 앞에 get,set만 붙여서 정의

const user = {
	name: 'cho',
    age: 30,
    
    get userName() {
    	return user.name;
    },
    set userName(value) {
    	user.name = value;
    }
}

console.log(user.userName); //cho, 프로퍼티 호출 형식

이때의 getter,setter은 함수 호출형식이 아니다. 일반 프로퍼티 처럼 접근해야 사용가능하다.

** 읽고 쓸 순 있지만 실제로는 존재하지 않는다는 것을 알아야한다.

 

 

[프로퍼티 종류]

  • 데이터 프로퍼티 : 일반적인 property(key,value의 형태)
  • 접근자 프로퍼티 : getter,setter라는 함수를 가지는 특수 프로퍼티

**javascript 객체 속성에 접근하듯이 접근자 프로퍼티를 호출하면, 함수호출 문법( setName() )이 아니더라도 함수 호출하는 것과 같다. 

 

 

[주의점]

1.getter만 선언하지 말 것

2.setter 무한 루프

-> 접근자 프로퍼티의 이름을 중복이 되도록 하지 말 것

 

참고블로그)

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-getter-setter-%EB%9E%80

 

'자바스크립트' 카테고리의 다른 글

shift() & unshift() & Splice()  (0) 2022.11.13
전개 연산자  (0) 2022.11.11
javascript(class)  (0) 2022.10.22
javascript(constructor)  (0) 2022.10.20
javascript 공부(this)  (0) 2022.10.20