반응형
📘 자바스크립트 함수 선언 방식 정리 (ES5 기준, 인스턴스 여부 포함)
| 번호 | 선언 방식 | 문법 예시 | 즉시 실행 여부 | 인스턴스 생성 가능 여부(new) | 설명 |
| 1 | 함수 선언문 (Function Declaration) | function fn() {} | ❌ | ❌ | 가장 기본적인 함수. 호이스팅됨. |
| 2 | 함수 표현식 (Function Expression) | var fn = function() {} | ❌ | ❌ | 함수도 값. 선언 이후 호출 가능. |
| 3 | 즉시 실행 함수 (IIFE) | (function() { ... })() | ✅ | ❌ | 즉시 실행. 스코프 보호용. |
| 4 | 생성자 함수 (Constructor Function) | function Cls() { this.x = 1; } → new Cls() | ❌ | ✅ | this를 이용해 인스턴스 생성 |
| 5 | 객체 리터럴 (Object Literal) | var obj = { method: function(){} } | ❌ | ❌ | 메서드 모음. 유틸 객체에 적합 |
| 6 | new function(){} 패턴 | var obj = new function() { ... } | ✅ | 이미 실행되므로 생성자처럼 사용됨 | 유틸 객체 즉시 생성. jQuery에서 자주 사용 |
설명 예시와 함께 보기
1. 함수 선언문 (기본 함수)
function sayHello(name) {
console.log("Hello, " + name);
}
sayHello("철수"); // 실행됨
- 호출 전에 써도 실행 가능 (호이스팅됨)
- 인스턴스 생성 목적 아님 → new sayHello() ❌
2. 함수 표현식
var sayHi = function(name) {
console.log("Hi, " + name);
};
sayHi("영희");
- 변수에 함수를 담음 (값처럼 사용)
- new sayHi() ❌ 안 됨 (인스턴스 목적 아님)
3. 즉시 실행 함수 (IIFE)
관련글
4. 생성자 함수
function Person(name) {
this.name = name;
}
var p = new Person("태훈");
console.log(p.name); // '태훈'
- this 사용
- 반드시 new로 호출해야 정상 작동
- ✅ 인스턴스 생성 가능
5. 객체 리터럴
var utils = {
add: function(x, y) { return x + y; },
log: function(msg) { console.log(msg); }
};
utils.add(1, 2);
- 여러 함수(메서드)를 묶은 구조
- 클래스 X, 인스턴스 X
6. new function(){} 패턴
var tset = new function() {
console.log("즉시 실행됨");
this.test = function() {
console.log("메서드 실행됨");
};
};
tset.test(); // 사용 가능
- 함수가 new로 즉시 실행됨
- 내부 this에 메서드 등록
- 결과적으로 tset은 하나의 유틸 객체
- new를 썼지만, 다시 인스턴스를 만드는 구조는 아님
- 하지만 인스턴스처럼 동작
🔚 요약 표 (최종 정리)
선언 방식 즉시 실행 인스턴스 생성 (new) 용도 요약
| 함수 선언문 | ❌ | ❌ | 기본 함수 정의 |
| 함수 표현식 | ❌ | ❌ | 값처럼 함수 쓰기 |
| 즉시 실행 함수 (IIFE) | ✅ | ❌ | 스코프 보호 / 모듈화 |
| 생성자 함수 | ❌ | ✅ | 인스턴스 생성 |
| 객체 리터럴 | ❌ | ❌ | 유틸 메서드 묶기 |
| new function(){} | ✅ | 🔶 (1회성 객체 생성) | 유틸 싱글턴 객체 생성 |
🔶 new function(){}은 "new로 생성되지만" 다시 인스턴스를 찍는 용도는 아님. 1회성 싱글턴 객체로 즉시 만들어서 쓰는 패턴.
반응형
'웹 > JS+Jquery' 카테고리의 다른 글
| 자바스크립트에서 this, var, new 개념 완전 정리 (0) | 2025.05.12 |
|---|---|
| JS - 왜 jQuery는 항상 (function($){ ... })(jQuery); 를 쓸까? (2) | 2025.05.11 |
| js - 페이지 이동 후 슬라이드 이미지가 안 움직이는 이유 – 이미 로드된 JS의 한계와 해결 (0) | 2025.05.09 |
| JS - 자바스크립트의 객체(Object)를 리터럴 형태로 작성하는 방법 (객체리터럴) (1) | 2025.05.06 |
