1

Bom dia.

Eu estava estudando um pouco mais sobre Factory Function e não entendi o motivo da variável img não estar sendo alterada.

const imgs  = () => {
    let img = [];
    return {
        addImg: (photo) => img = [...img, photo],
        img
    };
};
const images = imgs();
images.addImg('akskaskssk');
images.addImg('aloaloalo');
console.log(images.img); // []

É possível a variável ser modificada a cada chamada do método addImg?

Desde já, agradeço pela atenção!

2 Respostas 2

2

Não dá certo porque e um closure, é uma função que guarda consigo o ambiente léxico a qual a definiu.

No momento de sua definição, a função referenciada por addImg continha em seu escopo de definição uma variável img a referencia para um array vazio. A cada chamada dessa função o que o código img = [...img, photo] faz é apenas mudar a referência interna de um array vazio para outro array, as referências externas continuam apontando para o mesmo array vazio.
Ou seja terminou a função a referência interna sumiu e não foi utilizada e as referencias externas continuam apontando para o array vazio.

O que você deve fazer é modificar a composição do array sem modificar as referências. Para isso pode usar um Array.prototype.splice(). Veja o exemplo:

const imgs = () => {
  let img = [];
  return {
    //Modifica o array mantendo a referência.
    addImg: (photo) => img.splice(img.length, null, photo),
    img
  };
};
const images = imgs();
images.addImg('akskaskssk');
images.addImg('aloaloalo');
console.log(images.img);

2

Resolvi realizando tipo um getter, retornando o valor da varíavel.

const imgs  = () => {
  let img = [];
  return {
      addImg: (photo) => img = [...img, photo],
      getImg: () => img
  };
};
const images = imgs();
images.addImg('akskaskssk');
images.addImg('aloaloalo');
console.log(images.getImg()); // ["akskaskssk", "aloaloalo"]
5
  • e qual é a utilidade prática disso?
    – user60252
    Commented 5/06/2020 às 17:36
  • @LeoCaracciolo é padrão de factory. Normalmente é usado em conjunto de uma fonte automatizada de recursos. Commented 5/06/2020 às 17:52
  • @AugustoVasques, voei kkk, sou leigo no assunto.
    – user60252
    Commented 5/06/2020 às 17:54
  • @LeoCaracciolo, você não voou não. O uso prático não está muito intuitivo porque acho que é um exemplo simplificado. Nesse caso eu acredito, suposição minha, que esse factory vai ser usado em código mais complexo que retorne listas de elementos HTML <img> vindos de uma solicitação a um servidor, o servidor envia o JSON e a função monta as tags. O autor deixou dessa forma apenas para facilitar a compreensão da pergunta e eliminando detalhes da implementação que não afetaria o resultado. Commented 5/06/2020 às 19:44
  • @AugustoVasques, valeu a explicação
    – user60252
    Commented 5/06/2020 às 21:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .