
즉시 실행 함수(IIFE) 는 선언과 동시에 실행되는 함수이다.
(function() {
console.log("result");
})(); // result
전역 범위 오염 방지
IIFE 내부에서만 사용하여 전역 네임스페이스 오염을 방지할 수 있다.✔️네임스페이스 패턴 : 이름 공간
- 이름들을 한 곳에 모아서 충돌 미리 방지
- 선언된 변수, 함수를 쉽게 가져다 쓸 수 있게 만든 매커니즘
자바스크립트는 객체 리터럴, 즉시 실행 함수와 관련 있다
초기화 코드 실행
비동기 작업을 위한 클로저 활용
setTimeout)에서 각 실행마다 독립적인 변수 유지 가능하다=>)| 구분 | 일반 함수 (function) | 화살표 함수 (=>) |
|---|---|---|
this | 호출 방식에 따라 결정된다 | 정의된 위치의 this를 유지 |
arguments 사용 가능 여부 | 가능 | 불가능 |
| 줄임 표현 가능 여부 | 불가능 | 가능 (return 생략 가능) |
| 생성자 함수 가능 여부 | 가능 (new 사용 가능) | 불가능 (new 사용 불가) |
화살표 함수는 this 유지, arguments 없음, 코드 간결화
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
한 줄 코드에서는 {}와 return을 생략 가능!
function 키워드 방식이 this를 다룰 때 복잡했고, 콜백 함수에서 this를 명확하게 유지하기 위해 만들어졌다.✔️콜백 함수
const numbers = [1, 2, 3]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6]
function을 사용할 필요 없이 간결한 코드 작성 가능하다
arguments 객체함수 내부에서 전달된 모든 인수를 배열처럼 저장하는 객체
...rest 사용map, forEach 같은 배열 메서드 사용 불가function showArguments() {
console.log(arguments);
console.log(arguments[0]); // 첫 번째 인수
}
showArguments(10, 20, 30);
↑ 일반 함수에서 arguments 사용 가능
function showArguments() {
console.log(arguments);
}
showArguments(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }
const showArgs = () => {
console.log(arguments);
};
showArgs(1, 2, 3); // 오류 발생!
↑ 화살표 함수에서는 arguments를 사용할 수 없다
↑ undefined 발생
const showArgs = (...args) => {
console.log(args);
};
showArgs(1, 2, 3); // [1, 2, 3]
↑ 대신 ...rest(나머지 매개변수)를 사용해야 함!
argument (단수형, 개별 인수)함수에 전달된 각각의 인수를 의미하는 일반적인 용어
function add(a, b) { // 여기서 a, b가 각각 "argument"
return a + b;
}
consolelog(add(3, 5)); // 8
여기서 a와 b는 각각 "argument" (개별 인수)
전체 인수 목록을 가리킬 때는 arguments 객체를 사용
✔️argument vs arguments
둘은 다른 것이다
argument: 함수의 개별 인수 (특정한 키워드 X, 일반적인 개념)
arguments: 일반 함수에서 사용 가능한 객체 (전달된 모든 인수를 저장)
- 화살표 함수에서는 사용 불가능 (
...rest사용해야 함)
| 구분 | argument | arguments |
|---|---|---|
| 뜻 | 개별적인 함수 인수 | 함수에 전달된 모든 인수를 담은 객체 |
| 형태 | 특정한 키워드 아님 (일반 용어) | 함수 내부에서 자동으로 생성되는 객체 |
| 사용 가능 함수 | 모든 함수에서 사용 가능 | function에서만 사용 가능 (화살표 함수) |
| 예제 | function add(a, b) {} → a, b가 각각 argument | function test() { console.log(arguments); } |