javascript 공부 5 - 기본개념1(화살표 함수 , IIFE(즉시 실행 함수) , 호이스팅 , 타이머 함수, 콜백)

 

화살표함수 

 

화살표함수는 기본적인 로직을 축약형으로 표현할 수 있게 해준다  

 

// 일반 함수
const mutiple = function(x){ return x * 2 }


//화살표함수

const mutiple = (x) => {return x * 2 } 

//파라미터가 1개일 경우 소괄호도 생략가능하며 다른 로직없이 단순하게 한 구문의 값을 리턴할 경우 중괄호와
//리턴 키워드를 생략할 수 있다 .

const multiple = x => x * 2

//객체 타입을 리턴할 때는 소괄호로 감싸준다 . 

x => ({name : 'ugo'})

 

 

IIFE(Immediately-Invokaed Function Expression :즉시 실행 함수)

 

함수를 만들때 따로 이름을 정의하지 않아도 아래와 같이 즉시 실행함수로 바로 실행을 할 수 있다.

즉시 실행 함수가 있을 경우 이전 로직에서 ; 로 로직이 끝났음을 알려줘야 인식할 수 있다.

1번과 2번 두가지 방식으로 표현이 가능하다.

//만약 아래의 multiple() 이 한번만 사용되는 함수라면 
//즉시 실행 함수로 사용하는 것이 좋다

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

//즉시 실행 함수1
(function(){
	console.log(a * 2)
})()

//즉시 실행 함수2
(function(){
	console.log(a * 2)
}())

 

 

호이스팅 (Hoisting)

 

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

 

const a = 7

//함수가 만들어지기 전에 함수가 호출되어 에러가 뜬다.
multiple()

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



const a = 7

//함수가 선언만 되어 있음으로 호이스팅이 발생하여
//유효범위가 최상단으로 올라가고 
//multiple()이 잘 작동한다 
multiple()

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

 

 

타이머 함수 

 

특정 시간 후에 혹은 (setTimeout), 특정 시간동안 연속으로(setInterval) 함수를 실행 시킬때 사용하는 함수.

 

//setTimeout 활용
//3초 후에 콜백함수가 실행된다.
const timer = setTimeout(()=>{console.log('hi there')},3000)

//Timeout을 멈춘다
document.querySelector('p').addEventListener('click' , ()=>{
    console.log('stoped')
    clearTimeout(timer)
})


//setInterval 활용
//3초마다 콜백함수가 실행된다
const timer = setInterval(()=>{console.log('hi there')},3000);


//Interval을 멈춘다
document.querySelector('p').addEventListener('click',()=>{
    clearInterval(timer)
})

 

 

콜백(callback)

 

함수의 파라미터로 사용되는 함수를 말한다 함수내에서 특정 시점에 함수를 실행 시키고 싶을때 사용한다 실행시점을 보장한다.

함수 실행시 파라미터로 넘겨준다 .

 

//콜백(Callback)
//함수의 인수로 사용되는 함수 

//setTimeout에서 첫번째인자인 함수는 콜백 함수이다.
//setTimeout(함수 , 시간)


//파라미터로 받은 함수를 함수 안에서 호출할 수 있다.
function timeout(cb){
    setTimeout(()=>{
        console.log('hihi')
        cb()        
    },3000)
}

//함수를 파라미터로 넘기고 있다 . 
//함수내에 로직 이후에 원하는 함수를 실행시킬 수 있다 .
//특정 실행 시점을 보장하는 용도로 활용된다.
timeout(()=>{
    console.log("done")
})