em Javascript

1. Prof. Tiago Henrique Trojahn
tiagotrojahn@ifsp.edu.br
JavaScript
Arrays e Funções

2. Objetivo desta aula
Apresentar a variável do tipo Array, um importante recurso
presente na linguagem JavaScript, e suas principais
funcionalidades
Apresentar funções em JavaScript, um conjunto de
instruções que funcionam como subprogramas

3. Funções
O JavaScript, assim como a maioria das linguagens modernas, suporta
a criação de funções.
Uma função é, resumidamente, um conjunto de instruções que são
executadas sistematicamente dado um conjunto de parâmetros,
podendo ou não retornar algum valor. Uma função pode ser vista
como um subprograma.
Funções que não retornam nenhum valor são chamados também de
procedimentos (procedure)

4. Funções
Uma função pode conter uma amplas gama de instruções, tais como:
Declaração de variáveis
Atribuição, cálculo e operações matemáticas e lógicas sobre as variáveis
Laços de repetição e condicionais diversos
Especificação e construção de objetos
Especificação de funções internas
Etc...
Existem diversas formas de criar uma função. As duas principais
formas são:

5. Funções- Declaração
function
areaDoCirculo(raio) {
return Math.PI *
raio**2;
}
areaDoCirculo(10.134);

6. Declaração de Função (Function
Declaration)
É carregada no hoisting, ou seja, pode ser chamada antes
mesmo da sua definição no código.
Forma mais comum e recomendada quando a função precisa
estar disponível em todo o escopo.
Exemplo: mesmo que a chamada areaDoCirculo(5) venha
antes da função, ela funciona.

7. Funções- Expressão
var areaDoCirculo =
function(raio) {
return Math.PI * raio**2;
};
areaDoCirculo(10.134);

8. Expressão de Função (Function
Expression)
A função é atribuída a uma variável.
Não sofre hoisting da mesma forma: só pode ser usada após a
linha em que foi declarada.
Muito útil em contextos como callbacks e quando queremos
tratar a função como dado.

9. Alguns detalhes
A declaração nomeada é içada, enquanto que a expressão não.
teste(); // Funciona
!
function teste() {
console.log("oi"
);
}
teste2(); // Não funcion
a
var teste2 = function()
{
console.log("olá")
}

10. Encapsulamento / Escopo limitado
Uma Function Expression só existe após a linha em que foi definida,
evitando conflitos e poluição de escopo
if (true) {
var local = function()
{ return "Só dentro do
bloco"; };
console.log(local());
}
// fora do if, não existe

11. Function Expression
Usar Function Expression é útil quando:
você quer passar funções como dados (callbacks, eventos, funções
de ordem superior);
deseja limitar o escopo (não disponível antes da definição);
precisa de funções anônimas rápidas;
vai evoluir para arrow functions;
está trabalhando em estilo funcional (map, filter, reduce).

12. Alguns detalhes
function teste() {
var a = 10;
console.log(a); // Imprime 10
}
teste()
console.log(a); // Erro de referência
function teste() {
console.log(a); // Imprime 10
}
var a = 10;
teste()
console.log(a); // Imprime 10
Cada função possui um escopo novo limitado (bloco de função).
Por consequência, variáveis e funções internas não podem ser acessadas no
escopo externo.

13. Alguns detalhes
 var dentro de função → só existe no escopo dessa
função.
 var fora de função → vai para o escopo global.
 Declarações var sofrem hoisting, mas só a declaração
(atribuição fica no lugar certo).
 Por isso console.log(a) antes de a = 10 dá undefined,
não erro.

14. Alguns detalhes
Podemos criar uma função dentro de outra função...
... mas cuidado com a regra de escopo!
function teste() {
var a = "Oi";
console.log(a); // Imprime 'o
i'
function teste2() {
var b = "Olá";
console.log(a); // Imprime 'o
i'
console.log(b); // Imprime 'o
lá'
}
teste2(); // Funciona

15. Callback
Um callback é uma função passada como argumento para outra
função, para que seja chamada (executada) em um momento futuro,
geralmente após alguma ação terminar.

16. Exemplo de Callback
function cumprimentar(nome, callback) {
console.log("Olá, " + nome);
callback(); // executa a função que veio como parâmetro
}
function despedida() {
console.log("Até logo!");
}
cumprimentar("Maria", despedida);

17. Exemplo com função anônima
function soma(a, b, callback) {
let resultado = a + b;
callback(resultado);
}
soma(5, 10, function(total) {
console.log("O resultado foi: " + total);
});

18. Alguns detalhes
JavaScript ES6+ suporta parâmetros de entrada com valores padrão
function teste(msg="Nada") {
console.log(msg);
}
teste("Olá"); // Imprime 'olá'
teste(); // Imprime 'Nada
'
function teste(msg) {
if (msg === undefined) {
msg = "Nada";
}
console.log(msg);
}

19. Alguns detalhes
Uma função pode ter ainda um número desconhecido de parâmetros
Os parâmetros serão tratados como um vetor indexado.
function teste(nome, ...msg) {
console.log(nome);
for (let i = 0; i < msg.length; i++) {
console.log(msg[i]);
}
}
teste("IFSP", "ADS", "PW1");
// Imprime "IFSP", "ADS" e "PW1"
teste("IFSP"); // Imprime "IFSP";
teste("IFSP", "ADS"); // Imprime "IFSP" e "ADS"
O vetor será nomeado como “msg”

20. Funções Arrow
Além da forma de especificar funções apresentada antes, temos
ainda a versão reduzida, chamada arrow function.
Tem quase todos os recursos de uma função normal, com exceção de
recursos como this, construtores e similares.
Introduzido na linguagem JavaScript ES6 – ECMAScript 2015

21. Funções Arrow
let a = 10;
let b = 20;
var somatorio = function(a, b) {
return a + b;
}
console.log(somatorio(a,b)); //
Imprimirá 30
var outrasoma = (a, b) => { return a + b
};
console.log(outrasoma(a,b)); //

22. Funções Arrow
let a = 10;
let b = 20;
var somatorio = function(a, b) {
return a + b;
}
console.log(somatorio(a,b)); //
Imprimirá 30
var outrasoma = (a, b) => { return a + b
};
console.log(outrasoma(a,b)); //
Função
“normal”

23. Funções Arrow
let a = 10;
let b = 20;
var somatorio = function(a, b) {
return a + b;
}
console.log(somatorio(a,b)); //
Imprimirá 30
var outrasoma = (a, b) => { return a + b
};
console.log(outrasoma(a,b)); //
Função
“normal”
Função “Arrow”

24. Funções Arrow
var outrasoma = (a, b) => a + b;
Caso haja apenas uma instrução na função,
não é necessário o comando return

25. Exemplos
// Função expressão
var dobro1 = function(x) {
return x * 2;
};
// Arrow function (equivalente)
var dobro2 = (x) => x * 2;
console.log(dobro1(5)); // 10
console.log(dobro2(5)); // 10

26. Quando usar cada uma?
•Função expressão (function)
→ Quando você precisa de hoisting ou quer usar this dentro dela.
•Arrow function (=>)
→ Quando quer escrever código mais curto, especialmente em callbacks:
let numeros = [1, 2, 3];
let dobrados = numeros.map(n => n * 2);
console.log(dobrados); // [2, 4, 6]

27. Exemplos práticos
function area(figura, ...params){
switch(figura){
case "circulo": return Math.PI * params[0] ** 2;
case "retangulo": return params[0] * params[1];
case "triangulo": return (params[0] * params[1]) / 2;
default: throw new Error("Figura não suportada");
}
}
function validarIdade(idade){ return idade >= 18; }
function somaN(...nums){ return nums.reduce((a,b)=>a+b,0); }

28. Funções de Manipulação de Strings
 "JavaScript".length // 10
 toUpperCase() / toLowerCase() → converte para
maiúsculas ou minúsculas.
 trim() → remove espaços extras no início e fim.
 substring(start, end) / slice(start, end) → retorna parte
da string.
 replace(antigo, novo) → substitui trechos.
 split(separador) → divide uma string em array.
 includes(valor) → verifica se contém um valor.

29.  Math.round() → arredonda.
 Math.floor() → arredonda para baixo.
 Math.ceil() → arredonda para cima.
 Math.random() → número aleatório entre 0 e 1.
 Math.max() / Math.min() → maior e menor valor.
 Math.pow(base, exp) ou ** → potenciação.
 Math.sqrt() → raiz quadrada.
Funções Matemáticas (objeto Math)

30.  new Date() → cria objeto de data/hora.
 getFullYear() → ano.
 getMonth() (0–11) → mês.
 getDate() → dia.
 getDay() → dia da semana (0=Dom).
 getHours() / getMinutes() / getSeconds().
 setFullYear(), setMonth(), etc. → alteram valores.
Funções de Datas (Date)

31.  Number("123") → converte string em número.
 String(123) → converte número em string.
 parseInt("123") → inteiro.
 parseFloat("123.45") → decimal.
 Boolean(valor) → força conversão para booleano.
Funções de Conversão de Tipo

32. Funções do Objeto Global
 alert(msg) → exibe alerta.
 prompt(msg) → pede entrada do usuário.
 confirm(msg) → retorna true/false.
 setTimeout(func, ms) → executa após um tempo.
 setInterval(func, ms) → executa repetidamente.
 clearTimeout(id) / clearInterval(id) → cancelam execução.

33. Funções de Manipulação de Arrays
 push(item) / pop() → adiciona/remove no fim.
 unshift(item) / shift() → adiciona/remove no
início.
 slice(início, fim) → copia parte do array.
 splice(início, qtd, novoItem) → altera o array

34. Exercícios
1) Implemente ehPrimo(n) → boolean
2) Crie uma função mediaAritmetica(...nums)
3) Faça uma função que receba um nome e retorne 'Bem-vindo,
<nome>!' (nome padrão = 'Aluno’)
5) Converta funções tradicionais para arrow (dobro, par, ultimoItem)
6) Implemente contarVogais(palavra) com arrow
7) Reescreva um callback de setTimeout com arrow e retorno
implícito

35. Sugestões de Respostas
function ehPrimo(n){
if(n < 2) return false;
for(let i=2;i<=Math.sqrt(n);i++){ if(n%i===0) return false; }
return true;
}
const mediaAritmetica = (...nums) =>
nums.length ? nums.reduce((a,b)=>a+b,0)/nums.length : 0;
const bemVindo = (nome="Aluno") => `Bem-vindo, ${nome}!`;

36. Sugestões de respostas
const dobro = x => x*2;
const par = n => n%2===0;
const ultimoItem = arr => arr[arr.length-1];
const contarVogais = s =>
(s.match(/[aeiouáéíóú]/gi) || []).length;
setTimeout(()=>console.log("Olá!"), 500);

37. Arrays
Arrays (tradução: vetores, também chamado de listas) são recursos
importantes para qualquer linguagem de programação moderna.
O objetivo do vetor é o de armazenar um número qualquer de
informações em uma única variável

38. Criação
“IFSP” “JavaScript” 2019 true Array() 1.4567
0 1 2 3 4 5
var vetor = Array();
vetor[0] = "IFSP";
vetor[1] =
"JavaScript";
vetor[2] = 2019;
vetor[3] = true;
vetor[4] = Array();
vetor[5] = 1.4567;
var vetor =
Array("IFSP","JavaScript",
2019, true, Array(), 1.4567);
var vetor = ["IFSP","JavaScript",
2019, true, Array(), 1.4567];

39. Iteração
Podemos iterar sobre o vetor de diversas formas. O método mais
básico é usando o length (comprimento) do vetor em um laço de
repetição como o for.
var vetor = [1, 2, 3, 4];
for(let i = 0; i < vetor.length; i+
+) {
console.log(vetor[i]); // 1, 2, 3
, 4
}

40. Iteração
Outra forma de iteração é usando o IN:
Veja que não é retornado o valor da posição do vetor, mas sim o
índice da posição do vetor.
var vetor = ["a", "b", "c", "d"];
for (valor in vetor) {
console.log(valor); //
0, 1, 2, 3
}

41. Iteração
Uma forma de iterar sobre os valores é usando a operação OF
var vetor = ["a", "b", "c", "d"];
for (valor of vetor) {
console.log(valor); //
a, b, c, d
}

42. Manipulação
“Banana” “Abacaxi” “Uva” “Melão”
0 1 2 3
“Banana” “Abacaxi” “Uva”
0 1 2
Adiciona ao final do
vetor
var vetor = ["Banana", "Abacaxi", "Uva"];
vetor.push("Melão");
e retorna...
4

43. Manipulação
“Banana” “Abacaxi” “Uva”
“Melão”
1 2 3
0
“Banana” “Abacaxi” “Uva”
0 1 2
Adiciona ao início do
vetor
var vetor = ["Banana", "Abacaxi", "Uva"];
vetor.unshift("Melão");
e retorna...
4

44. Manipulação
“Banana” “Abacaxi” “Uva”
0 1 2
Remove do final do
vetor
“Banana” “Abacaxi”
0 1 “Uva”
e retorna...
var vetor = ["Banana", "Abacaxi", "Uva"];
vetor.pop();

45. Manipulação
“Banana” “Abacaxi” “Uva”
0 1 2
Remove do inicio do
vetor
“Banana”
e retorna...
“Abacaxi” “Uva”
0 1
var vetor = ["Banana", "Abacaxi", "Uva"];
vetor.shift();

46. Manipulação
Utilizado para remover ou adicionar vários elementos sequenciais do vetor.
indice_inicio  índice do primeiro elemento a ser manipulado.
quantos_remover  número de elementos que devem ser removidos. Opcional. Se
não for especificado, tenta deletar até o último elemento.
itens  Os elementos que serão adicionados na posição índice_inicio.
Retorno: os elementos que foram removidos (como array)
retorno = vetor.splice(indice_inicio, quantos_remover, ...itens);

47. Atribuição
var v1 = [1, 2, 3, 4];
var v2 = v1;
console.log(v2); //
[1,2,3,4]
v1.pop();
console.log(v2); // [1,2,3]

48. Atribuição
Para evitar a atribuição por referência, deve-se copiar os dados do
vetor.
Para isso, usa-se o slice
O slice pode também copiar apenas uma parte do vetor. Para isso,
pode especificar os parâmetros de inicio e de fim.
var novoVetor = vetorAntigo.slice();

49. slice
let numeros = [10, 20, 30, 40,
50];
// Cópia completa
console.log(numeros.slice());
// [10, 20, 30, 40, 50]
// Do índice 1 até o 3 (exclui
o 3)
console.log(numeros.slice(1,
3));
// [20, 30]
// Do índice 2 até o final
console.log(numeros.slice(2));
// [30, 40, 50]
// Índices negativos: do
penúltimo até o final
console.log(numeros.slice(-2));
// [40, 50]
// Índices negativos (do 2 até
antes do último)
console.log(numeros.slice(1, -
1));
// [20, 30, 40]

50. Muita gente confunde slice com splice.
•slice → não altera o array original (retorna uma cópia).
•splice → altera o array original (remove ou adiciona elementos).

51. Slice vs splice
let arr = [1, 2, 3, 4];
let copia = arr.slice(1, 3);
console.log(copia); // [2, 3]
console.log(arr); // [1, 2, 3, 4] (original intacto)
let removidos = arr.splice(1, 2);
console.log(removidos); // [2, 3]
console.log(arr); // [1, 4] (original modificado)

52. Outros métodos úteis
var palavras = "Eu gosto muito de estudar".split(" ");
console.log(palavras); // "Eu", "gosto", "muito", "de", "est
udar"
var novaFrase = palavras.join("-");
console.log(novaFrase); // "Eu-gosto-muito-de-estudar"

53. Outros métodos úteis
vetor.reverse(); //Reverte o vetor
vetor.sort(); //Ordena o vetor – ordem
UNICODE!
vetor.indexOf(valor); //Retorna o índice do primeiro
elemento 'valor', ou -1 se não existir
vetor.lastIndexOf(valor); //Retorna o índice do último
elemento 'valor', ou -1 se não existir
vetor.includes(valor); //Retorna true se 'valor'
existir no vetor, ou false caso contrário.

54. MAP
Map
Modifica os elementos de uma lista, retornando
uma nova lista de mesmo tamanho.

55. map, filter e reduce
map(function(valor [, índice[, array]]))
Usado para converter/traduzir/mapear todos os elementos de um vetor em
outro vetor.
Funcionamento:
Percorre o vetor, da esquerda para direita
Para cada elemento do vetor, invoca a função passada como parâmetro
O resultado é um vetor com o retorno individual de cada invocação da
função.

56. map, filter e reduce
// Converte C --> F
function f1(inp) {
return inp * (9 / 5) + 32;
}
var graus = [-
10, 0, 10, 20, 30, 40, 50, 60];
var fahrenheit = graus.map(f1);
console.log(fahrenheit);

57. Filter
Filter
Remove certos elementos da lista.
Não altera os elementos que sobrarem.

58. map, filter e reduce
filter(function(valor[, índice [, array]])
Usado para verificar um vetor de entrada e filtrá-lo conforme a regra
especificada.
Funcionamento:
Percorre o vetor, da esquerda para direita
Para cada elemento do vetor, invoca a função passada como parâmetro
O resultado será composto de todos os elementos cuja invocação retornaram
true (ou seja, caso a função retorne true para aquele elemento).

59. map, filter e reduce
// Apenas strings com mais de 3 caracteres
function f1(inp) {
if (inp.length > 3) {
return true;
}
return false;
}
var nomes = ["ana", "maria", "joao", "chá", "", "ifsp", "a
ds"];
var resultado = nomes.filter(f1);
console.log(resultado); // [“maria”, “joao”, “ifsp”]

60. Reduce
Reduce
Obtém um único valor da lista, calculado sobre
a lista em sua totalidade.

61. map, filter e reduce
reduce(function(acumulador, valor[, índice [, vetor]] [, inicio])
Realiza uma operação sobre todos os elementos, reduzindo-os a um único
valor
Funcionamento:
Percorre o vetor, da esquerda para direita
Para cada elemento do vetor, invoca a função passada como parâmetro
O resultado será um único valor (acumulador), com o valor obtido pela
invocação da função para cada elemento do vetor.

62. map, filter e reduce
// Soma os valores
function f1(acc, val) {
return acc + val;
}
var valores = [1, 2, 3, 4, 5, 6]
;
var resultado = valores.reduce(f
1);
console.log(resultado); // 21

63. map, filter e reduce
Eu quero remover, escolher ou selecionar alguns elementos do vetor?
 filter
Eu quero modificar os elementos do vetor?
 map
Eu quero calcular um valor com base no vetor?
 reduce
O vetor pode conter valores undefined ou o vetor é realmente grande (+1k elementos)
 Não use filter/map/reduce

64. Métodos extras
Além dos métodos mencionados anteriormente, um Array possui
ainda diversos outros métodos.
Diversos dos métodos mais úteis (forEach, every, some) necessitam
especificar um call-back, representado por uma função que é
executada para cada elemento contido no vetor.
Para mais detalhes, consulte a documentação do Array:
https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

65. forEach
Executa um callback para cada elemento do array.
Não retorna nada (só percorre).
let numeros = [1, 2, 3];
numeros.forEach(function(valor, indice, array) {
console.log("Valor:", valor, "Índice:", indice);
});

66. every
Verifica se todos os elementos satisfazem a condição do callback.
Retorna true ou false.
let idades = [18, 21, 25];
let todosMaiores = idades.every(function(valor) {
return valor >= 18;
});
console.log(todosMaiores); // true

67. some
Verifica se pelo menos um elemento satisfaz a condição do callback.
Retorna true ou false.
let notas = [4, 7, 9];
let temReprovado = notas.some(function(valor) {
return valor < 5;
});
console.log(temReprovado); // true

68. Funções de Manipulação de Arrays
 push(item) / pop() → adiciona/remove no fim.
 unshift(item) / shift() → adiciona/remove no início.
 slice(início, fim) → copia parte do array.
 splice(início, qtd, novoItem) → altera o array
(remove/adiciona).
 concat() → junta arrays.

69. Funções de Manipulação de Strings
 indexOf(valor) / lastIndexOf(valor) → retorna a posição
do elemento.
 includes(valor) → verifica se existe.
 sort() → ordena.
 reverse() → inverte ordem.

70. Exercício
Dado vetor de alunos {nome, notas[]}, gere ranking por média com map/sort
Usando reduce, crie um objeto {faixa:quantidade} de salários por faixas
Crie uma função em JavaScript chamada retornaPalíndromos que recebe um
vetor de strings como parâmetro e retorna um vetor com as strings que sejam
palíndromos.Lembrando:
Palíndromo são palavras ou frases que podem ser lidas de frente para trás ou
de trás para frente sem mudar seu sentido. Ex: “ovo”, “reviver”, “arara”.
Por definição, palavras de um único caractere são considerados palíndromos,
mas strings vazias não.

71. Gabarito — Aula 4 (sugestão)
const ranking = alunos => alunos
.map(a => ({...a, media:
a.notas.reduce((x,y)=>x+y,0)/a.notas.length}))
.sort((a,b)=>b.media-a.media);
const histSalarios = (salarios) => salarios.reduce((acc,s)=>{
const faixa = s<2000?"A":s<5000?"B":s<10000?"C":"D";
acc[faixa]=(acc[faixa]||0)+1; return acc;
}, {});
const retornaPalindromos = vs => vs.filter(s => {
const t = s.toLowerCase().normalize("NFD").replace(/
p{Diacritic}/gu,"").replace(/s+/g,"");
return t && t === [...t].reverse().join("");
});