JavaScript 18일차

펭도리·2021년 2월 21일
0

JavaScript

목록 보기
18/32
post-thumbnail

캡슐화

     <script>
        function Calculate(w,h) {
            var width = w;
            var height = h;

            this.getWidth = function() { 
                return width;
            };

            this.getHeigth = function() {
                return height;
            };

            this.setWidth = function(w) {
                if(w < 0) {
                    throw '길이는 음수일 수 없습니다.';
                } else {
                    width = w;
                }
            };

            this.setHeigth = function(h) {
                if(h < 0) {
                    throw '높이는 음수일 수 없습니다.';
                } else {
                    height = h;
                }
            };
        }

        Calculate.prototype.getArea = function() {
            return this.getWidth() * this.getHeigth();
        };

        var calculate = new Calculate(5,7);
        
        // 오류메세지 출력
        // calculate.setWidth(-3);
        
        // output = 35
        alert('면적 = ' + calculate.getArea());
    </script>

캡슐화란?

Private 속성으로 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미한다.
이를 통해서 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 잇는 오류를 줄일 수 있다.
예를들어 많은 사람들과 협업을 하게되는 경우 누구나 접근하여 값을 변경할 수 있기 때문에 그것을 방지함으로써, 정보를 보호하는 것이다.

위의 예제는 함수의 리턴값으로 객체를 반환하고 있다. 이 객체는 메소드 getWidthsetWidth ... 등으로 이루어져 있고 이 메소드드들은 외부함수인 calculate의 인자값으로 전달된 값을 사용한다.

예를들어 우리가
var calculate = new Calculate(5,7);
calculate.setWidth(-3);
로 코드를 작성하였을 경우 Calculate 함수는 Width가 음수이기 때문에 throw error를 출력하게 된다.

이로써 알 수 있는 것은 get의 width와 set의 width는 서로 값을 공유하고 있다는 것을 알 수있다.

JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 Private한 속성을 사용할 수 있게된다.

클로저의 필요성

var array = [];
var number = 5;

for(var i = 0; i<number; i++) {
	array[i] = function() {
    	return i;
    }
}

for(var e in array) {
	console.log(array[e]());
}

output
5 5 5 5 5

우리가 생각하기엔 array의 배열은 0 1 2 3 4로 채워져 있을 것이라고 생각하지만 return = i를 반환하였기 때문에 i값은 결국 최종 i의 값인 5로 다 변환되어 있다.

이를 해결하기 위해서는 클로저를 이용해야한다.

클로저에 대해서는 다음에 조금더 알아보도록 하자!

추가적으로 조금더 공부한 내용

    <script>
        var originalArray = [1,2,3,4,5];
        var newArray = [];

        //깊은복사 = clone()
        for(var i in originalArray) {
            newArray[i] = originalArray[i];
        }
        
        originalArray[0] = 273;

        alert(originalArray);
        alert(newArray);
    </script>

for 반복문에서 우리는 newArray에 originalArray의 값을 넣어주었다.

그리고 originalArray[0]의 값을 바꿔주면 newArray의 값도 변할까? 값은 변하지 않는다.

그 이유는 간단하다.

originalArraynewArray의 배열은 각기 다른 주소에 저장되어 있기 때문이라고 이해하면 쉬울듯 하다.

풀어서 이야기 하면

originalArray는 A동 아파트에 살고있고 newArray는 B동 아파트에 살고있기 때문에 originalArray을 다시 newArray에 할당해주지 않는이상 서로 각기 다른 배열을 가지는 것이다.

profile
풀스택 개발자가 되고싶은 코린이 이한글

0개의 댓글