함수 복습 - Fn Theory Recap

즉시 실행 함수 - IIFE ( Immediately-InvokedFunction Expression ) 

const a = 7;

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

double();

위 코드는 평범한 함수 실행 코드이다. 하지만 이걸 IIFE로 써본다면 

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


const a = 7;

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

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

위에 코드처럼 작성하게 되는데 특이점은 

1. 전체 익명 함수문을 소괄호로 감싼다.
2. 그리고 감싼 소괄호에서 닫는 소괄호 앞뒤로 상관없이 ()를 넣어주고 세미콜론으로 닫아준다.
3. TypeError 가 나온다면 높은 확률로 앞 뒤 어떤 문을 세미콜론으로 안닫아준것 일거다. 

 

---

호이스팅 - Hoisting 

딥다이브 공부하면서 이미 배웠었지만 다시 정리해본다면

const a = 7;

double()

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

위 코드에서는 함수 표현을 사용해서 밑에있는 함수가 호출이 먼저 될 수가 없지만 , 

// 호이스팅(Hoisting)
// 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a = 7;

double()

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

자바스크립트만의 특징이지만 함수를 선언으로 바꿔주면 유효범위를 최상단으로 가져와서 호출문이 어디에 상관없든 정상적으로

작동됨을 확인 가능하다. 

 

---

타이머 함수 - Timer Function 

// setTimeout(함수, 시간) : 일정 시간 후 함수 실행
// setInterval(함수, 시간) : 시간 간격마다 함수 실행
// clearTimeout() : 설정된 Timeout 함수를 종료
// clearInterval() : 설정된 Interval 함수를 종료

 

---

콜백 함수 - Callback Function

콜백함수를 쉽게 말하자면, 바로 위에 있는 타이머 함수를 예로 들어, 

setTimeout( () => {
	console.log("Test");
},1000)

타이머 함수 안에 1초마다 에로우 함수를 호출하는데, 이를 콜백 함수라고 할 수 있고, 에로우 함수말고 다른 함수를 인수로 사용하는 모든 것을 콜백함수라고 한다. 

그런데 어떨때 쓰는 개념인가 ? 

function timeout() {
  setTimeout(() => {
    console.log("Test!")
  }, 1000)
}
timeout()
console.log('Done!');

위 코드를 보면 timeout() 함수가 호출을 하지만 1000ms의 딜레이가 있기때문에 그새를 못참고 내려와 Done! 을 먼저 출력하고 

딜레이 지난 다음 Test! 가 출력이 된다. 이럴 때 콜백 함수를 사용해 함수가 먼저 끝내고 그 다음 코드를 실행하게 끔한다. 

function timeout(cb) {
  setTimeout(() => {
    console.log('Test!');
    cb()
  }, 1000)
}
timeout(() => {
  console.log('Done!');
})

이 코드를 보면 timeout() 호출문에 익명함수 arrow 함수를 넣어 인수로써 전달해주고, timeout 함수에서 매개변수로 cb라고 받은 다음 Test!가 출력이 되고나서 콜백함수 cb()를 호출해준다고 보면 된다. 즉 실행위치를 보장하는 용도라고 보면 되겠다. 

 

---