즉시 실행 함수 표현와 document.ready 는 언제 사용하는가 | ChatGPT

ChatGPT 질문한 이유
코드를 작성하다가, 즉시 실행 함수 표혐을 사용해야 할지, document.ready 를 사용해야 할지, 판단이 되지 않았다. 둘의 특징과 차이점을 알아보자.

---

즉시 실행 함수 표현와 document.ready

즉시 실행 함수 표현와 document.ready는

둘 다 DOM이 준비되었을 때 코드를 실행하는 데 사용될 수 있지만,

사용 목적과 방식에서 차이가 있습니다.

---

즉시 실행 함수 표현 (IIFE, Immediately Invoked Function Expression)

IIFE는 함수 정의와 동시에 실행되는 함수입니다.

주로 전역 변수 오염을 방지하기 위해 사용되며, 스크립트가 로드되는 즉시 실행됩니다.

DOM이 준비되지 않은 상태에서 실행될 수도 있기 때문에 DOM 조작 시 주의가 필요합니다.

---

IIFE 특징

함수가 정의되자마자 바로 실행됨.

주로 전역 범위 오염을 막기 위해 사용.

DOM이 준비되기 전에 실행될 수 있음.

---

document.ready (또는 DOMContentLoaded 이벤트)

document.ready는 DOM이 완전히 로드된 후에 코드를 실행하는 방식입니다.

JavaScript의 DOM 조작은 문서가 완전히 로드된 후에 이루어져야 하기 때문에

주로 DOM 조작이 필요한 경우에 사용됩니다.

DOM을 안전하게 조작할 수 있기 때문에, DOM에 의존적인 코드에서 주로 사용됩니다.

jQuery의 $(document).ready() 또는 표준 JavaScript의 DOMContentLoaded 이벤트로 구현할 수 있습니다.

---

document.ready 특징

DOM이 완전히 로드된 후에 실행됨.

DOM 조작을 안전하게 할 수 있음.

JavaScript 표준 방식은 DOMContentLoaded 이벤트.

---

주요 차이점

특징	IIFE	document.ready
실행 시점	즉시 실행 (DOM 준비 여부와 무관)	DOM이 완전히 로드된 후 실행
DOM 조작 안정성	DOM이 준비되지 않으면 에러 가능	DOM이 준비된 후 실행되므로 안전함
전역 범위 오염 방지	전역 변수 오염을 방지 가능	목적과 다름
사용 목적	즉시 실행 및 모듈화	DOM이 준비된 후 코드 실행 (주로 DOM 조작)

---

스크롤 이벤트를 기준으로 설명

IIFE

스크립트 로드 후 바로 스크롤 이벤트를 실행하는 경우에 적합합니다.

DOM이 준비되지 않아도 스크롤 이벤트 자체는 DOM 구조에 크게 의존하지 않으므로 바로 동작할 수 있습니다.

document.ready

DOM을 조작해야 하거나 DOM의 특정 요소가 필요한 경우,

예를 들어 특정 요소의 위치에 따라 스크롤 이벤트를 다르게 처리해야 한다면 document.ready가 더 안전하고 적합합니다.

---

결론

DOM 준비와 크게 상관이 없는 작업은 IIFE로도 구현할 수 있습니다.

하지만 DOM의 상태에 의존하는 추가적인 작업이 있다면, document.ready나 DOMContentLoaded를 사용하는 것이 안전합니다.

---

👇 다음 포스팅으로 전역 변수 오염 방지에 대해 알아보겠습니다.

https://info-tech-dev.tistory.com/167

출처 | ChatGPT