티스토리 뷰

IT tech Coding/jquery

제이쿼리 하다가 한번쯤 이런 생각을 해봤을 거예요. $(document).ready(function() { 안의 함수 호출?

Coding Life 2021. 12. 7. 19:47
반응형

아래와 같은 코드로 프로그램을 작성할때, 이런 경우는 왜 실행이 안되고 오류가 발생하지? 그때마다 콘솔창 엄청 보면서 디버깅하는 나날이 이어지고 있네요.

고수들의 글을 구글링해서 내 프로그램에 넣어보며 만족한 기분도 있지만, 해결이 안되서 삽질만 수시간 하다가 알고 보면 너무나 간단한 것이었을때의 허탈함이란.... 흠...

코딩하는 사람들의 숙명같은 것 같아요.....

제이쿼리를 쓰면서 $(document).ready(function() 이 함수안에 들어간 함수를 호출할 수 있을까? 이런 생각을 해봤는데, 참고할 좋은 내용이 있어 기록해 둡니다.

<script>
    $(document).ready(function(){
        $("#i_button_01").click(function(){
            console.log("Hello button_01~!");
        });
    });
    function doFunc(){
        console.log("Hello doFunc~!");
    }
</script>

<body>
    <input type="button" id="i_button_01" value="button_01">
    <input type="button" onclick="doFunc();" value="button_02">
</body>


위에서 function doFunc() 부분을 $(document).ready() 내부로 넣고 button_02 를 클릭하면,
( 크롬 콘솔 출력 기준으로 )

" Uncaught ReferenceError: doFunc is not defined "

위 문장이 발생합니다. doFunc() 를 $(document).ready() 내부로 넣으면서 함수의 형식을,

doFunc = function(){
    console.log("Hello doFunc~!");
}

이렇게 바꾸면 button_02 도 클릭 스크립트가 정상적으로 작동합니다. button_02 에 id 를 부여하고 $(document).ready 내부에서 click 이벤트를 연결하는 방법도 있지만, 위와 같은 차이가 왜 일어나는지와 둘의 차이점이 무엇인지 궁금합니다.

답변내용 : 

참 기가 막힌 답변인데, 너무 좋아요~ 이것 보고 문제 해결해서 좋은 내용 공유합니다.

1. $(document).ready는 페이지가 모두 완료되었을때 실행하는 콜백 함수를 받습니다.
2. $(document).ready 바깥은 전역(글로벌) 스코프에 속합니다. 따라서 여기에 정의한 모든 프로퍼티는 window에 할당됩니다.
3. $(document).ready는 콜백 함수를 실행하므로 함수 스코프를 생성합니다. 함수 실행 종료와 함께 스코프가 파괴됩니다. 따라서 <input type="button" onclick="doFunc();" value="button_02"> 여기 사용한 함수는 실행되지 않습니다. doFunc가 전역 스코프에 존재하지 않기 때문입니다.
4. $(document).ready 안에서 var 키워드 없이 함수 doFunc를 정의했을때, doFunc를 상위 스코프에서 찾습니다. 상위스코프는 전역 window 객체인데, 없으니 동적 할당해서 doFunc를 window에 할당합니다. 만약 $(document).ready 위에 외부 함수가 있고 거기에 지역변수 doFunc 있었다면 그 지역변수 doFunc에 함수를 할당했을 겁니다.
5. 4의 결과로 <input type="button" onclick="doFunc();" value="button_02">에서 doFunc를 찾을때 전역에서 바로 찾을 수 있습니다.

반응형
저작자표시 비영리 변경금지

'IT tech Coding > jquery' 카테고리의 다른 글

제이쿼리 Jquery 이미지 클릭하면 화면에 크게 보이기 만들어 봐요~  (0) 2022.12.05
[jquery] 조회화면 만들때 모든 input disabled 만드는 법  (0) 2022.01.14
[제이쿼리] 책갈피기능 구현하는 쉬운 방법  (0) 2021.02.26
제이쿼리 이용해서 이미지 파일열기 후 화면에 이미지 보여주기  (0) 2019.10.20
제이쿼리 이용해서 메뉴를 접었다 폈다 하기  (0) 2019.10.06
댓글