퓨어 자바스크립트로 만들어진 프로젝트들을 깃헙에서 둘러보던 중 get, set으로 만들어진 코드를 본 적이 있다.
프로그래밍 공부를 하면서 몇 번 봤었던 아이들인데 아 그냥 이런 아이들이 있구나 하면서 넘어갔었다
하지만 요즘 자바스크립트 기본을 다지면서 한 번 공부해놓으면 좋겠다는 생각이 들어 이렇게 블로그를 남긴다.
getter, setter 대체 왜 쓸까?
데이터의 무결성을 보존하기 위해 쓰는 키워드
개발하면서 한 번쯤은 데이터는 immutable을 해야한다 라는 말을 들어보았을 것이다
데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라
함수로 간접적으로 다루는게 대세를 이루고 있는데 일종의 코딩 테크닉이라고 보면 될 것 같다
사실 뷰,앵귤러,리액트 등 자바스크립트 라이브러리에서 많이 사용하고 있는 방법이기도 하다(생각해보니 리액트 할 때 리덕스에서 데이터를 이렇게 만졌었네,,?;)
하지만 getter, setter를 이해하려면 object 데이터를 다루는 방법론에 대해 알아야하는데 지금부터 알아보도록 하자
함수로 object 데이터를 꺼내는 방법
let 이진혁 = {
name : 'Lee',
age : 26,
}나의 성과 나이를 저장하고 있는 객체를 하나 만들어 보았다
만약 나의 내년 나이를 출력해보고 싶다면 어떻게 해야할까?
간단하게 이진혁.age + 1 로 표현해도 되지만 우리는 간지나게 내년 나이를 출력해주는 함수를 만들어 사용해보자
let 이진혁 = {
name : 'Lee',
age : 26,
nextAge(){
return this.age + 1
}
}이렇게 코드를 짜놓으면 age라는 데이터를 직접 건드리지 않고 이진혁.nextAge() 로 내년 나이가 출력되는 걸 확인할 수 있다
이렇게 원본 데이터를 건드리지 않고 데이터를 꺼내서 사용하는 방법이 유행인데
대체 왜 이게 중요하고 유행일까?
- object 안의 데이터가 복잡할 수록 함수 만들어 놓는 게 데이터 꺼내기 용이
- 내부에 있는 name, age 변수를 건드리지 않아서 실수를 방지할 수 있어서 안전
지금은 저렇게 간단한 오브젝트를 만들었기 때문에 이진혁.age + 1 하는 것이 더 간단하게 보일 수는 있어도
매우 긴 object 안에 원하는 자료 몇개만 뽑고 싶을 때 미리 저렇게 함수를 만들어놓으면 매번 기능 개발해줄 필요가 없다!(유용)
함수로 object 데이터를 수정하는 방법
그렇다면 본격적으로 함수로 object 데이터를 수정하는 방법을 알아보자
만약 이번엔 이진혁이라는 object 안에 있는 age 데이터를 40으로 변경하고 싶으면 어떻게 해야할까?
물론 일반적인 방법으로 이진혁.age = 40 이렇게 등호를 이용하면 수정이 되겠지만 함수를 통해 간접적으로 데이터를 수정하면서 원본 데이터를 건드리지 않는 방법으로 진행해보자!
let 이진혁 = {
name : 'Lee',
age : 26,
setAge(나이){
this.age = 나이
}
}이진혁이라는 object에 setAge()라는 함수를 추가해 보았다.
방금 만든 이 함수는 파라미터를 한 개 입력할 수 있는데 그 파라미터를 그대로 this.age에 집어넣어주는 역할을 한다.
그럼 이제 이진혁.setAge(40) 이렇게 쓰면 내 나이는 40이 된 거다(슬퍼)
굳이 굳이 함수를 왜 쓰냐?
앞서 말했듯이 내부에 있는 name, age 변수를 직접 건드리지 않아서 실수를 방지할 수 있기 때문이다.
즉, 프로젝트의 크기가 커지고 복잡도가 증가하면 실수가 나올수 있기 때문에 미리 한 겹의 안전장치를 만든다고 보면 된다
실수? 안전장치?
예를 들어 내가 아래와 같이 멍청한 실수를 했다고 가정해보자
이진혁.setAge('40')나이에 숫자를 집어넣어야하는데 이렇게 실수로 '40' 이라는 문자를 집어넣으면 어떻게 될까?
자바스크립트의 장점 작동이 잘 된다.
자바스크립트의 단점 작동이 잘 된다.
어이없게도 저장이 잘 된다 ㅋㅋ
원하는 데이터의 형태가 아니기 때문에 데이터가 오염되고 나중에는 대체 어디서 에러가 났는지 모를 정도로 스노우볼이 굴러간다,,
근데 데이터 수정하는 함수를 사용하면 약간의 안전장치를 더해줄 수 있다!
let 이진혁 = {
name : 'Lee',
age : 26,
setAge(나이){
this.age = parseInt(나이)
}
}
이진혁.setAge('40'); //문자 넣었는데도 숫자 40으로 저장됨setAge()라는 함수안에 parseInt()라는 함수를 추가해보았다
parseInt()라는 함수는 string을 number로 바꿔주는 자바스크립트 내장함수인데
'40' 같은 문자를 집어넣어도 숫자로 바꿔주는 안전장치도 이렇게 쉽게 개발이 가능한 것이다
뭔가 이제 요즘 개발자들이 대체 왜 이런식으로 함수를 통해 데이터를 만지는 지 알 것 같다!
함수 쓰기 복잡하다면 get/set 키워드를 붙이자
함수를 만들어 쓰면 단점이 있다
setAge(40) 이렇게 소괄호까지 써야되고 뭔가 데이터 집어넣기 조금 귀찮아진다
그렇다면 get/set 키워드를 함수 옆에 추가하면 된다!
let 이진혁 = {
name : 'Lee',
age : 26,
set setAge(나이){
this.age = parseInt(나이)
}
}
사람.setAge = 40; //set 키워드를 추가하면 이렇게 함수를 사용가능이제 등호로 데이터를 입력할 수 있다
보기도 쉽고 직관적이기 때문에 set을 사용한다
그래서 set 붙은 함수들은 setter라고 부른다 (데이터를 set 하는 (수정하는) 함수라는 뜻)
반대로 내년 나이를 구해주는 nextAge()라는 함수를 만들 때는 get 키워드를 사용가능하다
아래 예제를 살펴보자
let 이진혁 = {
name : 'Lee',
age : 26,
get nextAge(){
return this.age + 1
}
}
console.log( 이진혁.nextAge ); //get 키워드를 추가하면 이렇게 함수를 사용가능nextAge()라는 함수를 만들 때는 get 키워드를 사용가능하다
이제 소괄호 없이 nextAge를 사용해서 데이터를 꺼낼 수 있으며 보기도 쉽고 직관적이다
그래서 get을 사용하며 get 붙은 함수들은 getter라고 부른다. (데이터를 get하는 (가져오는) 함수라는 뜻)
get/set 사용하는 기준
그냥 데이터를 뽑아주는, 가져와주는, get 해주는 함수들은 get 쓰면 되고
데이터를 입력해주는, 수정해주는, set 해주는 함수들은 set 쓰면 된다.
그리고 규칙도 있는데
set 함수는 데이터를 입력해서 수정해주는 함수니까 파라미터가 한개 꼭 존재해야하고
get 함수는 파라미터가 있으면 안되고 함수 내에 return을 가져야한다.
잘못쓰면 에러가 발생하니 알아두자!
class에서 사용하는 get/set
저번 글에서 class에 대해 글을 쓴 적이 있다.
간략하게 설명하자면 생성자함수를 통해 상속기능을 만드는 키워드인데
class 안에서 함수 만들 때 get/set 키워드를 이용해서 getter/setter 식으로 함수를 만들 수 있다
class 이진혁 {
constructor(){
this.name = 'Lee';
this.age = 26;
}
get nextAge(){
return this.age + 1
}
set setAge(나이){
this.age = 나이;
}
}
let 인적정보 = new 이진혁();class 안의 함수들을 getter/setter로 만들어 쓰고 싶으면 이렇게 만들어 쓸 수 있다
이제 새로 뽑인 object인 인적정보는
이진혁.nextAge;
이진혁.setAge = 50;
이렇게 사용할 수 있겠다
느낀점
이번 블로그를 통해 대체 왜 개발자들이 함수를 만들어서 데이터를 다루는지 알게 되었다
데이터 무결성 보존을 위해 또 미래에 멍청한 내가 할 수 있는 실수를 미리 방지해줄 수 있다는 점에서 매우 유용한 것 같다
나는 그동안 그냥 기능을 구현하고 코드 쓰는 것에 급급했는데,,
이번 기회에 많은 생각을 하게 되었다
역시 뛰는 개발자 위에는 나는 개발자,,
나도 나는 개발자 할래
