return function() 함수를 리턴하는기법은 어디에 사용할까?

윤랩용 2022. 6. 25. 06:38

2022. 6. 25. 06:38

함수를 리턴하는 함수

자바스크립트 코딩하면서 함수자체를 리턴하는 함수를 보았을 것이다.

1. 하나의 함수를 만들고 값을 리턴한다

function hello() {
  return "hello world";
}

hello();

2. 하나의 함수를 만들고 익명함수를 리턴한다

function hello() {
  return function world() {
    return "hello world";
  };
}

hello();

어떨때 함수를 리턴하는것을 사용할까?

예시를 들어보자

1. 3개의 버튼 마다 1의 로그가찍히는 이벤트 리스너등록

<!DOCTYPE html>
<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>
    <button id="c1">C1</button>
    <button id="c2">C2</button>
    <button id="c3">C3</button>
    <script>
      function c() {
        console.log(1);
      }

      document.getElementById("c1").addEventListener("click", c);
      document.getElementById("c2").addEventListener("click", c);
      document.getElementById("c3").addEventListener("click", c);
    </script>
  </body>
</html>

addEventListener 의 두번째 인자는 함수를 처리해야한다.

만약 c1버튼을 누르면 1, c2버튼을 누르면 2를 호출하고싶다면

2. 3개의 버튼클릭시 c(n) 호출

<!DOCTYPE html>
<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>
    <button id="c1">C1</button>
    <button id="c2">C2</button>
    <button id="c3">C3</button>
    <script>
      function c(n) {
        console.log(n);
      }

      document.getElementById("c1").addEventListener("click", c(1));
      document.getElementById("c2").addEventListener("click", c(2));
      document.getElementById("c3").addEventListener("click", c(3));
    </script>
  </body>
</html>

보기엔 잘동작할거같지만 함수 실행이안된다.

c() 로 하는순간 이벤트 리스너에게는 함수가 등록되는것이아닌 리턴값이 넣어지게된다.

그렇다면 이럴때 익명함수 리턴을 사용한다

2. 3개의 버튼클릭시 c(n) 호출 (리턴함수 사용)

<!DOCTYPE html>
<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>
    <button id="c1">C1</button>
    <button id="c2">C2</button>
    <button id="c3">C3</button>
    <script>
      function c(n) {
        return function () {
          console.log(n);
        };
      }

      document.getElementById("c1").addEventListener("click", c(1));
      document.getElementById("c2").addEventListener("click", c(2));
      document.getElementById("c3").addEventListener("click", c(3));
    </script>
  </body>
</html>

이렇게한다면 c1 버튼 1 리턴, c2버튼 2리턴, c3버튼 3리턴이된다.

c() 로하는순간 이벤트 리스너에게는 리턴값이 넣어지므로

함수를 리턴시키면 -> 리턴값이함수이고 -> 함수등록이기때문에

동작이가능하게된것이다.

이러한 기법으로 함수를 리턴하는 함수를 이용할수있다.

'프로그래밍 > JavaScript' 카테고리의 다른 글

실행 콘텍스트 (Execution context) (1)	2023.12.25
[반복문] for() forEach() map() filter() 어떨때 사용?? (0)	2023.10.04
자바스크립트의 핵심개념 (0)	2022.07.04
[모듈] import, export 키워드, 모듈 (0)	2022.06.12
[인사이드 자바스크립트] 함수와 프로토타입 체이닝 (0)	2022.06.11

yunrap 개발블로그