자바스크립트 함수 정의와 함수 호출, 고차 함수 정리

버건디·2022년 8월 9일

목록 보기

9/31

자바스크립트로 이것저것 만들어 보는 와중에 함수의 정의와 함수의 호출에 대해서 정리해 볼 필요가 있겠다고 생각했다. (수많은 초보자들이 나와 같이 함수의 정의와 호출에 대해서 헷갈려 하는거 같다..)

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <button id="button"> 버튼 </button>
    </div>
</body>
<script>
    const button = document.querySelector('#button');

    const onClick = () => {
        console.log('Hello!');  //함수 정의
    }

    button.addEventListener('click', onClick()); // 클릭을 하면 onClick 함수 실행이지만 클릭전에 이미 실행되어있음(함수의 리턴값을 집어넣은것)
</script>

</html>

이런 코드가 있다고 가정해보자.

내가 의도했던 것은 버튼을 클릭할때마다 저 onClick함수가 실행 되어서 콘솔창에 Hello! 가 출력이 되는 것이었다. 하지만 Live Server를 통해서 창을 띄우자 마자 Hello!가 출력이 되어서 의도한대로 실행되지 않았다.

이유는 저 onClick에 붙어있는 ()였다.

❗️ 저 ()가 붙어있다는 뜻은 함수를 가져오는 것뿐만 아니라 아예 함수를 실행 한다는 뜻이다. 그렇기 때문에 원래 버튼을 클릭하면 onClick 함수가 실행되는 것이 아니라, 클릭을 하기도 전에 onClick 함수가 실행된다는 뜻이기 때문에 콘솔창에 이미 Hello가 출력이 되어 있는것이다.

즉, 선언한 함수를 넣는것이 아니라 함수의 리턴값을 집어 넣게 되는 것이다.

- 그렇다면 해결을 하려면 어떻게 해야할까❓

1. 함수명()이 아닌 함수명

❗️ 함수 리턴값 자체를 집어넣는것이 아니라 선언한 함수만 불러와줌으로써, 클릭할때마다 onClick함수가 실행 될 수 있도록 한다.

2. addEventListener 함수 안에 있는 화살표 함수로 작성해주기

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <button id="button"> 버튼 </button>
    </div>
</body>
<script>
    const button = document.querySelector('#button');

    button.addEventListener('click', () => {
      	console.log('Hello!');
    }); 
</script>

</html>

위의 코드대로 addEventListener 함수 안에 있는 화살표 함수 안에 클릭시 발생할 함수를 작성해주면 된다.

하지만 반복적으로 호출하게되는 함수거나 고차함수일 경우, 함수를 따로 지정해주는 것이 가독성과 효율성 면에서 훨 좋다.

❗️ 고차함수란?

return값이 함수이거나 인자(parameter)로 콜백함수를 전달받는 함수.
함수의 인자로 전달된 콜백함수를 전달받은 함수로서, 함수 내부에서 콜백 함수를 호출 할 수있다.

함수는 호출하면 함수 안에 있는 return 값을 반환한다. 즉 return 후에 있는 코드들을 실행한다.
함수가 함수를 반환하는 것 또한 가능하다.

const func = () => {
  return () => {
    console.log('Hello!');
  }
};

const innerFunc = func();
console.log(innerFunc); 	// () => {
    						// console.log('Hello!');
  							//		}
console.log(innerFunc()); // Hello!

// 이 코드랑 똑같음

const innerFunc = () => {
  console.log('Hello!'); };

innerFunc(); // Hello!

//맨 위에 있는 함수 선언 코드

const func = () => {
  return () => {
    console.log('Hello!');
  }
};

//는 아래 코드와 같다.

const func = () => {
    return function (){
      console.log('Hello!');
    }
  };

// 밑의 코드대로 바꿀수도 있다.

const func = () => () => {
      console.log('Hello!');
  };

❗️고차함수를 통해 onClick 함수를 작성했다고 가정한다면 addEventListener 자리에 ()를 붙여도 된다.

const onClick = () => (event) => {
        console.log('Hello!');
}

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

위의 코드는


const onClick = () => (event) => {
        console.log('Hello!');
}

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

// onClick() => (event) => {console.log('Hello!');}

와 같은 것이다. 저 () => 다음의 함수를 그대로 대입시켜보면 쉽게 생각해 볼수있다!

밑의 결과 값을 예측해보자

const hof = (a) => (b) => (c) => {
        return a + (b * c);
    }

    const first = hof(3);
    const second = first(4);
    const third = second(5);
    console.log(third); // ?

first = (b) => (c) => {
        return 3 + (b * c);
    }

second = (c) => {
        return 3 + (4 * c);
    }

third = return 3 + (4 * 5); // 23

따라서 값은 23이 된다.

고차함수는 () => 이부분을 하나씩 떼어서 생각해주면 편하다!

버건디

https://brgndy.me/ 로 옮기는 중입니다 :)

이전 포스트

프로그래밍 순서도 작성 방식

다음 포스트

자바스크립트 함수 정의와 함수 호출, 고차 함수 정리