javascript의 로딩 순서와 jquery의 $(this)

시나리오 :

• class="media"인 블럭을 클릭하면, 해당 블럭(this)의 id 값을 매개변수로 하여, rest 컨트롤러를 통해 해당 json 데이타를 호출. 그 값을 통해 해당(this) media의 media-body-contents에 .html()로 넣으려 했다.

$('.media').on("click", function (){
    var id = $(this).find('.media-id').text();
    $.getJSON('/review/latestReview/' + id, function (review) {
        console.log(review);
        var str1 = "<h5>"+review.title+"</h5>" +
            "<span>"+review.content+"</span>";
    });
    $(this).find('.media-body-contents').html(str2); .......(1)
});

• 위와 같이 작성했는데 작동이 되지 않았다.
• 그리고 아래와 같은 코드를 통해 문제를 해결할 수 있었다. 해결을 하면서 두 가지의 지식을 얻을 수 있었다. 1) 자바스크립트가 코드를 읽을 때 펑션을 가장 마지막에 읽는다. 2) this는 유동적으로 변하므로, 해당 스코프에서 해당 값을 미리 변수로 지정하는 것이 좋다. 구체적인 내용은 아래의 코드를 보면서 확인하자.

$('.media-body').on("click", function (){
    var thisBody = $(this);
    var id = $(this).find('.media-id').text();
    var str1="hello";
    alert("outerFirst: "+str1);
    $.getJSON('/review/latestReview/' + id, function (review) {
        str1 ="goodday";
        alert("innerFirst: "+ str1);
        console.log(review);
        str1 = "<h5>"+review.title+"</h5>" +
            "<span>"+review.content+"</span>";
        console.log(str1)
        alert("innerSecond: "+str1);
        //$(this).find('.media-body-contents').html(str1); .......(2)
        $(thisBody).find('.media-body-contents').html(str1); .......(3)

    });
    alert("outerSecond: "+str1);
});

• 여기서 alert의 호출 순서는 다음과 같다. outerFirst -> outerSecond -> innerFirst -> innerSecond.
• 그러므로 (1) 첫번째 코드에서 getJSON 펑션에서 만든 값을 아무리 접근하려 해도 접근 할 수 없었다. 왜냐하면 해당 메소드의 외부를 읽은 후 펑션 내부로 들어가기 때문이다. 외부에서는 사실상 펑션 내부의 값에 결코 접근할 수 없다. 그러므로 해당 값을 사용하려면 반드시 해당 펑션 내부에 코드를 입력하여 접근한다.
• (2)의 방법으로 시도했으나 실패했다. 그 이유는 $(this) 때문이었다. 해당 펑션 밖에서 this는 class='media-body'를 가리켰지만, 펑션 내부에서는 해당 값을 가리키지 않았다.
• 그래서 외부에서 var thisBody = $(this); 를 통해 해당 값을 변수로 지정하고, 펑션 내부에서 $(thisBody)를 통해 해당 값을 접근할 수 있었다.

이것 때문에 많은 시간을 소비했다. 그래도 해결해서 가뿐하다. 하하.