JS - 왜 jQuery는 항상 (function($){ ... })(jQuery); 를 쓸까?

💡 자바스크립트에서 즉시 실행 함수(IIFE)와 $를 사용하는 이유

 

---

글 작성 이유

 

대부분의 js가 위 그림처럼 시작하길래 이게 뭔가 싶었고 쓰는 이유가 궁금했음.

 

요점만 정리하면 

1. 변수를 전역적으로 사용하지 않게 하기 위함이고 (코드 오염)

2. $ 를 보호하기 위함이였다.

 

(function($){})()  밖에다가 선언한 함수나 변수는 그냥 전역이 되버린다 코드 오염의 문제가 있다 무슨말이냐면 forumjs에서 사용하는 변수는 forumjs에서만 사용되어야 한다는 말이다. 다른곳에서 접근되게 하면 안 된다는 뜻 

 

$ 보호는 예를들어 $ = 'test' 이렇게 해버리면 $는 그냥 test가 되어버린다 제이쿼리 객체가 아니게 되는거다 그래서 내부에서 $는 무조건 jquery임을 뜻하게  하려고 아래와 같이 하는 것

(function($){ ... })(jQuery); 

 

📘 자바스크립트 함수 스코프와 IIFE 정리

1. 지역 변수와 전역 변수의 차이

• 함수 안에서 선언한 변수는 지역 변수 (밖에서는 접근 불가)
• 함수 밖에서 선언한 변수는 전역 변수 (어디서든 접근 가능)
• 전역 변수는 여러 파일이 함께 쓰는 환경에서 충돌 위험이 있다

var name = "전역"; // 전역 변수

function test() {
  var name = "지역"; // 지역 변수 (밖에서는 안 보임)
  console.log(name); // "지역"
}

test();
console.log(name); // "전역"

---

2. 즉시 실행 함수 IIFE란?

IIFE (Immediately Invoked Function Expression) = 즉시 실행되는 함수

(function(){
  console.log('이 함수는 바로 실행됨!');
})();

• 함수를 괄호 ( )로 감싸면 "이건 표현식이야!" 라고 JS에게 알려줌
• 그리고 뒤에 ()를 붙이면 바로 실행됨

---

3. 왜 IIFE를 쓰는가?

이유 설명

🛡 전역 변수 충돌 방지	IIFE 안에 있는 변수는 밖에서 안 보임 (안전하게 보호됨)
💬 코드 깔끔하게 분리	외부랑 격리된 "나만의 공간"처럼 쓰기 좋음
✅ 즉시 실행 필요할 때	선언하고 바로 실행해야 할 코드에 적합

---

4. 왜 함수에 $를 넣고 jQuery를 넘기는가?

(function($){
  // 이 안에서는 $ = jQuery
  $('div').hide();
})(jQuery);

이유:

• $는 원래 jQuery에서 많이 씀
• 근데 다른 라이브러리도 $를 쓸 수 있어서 충돌 가능
• 그래서 함수 안에서만 $를 jQuery로 고정해서 안전하게 쓰는 것

(function(apple){
  apple('div').hide();
})(jQuery);

위처럼 $ 대신 다른 이름도 가능. 단지 jQuery를 "별명" 으로 받아서 쓰는 것뿐!

---

5. IIFE 문법 정리

(function 별명(예: $){
  // 여기는 지역 범위
})(넘겨줄 실제 값);

예시:

(function($){
  console.log('이 안에선 $는 무조건 jQuery!');
})(jQuery);

---

🧠 요약

개념 핵심

지역 변수	함수 안에서만 보임 (안전함)
전역 변수	모든 곳에서 보임 (충돌 위험 있음)
IIFE	즉시 실행, 지역 범위 보호
function($){ ... }(jQuery);	$는 jQuery만을 뜻하게 고정

---

function($)에 $를 넣는 이유를 이해하지 못한걸 이해한 배경