setTimeout에서 this사용하는 방법!

자바스크립트 코드를 객체 리터럴 패턴으로 정리하던 중 이상한 현상이 발생했다.

 

객체안에 무한슬라이드의 다음 슬라이드 가져오는 함수를 집어넣었는데 

setTimeout안에서는 객체내의 프로퍼티에  this로 접근할 수 없었던 것

 

말로하자니 두루 뭉술해서 간략화한 코드를 붙여보자면

 

var slideObj = {
        
    // 이미지 UL 
    imageUl : document.querySelector("ul"),
 
    getNextSlide : function (){
 
             setTimeout(function() {
                // 201초 후( 넘어가는 듯한 트랜지션 효과가 모두 끝난 후 )에 xPosition 적용
                 this.imageUl.style.transition = "0s";
                 this.imageUl.style.transform = "translate3d(414px, 0px, 0px)";
            }, 201);
        
    }
}

 

이렇게 구현했는데 제대로 작동하지 않아

개발자 도구를 열고 setTimeout에서 콘솔로 this를 찍어보니 slideObj가 아닌 undefined가 나왔다. 

 

객체 리터럴 패턴 구현도 처음이라 당황스러운데 예상치 못한 상황까지 생겨 멘붕이 살짝 왔지만

찾아보니 setTimeout내의 this는  

non-strict 모드에서는 전역(혹은 window) 객체, strict모드에서 undefined를 기본 값으로 한단다.

 

설명을 읽고는 사실 엄격모드는 뭐고 느슨한 모드는 뭐야.. 아 머리아픈 js 세계여.. 했지만

해당 이슈를 해결하는 방법은 다행히 너무 간단했다.

 

setTimeout내에서 this가 예약어로 잡혀 있어 발생하는 문제이다보니

setTimeout 진입 전에 this를 다른 변수에 저장하고

아래와 같이 this를 옮겨 담은 그 변수로 this의 기능을 수행하게 하면 문제를 아주 쉽게 해결할 수 있다.

 

var slideObj = {
        
    // 이미지 UL 
    imageUl : document.querySelector("ul"),
 
    getNextSlide : function (){
             var _this = this;
 
             setTimeout(function() {
                // 201초 후( 넘어가는 듯한 트랜지션 효과가 모두 끝난 후 )에 xPosition 적용
                console.log(_this);
                 _this.imageUl.style.transition = "0s";
                 _this.imageUl.style.transform = "translate3d(414px, 0px, 0px)";
            }, 201);
        
    }
}

 

콘솔에 찍히는 _this도 slideObj 객체를 정확히 보여준다. 

 

참고:

 

https://developer.mozilla.org/ko/docs/Web/API/WindowTimers/setTimeout#this_%EB%AC%B8%EC%A0%9C

 

https://webisfree.com/2017-09-04/%EA%B0%9D%EC%B2%B4-%EB%82%B4%EB%B6%80%EC%97%90%EC%84%9C-settimeout-%EC%82%AC%EC%9A%A9%EC%8B%9C-%EC%9E%90%EA%B8%B0-%EC%9E%90%EC%8B%A0%EC%9D%84-%ED%98%B8%EC%B6%9C%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95