ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • getter / setter
    JavaScript ES6 2022. 5. 21. 15:10
    var 사람 = {
    	name : 'Park',
        	age : 30
    }

    만약, 사람이란 오브젝트에서 age를 꺼내고 싶으면 사람.age 를 하면 된다.

    근데, 요즘은 age라는 자료를 꺼내고 싶으면 자료를 꺼내는 법을 만들어서 꺼낸다. (그냥 유행하는 잡기술이라고 함)

     

    내년 age를 알고싶다면, 오브젝트에서 함수를 만들어준다.

    var 사람 = {
    	name : 'Park',
        	age : 30,
            nextAge() {
            	return this.age + 1
            }
    }

    이렇게 만든 후, 사람.nextAge()하면 31이 나온다.

    이처럼 굳이 사람.age + 1을 해도 되는데 nextAge라는 함수를 만드는 이유는 

    1. 오브젝트 자료가 복잡할 때 이득이며,

    2. 자료를 업데이트하거나 수정할 때 이득이다. 예를 들면, setAge라는 수정함수를 만들어보자.

    setAge(age) {
    	this.age = parseInt(age)
    }

    이런 함수를 만들어서, 오브젝트에 나이를 숫자가 아닌 문자로 입력했을 때, 사람.setAge(20) 하면 나이를 숫자 20으로 바꿔준다. 이렇게 수정함수를 만들면 실수를 방지하고 관리를 편리하게 할 수 있다.

     

    근데 여기서 setAge()이런 소괄호가 보기 싫어서 만든게, getter/setter이다.

    var 사람 = {
    	name : 'Park',
        	age : 30,
            get nextAge() {
            	return this.age + 1
            },
            set setAge(age) {
                this.age = parseInt(age)
            }
    }

    set은 데이터 변경하는 함수에

    get은 데이터 꺼내쓰는 함수에 많이 사용한다.

    이렇게 set을 쓰면 사람.setAge = '20'; 이렇게 소괄호를 안써도 된다.

    그리고 get을 쓰면 사람.nextAge; 이렇게만 써도 나이를 출력해준다.

     

    이런 get/set을 쓸 때 조건이 있다.

    1. get함수들(getter)를 쓸 땐 return이 있어야한다. 그리고 파라미터가 없어야 한다.

    2. set함수들(setter)을 쓸 땐 파라미터가 1개여야 한다.

     

    이걸 class에서 할 수도 있다.

    class 사람 {
    	constructor() {
        	this.name = 'Park';
            this.age = 20;
        }
        get nextAge() {
        	return this.age + 1
        }
        set setAge(나이) {
        	this.age = parseInt(나이)
        }
    }
    
    var 사람1 = new 사람();

    이러면 사람1.nextAge ,

    사람1.setAge = 20  이렇게 사용가능하다.

    'JavaScript ES6' 카테고리의 다른 글

    import / export 모듈식 개발  (0) 2022.05.30
    Destructuring 문법  (0) 2022.05.25
    super과 extends  (0) 2022.05.19
    prototype과 constructor말고 상속  (0) 2022.05.18
    객체지향 constructor,prototype  (0) 2022.05.17

    댓글

Designed by Tistory.