JavaScript ES6 문법 - getter/setter

박재휘·2024년 3월 2일

JavaScript

목록 보기
11/19
post-thumbnail

1. object데이터 출력/수정 시 함수를 만들어 쓰는 이유

  1. object안의 데이터가 복잡할수록 사용하기 편리하다.
  2. 내부의 변수를 직접 건드리지 않아서 실수를 방지할 수 있다.
  3. 안전장치를 마련할 수 있다.

다음 예시를 보자.

      var student = {
        name: "Kim",
        age: 30,
        setAge(age) {
          this.age = parseInt(age);
        },
      };

      student.age = "50"; // 객체에 직접 접근하여 수정
      console.log(student);

      student.setAge("100"); // 함수로 데이터 수정
      console.log(student);

여기 student라는 오브젝트가 있다. 내부에는 name, age, 그리고 age수정함수 setAge()가 있다.

콘솔창에는 다음과 같이 출력된다.

object에 직접 접근하여 수정했을때 실수로 문자열을 입력하면 그대로 '50'이라는 문자열이 들어간다.

하지만 수정함수를 이용하여 age를 수정하면 parseInt()라는 안전장치를 마련해놓았기 때문에 실수로 문자열을 입력했음에도 숫자 100이 들어간 것을 확인할 수 있다.

2. getter / setter

object를 수정하는 함수들을 좀 더 간편하게 사용하기 위해 get / set키워드가 사용된다.

  • get이 붙은 함수 -> getter
  • set이 붙은 함수 -> setter
  • 원본 데이터에 직접 접근하는게 아니라 함수로 간접적으로 다루는 일종의 코딩 테크닉이다.
      var student = {
        name: "Kim",
        age: 30,
        get nowAge() { // 나이 출력 함수
          return this.age;
        },
        set setAge(age) { // 나이 수정 함수
          this.age = parseInt(age);
        },
      };

      console.log(student.nowAge()); // 에러남
      student.setAge(50); // 에러남

      console.log(student.nowAge); // get키워드 사용시 이렇게 사용
      student.setAge = 50; // set키워드 사용시 이렇게 사용

함수 앞에 get / set 키워드만 붙여주면 된다. 보통 get은 데이터를 가져오는 함수에, set은 데이터를 수정하는 함수에 쓰인다. 이 키워드를 사용하면 기존방식처럼 함수 사용시 에러가 난다. () 없이 사용해야 한다.

다음과 같은 특징이 있다.

  • get함수: 파라미터가 존재하지 않음, 함수 내에 return을 가짐
  • set함수: 파라미터가 존재함

class안에서 사용시에도 object와 동일하게 사용하면 된다.

profile
차곡차곡 열심히

0개의 댓글