Javascript: Arrow Functions
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>
<body>
<h1>Lista de itens</h1>
<p id="demo"></p>
<script>
const itens = [
{ id: 1, nome: 'Item 1', valor: 10 },
{ id: 2, nome: 'Item 2', valor: 20 },
{ id: 3, nome: 'Item 3', valor: 30 },
];
getLine = (index) => {
return `
<tr>
<td>${itens[index].id}</td>
<td>${itens[index].nome}</td>
<td>${itens[index].valor}</td>
</tr>
`;
}
getContent = () => {
out = "";
for (i = 0; i < itens.length; i++) {
out += getLine(i);
}
return out;
}
getTable = () => {
return `
<table>
<thead>
<th>id</th>
<th>nome</th>
<th>valor</th>
</thead>
<tbody>
${getContent()}
</tbody>
</table>
`;
}
document.getElementById("demo").innerHTML = getTable();
</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.
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.
