자바스크립트의 객체란 무엇인가 ? (3) 캡슐화

수업시간에 객체지향프로그래밍의 특징으로 다형성과 은닉성에 대해서 배운적이 있다. 클래스를 정의할 때 클래스의 내부 변수들을 숨기고 싶거나 함수를 숨기고 싶어 private나 protected를 사용 한다. 그런데 이러한 기능들은 자바스크립트에서 제공 해주지 않는다. 그래서 특정한 방법으로 객체안에 있는 값을 숨길 수 있어야 한다. 

 

캡슐화란 ? 

클래스내부에 있는 값들을 외부에서 참조하지 못하도록 숨기는 것 ! 

function Dog(name){
    var name = name; // 접근 불가능 

    return {
        hello : 10,//접근 가능 
        getName(){
            return name;
        },
        setName(newName){
            name = newName
        }
    }
}


var huge = new Dog("huge");

console.log(huge.getName());
// console.log(huge.name) // 접근 불가능 

 

위의 Dog 클래스를 보면 생성자 인자로 이름을 받는다. 이 이름을 숨기기 위해서 나는 클래스 함수의 반환을 다시 객체로 하였고 그 객체의 메서드를 통해서만 저 name값을 받거나 수정 할 수 있다.

 

 

얕은 복사를 통한 캡슐화 변수 변경 

얕은 복사라는 것이 있다. 변수가 메모리를 참조해서 필드를 복사해서 독자적인 메모리를 가지는 것이 아닌 포인터처럼 메모리를 참조하는 것들이 있다. 조금 어렵다면 아래 링크를 한번 보기를 바란다. 

 

https://wanna-b.tistory.com/18

[JavaScript] 참조 복사와 값 복사 (얕은 복사와 깊은 복사)

 

자바스크립트에서 대다수 메서드들은 return 이 된다면 새로운 값을 메모리에 할당하게 된다. 그러나 배열의 일부 메서드는 내용을 변경하여도 새로운 배열을 메모리에 할당하는 것이 아닌 기존 메모리들을 연결 시켜 해당 주소를 반환한다. 

 

function Dog(name){
    var name = name; // 접근 불가능 
    var arr = [];

    return {
        hello : 10,//접근 가능 
        getName(){
            return name;
        },
        getArr(){
            return arr;
        },
        setName(newName){
            name = newName
        }
    }
}


var huge = new Dog("hello world");

var fake = huge.getArr();
var fake_2 = huge.getName();

fake.push(1); // .push()메서드는 자바스크립트 배열끝에 새로운 노드를 추가한다. 
fake_2.replace("hello","good"); 새롭게 return 되어 변수에 할당함 
console.log(huge.getArr()); // 변경되서 [1]
console.log(huge.getName()); //그대로 hello world 

 

위의 클래스에 보면 멤버변수로 문자열과 빈배열을 배치했다. huge객체의 name변수를 fake에 할당하니 name변수의 메모리를 참조하고 있는 것을 볼 수 있다. 그리고 특정문자열을 치환하는 메서드 replace를 호출하였지만 helloworld 가 출력되었다. 이는 replace를 한 시점에서 fake = "good world" 로 할당이 되었기 때문이다. 

 

그러나 push의 경우 메모리에 값을 할당 후 배열을 새롭게 할당하는 것이기 때문에 읽기 전용 멤버변수임에도 변화가 가능하다.

 

이 처럼 얕은 복사가 일어 날 수 있기때문에 캡슐화를 할때는 주의를 필요로 한다. 여튼 좀 찾아보니 javascript로 배열을 깊은 복사하려면 JSON을 이용해서 문자열로 만든다음 이를 parse해줘야 한다. 위에 대한 해결은 다음과 같이 한다. 

 

function Dog(name){
    var name = name; // 접근 불가능 
    var arr = [1];

    return {
        hello : 10,//접근 가능 
        getName(){
            return name;
        },
        getArr(){
            
            return JSON.parse(JSON.stringify( arr )); 
        },
        setName(newName){
            name = newName
        }
    }
}


var huge = new Dog("hello world");

var fake = huge.getArr();
var fake_2 = huge.getName();

fake.push(1);
fake_2.replace("hello","good");
console.log(huge.getArr()); // 그래도 1.
console.log(huge.getName()) 

 

그래서 어디다가 쓰냐?

지난번에 학교홈페이지에 있는 한 동영상교육을 받아야 했다. 너무 지겨워서 빨리 넘기고 싶어서 해당페이지 파일을 뒤져서 moveToPage를 찾았다. 그런데 이 moveToPage에 들어가있는 값 watchedPage를 검사해 페이지를 전환할 수 있는데 이 변수가 캡슐화로 감싸지고 있어 이 값을 건들 수가 없었다. 

참고 

https://codingcoding.tistory.com/743

[자바스크립트 강좌 008] 캡슐화 방법 소스 (객체지향 프로그래밍)

https://m.blog.naver.com/PostView.nhn?blogId=andwise&logNo=221029134065&proxyReferer=https%3A%2F%2Fwww.google.com%2F

JavaScript 캡슐화의 필요성