Qual é a diferença relevante entre chaves ({ }
) e parênteses (( )
) em um retorno de uma função?
const example = () => ( ... );
Versus:
const example = () => { ... };
Antes de tudo, vale ressaltar que isso não se trata de algo exclusivo do React. É um recurso sintático do JavaScript. Foi introduzido no ECMAScript 2015 (ES6), com a adição das arrow functions. Entre os vários recursos introduzidos por essa nova forma de se criar uma função, pode-se citar a avaliação de um bloco de código ou uma única expressão.
Os métodos mais antigos para se definir funções funções no JavaScript exigem que você necessariamente crie um bloco. Por exemplo:
function doStuff() {
// Eu sou um bloco!
}
const doOtherStuff = function() {
// Eu sou um bloco!
};
As arrow functions, por outro lado, não. Permitem ao desenvolvedor optar por utilizar uma única expressão. Se necessário, claro, blocos ainda podem ser usados para ser o corpo (body) da arrow function.
Desse modo, se a sua arrow function retorna algo entre parênteses ()
, significa que seu corpo é uma única expressão, que será avaliada durante sua invocação. Vale frisar que não é necessário usar parênteses para denotar uma expressão. Nesse caso específico, geralmente os parênteses são colocados em expressões que ocuparão múltiplas linhas, como vários componentes JSX, que são expressões, já que, no fundo, não passam de chamadas à React.createElement
.
const fn1 = () => 'Hello, world!';
const fn2 = (x, y) => x + y;
const fn3 = (x, y, z) => (
x +
y +
z
);
console.log(fn1());
console.log(fn2(1, 2));
console.log(fn3(1, 2, 3));
Já se a arrow function tiver sido definida com as chaves ({}
), seu corpo será um bloco, que poderá executar múltiplas expressões e declarações (statements). Nesse caso, a função retornará um valor definido explicitamente através do return
. Caso contrário, undefined
será retornado.
Alguns exemplos da arrow function cujo corpo (body) seja um bloco:
const fn1 = () => {
return 'Olá, mundo!'
};
const fn2 = (x, y) => {
// `if` é um exemplo de declaração (statement):
if (x > y) {
return 'X é maior que Y.';
}
};
console.log(fn1()); // Olá, mundo!
console.log(fn2(9, 1)); // X é maior que Y.
console.log(fn2(1, 9)); // undefined
Embora isso não tenha sido colocado na pergunta, vale lembrar que os parênteses também podem ser utilizados para agrupar várias expressões (separadas por vírgulas), avaliando uma a uma mas retornando somente a última. Veja mais na documentação.
Para aprofundamento, sugiro a leitura deste capítulo do excelente livro "JavaScript for impatient programmers", que cobre as diferenças entre expressões e declarações.
Isso não tem nada a ver com React, JSX ou qualquer biblioteca ou superset (TypeScript, por exemplo), são apenas sintaxes do JavaScript:
Na segunda, as chaves definem o início e fim de um bloco de código, que pode ter múltplias expressões e outros blocos de código, separados por ;
ou quebra de linha:
() => {
foo();bar()
for (const fun of functions) {
fun()
}
}
Ao definir as chaves, a função não retornará nada (ou seja, undefined
) a não ser que seja feito explicitamente com a palavra chave return
A primeira é apenas um parênteses para agrupar uma expressão, que será retornada pela função, logo () => (qualquercoisa)
é equivalente a () => qualquercoisa
, geralmente é usado para deixar claro o início e fim da expressão:
() => (
<div className="alert">
<p>Um exemplo qualquer</p>
</div>
)
Se você quiser retornar um objeto literal, seu uso é necessário para que as chaves não sejam confundidas com o início e fim do bloco de código, o que geraria um erro de sintaxe:
// Correto
() => ({
foo: 'bar'
})
// Erro
() => {
foo: 'bar'
}
Ambas respostas anteriores já definem bem a diferença. Só faltou ressaltar uma questão:
Ao usar os parênteses, automaticamente será retornado a última expressão.
Exemplo:
var a = 10;
var b = 10;
var c;
var d;
var foo = () => (c = a+b, a);
console.log(foo()); // define o valor de 'c' retorna 'a' (10)
console.log(c) // 20
var bar = () => (d = a+b, c = d+a, d);
console.log(bar()); // define o valor de 'd', 'c' e retorna 'd' (20)
console.log(c); // 30
Quando se quer retornar apenas uma expressão, não faz sentido usar os parênteses. Vira uma questão de estética.
Exemplo:
var a = 10;
var b = 10;
var fuba = () => a+b;
console.log(fuba()); // 20
Vale ressaltar, também, que caso tenha mais de uma expressão sem delimitar com os parênteses, a primeira será retornada apesar de executar as demais.
Exemplo:
var a = 10;
var b = 10;
var c;
var foo = () => c = a+b, a = 50;
console.log(foo()); // define o valor de 'c' (a+b), 'a' (50) e retorna 'c' (60)
console.log(c) // 60
,
(comma operator). Saiba mais aqui.
Commented
8/03/2020 às 13:48
return
, como em uma função/método qualquer...