☂️ 커링

🍋 커링이란???

"커링은 함수 인자를 받는 대신, 한개만 받는 여러개의 함수를 리턴"이다 라고 대부분 설명이 나온다.

나의 생각으로는 함수 안에 함수 안에 함수를 리턴해주는 방식으로 이해했다.

덧셈,곱셈을 통해서 커링을 어떻게 사용했는지 알아보자

🍈 덧셈,곱셈 을 커링으로 만들기

덧셈,곱셈에 인자를 똑같이 받고, 결과값만 다르게 커링을 만들어보면 아래와 같다.

화살표 함수로 만들었으며, a,b,fn을 받고 a,b는 덧셈,곱셈 할 숫자를 입력하는 것이고, fn은 두개의 인자를 통해서 함수의 결과를 리턴한다.

그리고 sum,multipy 함수를 만든다.

/**
 * 인자를 똑같이 받고 결과값만 다르게 받고 싶다
 * ex) 5,4를 받는 인자가 존재하고, 결과(곱셈,덧셈)이 달랐으면 좋겠다
 */

const curry = a => b => fn =>{
    return fn(a,b);
}

const sum = (a,b) => a+b;
const multipy = (a,b) => a*b;

두개의 인자 리턴 함수 확인

함수의 두개의 인자를 넣으면 fn결과를 내뱉는다.

const result1 =curry(2)(4);

/*
return 결과 : 
fn =>{
    return fn(a,b);
}
*/

결과값 확인

curry함수에서 두개의 인자를 받은 결과 result1을 받는다. 그리고 result1의 인자에 미리 생성해둔(sum,multipy)함수를 인자로 넣는다. 그러면, 그것에 대한결과가 6,8로 떨어지는 것을 알 수 있다.

이처럼 인자를 똑같이 받는 경우에는 재활용성을 높이기위해 커링을 사용 할 수 있다.

const sumResult = result1(sum);
const multipyResult = result1(multipy);

console.log(sumResult); //6
console.log(multipyResult); //8

참고로 아래처럼 ()를 연속적으로 사용도 가능하다

curry(2)(4)(sum)

🚲 웹에서 버튼이벤트를 커링 사용해보기

버튼 이벤트를 커링으로 생성

btnEvent를 연속적으로 element, eventName, eventFn을 3가지로 받는다. btnEvent는 element가 존재하면 addEventListener를 통해 이벤트를 등록한다.

그리고 클릭(clickEvent),마우스진입(mouseEnterEvent)을 만든다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <h1>버튼 이벤트</h1>
    <button id="btn1">버튼1</button>
    <script>
        /*
        * 이벤트 함수를 커링으로 만들고, element, 이벤트명, 이벤트 함수를 받는다
        */
        const btnEvent = ele => eventName => eventFn =>{
            if(ele){
                return ele.addEventListener(eventName,eventFn)
            }
            return null;
        }

        /**
         * 함수 클릭 이벤트
         */
        const clickEvnet = ()=>{
            alert("click event")
        }
        
         /**
         * 마우스 진입 이벤트 
         */
        const mouseEnterEvent = ()=>{
            alert("mouseEnter event")
        }
    </script>
</body>
</html>

버튼 이벤트를 커링에 등록 하기

btnResult에는 element를 인자로 받고 리턴한다. 그러면 eventName과 eventFn을 받는 함수를 리턴해준다.

그리고 btnResult에는 이벤트명인 click,clickEvent 그리고 mouseenter,mouseEnterEvent를 등록해준다.

/**
 * 버튼 element를 받고 리턴
 */
const ele = document.querySelector('#btn1');
const btnResult = btnEvent(ele);
/*
return 결과 : 
eventName => eventFn =>{
            if(ele){
                return ele.addEventListener(eventName,eventFn)
            }
            return null;
        }
*/

/**
 * 함수명과 이벤트 함수를 연달아 입력
 */
btnResult('click')(clickEvnet);
btnResult('mouseenter')(mouseEnterEvent);

아래 처럼 click,mouseenter이벤트가 정상적으로 등록된 것을 확인할 수 있다

'Javascript' 카테고리의 다른 글

💿 상태 패턴 (0)	2024.11.25
❄️ 전략 패턴 (1)	2024.11.19
🍟Hls 콘텐츠 변경 감시 (0)	2023.12.04
navigator.mediaSession (1)	2023.07.27
🦘비디오 자동재생 실행시키기 (0)	2023.07.02

one step

☂️ 커링

🍋 커링이란???

🍈 덧셈,곱셈 을 커링으로 만들기

두개의 인자 리턴 함수 확인

결과값 확인

🚲 웹에서 버튼이벤트를 커링 사용해보기

버튼 이벤트를 커링으로 생성

버튼 이벤트를 커링에 등록 하기

'Javascript' 카테고리의 다른 글

댓글

티스토리툴바

☂️ 커링

🍋 커링이란???

🍈 덧셈,곱셈 을 커링으로 만들기

두개의 인자 리턴 함수 확인

결과값 확인

🚲 웹에서 버튼이벤트를 커링 사용해보기

버튼 이벤트를 커링으로 생성

버튼 이벤트를 커링에 등록 하기

'Javascript' 카테고리의 다른 글

관련글

댓글

티스토리툴바