Aula 03 - Arrays e Funções em Javascript.pptx

em Javascript

1. 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 funciona 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 'oi'         function   teste2 () {          var   b  =  "Olá" ;          console . log ( a );      // Imprime 'oi'          console . log ( b );      // Imprime 'olá'     }      teste2 ();                // Funciona } teste ();                     // Funciona teste2 ();                    // Erro

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  =  ;  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 ));  //Imprimirá 30

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 ));  //Imprimirá 30 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 ));  //Imprimirá 30 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 (remove/ adiciona ). concat () → junta arrays. indexOf (valor) / lastIndexOf (valor) → retorna a posição do elemento . includes(valor) → verifica se existe . sort() → ordena . reverse() → inverte ordem .

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 1 2 3 4 5 var vetor = Array (); vetor[ ] = "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 =  ; 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” 1 2 3 “Banana” “Abacaxi” “Uva” 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 “Banana” “Abacaxi” “Uva” 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” 1 2 Remove do final do vetor “Banana” “Abacaxi” 1 “Uva” e retorna... var vetor = [ "Banana" , "Abacaxi" , "Uva" ]; vetor.pop ();

45. Manipulação “Banana” “Abacaxi” “Uva” 1 2 Remove do inicio do vetor “Banana” e retorna... “Abacaxi” “Uva” 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", "estudar" 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 ,  ,  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 " ,  " ads " ]; 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 (f1); 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("");
});