배열 기본동작 커스터마이징해보기

배열 원소의 삽입,제거의 기본동작을 오버라이딩하는 예시를 한번 해봤습니다.

프로젝트를 하다보면 엄청나게 복잡한 경우를 맛 볼수도 있습니다. 로직이 어렵다거나, 아니면 코드의테크니컬적인부분(이예제는 이경우에 가깝죠)에서 하고싶은 동작을 못 할때 이러한 기본동작을 오버라이딩하는게 매우 유용하게 쓰일수 있는 경우가 있을수있다고 생각합니다.

이예제에 console.log대신에 로직을 넣어주면 완벽한 오버라이딩이되겠죠.

const customPush = new Proxy(Array.prototype.push,{
    apply(target,thisArg,arg2) {
        target.call(thisArg,...arg2);
        console.log(`${arg2} added`);
    }
});
 
const customPop = new Proxy(Array.prototype.pop,{
    apply(target,thisArg,arg2) {
        console.log(`${thisArg[thisArg.length-1]} removed`);
        target.call(thisArg);
    }
});
 
const customSplice = new Proxy(Array.prototype.splice,{
    apply(target,thisArg,arg2) {
        target.call(thisArg,arg2[0],arg2[1]);
        console.log('splice called');
    }
});
 
 
 
var org_push = Array.prototype.push;
var org_pop = Array.prototype.pop;
var org_splice = Array.prototype.splice;
 
Array.prototype.push = customPush;
Array.prototype.pop = customPop;
Array.prototype.splice = customSplice;
 
var arr = [1,2,3];
 
 

결과화면