Ch 4. 함수- 화살표 함수, 즉시 실행 함수(IIFE)

화살표 함수

1
2
3
4

function sum() {}
const sum = function () {};
const sum = () => {}; //화살표 함수
;(() => {...})() //즉시 실행 함수

함수를 나타내는 방법은 위 네가지가 존재한다. 이 중 화살표 함수와 즉시 실행 함수에 대해 알아보자.

1
2
3
4
5
6
7
8
9

const sum = (a, b) => {
  return a + b;
};
const sum = (a, b) => a + b; //동일하게 작동한다.

const g = () => {
  return { a: 1 };
};
const g = () => ({ a: 1 }); //객체 데이터를 바로 return할때는 소괄호로 묶어주자

화살표 함수내 return 외 코드가 존재하지 않는다면 return과 중괄호를 생략하고 한줄로 표현 가능하다. 만일 return 되는 값이 객체 데이터라면, return과 중괄호를 생략하는 대신 객체 데이터를 소괄호로 묶어주어야 한다.

1
2
3

const a = () => {};
const b = (x) => {};
const c = (x, y) => {};

화살표 함수에서 매개변수가 하나 뿐이라면 소괄호를 생략 가능하다.

즉시실행함수(IIFE)

1
2
3
4
5
6
7

const a = 7;

const double = () => {
  console.log(a * 2);
};

double();

일반적인 함수는 위와 같이 실행코드가 존재해야 실행된다.

1
2
3

(() => {
  console.log(a * 2);
})();

즉시 실행 함수는 실행코드 없이 함수 그 자체만으로 실행이 가능하다.

활용 패턴

1
2
3
4
5

;(() => {...})()       // (F)()
;(function () {...})() // (F)()
;(function () {...}()) // (F())
;!function () {...}()  // !F()
;+function () {...}()  // +F()

즉시실행함수의 매개변수

1
2
3
4
5
6
7

((a, b) => {
  console.log(a);
  console.log(b);
})(1, 2);

//1
//2

즉시 실행 함수는 두번째 소괄호에 들어가는 데이터들을 즉시실행함수의 매개변수로 전달 가능하다.