Operadores de Sufixo e Prefixo em JavaScript

A maiória dos operadores das linguagens de programação são muito importantes para a utilização no dia a dia de um desenvolvedor, mas alguns deles podem causar um pouco de confusão ao realizar uma explicação de como eles funcionam por de baixo dos panos, ou até mesmo entender realmente como eles agem. Então neste post eu irei trazer um breve resumo do que é e qual a diferença entre os Operadores de Sufixo e Prefixo no JavaScript

O que são os Operadores Sufixo e Prefixo?

Estes operadores são extremamente uteis para quando queremos incrementar(adicionar) ou decrementar(remover) um determinado valor númerico.

Uma das formas que já foram vistas para quem estuda ou já estudou alguma linguagem de programação pela primeira vez é a partir do exemplo abaixo:

let x = 10
x = x + 1

A variável x está sendo re-atribuida ao seu valor atual e sofrendo uma incrementaçõ através do operador + 1. Sabendo disso, existe uma outra forma mais simples de se realizar o mesmo procedimento atual, que é utilizando os operadores Prefixo e Sufixo:

Operador Prefixo

// Operador Prefixo ++<variável>
let x = 10
let y = 0
y = ++x
console.log( y ) // Retorna 11

A principio ele realmente atribui o valor de X para Y somado +1, mas o que ele faz de baixo dos panos é literalmente fazer essa re-atribuição o valor de x que é 10, adicionando +1, atualizando o seu valor de 10 para 11 e re-atribuindo o valor de y com o valor atualizado de x. Veja o exemplo do que literalmente acontece sem ser visto:

let x = 10
let y = 0
x = x + 1
y = x
//y = ++x (Operador Prefixo)
console.log( x ) // Retorna 11
console.log( y ) // Retorna 11

PS: Basicamente ele re-atribui e incrementa antes da variável y receber o valor 'real' de x que é 10, fazendo-o receber um novo valor.

Operador Sufixo

Também faz a atribuição da mesma forma, trazendo o valor da variável e aumentando o seu valor para +1. Só que com uma pequena diferença, atribuindo e incrementando o valor depois, veja o exemplo abaixo:

// Operador de Sufixo <variável>++
let a = 24
let b = 0
b = a
a = a + 1
// b = a++ (Operador Sufixo)
console.log( a ) // Retorna 25
console.log( b ) // Retorna 24

PS: Esse operador faz o contrário do Prefixo, atribuindo a variável b ao valor da a e logo em seguida incrementando +1, fazendo com que a tenha o valor elevado à +1 e b tendo o valor antigo, que é 24.