자바스크립트 - class, getter, setter 란 ?

여태 class가 뭔지 몰랐던것을 반성하며 포스팅합니다잇 !

 

1. class란?

ES6에서 새롭게 추가된 'class' 

기존에 존재하던 prototype을 베이스로 문법만 추가된 것이라고 합니다!    (나중에... 꼭.. 알아보쟈..)

 

클래스는 연관있는 데이터를 한 곳에 묶어놓는 일종의 컨테이너 인데유~

속성(fields) 과 행동(methods)이 정의되어 있습니다!

class는 일종의 틀인데요~ 이것을 이용해서 데이터를 넣어 찍어내면?  

object를 만들 수 있습니다~

class는 한번만 선언하면 되고 여러번 재사용 할 수 있습니다~~~

 

백문이 불여일견

만들면서 이해해 봅시댜잇!

---

1-1. class 선언하기!

class 키워드로 시작해서 Person 이라는 class 를 만들겠슴다.

 

constructor 라는 생성자를 이용해서 fields를 만들었습니다.

fields는 이름과 나이입니다.

constructor의 인자로 나중에 오브젝트를 만들 때 필요한 데이터(이름, 나이) 를 전달합니다~

후에 전달받은 데이터를

this.name , this.age 라는 fields에 할당해서 object를 찍어낼 수 있습니다.

 

speak라는 methods도 만들었습니다 !

콘솔창에 name 과 age를 띄워주는 메소드네용.

 

이렇게하면 class 선언은 끝입니다. 

---

1-2. class로 object 찍어내기!

new class명( 전달할 데이터 ) 의 형식으로 object를 만들 수 있습니다.

name 값으로 'Lee' / age값으로 26

을 전달해서 새로운 객체를 만들었습니다!

잘 만들어졌는지 확인 해봅시댱~

전달한 데이터를 기반으로 object가 잘 생성되었고,

메소드 또한 name과 age를 잘 외쳐주고 있습니댜~

 

그런데.. 이때!

---

2. getter, setter 로 예외처리하기!

 

태초 마을로 돌아가버린 kim군....

어떤 바보가 나이에 -1 을 전달해서 object를 만들어 버리고는... 메소드를 실행합니다...

 

 

사용자가 잘못된 값을 전달 했을 때를 대비해서 예외처리를 해야겠죠?

이러한 기행을 방지하기 위해 사용할 수 있는 친구들을 소개합니다.

 

getter와 setter 입니다!

---

2-1. getter, setter 사용법!

 

기존 Person class에

get, set으로 시작하는 코드를 추가해 보겠습니닷!

setter를 추가한 순간부터는~~~!!!

값을 할당하려고 시도하면 프로퍼티의 값에 직접 할당하지 않고~

setter를 호출합니다!

 

위 코드처럼

새로운 kim객체를 만들면서 this.age로 -1을 할당하려고 할 때 set age(value)를 호출합니다.

---> value가 0보다 작은 값인지 검사하고 이후 age에 value를 할당합니다.

 

 

그리고

 

getter를 추가한 순간부터는~~~!!!

값을 사용하려고 시도하면 메모리에 저장된 값을 불러오지 않고~

getter를 호출합니다!

 

위 코드처럼

kim.speak() 코드로 인하여 this.age를 사용하려 시도할 때   get age()를 호출합니다.

--->setter로 할당된 값인 this.age를 리턴합니다.

 

 

완벽하네요!

그럼 한번 콘솔창을 열어 확인해 봅시다!

 

---

2-2. getter, setter의 올바른 사용법!

 

참혹합니다...

콘솔 에러메세지를 무한반복하고 거기에 또

"최대 호출 스택 크기를 초과했습니다" 라는 에러가 발생했습니다.

 

여기서 코드를 다시 확인해 보겠습니다!

setter에 어떤 문제가 있었을까유?

 

kim객체를 만들면서 age에 값을 할당하려 했습니다.  ---> set age(value)를 호출합니다.

이후 if문을 거친 후 this.age에 value를 할당하려 했습니다. ---> set age(value)를 호출합니다.

또 if문을 거친 후 this.age에 value를 할당하려 했습니다. ---> set age(value)를 호출합니다.

 

이렇게 setter가 무한반복 하게 됩니다!

 

 

 

getter에 어떤 문제가 있었을까유?

 

kim.speak() 코드로 인하여 this.age를 사용하려 했습니다. ---> get age()를 호출합니다.

this.age를 리턴하려고 this.age를 사용하려 했습니다.  ---> get age()를 호출합니다.

또 this.age를 리턴하려고 this.age를 사용하려 했습니다.---> get age()를 호출합니다.

 

이렇게 getter가 무한반복 하게 됩니다!

 

 

이런 무한반복을 해결하기 위해서 코드를 살짝 수정해 보겠습니다!

별표로 강조한 노란색 상자를 봐주세요!

_(underscore)를 붙여서 this._age로 변경했습니다.

_는 private하다 또는 내부적인 속성이다 라는 뜻으로 쓰입니다~

이렇게 만든 프로퍼티는 외부에서 접근이 가능하지만,  ( kim._age와 같은 방법으로 )

외부에서 사용하지는 않습니다!

내부적인 속성이니깐 지켜줍시댱!

 

 

자 그럼 setter에 있던 문제가 어떻게 해결됐을까유?

 

kim객체를 만들면서 age에 값을 할당하려 했습니다.  ---> set age(value)를 호출합니다.

이후 if문을 거친 후 this._age에 value를 할당하려 했습니다. --->  내부적인 프로퍼티인 _age에 value가 할당됐습니다.

 

더이상 무한반복하지 않습니다!

 

 

 

또 getter에 있던 문제가 어떻게 해결됐을까유?

 

kim.speak() 코드로 인하여 this.age를 사용하려 했습니다. ---> get age()를 호출합니다.

setter로 할당된 내부적인 프로퍼티인 _age의 값을 리턴합니다.

 

더이상 무한반복하지 않습니다!

 

 

이제 콘솔창을 한번 더 확인해 보겠습니다!

콘솔에러가 한번만 발생하고 메소드가 실행됐네요!

 

저의 경우에는 개념적인 부분을 설명하느라 

age의 값으로 음수가 들어와도 콘솔에러만 띄우도록 했기 때문에 여전히 음수가 포함된 메소드가 실행되지만,

 

이제 예외처리에 대한 부분은 여러분들이 알아서 바꿔보시면 되겠습니다이~

 

 

끝!