{Es6} 객체 지향에 대해서 알아보자. III

특급한라봉·2023년 4월 6일
0

Javascript Deep

목록 보기
8/8
post-thumbnail

자바스크립트 객체의 프로퍼티에는 두 가지 종류가 있습니다.

첫 번째는 데이터 프로퍼티(data property)로 '객체 내부에 저장된 데이터' 라는 개념의 흔히 우리가 일반적으로 사용하는 프로퍼티들이 모두 여기에 해당합니다.

두 번째는 바로 접근자 프로퍼티(accessor property)라는 가상의 프로퍼티입니다. 가상의 프로퍼티란 읽고 쓸 수는 있지만 실제로 존재하는 프로퍼티가 아니며 흔히 객체의 메서드가 접근자 프로퍼티에 해당합니다.

접근자 프로퍼티가 오늘 주제의 핵심입니다. 이 접근자 프로퍼티 즉, 메서드를 사용해서 데이터 프로퍼티에 접근하는 방식과 이런 방식의 이점에 대해서 알아보겠습니다.

데이터 접근 방식

예제1 프로퍼티 직접 접근 방식

	let user = {
        name : '이지은',
        age : 29,
    }
    
    user.name;	// '이지은'

데이터 프로퍼티에 마침표(.)를 사용해서 '직접' 접근하는 것이 가장 빠르고 효과적인 방법입니다.

예제2 메서드를 사용한 경유 방식

	let user = {
        name : '이지은',
        age : 29,

        getName(){
            return console.log(this.name)
        },

        nextAge(age){
            console.log(age)
        },
    }

    user.getName()		// '이지은'
    user.nextAge(29)	// 29

반면 접근자 프로퍼티를 사용하면 데이터 프로퍼티에 직접 접근하는 것이 아니라 메서드를 '경유'해서 접근합니다. 쉽고 빠르게 직접 데이터 프로퍼티에 접근하는 할 수 있지만 굳이 이런 번거로운 방식을 사용하는 이유는 무엇일까요?

쉽게 말하자면 메서드는 코드의 보안을 강화할 수 있는 일종의 안전장치입니다. 메서드는 데이터 프로퍼티에 직접 접근할 수 없기 때문에 데이터 프로퍼티는 원본 그대로의 상태를 유지할 수 있습니다. 이는 곧 코드의 안정성을 부여하며 차후 코드의 유지 보수 측면에 있어서 이점이 있습니다.

그렇다면 코드의 보안이라는 것은 어떤 상황을 말하는 것일까요?

예제3 코드 보안

	let user = {
        name : '이지은',
        age : 29,

        setAge(age){
            if(age > 80){
                alert('잘못된 입력입니다.')
            }
        },
    }

    user.setAge(200);

나이가 200이 넘어갔으니 당연히 잘못된 입력입니다. 이런 잘못된 입력이 발생한 경우 함수가 안전장치로서 데이터 프로퍼티에 접근할 수 없도록 방지하는 기능을 수행할 수 있습니다.

이처럼 메서드를 활용한 방식이 코드의 안정성을 보장하기 때문에 개발자 입장에선 사용안할 이유가 없습니다. 또한 더 나아가 Es6에서는 getter & setter 문법의 추가로 메서드의 코드를 더 간결하고 가독성 있게 작성할 수 있게 되었습니다.


getter & setter

getter와 setter란 객체 지향 프로그래밍에서 사용되는 메서드입니다. getter는 단어 그대로 데이터를 가져와주는 메서드이며 setter는 데이터를 입력, 수정해주는 메서드입니다.

예제4 getter & setter 작성하기

	let user = {
        name : '이지은',
        age : 29,

        get getName(){
            return console.log(this.name)
        },

        set setAge(age){
            console.log(this.age = age);
        },
    }

사용법은 간단합니다. 이전에 우리가 작성했던 메서드에 각각 get과 set이라는 키워드를 작성하면 됩니다.

이름 그대로 get은 데이터를 가져오는 메서드로 return 이라는 키워드를 반드시 작성해야 하며 파라미터를 가질 수 없습니다. 반면, set 값을 수정하거나 설정하는 메서드로 한개 이상의 파라미터를 반드시 가지고 있어야 합니다.

예제5 getter & setter 호출하기

    user.getName;		// '이지은'
    user.setAge = 29;	// 29

get과 set 키워드를 사용한 메서드를 호출할 때는 데이터 프로퍼티에 접근하는 것과 같습니다. 기존의 함수를 호출하던 방식의 소괄호가 모두 생략되었고 메서드에 값을 대입할 땐 등호만을 사용하면 됩니다. 따라서 이전보다 코드의 가독성이 좋아졌다는 이점이 있습니다.

주의 사항

예제6 잘못된 값 설정

    let user = {
        name : '이지은',
        age : 29,

        get getName(){
            return console.log(this.name)
        }
    }
    
    user.getName = '이지금';	// 에러

setter 메서드 없이 getter 메서드만 선언한 상황에서 값을 설정하는 경우 에러가 발생합니다.

예제7 프로퍼티와 중복된 이름

    let user = {
        name : '이지은',
        age : 29,

        get name(){
            return console.log(this.name)
        },

        set age(age){
            console.log(this.age = age);
        },
    }

    user.name;		// 에러
    user.age = 29;	// 에러

데이터 프로퍼티 명과 메서드 명을 중복으로 작성하게 되면 setter가 무한루프라는 에러의 빠지게 됩니다. 따라서 반드시 데이터 프로퍼티와 메서드의 명은 중복이 발생해서는 안됩니다.

--

정리

데이터 프로퍼티
1. 데이터 프로퍼티란 객체 내부에 저장된 데이터
2. 마침표를 사용하면 데이터 프로퍼티에 직접 접근하는 것이 가능함
3. 데이터 프로퍼티에 직접 접근하는 것은 데이터 변질 우려가 있어 차후 코드의 수정이 필연적임

접근자 프로퍼티
1. 접근자 프로퍼티란 객체의 메서드
2. 읽고 쓸수는 있지만 존재하지는 않는 가상의 프로퍼티
3. 메서드를 활용해서 데이터 프로퍼티에 경유함
4. 접근자 프로퍼티는 일종의 안전장치로 데이터의 변질을 막을 수 있어 코드의 안정성을 부여함

getter & setter 사용
1. 접근자 프로퍼티에 가독성을 부여하는 Es6 신문법
2. 메서드 호출 시 데이터 프로퍼티에 접근하는 것 처럼 괄호를 사용하지 않음
3. get 값을 반환하는 키워드로 메서드 내에 return 키워드가 반드시 작성되야 하고 파라미터를 가질 수 없음
4. set 값을 설정, 수정하는 키워드로 한개 이상의 파라미터를 반드시 가지고 있어야함

getter & setter 주의 사항
1. get 메서드에 값을 부여할 수 없음
2. 데이터 프로퍼티와 메서드는 중복된 이름을 사용할 수 없음

profile
쉽게 쉽게 가자

0개의 댓글