[인간JS되기] 함수와 함수의 호출, 고차함수

제로초님 유튜브 보고 공부

 

 

 

함수와 함수의 호출

const add = (a,b) => a+b; //함수의 기본 형태(여기선 화살표함수로 표현)

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

함수 두 개를 만들어 준다

 

함수 add

함수 calculator

 

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

/* 
//위의 코드는 리턴이 생략되어 있다 풀어 쓰면 아래 코드
const add = (a,b) => {
    retun a+b;
}; 
*/

/* 
객체 리턴 할 때
const add = (a,b) => ({a+b}); //이렇게 해야 함 
const add = (a,b) => {a+b}; // 소괄호로 감싸주지 않으면 다른 결과가 나옴
*/

이 때 add함수에는 return이 생략되어 있다

 

객체를 리턴할 때는 ( { } ) 이렇게 중괄호 밖에 소괄호로 감싸준다 그렇지 않고 중괄호{ } 만으로 묶어 준다면

자바스크립트 엔진이 { } 이 부분 자체를 함수의 바디라고 생각한다

 

 

 

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

 

이 때 주의할 점 초보자들은 

calculator(add,3,5);

함수 자리에 함수가 아니라 함수의 호출을 넣는 실수를 할 가능성이 높다 calculator(add(),3,5);

 

클릭 이벤트를 줄 때에도

document.querySelector('#header').addEventListener('click',add); //O
document.querySelector('#header').addEventListener('click',add()); //X

 

함수와 함수호출의 차이를 명확하게 알고 사용해야 한다

 

 

---

 

 

코드를 볼 때 함수와 함수호출을 헷갈리지 않게 하는 방법 

함수호출을 발견하면 리턴값으로 대체하여 생각하기

 

 

함수가 들어가야 하는 경우

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

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

위 코드에서 add() 함수호출을 발견하면 

add함수의 리턴값을 넣어본다 

 

add()에 아무 파라미터도 안들어갔기 때문에 a+b는  undefined + undefined가 될 것이다

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

이렇게 함수호출을 보면 바로 리턴값으로 대체하여 생각하기!

add() => 함수가 아닌 함수의 리턴값

 

 

 

 

함수호출이 들어가야 하는 경우 

/* const onclick = () => () => {
    console.log('hello');
} */

//위의 고차함수를 풀어쓰면 아래와 같다

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

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

함수의 호출인 onclick()을 발견하면

 

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

함수의 리턴값으로 대체하여 생각해보고 코드가 말이 된다면 함수호출이 들어가는 자리가 맞다

 

 

다른 케이스

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

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

//리턴값으로 대체해보기
//return값을 안적어줬기 때문에 리턴값으로 undefined가 들어간다
document.querySelector('#header').addEventListener('click', undefined);

 

---

 

고차함수에서 헷갈릴 때 

매개변수 event가 어디에 들어가는지 헷갈릴 때

const onclick = (event) => () => {
    console.log('hello');
}

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

//리턴값으로 대체해보기

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

이 때 리턴값을 대체해보면, 리턴에 event가 전혀 들어가지 않는다는 것을 확인할 수 있다

따라서 아래처럼 event를 넣어줘야 한다

 

const onclick = () => (event) => {
    console.log('hello');
}

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

//리턴값 대체해보기

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

 

 

함수의 호출을 보면 함수의 바로 리턴값으로 대체해보기

그 코드가 말이 되는지 안되는지 확인한다

이 때 리턴값을 넣어봤을 때 말이 안되는 코드라면 함수의 호출이 아닌 함수가 와야한다