Function with two parentheses? function()()

Asked

Viewed 165 times

4

I don’t know how to describe why I couldn’t find information about. kkk

At the end of the code when exporting "connect", what does the second parenthesis do? What is called this syntax?

import React from 'react';
import { connect } from 'react-redux';

const Sidebar = ({ modules }) => (
    <aside>
        { modules.map( itModule => (
            <div key={itModule.id}>
                <strong>{itModule.title}</strong>
                <ul> 
                    {itModule.lessons.map( itLesson =>(
                        <li key={itLesson.id}>
                            {itLesson.title}
                        </li>
                    ))}
                </ul>
            </div>
        ))}
    </aside>
);

export default connect( state => ({ modules: state }))(Sidebar); // <---------<<

javascript react

2 answers

11


The function connect() is returning a function. So when you do connect()(Sidebar), you’re passing Sidebar as parameter to function returned by connect and calling it. A simpler example:

// Essa função recebe um parâmetro umNumero. Aí ela retorna outra função, 
// que recebe outroNumero e soma com umNumero.
function soma(umNumero) {
    return (outroNumero) => umNumero + outroNumero;
}

soma(2)(3) // 5

5

It might be easier to understand Allan Juan’s answer if you assign the return of the high-order function to a variable.

function soma(umNumero) {
    return (outroNumero) => umNumero + outroNumero;
}

let somaDois = soma(2) // i.e., somaDois é a função (outroNumero) => 2 + outroNumero
let somaTres = soma(3) // i.e., somaTres é a função (outroNumero) => 3 + outroNumero

let resultado1 = somaDois(3)
let resultado2 = somaTres(4)

console.log(soma(2)(3), resultado1, resultado2)

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.