Para que serve o método bind() no JavaScript?

Fala dev tudo bem?

Recentemente estou esbarrando no método bind() do JavaScript com frequentemente e então resolvi escrever um pequeno artigo para explorar o assunto em que este método está inserido, com o objetivo de compreendê-lo um pouco mais e de quebra ainda dar uma introdução a respeito dele a quem também esbarrar com ele por aí.

Bom, esse método foi por muito tempo um mistério para mim, às vezes quebrava a cabeça na tentativa de compreendê-lo e utilizá-lo corretamente, mas foi só quando fui estudar mais a fundo sobre a maneira que o JavaScript trabalha com a palavra mágica this que finalmente pude compreender melhor o seu funcionamento.

Em resumo, segundo a própria documentação do site MDN "O método bind() cria uma nova função que, quando chamada, tem sua palavra-chave this definida com o valor fornecido", ou seja, em outras palavras quer dizer que podemos, com o método bind(), alterar o escopo de execução da nossa função ou método.

Confuso? Então se liga só, imagina que no seu programa você definiu dois objetos e também uma função que exibe algo na tela através de um console.log():

const meuPrimeiroObjeto = {
    
    texto:  "texto do meu primeiro objeto"
    
}

const meuSegundoObjeto = {
    
        texto:  "texto do meu segundo objeto"
}

function MostraNaTela(){
    
    console.log(this.texto);
    
}

Perceba que em console.log(this.texto) estamos usando a palavra "this", ela representa o contexto em que a nossa função vai procurar o valor de texto para atribuir ao parâmetro do console.

Mas o que acontece se eu tentar executar a função MostraNaTela agora? Vamos executar a função para ver o resultado:

MostraNaTela();

Se você executou a função como no exemplo acima você vai ver que ela irá imprimir no console o valor "undefined", o segredo aqui está na palavra "this", o que significa que a nossa função vai tentar imprimir o valor a propriedade texto no contexto em que a função MostraNaTela for chamada ou executada; neste caso nossa função está sendo executada no contexto (ou escopo) global do nosso programa, e no escopo global não existe uma propriedade chamada texto, por isso o resultado foi "undefined".

Hmmm... Mas ai então fica a pergunta: como eu digo para minha função que é para ela procurar pela propriedade texto dentro dos meus objetos e não fora? Bom... é aí que entra o "bind". Com ele podemos vincular o contexto/escopo em que a nossa função deve ser executada, olha só:

const noContextoDoPrimeiroObjeto =  MostraNatela.bind(meuPrimeiroObjeto); 

Hmmm... Mas por que preciso atribuir a uma variável? Simples, pois o método bind retorna "uma cópia da função fornecida com o valor de this especificado, ou seja, o escopo/contexto de execução da função e também os argumentos iniciais", nesse caso como nossa função não recebe parâmetros não vamos passá-los, precisamos de uma variavel para armazenar o retorno do método bind().

E como nossa variável agora armazena uma função podemos executá-la, fazendo o seguinte:

noContextoDoPrimeiroObjeto();

Ao executar a função será "pintado" no console a mensagem: "texto do meu primeiro objeto", ou seja, o valor da propriedade texto que está dentro do objeto "meuPrimeiroObjeto".

O que basicamente fizemos com o bind() foi dizer para nossa função em qual escopo/contexto ela devia executar! Se fizemos agora:

const noContextoDoPrimeiroObjeto =  MostraNatela.bind(meuSegundoObjeto); 

a mensagem impressa no console será: "texto do meu segundo objeto", ou seja, o valor da propriedade texto do objeto "meuSegundoObjeto".

Bom este foi apenas uma visão introdutória do método bind do JavaScript, com ele podemos de certa forma manipular o contexto/escopo em que as nossas funções e métodos são executados e ter controle sobre uma série de erros muito comuns causados por erros relacionados com o escopo.

Espero que tenha gostado do conteúdo e que eu tenha conseguido te dar uma introdução legal ao método bind() do JavaScript. Se você quiser se aprofundar mais sobre o método, recomendo que dê uma olhada no link de referência que utilizei para explicar melhor os conceitos. Aproveite!

Vlw Dev pela sua atenção e um forte abraço!!!

Referências:

Function.prototype.bind() - JavaScript | MDN (mozilla.org)