cefet_web

JavaScript Parte 3

Template strings, Criação de objetos
e Função seta

Na última aula (1/2)

Variáveis: let, const e var 🗡❌ (tipos de dados são inferidos)
Tipos:
- 1. Boolean
- 2. Number
- 3. String
- 4. Null
- 5. Undefined
- 6. Symbol
- 7. Object

Funções:

// tradicional
function nomeCompleto(nome, sobre) {
  return nome + ' ' + sobre;
}

// anônima em variável
const nomeCompleto = function(nome, sobre) {
  return nome + ' ' + sobre;
}

Invocação da mesma forma: nomeCompleto('Mijaro', 'Nomuro')

Na última aula (2/2)

Vetores

let radios = [106.1, 105.1, 98.3];
let cores = ['azul', 'verde'];

let animais = [];         // <- vetor vazio
animais.push('dogue');    // ['dogue']

Repetição

// tradicional
for(let i=0; i<cores.length;i++){
  console.log(cores[i]);
}
// impr. azul, verde

// for of                      👍
for (let cor of cores) {
  console.log(cor);
}
// impr. azul, verde

// forEach                     👍
cores.forEach(function(cor) {
  console.log(cor);
});
// impr. azul, verde

Vários métodos de ↓ strings e de vetores ⤥

'Hannah'.toLowerCase() === 'hannah'
'Ovo'.replace('O', 'Ou') === 'Ouvo'
'BR4512348ZY'.substr(0, 2) === 'BR'
'Charmander'.indexOf('arma') === 4

radios.push(92.5);      // insere no final
radios.pop();           // remove do final
cores.unshift('verm');  // insere no início
cores.shift();          // remove do início

Roteiro

Template strings
Criação de objetos
- Funções construtoras
- Classes
Função seta

Template Strings

Criando strings bacanudas

Relembrando o tipo String
Template strings
1. Interpolação de valores
2. Strings multilinha
3. Função de transformação

O tipo 3. String

Representa um texto codificado em UTF-8
Não existe o tipo char como em C/C++ e Java, apenas string :wink:

Usamos aspas simples ou duplas

"Abc" === 'Abc'   // simples é mais legal!! mas basta ser consistente

Possui uma propriedade chamada length com o seu comprimento:
```
console.log('Cachorro'.length); // 8
```

Exemplos:

let aranhas = 'fofofauna';
const nomeCompleto = primeiro + ' ' + ultimo;     // concatenou

Template Strings: interpolação de valores (1/2)

É uma forma mais recente para criar strings
Formato: usa-se crase para delimitar. Exemplo:

// template string
let fruta = `Kiwi`;

// string normal
let fruta =  'Kiwi';

Permite interpolar (substituir) variáveis dentro de strings:

const peso = 82;
const nome = 'Kagaro Nakama';

// com template strings
const frase = `${nome} pesa ${peso}kg`;
// "Kagaro Nakama pesa 82kg"

const peso = 82;
const nome = 'Kagaro Nakama';
  
// concatenando strings normais
const frase = nome + ' pesa ' + peso + 'kg';
// "Kagaro Nakama pesa 82kg"

A sintaxe é mais sucinta e legível
- Vejamos outros exemplos…

Template Strings: interpolação de valores (2/2)

É possível colocar expressões dentre de ${...}. Exemplo:

// supondo que existem variáveis preco=5 e qtde=2
let aConta = `Sua conta é R$ ${preco * qtde - 3}`;
//           "Sua conta é R$ 7"

// supondo variáveis dia, mês, ano e func. obtemMes
const data = `${dia} de ${obtemMes(mes)} de ${ano}`;
// Ex:       "20 de janeiro de 2021"

const tom = 128;
const corCinza = `rgb(${tom}, ${tom}, ${tom})`;
// Ex:           "rgb(128, 128, 128)"

Mas qual é o tipo de dados??

console.log(typeof "texto"); // imprime "string"
console.log(typeof `texto`); // imprime "string"

É String mesmo! Só muda a sintaxe pra escrever

Ou seja, a interpolação é apenas uma sintaxe mais legal para concatenar strings com variáveis/expressões

Template Strings: texto multilinha

Digamos que você queira que uma variável string contenha uma poesia (ocupando várias linhas)
As template strings permitem que uma string ocupe mais do que uma linha no código fonte

// com template string
let poesia = `Cavei cavei cavei
  Isto não é um poema
  Mas é profundo.`;

// com string normal
let poesia = 'Cavei cavei cavei\n' +
  'Isto não é um poema\n' +
  'Mas é profundo.';

Nesse caso, quando há uma quebra de linha no código fonte, é colocado um \n dentro da template string

Criação de objetos

Diferentes formas de instanciação

Formas ad-hoc
- Notação literal
- Operador new
Seguindo um formato
- Função construtora
- Classe (outra aula)
Prototype

Instanciação de Objetos (1/2)

Como visto, JavaScript possui 01 tipo de dados complexo Object

Podemos instanciar objetos de duas formas:

Forma literal:

let carro = {};  // mais comum, mais expressivo

Operador new:
```
let carro = new Object();
```

Podemos atrelar novas propriedades on the fly

Instanciação de Objetos (2/2)

Um objeto é simplesmente um container de propriedades (nome: valor)

let carro = {
  cor: 'vermelho',
  fabricante: {
    nome: 'Fiat',
    origem: 'Itália'
  },
  ligar: function() {
    this.injetaCombustivel();
    // ...faz outras coisas
  },
  /* ... */
};

E se quiser “forçar” uma forma para criar objetos?

Função construtora (forma antiga)
Classe (veremos em outra aula)

Função construtora

Podemos invocar uma função construtora que vai instanciar e inicializar objetos:

function Moto(modelo, dono) {
  this.modelo = modelo;         // Lembre que 'this' dentro de um
  this.dono = dono;             // objeto aponta para ele mesmo
}
let moto1 = new Moto('Kawasaki', 'Ninja Jiraya');
let moto2 = new Moto('Harley Davidson', 'Lula Molusco');

Todo objeto terá as propriedades modelo e dono

Características da função construtora

Uma função construtora é apenas uma função
- Porém ela usa a referência this para definir propriedades de um objeto novinho que está sendo criado
- Tipicamente, o nome de toda função construtora começa com letra maiúscula (apenas uma convenção). E.g.:
```
function Leguminosa(nome, calorias) {   // legal!
  // this.nome = nome
  // ...
}
function verdura(nome, calorias) {   // funciona, mas evitamos
  // this....
}
```
  - A letra maiúscula indica que não podemos esquecer do new

Função construtora e métodos

Se, além de propriedades de dados (modelo, dono etc.), colocarmos também alguns métodos, podemos falar que temos algo semelhante a uma classe das linguagens OO “tradicionais”:

function Moto(modelo, dono) {
  /* ... */
  this.toString = function() {
    return `${this.modelo} do(a) ${this.dono}`;
  };
}
let motoca = new Moto('Honda Biz', 'Rubinho');
console.log(motoca.toString());     // Honda Biz do Rubinho

Exemplo: Lista de contatos (1/4)

Considere um código para inicializar uma lista de contatos assim:

function Contato(nome, email) {
  this.nome = nome;
  this.email = email;
  this.linkParaMensagem = function() {
    return `mailto:${this.email}`;
  };
}
const lista = [
  new Contato('huguinho', 'h@gma.br'),
  new Contato('zezinho', 'j@gma.br'),
  new Contato('luizinho', 'l@gma.br')
];

Exemplo: Lista de contatos (2/4)

Se pudéssemos examinar a memória alocada, veríamos:
- Repare que o código fonte do método é repetido a cada instância
  - Dá para melhorar, se tivermos como definir o método linkParaMensagem a nível da classe, ao invés de na instância

Exemplo: Lista de contatos (3/4)

De fato, é possível definir um método a nível da classe usando uma propriedade chamada prototype:

function ContatoV2(nome, email) {
  this.nome = nome;
  this.email = email;
  // this.linkParaMensagem = function() { ... }
}
ContatoV2.prototype.linkParaMensagem = function() {
  return `mailto:${this.email}`;
};
// lembre-se: função é um objeto, logo, pode ter propriedades

Exemplo: Lista de contatos (4/4)

Se usarmos a classe ContatoV2 para alocar a lista de contatos, teremos:
- Mas como isso funciona?

O Prototype (protótipo) (1/2)

Todo objeto possui uma propriedade especial chamada prototype de onde ele pode “herdar” propriedades
- Podemos visualizar isso ao criarmos um objeto vazio e verificar que ele já tem algumas propriedades:
```
let novo = {};
console.log(novo.toString());     // [object Object]
```
  - Isso acontece porque todo objeto que instanciamos na forma literal tem seu prototype apontado para um objeto que possui algumas propriedades (e.g., toString)
    - Esse objeto é o Object.prototype

O Prototype (2/2)

Quando acessamos uma propriedade de um objeto, o motor JS procura no próprio
Se não encontrar, ele continua procurando na prototype chain

Isso é feito até chegar no último objeto e, então, o motor diz que essa propriedade está undefined. Por exemplo:

let nome = { firstName: 'Paul', lastName: 'Irish' };
nome.firstName;       // achou no próprio objeto
nome.toString();      // achou em Object.prototype
nome.middleName;      // não achou, undefined

Invocação de funções

Funções são objetos (invocáveis)
Sendo objetos, as funções também possuem uma propriedade prototype que aponta para um objeto “global” e único, o Function.prototype
Há 4 formas distintas para se invocar uma função
1. Como uma função: iniciaControlesVideo()
2. Como um método: video.play()
3. Como um construtor new VideoPlayer()
4. ~~Com apply ou call: iniciaControlesVideo.call(null)~~
Informação importante:
- O objeto para onde this aponta varia em cada uma das 4 formas

(1) Invocação de funções (como função)

Como uma função propriamente dita, ou uma subrotina:
- Quando a função não está associada a um objeto
```
function soma(a, b) {
  return a + b;
}
soma(40, 2);      // invocação. Retorna 42
let s = soma;
s(21, 21);        // invocação. Retorna 42
```
  - O valor de this é sempre definido para o objeto global window
    - Isto foi um erro de projeto da linguagem :worried:

(2) Invocação de funções (como método)

Como um método (função que pertence a um objeto):

const contador = {
  valor: 0,
  incrementa: function(qtde) {
    this.valor += qtde ? qtde : 1;
  }
}
contador.incrementa();    // contador.valor = 1
contador.incrementa(10);  // contador.value = 11

this aponta para a instância do objeto dono do método invocado

Invocação de funções (como método vs função)

Uma consequência do erro de projeto mencionado:

let usuario = {
  nome: 'Couto',
  cumprimenta: function() {           // invocação de método
    setTimeout(function() {
      console.log(`Olá, aqui é ${this.nome}`);
    }, 5000);
  }
};
usuario.cumprimenta();  // 'Olá, aqui é undefined'... pq??

Invocação de funções (método vs função cont.)

O que aconteceu no exemplo anterior:
- O valor de this dentro de usuario.cumprimenta aponta para a instância do objeto usuario, como esperado
- Porém, quando setTimeout invoca usuario.cumprimenta isso é feito como uma função (e não método)
  - this passa a apontar para window, que não tem uma variável nome
Mas não desanime: dá pra consertar usando as arrow functions
- Veremos elas no próximo tópico de hoje

(3) Invocação de funções (como construtor)

Quando uma função é invocada, precedida pelo operador new, dizemos que a função é um construtor:
```
function Contato(nome) {
  this.nome = nome;
}
let presidente = new Contato('Seu Adamastor');  // construtor
```
- Por causa do operador new, três coisas acontecem:
  1. Um objeto vazio é criado e seu prototype é o mesmo do da função
  2. O valor de this dentro da função aponta para o novo objeto
  3. Se não houver return, this é retornado automaticamente

Caveat da invocação por construtor

Se uma função construtora é invocada sem o new, shit will happen
- Veja por quê:
```
function Contato(nome) {
  this.nome = nome;
}
let presidente = Contato('Seu Custódio');   // invoc. função
```
  - Ao final do código acima, temos que:
    1. window.nome === "Seu Custódio"
    2. presidente === undefined

Herança

Herança pseudo-clássica

let Mamifero = function(nome) {
  this.nome = nome;
};

Mamifero.prototype.diz = function() {
  return this.fala || '';
};

let mamiferoGenerico = new Mamifero('mamifero');
mamiferoGenerico.diz();     // retorna ''

let Gato = function(nome) {
  this.nome = nome;
  this.fala = 'Miau';
}
Gato.prototype = new Mamifero();

let gato = new Gato('Tom');
gato.diz();                 // retorna 'Miau'

Veredito: dá trabalho d+, suscetível a erros. Mas era o que tinha. Hoje usamos classes.

Função Seta

A 3ª forma para funções

3 Formas:
- Função tradicional
- Função anônima
- Função seta (anônima também)

Função tradicional e anônima

function cadastrar() {
  // ...
}

const cadastrar = function() {
  // ...
};

Função seta é uma sintaxe mais nova e sucinta para as anônimas ⬆
```
const cadastrar = () => {
  // ...
};
```
1. Omitir function
2. Seta entre parâmetros e corpo
3. return implícito
4. Mantém o valor do ponteiro this
Vejamos alguns exemplos

Função seta: sintaxe

function ciao() {
  return 'Ciao';
}

function oi(prim, ult) {
  return `Oi ${prim} ${ult}`;
}

function hi(name) {
  return 'Hi ' + name;
}

function fatorial(n) {
  let resultado = 1;
  while (n > 1) {
    resultado *= n;
    n--;
  }
  return resultado;  
}

let ciao = () => 'Ciao';



let oi = (prim, ult) => `Oi ${prim} ${ult}`;



let hi = name => 'Hi ' + name;



let fatorial = n => {
  let resultado = 1;
  while (n > 1) {
    resultado *= n;
    n--;
  }
  return resultado;  
}

Exemplo: funções seta com vetores

let usuarios = ['Joel', 'Fani', 'Fúlvio'];
let alunos = [{ matricula: '...' }];
let numeros = [1, 4, 2, 5];

Pegar apenas usuários que começam com letra ‘F’:

usuarios.filter(function(nome) {
  return nome.startsWith('F');
});

usuarios.filter(nome => nome.startsWith('F'));
     
     

Buscar pelo aluno com uma matrícula:

alunos.find(function(aluno) {
  return aluno.matricula === '2005046102';
});

alunos.find(al => al.matricula === '2005046102');
     
     

Vetor com os quadrados do original:

numeros.map(function(numero) {
  return numero ** 2;
});

numeros.map(numero => numero ** 2);

Mantendo o `this` léxico

Métodos normais (function) perdem o valor do this léxico (que estava no contexto) se invocados como funções
- Isso não pode ser corrigido na linguagem

A função seta introduzida em ES2015 mantém o this léxico:

let usuario = {                               // ❌
  nome: 'Couto',
  cumprimenta: function() {
    setTimeout(function() {
      console.log(`Olá, aqui é ${this.nome}`);
    }, 5000);
  }
};
usuario.cumprimenta();  // 'Olá, aqui é undefined'
let usuario = {                               // ✅
  nome: 'Couto',
  cumprimenta: function() {
    setTimeout(() => {
      console.log(`Olá, aqui é ${this.nome}`);
    }, 5000);
  }
};
usuario.cumprimenta();  // 'Olá, aqui é Couto'

Referências

Capítulos 3, 4 e 5 do livro “Javascript: The Good Parts”
Capítulos 9 e 10 do livro “Head First: JavaScript”
Mozilla Developer Network (MDN)
Como prototypes funcionam
Entendendo prototypes