JS | JS에서 알아야 할 함수 개념들! (콜백함수, 비동기 함수, 호이스팅)

오늘은 지난 강의에 이어 JS에서 알아야 할 함수 개념들을 배웠다.

화살표 함수

() => {}

const hi = () => {
     return "hi";
        }

// 축약형 : return 값이 하나의 동작뿐이라면 중괄호와 함께 생략가능
 const hi = ()=> "hi";

// 축약형 주의 사항 : '객체' 의 경우엔 함수의 {}가 겹치기 때문에 ()로 감싸줘야한다.
const arrowFunction = x => ({ name : 'Arrow' })

IIFE : 즉시 실행 함수

const a = 7;

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

소괄호로 익명함수를 감싸주고, 즉시 () 함수를 불러 실행한다.

호이스팅

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

// 정상 코드
const a = 7

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

double() 

// Type error 오류 코드
const a = 7

double()  // 함수가 선언되기도 전에 호출했기 때문에 Type error 

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

// 호이스팅되는 코드
const a = 7

double()  // 호스이스팅 되어 실행가능

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

타이머 함수

일정 시간 이후 실행되는 함수로, ajax, query ,eventListener 와 함께 대표적인 비동기 함수이며 브라우저 API에 의해 처리된다.

간단히 추가 설명을 하자면,
html이 실행되자마자 콜 스택에서 web API에게 넘어가서 타이머를 처리한다.
그 후, 실행할 코드가 콜백 큐에 담기고, 콜 스택에 남은 task 가 없으면 콜 스택으로 넘어가 실행된다.
(자세한 내용은 Ref : https://www.youtube.com/watch?v=8aGhZQkoFbQ )

종류

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

// 3초 후 콜백함수 실행
const timer = setTimeout(()=>{
	console.log("hello"); 
}, 3000); // 밀리 초 단위로 작성

const h1El = document.querySelector('h1')
h1El.addEventListener('click', ()=>{
	clearTimeout(timer) // 인수로 timer 함수를 넣으면 timer 함수 종료
})

콜백함수

함수의 인수로 사용되는 함수로, 실행 순서에서 특정한 위치를 보장해준다.

function timeout() {
	setTimeout(()=>{
		console.log("hello"); 
	}, 3000); 
}

timeout()
console.log('Done!') // => console 에 hello 보다 먼저 찍힌다

function timeout(cd) {
	setTimeout(()=>{
		console.log("hello"); // 먼저 찍힘
		cd() // 나중에 찍힘 
	}, 3000); 
}

timeout(()=>{
	console.log('Done!') // timeout 함수에 인수로 들어갈 콜백함수 cd
})