[javascript, jquery] 제이쿼리로 찾은 객체 변수에 저장 하여 사용하기

<input type='hidden' id='checkvalue' value='yes'/>
 
<script>
    var data = []
    if($('#checkvalue').val() === 'yes') {
        alert("체크벨류의 값은 yes");
        data.put($('#checkvalue').val());
    }
</script>

위와 같은 코드처럼 우리는 jquery를 이용하여 해당 객체를 가져오고 가져온 객체에 val()함수를 사용해서 값을 가져오는 식으로 많이 사용한다.

하지만 $를 이용하여 객체를 가져오는 경우 즉 $()를 사용하는건 함수를 사용하는 것인 것을 잘 알지 못한다

즉 $('#checkvalue').val()즉를 두번 사용한 경우 함수를 두번 호출한 경우고 잦은 함수 호출은 성능에 영향을 끼치게 된다.

<input type='hidden' id='checkvalue' value='yes'/>
 
<script>
    var data = [];
    var $checkValue = $('#checkvalue').val();
    if($checkValue === 'yes') {
        alert("체크벨류의 값은 yes");
        data.put($checkValue);
    }
</script>

위처럼 jquery변수에 한번 값을 불러온 뒤 jquery변수를 계속 해서 사용하는 것이 좋은 방법이다.

jquery는 자바스크립트를 빠르고 간단하게 사용 할 수 있다는 장점을 가지고 있지만,

반대로 jquery 내부적으로 그만큼 많은 작업을 수행하고 있다는 점에서 자바스크립트만 사용한 것보다 약 10배 이상은 느리다는 단점이 있다.

jquery 뿐만 아니라 javascript를 사용할 때도 

예를 들어 반복문을 사용할 때 

반복문을 실행할 lenght도 변수에 넣어서 사용해야 올바른 사용 법이다.

<script>
    for (var i = 0; i < array.length; i++) { ... }
 
    var length = array.length;
    for (var i = 0; i < length; i++) { ... }
</script>

해당 자료는 블로그 https://www.zerocho.com/category/jQuery/post/57c3a8821efc521700a70918

의 자료를 기초로 제작 하였습니다.