getter & setter

이번 포스트에서는 getter 와 setter에 대해서 알아보겠습니다.

 

아래의 글과 연관이 될 것 같은 포스트여서 링크를 남겨두겠습니다.

https://jhhan009.tistory.com/123#comment11331584

extends & super

 

 

1. getter & setter

getter와 setter 역시 다른 언어를 배우고 왔다면 쉽게 아는 개념입니다.

• getter : 데이터 가져오기
• setter : 데이터 설정하기

 

그런데... 데이터 설정과 데이터 가져오기는 아주 쉽게 한다는 것을

이전 포스트와 개인의 경험을 통해서 알 수 있습니다.

코드를 보겠습니다.

let person = {
    name : "Kim",
    age : 30,
};

console.log(person.name);

person.age += 1;
console.log(person.age);

코드와 결과입니다.

• person.name으로 이름을 쉽게 구할 수 있습니다.
• person.age += 1 을 통해서 age를 쉽게 설정할 수 있습니다.

그러면 '굳이' getter와 setter를 써야 할까요?

 

코딩을 할 때 Object 혹은 그와 비슷한 데이터를 다루는 경우

데이터에 직접적으로 접근해서 수정 & 출력하는 행위를 추천하지 않습니다.

대신, getter를 통해 간접적으로 데이터를 가져오고

setter를 통해 간접적으로 데이터를 수정하는 것이

(비교적)안전하다고 여깁니다.

(직접 수정 & 출력하는 경우, 나중에 디버깅할 때 어려움이 많기 때문입니다.)

 

그러면 getter와 setter가 있는 경우를 보겠습니다.

let person = {
    name : "Kim",
    age : 30,
    getAge() { return this.age; },
    setAge(age) { this.age = age; }
};

console.log(person.getAge());
person.setAge(27);
console.log(person.getAge());

일단 getter 1개, setter 1개만 만들어 봤습니다.

• get{변수이름}, set{변수이름}으로 명명하는 것이 일반적입니다.
• 그 외의 경우에는 상황에 맞춰서 진행합니다.

 

그리고 결과는 위와 같습니다.

데이터 수정 및 출력을 잘 하는 것을 알 수 있습니다.

 

getter 와 setter를 쓰는 이유를 조금 더 정리하자면

• 내부에 있는 데이터를 직접적으로 수정하는 것이 아니기 때문에 (비교적)안전함
• object 안의 데이터가 복잡한 경우 함수를 써서 데이터를 가져오는 것이 더 유리함

입니다.

 

2. getter & setter 이점(?)

조금 더 알아보겠습니다.

person 에서 age는 (아마도) number 타입만 받는 변수입니다.

근데 string 타입을 받으면 어떻게 될까요?

person.age = '40';

물론 위의 코드 자체에는 문제가 없지만..

나중의 경우 문제가 생길 가능성이 매우 높아집니다.

하지만, setter 함수를 설정해놓는 경우 이런 문제점을 해결할 수 도 있습니다.

// 1.
setAge(age) {
	this.age = parseInt(age);
}

// 2.
setAge(age) {
	if(typeof age !== "number") {
    	// 잘못 되었다는 경고창 혹은 문구
        return;
    }
    this.age = age;
}

• 1의 경우 parseInt를 통해 number 타입으로 변경합니다.
• 2의 경우 number 타입을 쓰지 않으면 변경 자체를 안 하도록 막았습니다.
• 어떤 걸 쓰느냐에 따라 결과가 다르겠지만
  어쨌든 age 변수에는 계속해서 number 타입이 들어갈 것입니다.
• 이렇게 해서 age 라는 변수를 보호할 수 있는 안전장치를 설정할 수도 있습니다.

 

getter의 경우도 데이터 변경이 잠시만 필요한 경우

코드를 추가해서 진행할 수 있을 것입니다.

 

3. get / set 키워드 붙이기

하지만 getter / setter의 경우 함수 형태이기 때문에

어딘가가 불편하다고 느끼는 사람이 있을 수 있습니다.

그럴 때 아래와 같은 방법으로 진행하는 것도 괜찮습니다.

let person = {
    name : "Kim",
    age : 30,
    get getAge() { return this.age; },
    set setAge(age) { this.age = age; }
};

console.log(person.getAge);
person.setAge = 33;
console.log(person.getAge);

코드와 결과인데, 뭔가 색다른 것을 느낄 수 있습니다.

• person.getAge : person의 age 값을 가져올 수 있습니다.
• person.setAge = 33 : person의 age 값을 변경할 수 있습니다.

앞에 get / set 이라는 키워드를 붙여서

뭔가 더 간단하다고 느낄 수 있습니다.

하지만 단점은 함수 형태로 쓰지는 못한다는 것입니다.

즉, person.getAge()  |  person.setAge(33) 으로 쓰면 에러가 발생합니다.

 

4. class에서도 get / set 사용하기

바쁘시다면 이 부분은 안 보고 넘어가셔도 됩니다.

class 내에서 사용하는 경우에는 다음과 같이 사용하면 됩니다.

class Person {
  constructor() {
    this.name = 'Kim';
    this.age = 14;
  }
  get getAge() {
    return this.age;
  }
  set setAge(age){
    this.age = age;
  }
  getName() {
  	return this.name;
  }
  setName(name) {
  	this.name = name;
  }
}

let p1 = new Person();

console.log(p1.getAge);
p1.setAge = 19;
console.log(p1.getAge);
console.log(p1.getName());
p1.setName("Jung");
console.log(p1.getName());

object 에서 사용한 것과 별로 다를 것이 없습니다.

 

 

이렇게 getter / setter 에 대해서 알아봤습니다.

함수를 사용하거나 키워드를 사용해서 진행하면 됩니다.

데이터의 원본을 직접 건드리지 않아 안전하기 때문에

코딩 시 많이 추천되는 부분으로 알고 있습니다.

알고 있다면 조금이나마 도움이 될 것 같습니다.

 

 

이렇게 해서 포스트를 마치겠습니다.

 

 

출처: 코딩애플 - 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법