함수와 함수의 호출, 고차함수

함수 선언

const add= (a,b) => a+b;

function calculator(func, a,b){
    return func(a,b);
}

const onClick = () =>{
    return ()=>{
        console.log('hello')
    }
}

const onClick1 = ()=>()=>{
    console.log('hello')
}

이렇게 함수를 선언하는 방식이다.

 

함수 호출

add(3,5); //8
calculator(add,3,5);  //8

onClick();

이렇게 알맞게 선언한 함수를 위 코드처럼 호출할 수 있다.

 

알맞게 선언한 함수 호출은 함수의 리턴값으로 대체하여도 맞다.

---

JS 알맞은 코드

const onClick = () =>{
    return ()=>{
        console.log('hello')
    }
}

const onClick1 = ()=>()=>{
    console.log('hello')
}

document.querySelector('#header').addEventListener('click',onClick());

 

이것을 리턴값으로 대체하면

document.querySelector('#header').addEventListener('click',  ()=>{
        console.log('hello')
    });

위와 같은 코드가 되므로 맞는 코드이다.

 

JS 틀린 코드

const onClick = () =>{
        console.log('hello')
}

const onClick1 = ()=>()=>{
    console.log('hello')
}

document.querySelector('#header').addEventListener('click',onClick());

 

이것을 리턴값으로 대체하면

document.querySelector('#header').addEventListener('click', undefined);

위와 같은 코드가 되므로 틀린 코드이다.

 

 

 

---

출처

https://www.youtube.com/watch?v=NS1cIsWlFGI&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=2