Mudanças entre as edições de "Javascript: Arrow Functions"

De Aulas
 
(Uma revisão intermediária pelo mesmo usuário não está sendo mostrada)
Linha 1: Linha 1:
 +
 +
Afluentes: [[Desenvolvimento Front-end I]], [[Usabilidade, desenvolvimento web, mobile e jogos]].
 +
 
= Arrow Functions =
 
= Arrow Functions =
  
Linha 76: Linha 79:
 
Em <code>getContent</code> retornamos o conteúdo da tabela com todas as linhas.
 
Em <code>getContent</code> retornamos o conteúdo da tabela com todas as linhas.
  
−
<syntaxhighlight lang=html>
+
<syntaxhighlight lang="html">
−
 
 
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
 +
 +
<head>
 +
    <title>Aula de JavaScript</title>
 +
</head>
  
 
<body>
 
<body>
−
     <h1>Lista de itens</h1>
+
     <div id="root"></div>
−
 
 
−
    <p id="demo"></p>
 
  
 
     <script>
 
     <script>
 
         const itens = [
 
         const itens = [
−
             { id: 1, nome: 'Item 1', valor: 10 },
+
             { id: 1, nome: "Saulo", idade: 51 },
−
             { id: 2, nome: 'Item 2', valor: 20 },
+
             { id: 2, nome: "Arisa", idade: 14 },
−
             { id: 3, nome: 'Item 3', valor: 30 },
+
             { id: 3, nome: "Fulano", idade: 25 },
−
         ];
+
         ]
  
−
         getLine = (index) => {
+
         const getRows = (item) => (
−
             return `
+
            // Mapeia os valores do objeto e cria as células da tabela
 +
            // Cada valor é envolvido em uma tag <td>
 +
            // e as células são unidas em uma string
 +
            // usando o método join("")
 +
            Object.values(item).map((value) => (`<td>${value}</td>`)).join("")
 +
        );
 +
 
 +
        const getContent = (data) => (
 +
            // Mapeia os dados e cria as linhas da tabela
 +
            // Cada linha é envolvida em uma tag <tr>
 +
            data.map((item) => `<tr>${getRows(item)}</tr>`).join("")
 +
        );
 +
 
 +
        const getHeaders = (data) => {
 +
            // Obtém os cabeçalhos da tabela com base nas chaves do primeiro objeto
 +
            // Cada chave é envolvida em uma tag <th>
 +
            const headers = Object.keys(data[0]);
 +
             return (`
 
                 <tr>
 
                 <tr>
−
                     <td>${itens[index].id}</td>
+
                     ${headers.map((header) => `<th>${header}</th>`).join("")}
−
                    <td>${itens[index].nome}</td>
 
−
                    <td>${itens[index].valor}</td>
 
 
                 </tr>
 
                 </tr>
−
                `;
+
            `);
−
        }
 
−
 
 
−
        getContent = () => {
 
−
            out = "";
 
−
            for (i = 0; i < itens.length; i++) {
 
−
                out += getLine(i);
 
−
            }
 
−
            return out;
 
 
         }
 
         }
  
−
         getTable = () => {
+
         const getTable = (data) => {
−
             return `
+
            // Cria a tabela com os cabeçalhos e o conteúdo
 +
            // A tabela é envolvida em uma tag <table>
 +
            // e o cabeçalho e o corpo são preenchidos com os dados
 +
            // A tabela é retornada como uma string
 +
            // que será inserida no elemento com id "root"
 +
             return (`
 +
                <h1>Lista de itens</h1>
 
                 <table>
 
                 <table>
 
                     <thead>
 
                     <thead>
−
                         <th>id</th>
+
                         ${getHeaders(data)}
−
                        <th>nome</th>
 
−
                        <th>valor</th>
 
 
                     </thead>
 
                     </thead>
 
                     <tbody>
 
                     <tbody>
−
                         ${getContent()}
+
                         ${getContent(data)}
 
                     </tbody>
 
                     </tbody>
 
                 </table>
 
                 </table>
−
             `;
+
             `);
 
         }
 
         }
  
−
         document.getElementById("demo").innerHTML = getTable();
+
         document.getElementById("root").innerHTML = getTable(itens);
 
     </script>
 
     </script>
 
</body>
 
</body>
Linha 136: Linha 151:
  
 
Então imagine agora que temos uma função chamada <code>getCell</code> em que retornamos o conteúdo de uma célula. Ali podemos passar como parâmetros informações para formatar a célula de muitas formas, definir o <code>id</code> do elemento, etc. Daí apenas reutilizamos aquela função.
 
Então imagine agora que temos uma função chamada <code>getCell</code> em que retornamos o conteúdo de uma célula. Ali podemos passar como parâmetros informações para formatar a célula de muitas formas, definir o <code>id</code> do elemento, etc. Daí apenas reutilizamos aquela função.
 +
 +
Por exemplo, no nosso caso podemos reutilizar nosso componente <code>getTabel</code> apenas alterando a lista que passamos como parâmetro para a função. Experimente agora tentar colocar uma nova lista e usar o <code>getTable</code> nela:<syntaxhighlight lang="html">
 +
const itens2 = [
 +
    { codigo: 123, aluno: "Fulano", nota: 10, situacao: "Aprovado" },
 +
    { codigo: 456, aluno: "Ciclano", nota: 5, situacao: "Reprovado" },
 +
    { codigo: 789, aluno: "Beltrano", nota: 8, situacao: "Aprovado" },
 +
    { codigo: 101, aluno: "Teste1", nota: 7, situacao: "Aprovado" },
 +
    { codigo: 102, aluno: "Teste2", nota: 4, situacao: "Reprovado" },
 +
    { codigo: 103, aluno: "Teste3", nota: 8, situacao: "Aprovado" },
 +
    { codigo: 104, aluno: "Teste4", nota: 2, situacao: "Reprovado" },
 +
    { codigo: 105, aluno: "Teste5", nota: 0, situacao: "Reprovado" },
 +
    { codigo: 106, aluno: "Teste6", nota: 7, situacao: "Aprovado" },
 +
]
 +
</syntaxhighlight>
  
 
= Atividade =
 
= Atividade =

Edição atual tal como às 14h30min de 6 de maio de 2025

Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos.

Arrow Functions

As arrow functions foram introduzidas no ES6 e permitem escrever a sintaxe de uma função de forma mais reduzida.

Código JavaScript sem arrow function: 

function hello() {
  return "Hello World!";
}

O mesmo é válido da seguinte forma: 

hello = function() {
  return "Hello World!";
}

Código JavaScript com arrow function: 

hello = () => {
  return "Hello World!";
}

Por exemplo: 

<!DOCTYPE html>
<html>
<body>
    <h1>Arrow Function</h1>

    <p>Demonstrando uma <i>arrow function</i> simples.</p>

    <p id="demo"></p>

    <script>
        hello = () => {
            return "Olá mundo!";
        }

        document.getElementById("demo").innerHTML = hello();
    </script>
</body>
</html>

E pode ficar mais curto ainda. Se a função retorna apenas um valor, é possível remover as chaves: 

hello = () => "Hello World!";

Se a função tiver parâmetero, você pode passar eles dentro parênteses: 

hello = (val) => "Hello " + val;

Ou sequer precisa usar os parênteses: 

hello = val => "Hello " + val;

Usando Arrow Functions para modularizar nosso javaScript

Agora vamos começar a modularizar nosso código. Veja que temos uma função chamada getLine que retorna uma linha da tabela com os valores de um item específico da nossa array.

Também temos que cada item da array é um objeto. Apesar de não termos criado funções e constructos para o objeto, podemos criar objetos dinamicamente no javascript e usá-los conforme nossa necessidade.

Em getContent retornamos o conteúdo da tabela com todas as linhas. 

<!DOCTYPE html>
<html>

<head>
    <title>Aula de JavaScript</title>
</head>

<body>
    <div id="root"></div>

    <script>
        const itens = [
            { id: 1, nome: "Saulo", idade: 51 },
            { id: 2, nome: "Arisa", idade: 14 },
            { id: 3, nome: "Fulano", idade: 25 },
        ]

        const getRows = (item) => (
            // Mapeia os valores do objeto e cria as células da tabela
            // Cada valor é envolvido em uma tag <td>
            // e as células são unidas em uma string
            // usando o método join("")
            Object.values(item).map((value) => (`<td>${value}</td>`)).join("")
        );

        const getContent = (data) => (
            // Mapeia os dados e cria as linhas da tabela
            // Cada linha é envolvida em uma tag <tr>
            data.map((item) => `<tr>${getRows(item)}</tr>`).join("")
        );

        const getHeaders = (data) => {
            // Obtém os cabeçalhos da tabela com base nas chaves do primeiro objeto
            // Cada chave é envolvida em uma tag <th>
            const headers = Object.keys(data[0]);
            return (`
                <tr>
                    ${headers.map((header) => `<th>${header}</th>`).join("")}
                </tr>
            `);
        }

        const getTable = (data) => {
            // Cria a tabela com os cabeçalhos e o conteúdo
            // A tabela é envolvida em uma tag <table>
            // e o cabeçalho e o corpo são preenchidos com os dados
            // A tabela é retornada como uma string
            // que será inserida no elemento com id "root"
            return (`
                <h1>Lista de itens</h1>
                <table>
                    <thead>
                        ${getHeaders(data)}
                    </thead>
                    <tbody>
                        ${getContent(data)}
                    </tbody>
                </table>
            `);
        }

        document.getElementById("root").innerHTML = getTable(itens);
    </script>
</body>

</html>

Isso nos permite trabalhar com modularização. Podemos ver cada função (arrow function) como um componente que podemos reutilizar, como no caso do getLine.

Então imagine agora que temos uma função chamada getCell em que retornamos o conteúdo de uma célula. Ali podemos passar como parâmetros informações para formatar a célula de muitas formas, definir o id do elemento, etc. Daí apenas reutilizamos aquela função.

Por exemplo, no nosso caso podemos reutilizar nosso componente getTabel apenas alterando a lista que passamos como parâmetro para a função. Experimente agora tentar colocar uma nova lista e usar o getTable nela:

const itens2 = [
    { codigo: 123, aluno: "Fulano", nota: 10, situacao: "Aprovado" },
    { codigo: 456, aluno: "Ciclano", nota: 5, situacao: "Reprovado" },
    { codigo: 789, aluno: "Beltrano", nota: 8, situacao: "Aprovado" },
    { codigo: 101, aluno: "Teste1", nota: 7, situacao: "Aprovado" },
    { codigo: 102, aluno: "Teste2", nota: 4, situacao: "Reprovado" },
    { codigo: 103, aluno: "Teste3", nota: 8, situacao: "Aprovado" },
    { codigo: 104, aluno: "Teste4", nota: 2, situacao: "Reprovado" },
    { codigo: 105, aluno: "Teste5", nota: 0, situacao: "Reprovado" },
    { codigo: 106, aluno: "Teste6", nota: 7, situacao: "Aprovado" },
]

Atividade

Agora que aprendemos objetos, arrow functions e, com isso separar nosso código em componentes que retornam parte do código, podemos pensar a página como um conjunto de componentes.

Assim, como atividade, vamos montar uma página web com as seguintes características:

  • Criação de uma classe para usarmos os objetos.
  • Lista de objetos.
  • Criação da página apenas com javascript e componentes.
  • Use tabelas, campos texto, etc. Tudo isso pode ser utilizado nos componentes para recuperar e alterar as informações da página.
  • Não precisa criar elementos dinamicamente como fizemos no semestre passado, mas pode fazer isso caso sobre tempo.
Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Javascript:_Arrow_Functions&oldid=9864”