[ 함수 ] 즉시실행함수 (IIFE)

//  즉시 실행 함수 (IIFE, Immediately-Invoked Function Expression)

const a = 7

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

double()    //  14

//  위와 같이 double 이라는 변수에 화살표 함수를 대입 했을 때,
//  이 함수를 사용 하기 위해서는, 함수를 9번 째 라인 처럼 호출 해야 한다.

//  그런데, 함수의 이름을 작성 해서 호출 할 필요 없이,
//  함수를 만들자마자 바로 사용을 할 수 있는 방법이 존재 한다.

//  문법은 아래와 같다.

/*

()()

이렇게 소괄호 2개를 작성 한다.

근데, 이렇게 작성 하면 에러가 발생 하는데, 그 이유는 9번 째 라인의 double() 이 작성 되고,
; (세미 콜론) 이 없기 때문 이다.
일반적으로 JS 에서 ; (세미 콜론) 을 잘 붙히지 않으므로, double(); 로 작성 하지 않고,
;()() 두개의 소괄호 앞에 ; (세미 콜론) 을 붙혀 주면 된다.

그리고, 기존의 double 변수에 대입 되는 화살표 함수 영역 부분 자체를
첫번째 소괄호에 모두 넣어 준다.

그러면 아래와 같이 될것이다.

 */

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

//  이렇게 위와 같이, 함수를 생성 하고, 즉시 함수를 실행 하고 싶으면,
//  첫번째 소괄호 안에 함수를 작성 하고, 두번 째 소괄호를 작성 하면 된다.
//  이렇게 생성한 함수는 이름이 없기 때문에, 익명 함수 이다.

//  이 즉시 실행 함수는 위와 같은 문법 말고도, 다양한 사용 패턴이 존재 한다.

/*

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

 */

//  위와 같이 정말 다양한 즉시 함수 패턴 문법이 존재 한다.

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

;(function () {
    console.log(a * 2)
})()

;(function () {
    console.log(a * 2)
}())

;!function () { //  ! 를 작성 하면 즉시 실행 함수가 된다.
    console.log(a * 2)
}()

;+function () { //  + 를 작성 하면 즉시 실행 함수가 된다.
    console.log(a * 2)
}()

;((a, b) => {   //  undefined, undefined
    console.log(a)
    console.log(b)
})()

//  위와 같이 매개변수 a와 b를 작성 하고, 중괄호 안에 a와 b를 console.log() 를 통해
//  출력 하려고 하면, 매개변수로 오는 인자 값이 존재 하지 않으므로,
//  undefined 가 출력 된다.

//  이때, 즉시 실행 함수의 두번째 소괄호에 데이터를 넣으면,
//  그 데이터가 각각 해당 하는 첫번째 소괄호의 해당 함수의,
//  매개변수 == 파라미터 로 전달이 되게 된다 !

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

//  이렇게 위와 같이 두번째 소괄호에 데이터를 넣어 파라미터의 값을 부여 할 수 있는데,
//  보통 어떻게 활용 하냐면, JS 를 사용 할 때 다양한 전역 데이터 들이 있다.
//  이 전역 데이터의 이름을 간소화 할 수 있게 된다.

;((a, b) => {
    console.log(a)
    console.log(b)
})(window, document)

//  위의 코드를 보면, 첫번째 인자로, window 전역 객체를 추가 하고,
//  두번째 인자로, document 객체를 추가 했다.
//  그러면, 저 객체가 전달 되서 객체의 정보가 console.log 를 통해 출력 된다.

//  이렇게 작성 하는 방식은, 어떤 특정한 객체를 두번째 소괄호에 작성 하고,
//  이 데이터를 a 와 b 라는 이름을 가진 파라미터의 값으로 넘겨주는 것인데,
//  딱 a 와 b 의 파라미터명만 봤을 때는, 도대체 이 파라미터에, 무슨 값이 넘어오는지를,
//  도저히 유추 할 수 없게 된다.
//  그래서 이렇게 작성 하는 것은 어떤 코드를 쉽게 알 수 없게 하는 난독화 의 개념이라고 볼 수 있는데,
//  개발자 입장에서는 유용한 개념이라고 보긴 어렵지만,
//  이러한 방법도 있다는 것을 알아 두자.

//  예시

;((a, b) => {   //  이런식으로 ~
    console.log(a.innerWidth)
    console.log(b.body)
})(window, document)