[ES6]_Proxy get()에서의 Depth에 따른 prop 의 변화

개요

proxy 객체는 target 객체를 감싸게 되고 이를 참조하거나 변경시 이벤트를 중간에 조작할 수 있게 해줍니다.

 

Proxy 공부를하면서 이것저것 console.log 를 찍어보는데

 

target이 되는 객체가 1depth 가 아니라 2, 3, 4, depth 일때를 찍어보았습니다.

 

그 중 첫 depth 외에 2번째 이후로 찍히는 prop과

return target[prop] 의 값이 다른점을 확인하였습니다.

 

원인 분석한 결과를 포스팅합니다.

 

문서 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get

handler.get() - JavaScript | MDN

틀린것이 있을 수 있으니 양해부탁드립니다. 

틀린점은 댓글로 알려주시면 정말 감사드리겠습니다.

---

증상

우선 get() 메소드를 사용한 Proxy 예제는 다음과 같습니다.

const target = {
  test1 : '1',
  test2 : {
      test22 : '2'
  }
};

const handler = {
  get: function (target, prop, receiver) {
	console.log(target);
	console.log(prop);
	console.log(receiver);
   	return target[prop];
    
  },
};

const proxy = new Proxy(target, handler);

 

여기에서

proxy.test1 을 찍으면 다음과 같습니다.

그럼 proxy.test2 는 무슨값이 나올까요?

예상 되는대로

return 의 값은 test22 : '2' 가 나옵니다

 

근데 여기서 proxy.test2.test22를 호출하면 이상한 결과가 나옵니다.

prop의 값은 분명 test 2로 출력되었습니다.

 

그럼 리턴되는 값은

{test : 1, test2 : { test22 : '2' } } [test2] 로써

{test22 : '2'} 가 리턴이 되야하는데

결과는 마지막 참조값인 2가 출력되었습니다.

 

해당 부분만 콘솔을 찍어보면 다음과 같습니다.

const target = {
  test1 : '1',
  test2 : {
      test22 : '2'
  }
};

const handler = {
  get: function (target, prop, receiver) {
	console.log(target[prop]);
   	return target[prop];
    
  },
};

const proxy = new Proxy(target, handler);

 

같은 target[prop] 을 출력하는데 왜 다른값이 나올까요?

---

분석

get: function (target, prop, receiver) {
	console.log(target[prop]);
   	return target[prop];
    
  },

get 메소드가 있는 proxy 객체에 참조를 할 때

depth가 깊을수록 return에 지정된 값을 한번더 순회를 합니다.

 

다음의 예시를 보겠습니다.

return 값에는 String 의 값을 주었습니다.

 

1번째 depth에서의 참조는 한번 순회하기 때문에 참조가 감지되는 순간

'return' 이란 값이 출력되고

 

2번째 depth 에서의 참조는 

1번째 에서 return 을 받아오게 되고

get 핸들러에서는 'return' 을 무조건 반환하기 때문에 그런 프로퍼티는 없어서 undefined 가 되는 것입니다.

 

그럼 실제로 있는 property를 제공하면 어떻게 나오는지 보겠습니다.

 

 

1. get 핸들러가 호출되고 그때의 prop은 'test2' 입니다.

2. get 핸들러에서 target['test2'] 를 반환함으로 결과값은 target1.test2 인 {test22: '2'} 가 반환됩니다.

3. 해당 반환된 값에서 test22를 참조함으로 2가 출력됩니다.

 

그래서 return target[prop]이 정상적으로 출력되는지 알 수 있습니다.

감사합니다