🚛

Statement vs Expression

Expressions e Statements são duas categorias de sintaxe na linguagem Javascript. É importante distinguir as duas pois expressions podem se comportar como statements, e por isso podemos ter uma expression statement, porém o contrário não é verdade, statements não podem se comportar como expressions.

Expressions

Uma expression é um código que quando executado sempre vai resultar em um único valor.
2 + 2 * 3 // 8 // Arithmetic Expressions 10; // Numeric Literal, quando computado resulta em 10 1 + 1; // 2 // String Expressions 'hello'; // String Literal, quando computado resulta na string 'hello' 'hello' + 'world' // 'hello world' // Logical Expressions true; // Boolean Literal, quando computado resulta no boolean true 1 < 2; // true 1 > 2; // false variable === 2 && another === 3; // Resulta em true ou false dependendo dos valores das variáveis // Left Hand Side Expressions const obj = {}; obj.x = 1; // Assignment expression array[0] = 20; // Assignment Expressions let variable; variable = 55; // Quando atribuimos valores à variáveis, chamamos de assignment expression let a = 0; let b = (a = 1); // Aqui a assignment expression (a = 1) resulta no valor 1 que será atribuído a variável b, sendo b = (a = 1) outra assignment expression. a // 1 b // 1 `hello ${3}` // 'hello 3'

Statements

Em uma linguagem de programação, statement é uma linha de código como uma instrução para executar uma ação específica. Essa ação pode ser a criação de uma variável ou função, iterar sobre um array de elementos, usar condicionais e etc. No Javascript um statement nunca pode ser usado onde é esperado um valor, por exemplo, não podem ser usados como argumentos, atribuições (right side), operandos de operadores e retorno.
Todo programa consiste em uma sequência de statements.
const a = 1; function hello() { return 'hello' } if(true) { console.log('true') } debugger;

Expression Statements

Como vimos acima, uma expression pode ser usada como statement.
let a = 2 + 2 const b = 'Number' + a const c = 3 + (a = 2) // 5. (a = 2) é uma assignment expression. O resultado de c é 5 e agora a é 2. const variable = (() => 3)() // IIFE

Grouping operator

Durante nossos exemplos e até no dia-a-dia em alguns momentos temos que encapsular o código entre parênteses. Esse operador é chamado de grouping operator, e seu objetivo é forçar o conteúdo a ser computado como uma expression.
const fn = () => ({ a: 1 })
No exemplo acima temos que encapsular o objeto desejado como retorno da função, entre parênteses. Isso é necessário para que o retorno desejado não seja interpretado como um bloco, e sim como um object literal
let a = 2 const b = 2 * (a = 1) // 2
Neste exemplo encapsulamos a = 1 entre parênteses para termos uma assignment expression, pois caso contrário esse trecho dispararia uma exceção por ser interpretado como um statement.
let a = 2 const b = 2 * a = 1 // SyntaxError: Invalid left-hand side in assignment

Referências