JS - 함수 (일반함수, 익명함수, 내부함수, 즉시실행함수IIFE)

김정인·2022년 12월 11일

JavaScript

목록 보기

3/6

📌 일반함수

일반적인 함수의 선언입니다.

/*
function 함수명(매개변수 . .){
   로직 전개
}
*/

function add(a,b){
	return a+b;
}
console.log( add(1+10) ); // 11

📌 익명(리터럴)함수

함수명이 없는 형태를 가지고 있는 함수입니다.
JavaScript는 함수도 데이터형으로 간주하여, 함수 자체를 리터럴로 표현해 변수에 대입, 다른 함수의 인자로 전달이 가능합니다.
- 리터럴은 데이터(값) 그 자체를 뜻합니다.

/* 
function(매개변수 ..){
	로직전개
}
*/

let add = function(a,b){
	return a+b;
}
console.log(add(1,10)); //11

📌 내부함수

함수 코드 내부에서 함수 정의가 가능하고 이런 함수를 내부함수라고 합니다.
내부함수는 클로저를 생성하거나, 부모 함수 코드 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도로 사용합니다.

function addParent() {
    let a = 100;
    let b = 200;

    //add() 내부 함수 정의
    function add() {
        let b = 300;
		return a + b;
    }

    return add();
}

let answer = addParent();
console.log(answer); // 400

let answer2 = add(); // error

📌 즉시 실행 함수(IIFE)

Immediately-invoked function expression의 약자로 영어를 해석하면 즉시-호출-함수 표현입니다.
말 그대로 정의되자마자 즉시 실행되는 함수를 의미합니다.

/*
(function(매개변수 ..){
 로직전개
})(인자...)
*/

/* 일반함수 즉시 실행 */
(function add(a, b){
	console.log(a + b);
})(10, 20); // 30

let answer = (function add(a, b){
	return a + b;
}(10, 20));
console.log(answer); // 30


/* 익명함수 즉시 실행 */
(function (a, b){
	console.log(a + b);
})(100, 200); // 300


let answer = (function(a,b){
	return a + b;
})(100,200);
console.log(answer); // 300

🤔 함수 별 사용하는 이유는 뭘까?

🔎 일반함수와 익명함수

먼저 일반함수와 익명함수는 JavaScript의 호이스팅의 특성에 따라 일반함수로 정의하면 함수 전체가 맨 위로 올라가므로 호출 위치에 상관없이 사용 가능하나, 익명함수로 정의하면 함수 자체는 변수가 선언 되었을 때 사용가능 하므로 선언부가 실행부보다 위에 있어야 합니다.

따라서 아래와 같이 정의가 가능합니다.

일반 함수는 전역으로 사용하며, 선언부와 실행부 위치가 상관이 없습니다.
=> 재사용하는 함수에 사용하는 것이 좋습니다.
익명 함수는 선언부가 실행부보다 위에 있어야합니다.
=> 한 번만 사용하거나, 전역적으로 사용할 필요가 없는 경우 사용하는 것이 좋습니다. (메모리 낭비를 줄일 수 있습니다.)