[JS] 함수 선언식과 표현식, 즉시 실행 함수(IIFE)

함수 선언식과 표현식 

 

- 함수 선언식

function funcDeclaration(){
	return ‘A function declaration 함수 선언식’;
}

 

 

- 함수 표현식

let funcExpression = function () {
	return ‘A function expression 함수 표현식’;
}

함수를 만들고 변수에 할당하는 경우이다. 함수는 익명이므로 이름이 없다.

 

 

 

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅의 영향을 받지 않는다.

 

 

 

 

 

즉시 실행 함수(IIFE)

즉시 실행 함수 표현(Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 자바스크립트 함수를 말한다.

(
	function () {
	// 내용
	};
)();

첫 번째 소괄호()는 전역 선언을 막고, IIFE 내부 안으로 다른 변수의 접근을 막는다. 두 번째 소괄호()는 즉시 실행 함수를 생성하는 괄호이다. 이를 통해 JS엔진은 함수를 즉시 해석 및 실행한다.

 

 

 

 

즉시실행 함수의 사용 목적

 

변수를 전역으로 선언하는 것을 피하기 위해서이다. 또한 즉시실행함수 내부로 다른 변수가 접근하는 것을 막을 수도 있다.

(function() {
	var aName = ‘Barry’;
})();

console.log(aName); // 에러

표현 내부의 변수는 외부로부터의 접근이 불가능하다.

 

 

 

var result = (function(){
	var name = ‘Barry’;
	return name;
})();

console.log(result); // Barry

즉시 실행 함수를 변수에 할당하면 함수 자체는 저장되지 않고 함수가 실행된 결과만 저장된다.

 

 

 

 

이름 없는 함수를 위한 두 가지 조건

 

 

1. 함수를 할당받을 변수를 지정

const minus = function (a,b) {
	return a - b;
}

 

 

2. 함수를 즉시 호출

(function (a, b){
	return console.log(a - b);
})(1,2);

 

 

 

 

즉시 실행 함수의 사용

const Score = () => {
  let count = 0;
  return {
    current: () => { return count },
    increment: () => { count++ },
    reset: () => { count = 0 }
  }
};


console.log(Score().current()); // 0
Score().increment();
console.log(Score().current()); // 0

위와 같이 count를 조작하는 함수가 있다고 하자. 하지만 count를 증가하는 increment 메서드를 이용하고 다시 count값을 출력해도 0이 나온다.

 

왜냐하면 Score 함수를 호출하는 순간 let count가 다시 0으로 초기화되기 때문이다. 

 

이때 즉시 실행함수를 사용하면 해결할 수 있다.

 

 

 

 

const Score = (() => {
  let count = 0;
  return {
    current: () => { return count },
    increment: () => { count++ },
    reset: () => { count = 0 }
  }
})();


console.log(Score.current()); // 0
Score.increment();
console.log(Score.current()); // 1

즉시 실행 함수인 Score 함수는 이미 실행된 상태로 메서드가 담긴 객체를 반환했다. 이때 이 메서드들은 클로저를 통해 이미 끝난 Score 함수의 count값에 접근할 수 있다.

 

반환된 메서드들을 사용하면 count값을 증가할 수 있는 것!