01-24 일지

오후 : 자바스크립트 인강 청취

특이사항

불변객체에 대한 강의를 듣던 중 깊은 복사와 재귀형 구조에 대한 이해를 한꺼번에 해버렸다.

얕은 복사는 깊이(depth)가 1인 객체를 복사해온다. 말 그대로 눈 앞에 있는 것만 복사해오기 때문에, 참조형 데이터가 들어간 프로퍼티를 복사해올 때엔 그 주소값만 복사해오는 것이다. 그래서 보통 우리가 생각하는 '복사'는 깊은 복사로 행해야 하는데 이 깊은 복사는 해당 객체 안의 모든 참조형 데이터를 순회하며 복사를 실시해야 하는 것이다.

우리가 깊이를 다 알고 일일히 지정하는 것은 확실한 깊은 복사이지만 매번 모든 데이터 구조를 파악하고 하드코딩할 수는 없지 않는가? 그럴때 재귀형 구조를 이용해 복사를 하는 것이다.

var copyObjectDeep = function(target) {
    var result = {};
    if (typeof target === 'object' && target !== null) {
        for (var prop in target) {
            result[pop] = copyObjectDeep(target[prop]);
        }
    } else {
        result = target;
    }
    return result;
}

이 구조를 사용하면 copyObjectDeep을 사용할 때 마다 대상의 내부를 순회하며 참조형 데이터가 있는지, 있다면 그 안으로 또 파고들면서 가장 밑까지 찾아낸 뒤 요소들을 하나하나 복사해오는 구조이다. 이러한 반복이 가능한 이유는 if문으로 참조형 데이터인지 확인하고, 참조형 데이터라면 for문으로 해당 참조형 데이터 안에서 다시 copyObjectDeep을 굴리는 구구조이다. 와우......이게 그 재귀인가 뭔가 하는 것이구만. 화살표식으로 구현되는 람다식은 아직도 가끔 헷갈리지만 이 재귀형 구조는 확실하게 뭔 말인지 알 것 같다. 가장 쉬운 방법은 JSON만들어다 하는 것인데(DBMONGO에서 쓴 것처럼) 스크립트 안에서 처리하는 방식도 알아두면 언젠가 다~ 쓸 일이 있겠지. 

 

저녁 : this 예습

특이사항

this......이것이 참 그시기하지만 바로 좌절할만한 것도 아닌 것이, 난 이 this를 써본 적이 있다! 물론 자바스크립트에서는 아니지만.......

유니티에서는 this 쓸 일이 참 많았다. 각각의 GameObject들과, 그들을 관리하는 스크립트에서 gameobject.this를 쓰면 해당 GameObject가 호출되기 때문이다. 이를 이용해 부모 게임오브젝트 안의 자식 오브젝트들을 파악하고 오브젝트풀링을 하거나, 오브젝트 자체의 Setactive여부를 On/OFF할 수 있었다. 진짜 많이 썼는데....

근데 자바스크립트에서는 이녀석이 좀 다른 모양인 것 같다. 하기사, class개념도 없는데 this를 하면 가장 위에 있는 window가 불려오겠지. 그렇다면 보통은 함수 안에서 this로 함수 자체를 지칭하도록 묶어두는 수가 있을탠데. 아마 여기서 배우는 것이 그것인 것 같다.

 

우선 자바스크립트의 this는 함수에서 호출하는 순간 그 범위가 결정된다.

전역에서의 this = 전역 전체를 결정(this binding)

메서드로서 호출할 때 this === 메서드 내부에서의 this(메서드는 '객체.함수' & 혼자서 동작하는 것은 함수)

함수로서의 호출과 메서드로서의 호출의 구분 기준은 .[]

var obj1 = {
    outer: function() {
        console.log(this);//이것이 가리키는 this는 obj1
        var innerFunc = function() {
            console.log(this);//단순한 this호출 펑션
        }
       innerFunc();//함수로서, 호출주체가 없이( .[]없이) 호출되었기에 함수로 발동, 전역객체(window)호출
 
        var obj2 = {
            innerMethod: innerFunc
        };
        obj2.innerMethod();
    }
};
obj1.outer();

자바스크립트는 타 언어와 달리 함수/메서드 호출을 빡빡하게 따진다.

var obj1 = {
    //위 스크립트와 동일하지만
    outer: function() {
        console.log(this);
        var innerFunc1 = function() {
            console.log(this);
        }
        innerFunc1();
        
        var self = this; //변수에다 obj1을 가리키는 this를 꽂아 넣는다.
        var innerFunc2 = function() {
            console.log(self);
        };
        innerFunc2();
    }
};
obj1.outer();

빡빡하게 따지면 부드럽게 따지는 걸로 돌아가면 되는것이다. 화살표 함수를 쓰면 var innerFunc = () => {console.log(this);}로 선언하면 끝난다.

 

소감

이후 콜백 함수에 대한 this 바인딩 방법이 나오는데, 내가 이걸 할 수 있나 모르겠다. 콜백 함수부터 배우고 와야 하는거 아닌가?