├── .gitignore ├── logo.png ├── cover.jpg ├── cover-hd.jpg ├── Capítulo 17 - Módulos ├── base │ ├── index.js │ ├── src │ │ └── config.js │ ├── index.html │ ├── package.json │ └── webpack.config.js ├── instrucoes.md ├── exercicios.md └── gabarito.md ├── Capítulo 21 - Novidades do ES7 ├── gabarito.md └── exercicios.md ├── Capítulo 07 - Listas sem repetições com Sets e WeakSets ├── gabarito.md └── exercicios.md ├── Capítulo 09 - Manipulação de textos com template strings ├── gabarito.md └── exercicios.md ├── Capítulo 12 - Parâmetros predefinidos em funções ├── gabarito.md └── exercicios.md ├── Capítulo 04 - Iteração com iteradores e iteráveis ├── gabarito.md └── exercicios.md ├── Capítulo 05 - Iteração com o laço for...of ├── gabarito.md └── exercicios.md ├── Capítulo 14 - Expansão com o operador Spread ├── exercicios.md └── gabarito.md ├── Capítulo 13 - Parâmetros infinitos com operador Rest ├── gabarito.md └── exercicios.md ├── Capítulo 15 - Desestruturamento de Arrays e Objetos ├── gabarito.md └── exercicios.md ├── Capítulo 10 - Arrow Functions ├── gabarito.md └── exercicios.md ├── Capítulo 23 - async-await ├── exercicios.md └── gabarito.md ├── Capítulo 19 - Operações assíncronas com promises ├── exercicios.md └── gabarito.md ├── Capítulo 11 - Melhorias em Objetos Literais ├── exercicios.md └── gabarito.md ├── Capítulo 18 - Funções geradoras ├── exercicios.md └── gabarito.md ├── Capítulo 20 - Metraprogramação com proxies ├── exercicios.md └── gabarito.md ├── Capítulo 08 - Declaração de variáveis com const e let ├── gabarito.md └── exercicios.md ├── Capítulo 16 - Modelando com Classes ├── exercicios.md └── gabarito.md ├── README.md ├── Capítulo 06 - As novas estruturas de Map e WeakMap ├── gabarito.md └── exercicios.md ├── Capítulo 22 - Novidades do ES8 ├── exercicios.md └── gabarito.md └── Capítulo 03 - Métodos auxiliares para Array ├── gabarito.md └── exercicios.md /.gitignore: -------------------------------------------------------------------------------- 1 | */node_modules/ 2 | */_build 3 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiegoPinho/entendendo-es6/HEAD/logo.png -------------------------------------------------------------------------------- /cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiegoPinho/entendendo-es6/HEAD/cover.jpg -------------------------------------------------------------------------------- /cover-hd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiegoPinho/entendendo-es6/HEAD/cover-hd.jpg -------------------------------------------------------------------------------- /Capítulo 17 - Módulos/base/index.js: -------------------------------------------------------------------------------- 1 | // desenvolva aqui seus códigos para os exercícios 2 | -------------------------------------------------------------------------------- /Capítulo 17 - Módulos/base/src/config.js: -------------------------------------------------------------------------------- 1 | // desenvolva aqui seus códigos para os exercícios 2 | -------------------------------------------------------------------------------- /Capítulo 17 - Módulos/base/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exercícios ES6 - Módulos 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Capítulo 21 - Novidades do ES7/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Você está ai? 4 | ``` javascript 5 | function possuiNumero(texto, termo) { 6 | return texto.split(' ').includes(termo); 7 | } 8 | ``` 9 | ## Exercício 2 - ARÁ! Essa você não resolve? 10 | **R:** O `indexOf` não consegue nos ajudar quando o valor em questão é um `NaN` (not a number). 11 | 12 | ## Exercício 3 - Hora de exponenciar 13 | ``` javascript 14 | function exponencial(base, expoente) { 15 | return base ** expoente; 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /Capítulo 17 - Módulos/base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "base", 3 | "version": "1.0.0", 4 | "description": "Estrutura básica para realizar os exercícios do capítulo de módulos.", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --progress --watch", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "Diego Martins de Pinho ", 11 | "license": "ISC", 12 | "dependencies": {}, 13 | "devDependencies": { 14 | "babel-core": "^6.24.0", 15 | "babel-loader": "^6.4.1", 16 | "babel-preset-es2015-native-modules": "^6.9.4", 17 | "webpack": "^2.3.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Capítulo 17 - Módulos/base/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const nodeEnv = process.env.NODE_ENV || 'production'; 3 | 4 | module.exports = { 5 | devtool: 'source-map', 6 | entry: { 7 | filename: './index.js' 8 | }, 9 | output: { 10 | filename: '_build/bundle.js' 11 | }, 12 | module: { 13 | loaders: [ 14 | { 15 | test: /\.js$/, 16 | exclude: /node_modules/, 17 | loader: 'babel-loader', 18 | query: { 19 | presets: ['es2015-native-modules'] 20 | } 21 | } 22 | ] 23 | }, 24 | plugins: [ 25 | // uglify 26 | new webpack.optimize.UglifyJsPlugin({ 27 | compress: {warnings: false}, 28 | output: {comments: false}, 29 | sourceMap: true 30 | }), 31 | 32 | // env plugin 33 | new webpack.DefinePlugin({ 34 | 'process.env': {NODE_ENV: JSON.stringify(nodeEnv)} 35 | }) 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /Capítulo 17 - Módulos/instrucoes.md: -------------------------------------------------------------------------------- 1 | # Instruções 2 | 3 | Para realizar os exercícios deste capítulo, vamos utilizar a estrutura especialmente montada no diretório `base`. Nele está configurado um projeto npm com o webpack e babel configurados. Você não precisa se preocupar com isso, basta somente seguir os passos a seguir para conseguir fazer os exercícios. 4 | 5 | ## Passos 6 | - É necessário ter instalado o `npm` na sua máquina. Ele é o gerenciador de pacotes do Node. Para instalá-lo, basta instalar o Nodejs na sua máquina. 7 | - Feito isso, baixe o conteúdo da pasta `base` e com o seu terminal, execute `npm install` dentro do diretório. Isso fará com que todas as dependências necessárias sejam baixadas. 8 | - Para executar o projeto, faça `npm run build`. Isso fará que o webpack compile e minifique o código javascript passando pelo Babel. Ele ficará disponível no `index.html` como `bundle.js`. 9 | - Acesse o seu `index.html` no seu navegador de preferência e consulte o console para verificar o resultado dos exercícios. A partir do `npm run build`, quaisquer alterações feitas nos arquivos são processados automaticamente. 10 | -------------------------------------------------------------------------------- /Capítulo 07 - Listas sem repetições com Sets e WeakSets/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Retirando o excesso 4 | ``` javascript 5 | function removeDuplicatas(numeros) { 6 | return new Set(numeros); 7 | } 8 | ``` 9 | 10 | ## Exercício 2 - Um é forte e o outro é fraco, não é isso? 11 | R: No fundo o `WeakSet` é um `Set` que não previne os seus elementos de serem coletados pelo _Garbage Collector_. Uma vez que o elemento não existe mais e seja identificado pelo coletor para ser coletado, ele também é automaticamente removido do `WeakSet`. 12 | 13 | ## Exercício 3 - Mas na minha máquina funciona! 14 | R: Ao contrário do `Set`, o `WeakMap` não é uma estrutura iterável. Isso significa que não é possível utilizar o laço de repetição `for...of` nela, por isso dá o erro sempre que executado: `TypeError: musicas[Symbol.iterator] is not a function`. 15 | 16 | ## Exercício 4 - Isso é completamente inútil! 17 | R: Um dos casos de uso mais interessantes é o de garantir que certo método ou propriedade pertence a um objeto específico e não a todas as instâncias do mesmo tipo. Mas no uso geral, sempre que você tiver preocupação com vazamento de memória, o WeakSet estará a seu dispor. 18 | -------------------------------------------------------------------------------- /Capítulo 09 - Manipulação de textos com template strings/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Lista de compras 4 | ``` javascript 5 | function htmlify(strings, ...values){ 6 | var itens = values[0].split(','); 7 | var shopItens = itens.map(function(value){ 8 | return `
  • ${value}
  • `; 9 | }).join(""); // remove as vírgulas 10 | 11 | return ``; 12 | } 13 | ``` 14 | 15 | ## Exercício 2 - Maçaroca de Strings 16 | ``` javascript 17 | function criaMacaroca(textos) { 18 | let textoFinal = ''; 19 | for(let texto of textos) { 20 | textoFinal = `${textoFinal}${texto}`; 21 | } 22 | 23 | return textoFinal; 24 | } 25 | ``` 26 | 27 | ## Exercício 3 - Quero o seu endereço completo 28 | ``` javascript 29 | function montaEnderecoCompleto(rua, cidade, numero, cep) { 30 | return `${rua}, ${numero} - ${cidade}, ${cep}`; 31 | } 32 | ``` 33 | 34 | ## Exercício 4 - Seja muito bem-vindo! 35 | ``` javascript 36 | let nome = 'usuario'; 37 | console.log(`Bem-vindo ${nome}!`); 38 | ``` 39 | 40 | ## Exercício 5 - Cálculo interpolado 41 | ``` javascript 42 | function soma(n1,n2) { 43 | let resultado = `${n1} + ${n2} = ${n1+n2}`; 44 | console.log(resultado); 45 | } 46 | ``` 47 | -------------------------------------------------------------------------------- /Capítulo 12 - Parâmetros predefinidos em funções/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - O dobro de nada 4 | ``` javascript 5 | mostraNome(); // Meu nome é undefined 6 | ``` 7 | R: No JavaScript, quando declaramos e invocamos funções, elas possuem por definição seus parâmetros com o valor `undefined` como padrão. Como não passamos nenhum valor para a função, ele assumiu o `undefined`. 8 | 9 | 10 | ## Exercício 2 - Me passa uns parâmetros ae 11 | ``` javascript 12 | function soma(a = 0, b = 0) { 13 | return a + b; 14 | } 15 | ``` 16 | 17 | ## Exercício 3 - Tá aqui a minha identidade 18 | ``` javascript 19 | function imprimeNomeCompleto(nome = '', sobrenome='', nomeDoMeio='') { 20 | console.log(`${nome} ${nomeDoMeio} ${sobrenome}`); 21 | } 22 | 23 | imprimeNomeCompleto('João'); // João 24 | ``` 25 | 26 | ## Exercício 4 - Adivinha em quem eu estou pensando? 27 | ``` javascript 28 | Ao executar esta função, percebemos que o valor atribuído ao padrão é "valor 1" e não "valor 2". Isso aconteceu exatamente por causa do escopo de bloco que vimos no capítulo de const e let. Se removemos a primeira declaração da variável v, somos presenteados com um belo erro: `ReferenceError: v is not defined` 29 | ``` 30 | 31 | ## Exercício 5 - Pare de me imitar! 32 | ``` javascript 33 | function subtrair(a = 0,b = a) { 34 | return a + b; 35 | } 36 | ``` 37 | -------------------------------------------------------------------------------- /Capítulo 21 - Novidades do ES7/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios vamos rever como funcionam as novidades trazidas pelo ES7 (ES2016). 4 | 5 | ## Exercício 1 - Você está ai? 6 | Utilizando o `Array.prototype.includes`, refatore o código abaixo para indicar se uma dada String está contida dentro de um Array. 7 | 8 | ``` javascript 9 | function possuiNumero(texto, termo) { 10 | let achou = false; 11 | const termos = texto.split(' '); 12 | for(let i = 0; i < termos.length; i++){ 13 | if(termos[i] === termo) { 14 | achou = true; 15 | break; 16 | } 17 | } 18 | 19 | return achou; 20 | } 21 | 22 | possuiNumero('Era uma vez', 'vez'); // true 23 | possuiNumero('Dois mais dois é quatro', 'mais'); // true 24 | possuiNumero('Não há nada aqui', 'quadro'); // false 25 | ``` 26 | 27 | ## Exercício 2 - ARÁ! Essa você não resolve 28 | Qual o caso em que a função `indexOf` não consegue nos ajudar em identifica se existe um dado elemento dentro de um array? 29 | 30 | ## Exercício 3 - Hora de exponenciar 31 | Refatore a função a seguir para utilizar o novo operador de exponenciação ao invés da função `Math.pow`. 32 | 33 | ``` javascript 34 | function exponencial(base, expoente) { 35 | return Math.pow(base, expoente); 36 | } 37 | 38 | exponencial(2,2); // 4 39 | exponencial(2,3); // 8 40 | exponencial(3,2); // 9 41 | ``` -------------------------------------------------------------------------------- /Capítulo 07 - Listas sem repetições com Sets e WeakSets/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios iremos exercitar como utilizar as estruturas de Set e WeakSet 4 | 5 | ## Exercício 1 - Retirando o excesso 6 | Implemente o método 'removeDuplicatas' quer recebe o seguinte parâmetro: 7 | - numeros: lista de números inteiros positivos 8 | 9 | O método deve retornar a lista de número sem repetições. Utilize a estrutura de dados `Set` para resolver este problema. 10 | 11 | * Exemplo: removeDuplicatas([1,1,2,2,3,3]) → [1,2,3] 12 | 13 | ## Exercício 2 - Um é forte e o outro é fraco, não é isso? 14 | Qual é a principal diferença entre a estruturas de dados `Set` e `WeakSet`? 15 | 16 | ## Exercício 3 - Mas na minha máquina funciona! 17 | Um aluno do curso de computação está tentando executar o código a seguir: 18 | ``` javascript 19 | var musica1 = { 20 | titulo: 'O amor não tem rollback', 21 | autor: 'SQL' 22 | } 23 | 24 | var musica2 = { 25 | titulo: 'Nada se componentiza a você', 26 | autor: 'React' 27 | } 28 | 29 | var musicas = new WeakSet([musica1, musica2]); 30 | for(var musica of musicas){ 31 | console.log(musica); 32 | } 33 | ``` 34 | 35 | Mas sempre que ele tenta executar este código, ele dá erro. Você sabe dizer qual é o problema? 36 | 37 | ## Exercício 4 - Isso é completamente inútil! 38 | Cite um caso onde podemos utilizar a estrutura de `WeakMap`. 39 | -------------------------------------------------------------------------------- /Capítulo 17 - Módulos/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nos próximos exercícios vamos revisar como utilizar a modularização no JavaScript. 4 | 5 | ## Exercício 1 - Meu primeiro módulozinho 6 | Crie um módulo chamado `config` na pasta `src` que exporta uma propriedade chamada `nome` e exibe no console no `index.js`. 7 | 8 | ## Exercício 2 - Um ou outro, mas não os dois! 9 | Aproveite o código feito acima, e adicione uma propriedade chamada `chave`, com qualquer valor, que deve ser exportado de forma nomeada. Importe para o `index.js` e mostre seu valor no console. 10 | 11 | ## Exercício 3 - Classe para todos 12 | Crie na pasta `src` o arquivo `classe.js` que deve conter a implementação de uma classe com o nome Telefone que deve conter as propriedades: `modelo` e `número`. Faça com que o `index.js` seja capaz de obter as informações desta classe e exibir no console. 13 | 14 | ## Exercício 4 - Trocando os nomes 15 | Na pasta `src`, no arquivo `config.js`, exporte uma variável de nome `url` de valor `http://entendendoes6.com.br` e o importe no `index.js` trocando o nome `url` para `link`. Exiba o valor no console. 16 | 17 | ## Exercício 5 - Exportação de funções 18 | Crie um arquivo chamado `printer.js` na pasta `/src` que contenha o método `printNoConsole` que recebe uma string como parâmetro. Essa função deve pegar a string e imprimí-la no console. Exporte a função e a utilize no `index.js`. 19 | -------------------------------------------------------------------------------- /Capítulo 04 - Iteração com iteradores e iteráveis/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Você está muito longe 4 | ``` javascript 5 | function calculaDistancia(ruas) { 6 | var iteradorRuas = ruas[Symbol.iterator](); 7 | var distanciaTotal = 0; 8 | var rua = iteradorRuas.next(); 9 | do { 10 | distanciaTotal += rua.value.tamanho; 11 | rua = iteradorRuas.next(); 12 | } 13 | while (!rua.done); 14 | 15 | return distanciaTotal; 16 | } 17 | ``` 18 | 19 | ## Exercício 2 - Tem alguém ai? 20 | ``` javascript 21 | function isListaVazia(lista) { 22 | return lista[Symbol.iterator]().next().done; 23 | } 24 | ``` 25 | 26 | ## Exercício 3 - S-o-l-e-t-r-a-n-d-o 27 | ``` javascript 28 | function soletraPalavra(palavra) { 29 | var iteradorPalavra = palavra[Symbol.iterator](); 30 | var letra = iteradorPalavra.next(); 31 | do { 32 | console.log(letra.value); 33 | letra = iteradorPalavra.next(); 34 | } while (!letra.done); 35 | } 36 | ``` 37 | 38 | ## Exercício 4 - Eu prefiro o meu 39 | ``` javascript 40 | function criaIterador(array) { 41 | var proximoIndice = 0; 42 | 43 | return { 44 | next: function() { 45 | if(proximoIndice < array.length) { 46 | return { value: array[proximoIndice++], done: false }; 47 | } else { 48 | return { value: undefined, done: true }; 49 | } 50 | } 51 | }; 52 | 53 | } 54 | ``` 55 | -------------------------------------------------------------------------------- /Capítulo 05 - Iteração com o laço for...of/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Contando o faturamento 4 | ``` javascript 5 | function somaFaturamento(valores) { 6 | var total = 0; 7 | for(var valor of valores) { 8 | total += valor; 9 | } 10 | 11 | return total; 12 | } 13 | ``` 14 | 15 | ## Exercício 2 - Por quê não funciona? 16 | R: Neste capítulo vimos que a estrutura por debaixo dos panos acessa o iterador da estrutura a cada passo da iteração. É por isso que quando ele tentou iterar o objeto literal `Casa`, ele obteve um erro. Ao invés disso, os atributos estivessem dentro de um `Array`, teria funcionado sem problemas. 17 | 18 | ## Exercício 3 - Agora vai funcionar 19 | ``` javascript 20 | var Casa = { 21 | metrosQuadrados: 4000, 22 | altura: 3000, 23 | nQuartos: 4, 24 | nBanheiros: 2 25 | 26 | //... 27 | } 28 | 29 | for(var atributo in Casa) { 30 | console.log(atributo + ' : ' + Casa[atributo]); 31 | } 32 | ``` 33 | 34 | ## Exercício 4 - Pare aqui senhor motorista 35 | ``` javascript 36 | function percorreRuas(ruas, parada) { 37 | for(var rua of ruas) { 38 | console.log(rua); 39 | if(rua === parada) break; 40 | } 41 | } 42 | ``` 43 | 44 | ## Exercício 5 - Não vá por ali! 45 | ``` javascript 46 | function percorreRuas(ruas, ruaPerigosa) { 47 | for(var rua of ruas) { 48 | if(rua === ruaPerigosa) continue; 49 | console.log(rua); 50 | } 51 | } 52 | ``` 53 | -------------------------------------------------------------------------------- /Capítulo 14 - Expansão com o operador Spread/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios vamos reforçar o que foi ensinado sobre o operador `Spread`. 4 | 5 | ## Exercício 1 - Hora do ditado 6 | Refatore o código a seguir para utilizar o operador `Spread` no método `log` do console. 7 | 8 | ``` javascript 9 | console.log('e','c','m','a','s','c','r','i','p','t'); 10 | ``` 11 | 12 | ## Exercício 2 - Não são só umas reticências? 13 | Qual a diferença básica entre os operadores `Rest` e `Spread`? 14 | 15 | 16 | ## Exercício 3 - Contador de Vogais 17 | Implemente o método `contaQuantidadeVogaisNaoAcentuadas` que recebe um número indeterminado de palavras e retorna para o usuário o número total de vogais não acentuadas encontradas. Para este exercício, Considere somente palavras em minúsculo. 18 | 19 | 20 | ## Exercício 4 - Esse jeito é tão ultrapassado... 21 | Como podemos refatorar o código a seguir sem utilizar os benefícios do ECMAScript 6? 22 | 23 | ``` javascript 24 | var argumentos = [1,2,3]; 25 | console.log(argumentos[0], argumentos[1], argumentos[2]); 26 | // 1, 2, 3 27 | ``` 28 | 29 | ## Exercício 5 - A união faz a força 30 | Refatore o código a seguir para utilizar o operador `Spread` ao invés do método `concat`. 31 | 32 | ``` javascript 33 | const equipeMarketing = ['Joana', 'Marcela', 'Bruna']; 34 | const equipeComercial = ['Talita', 'Luisa', 'Vitória']; 35 | 36 | const timeCompleto = equipeMarketing.concat(equipeComercial); 37 | 38 | realizaBrainstorm(timeCompleto); 39 | ``` 40 | -------------------------------------------------------------------------------- /Capítulo 13 - Parâmetros infinitos com operador Rest/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Gastando até o que não tem 4 | ``` javascript 5 | function calculaPrecoTotal(...precos) { 6 | return precos.reduce(function(total, preco) { 7 | return total + preco; 8 | }, 0) 9 | } 10 | 11 | calculaPrecoTotal(1,2,3,4,5); // 15 12 | ``` 13 | 14 | ## Exercício 2 - Eu sou maior do que você, lero lero! 15 | ``` javascript 16 | function todosSaoMaioresQue(ref, ...valores) { 17 | for(let valor of valores) { 18 | if(valor < ref) { 19 | return false; 20 | } 21 | } 22 | 23 | return true; 24 | } 25 | ``` 26 | 27 | ## Exercício 3 - Bingo! 28 | ``` javascript 29 | function anunciaBolasSorteadas(... bolas) { 30 | for(let bola of bolas) { 31 | console.log(`A bola escolhida foi: ${bola} `); 32 | } 33 | } 34 | ``` 35 | 36 | ## Exercício 4 - Mas o professor que ensinou assim! 37 | **R:** O operador sempre interpreta as últimas variáveis passadas na função para compactá-las em um único `Array`. Apesar de a separação parecer fazer sentido para o aluno, não funcionará como esperado. O correto seria fazer algo do gênero: 38 | 39 | ``` javascript 40 | function numerosELetras(...numerosELetras) { 41 | // corpo 42 | } 43 | ``` 44 | 45 | ## Exercício 5 - Este sim saber argumentar 46 | **R:** Este objeto está disponível dentro de todas as funções construídas no JavaScript. Ele contém um registro para cada argumento passado para a função no contexto de sua execução, sendo que o primeiro índice de registro começa no índice 0. 47 | -------------------------------------------------------------------------------- /Capítulo 14 - Expansão com o operador Spread/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Hora do ditado 4 | ``` javascript 5 | const ditado = ['e','c','m','a','s','c','r','i','p','t']; 6 | console.log(...ditado); 7 | ``` 8 | 9 | ## Exercício 2 - Não são só umas reticências? 10 | **R:** Apesar de ambos utilizarem a notação `…` (três pontos), o funcionamento deles é totalmente diferente: 11 | 12 | * O operador Rest coleta os itens e coloca-os em um Array; 13 | * O operador Spread torna um Array (e outros objetos iteráveis) em itens individuais. 14 | 15 | ## Exercício 3 - Contador de Vogais 16 | ``` javascript 17 | function contaQuantidadeVogaisNaoAcentuadas(...palavras) { 18 | let ocorrencias = 0; 19 | for(let palavra of palavras) { 20 | let palavraLowerCase = palavra.toLowerCase(); 21 | const letras = [...palavraLowerCase]; 22 | for(let letra of letras) { 23 | if("aeiou".indexOf(letra) !== -1) { 24 | ocorrencias++; 25 | } 26 | } 27 | } 28 | 29 | return ocorrencias; 30 | } 31 | ``` 32 | 33 | ## Exercício 4 - Esse jeito é tão ultrapassado... 34 | É possível através do método `apply`: 35 | 36 | ``` javascript 37 | var argumentos = [1,2,3]; 38 | console.log.apply(console, argumentos); 39 | // 1, 2, 3 40 | ``` 41 | 42 | ## Exercício 5 - A união faz a força 43 | ``` javascript 44 | const equipeMarketing = ['Joana', 'Marcela', 'Bruna']; 45 | const equipeComercial = ['Talita', 'Luisa', 'Vitória']; 46 | 47 | const timeCompleto = [...equipeComercial, ...equipeMarketing]; 48 | 49 | realizaBrainstorm(timeCompleto); 50 | ``` 51 | -------------------------------------------------------------------------------- /Capítulo 15 - Desestruturamento de Arrays e Objetos/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Desestruturando a definição 4 | **R:** Resumidamente, podemos definir o desestruturamento como uma maneira de extrair valores armazenados em objetos e Arrays. A sua ideia é permitir que usemos a mesma sintaxe de construção de dados para extrair dados. 5 | 6 | ## Exercício 2 - Pegando a propriedade na lata 7 | ``` javascript 8 | const {email, nome, idade} = usuario; 9 | ``` 10 | 11 | ## Exercício 3 - Não gostei desse nome não 12 | ``` javascript 13 | const usuario = { 14 | nome: 'Toreto', 15 | email: 'velozesefuriososparasempre@gmail.com' 16 | } 17 | 18 | const {nome:nick, email:login} = usuario; 19 | 20 | console.log(nick); // Toreto 21 | console.log(login); // velozesefuriososparasempre@gmail.com 22 | ``` 23 | 24 | ## Exercício 4 - Minha mãe mandou eu escolher esse daqui... 25 | ``` javascript 26 | const [,reinalda] = contatos; 27 | console.log(reinalda); // {nome: 'Reinalda Silva', numero: '1234-6789'} 28 | ``` 29 | 30 | ## Exercício 5 - Cara-Crachá 31 | ``` javascript 32 | function isEngenheiro({titulo, departamento}) { 33 | return titulo.indexOf("Engenheiro") > -1 && departamento === 'Engenharia'; 34 | } 35 | ``` 36 | 37 | ## Exercício 6 - Mas o que são estes dados!? 38 | ``` javascript 39 | const corpoDocente = [ 40 | [ 'Gramática', '9:00', 'Sueli' ], 41 | [ 'Matemática', '10:15', 'Amilton'], 42 | [ 'Educação Física', '11:30', 'Bruno' ] 43 | ]; 44 | 45 | function mostraGradeProfessores(corpoDocente) { 46 | return corpoDocente.forEach( ([materia, hora, nome]) => { 47 | console.log(`Aula de ${materia} às ${hora} com professor(a) ${nome}`); 48 | }); 49 | } 50 | ``` 51 | -------------------------------------------------------------------------------- /Capítulo 10 - Arrow Functions/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Hora de usar as setas 4 | ``` javascript 5 | let imprimeProduto = (nome,preco) => { 6 | console.log(`Produto: ${nome} | Preço: ${preco}`); 7 | }; 8 | ``` 9 | 10 | ## Exercício 2 - Hora de usar as setas novamente 11 | ``` javascript 12 | let itens = ['abacaxi', 'banana', 'maçã', 'laranja', 'limão']; 13 | itens.forEach(item => console.log(item)); 14 | ``` 15 | 16 | ## Exercício 3 - Quem está na janela? 17 | R: Sempre que executamos uma função no JavaScript, ela é associada a um contexto de execução. Esse contexto possui uma propriedade denominada ThisBinding, que pode ser acessada a qualquer momento através da palavra reservada this. O valor do this, que chamamos de contexto da função, é constante e existe enquanto este contexto de execução existir. Toda função também declarada no escopo global possui o objeto window como valor do this. 18 | 19 | ## Exercício 4 - Vou lavar sua boca com sabão! 20 | ``` javascript 21 | let palavroes = [ 22 | "Inconstitucionalíssimo", 23 | "Otorrinolaringologista", 24 | "Pneumoultramicroscopicossilicovulcanoconiose", 25 | "Oftalmotorrinolaringologista" 26 | ]; 27 | 28 | let tamanhos = palavroes.map(palavrao => palavrao.length); 29 | 30 | console.log(tamanhos); // [ 22, 22, 44, 28 ] 31 | ``` 32 | 33 | ## Exercício 5 - Tudo dentro do seu escopo 34 | ``` javascript 35 | const equipe = { 36 | nome: 'Valentes da Glória', 37 | membros: ['Luciano', 'Maria', 'Virgínia', 'Daniela'], 38 | imprimeNomes: function() { 39 | this.membros.forEach(membro => { 40 | console.log(`${membro} é da equipe ${this.nome}`); 41 | }) 42 | } 43 | } 44 | 45 | equipe.imprimeNomes(); 46 | ``` 47 | -------------------------------------------------------------------------------- /Capítulo 12 - Parâmetros predefinidos em funções/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Neste exercícios vamos exercitar como utilizar parâmetros padrões em funções. 4 | 5 | ## Exercício 1 - Quem é você? 6 | O que acontece na execução do código a seguir? 7 | 8 | ``` javascript 9 | function mostraNome(nome) { 10 | console.log(`Meu nome é: ${nome}`); 11 | } 12 | 13 | mostraNome(); // ?? 14 | ``` 15 | 16 | ## Exercício 2 - Me passa uns parâmetros ae 17 | Refatore o código a seguir utilizando parâmetros padrão de função. 18 | 19 | ``` javascript 20 | function soma(a,b) { 21 | if(a === undefined) { 22 | a = 0; 23 | } 24 | if(b === undefined) { 25 | b = 0; 26 | } 27 | 28 | return a + b; 29 | } 30 | ``` 31 | 32 | ## Exercício 3 - Tá aqui a minha identidade 33 | Refatore o código a seguir de modo a remover as variáveis `sobrenomeTratado` e `nomeDoMeioTratado`. 34 | 35 | ``` javascript 36 | function imprimeNomeCompleto(nomeTratado, sobrenome, nomeDoMeio) { 37 | let nomeTratado = nomeTratado || ''; 38 | let sobrenomeTratado = sobrenome || ''; 39 | let nomeDoMeioTratado = nomeDoMeio || ''; 40 | 41 | console.log(`${nomeTratado} ${nomeDoMeioTratado} ${sobrenomeTratado}`); 42 | } 43 | 44 | imprimeNomeCompleto('João'); // João 45 | ``` 46 | 47 | ## Exercício 4 - Adivinha em quem eu estou pensando? 48 | Considere o código a seguir e responda: Qual o valor será mostrado? E por que? 49 | 50 | ``` javascript 51 | const v = 'valor 1'; 52 | function funcao(x = v) { 53 | const v = 'valor 2'; 54 | console.log(x); 55 | } 56 | 57 | funcao(); // qual valor será mostrado? 58 | ``` 59 | 60 | ## Exercício 5 - Pare de me imitar! 61 | Como podemos tornar o código abaixo menos repetitivo? 62 | 63 | ``` javascript 64 | function subtrair(a = 0,b = 0) { 65 | return a + b; 66 | } 67 | ``` 68 | -------------------------------------------------------------------------------- /Capítulo 23 - async-await/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios vamos rever como funcionam as novidades trazidas pelo ES8 (ES2017) com o async/await. 4 | 5 | ## Exercício 1 - Await a second! 6 | O que acontece quando tentamos utilizar o `await` em uma Promise fora de uma função marcada com `async`? 7 | 8 | ## Exercício 2 - Tire esse then da minha frente! 9 | Refatore a função a seguir para funcionar utilizando async/await. 10 | 11 | ``` javascript 12 | function showGitHubUser(username) { 13 | const url = `https://api.github.com/users/${username}`; 14 | fetch(url) 15 | .then(response => response.json()) 16 | .then(user => { 17 | console.log(user); 18 | }) 19 | } 20 | ``` 21 | 22 | ## Exercício 3 - Na minha máquina funciona... 23 | Como fazemos para tratar erros quando estamos trabalhando com async/await? Refatore o código do exercício anterior para lidar com estes casos. 24 | 25 | ## Exercício 4 - Cuidado com a concorrência 26 | Refatore o código a seguir para deixar as requisições paralelas utilizando o `Promise.all`. 27 | 28 | ``` javascript 29 | async function showGitHubUserAndRepos(username) { 30 | const userPromise = fetchFromGitHub(`/users/${username}`); 31 | const reposPromise = fetchFromGitHub(`/repos/${username}`); 32 | 33 | const user = await userPromise; 34 | const repos = await reposPromise; 35 | 36 | console.log(user.name); 37 | console.log(respos.length); 38 | } 39 | ``` 40 | 41 | ## Exercício 5 - Nunca é tarde demais para mudar 42 | Refatore o código a seguir para que ao invés de usar callbacks, ele funcione com Promises e usando a sintaxe de async/await. 43 | 44 | ``` javascript 45 | function doSomething(callback) { 46 | console.log('i did something'); 47 | callback(); 48 | } 49 | 50 | doSomething(function(){ 51 | console.log('i did something AFTER!'); 52 | }) 53 | ``` -------------------------------------------------------------------------------- /Capítulo 23 - async-await/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Await a second! 4 | **R:** Simplesmente não funciona. O `await` precisa estar sempre envolta de uma função marcada com a palavra `async`. 5 | 6 | ## Exercício 2 - Tire esse then da minha frente! 7 | ``` javascript 8 | async function showGitHubUser(username) { 9 | const url = `https://api.github.com/users/${username}`; 10 | const response = await fetch(url); 11 | const user = await response.json(); 12 | console.log(user); 13 | } 14 | ``` 15 | 16 | ## Exercício 3 - Na minha máquina funciona... 17 | **R:** É necessário encapsular o código dentro de um try/catch. Para o caso do exercício anterior, o código ficaria assim: 18 | 19 | ``` javascript 20 | async function showGitHubUser(username) { 21 | try { 22 | const url = `https://api.github.com/users/${username}`; 23 | const response = await fetch(url); 24 | const user = await response.json(); 25 | console.log(user); 26 | } catch(err) { 27 | // Se a promise for rejeitada por algum motivo, este fluxo será executado 28 | console.log(err); 29 | } 30 | } 31 | ``` 32 | 33 | ## Exercício 4 - Cuidado com a concorrência 34 | ``` javascript 35 | async function showGitHubUserAndRepos(username) { 36 | const [user, repos] = await Promise.all([ 37 | fetchFromGitHub(`/users/${username}`), 38 | fetchFromGitHub(`/users/${username}/repos`) 39 | ]); 40 | 41 | console.log(user.name); 42 | console.log(respos.length); 43 | } 44 | ``` 45 | 46 | ## Exercício 5 - Nunca é tarde demais para mudar 47 | ``` javascript 48 | function doSomethingPromisefy() { 49 | return new Promise((resolve, reject) => { 50 | resolve(console.log('i did something')); 51 | }) 52 | } 53 | 54 | (async () => { 55 | await doSomethingPromisefy(); 56 | console.log('i did something AFTER!'); 57 | })(); 58 | ``` 59 | -------------------------------------------------------------------------------- /Capítulo 19 - Operações assíncronas com promises/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nos exercícios a seguir iremos rever as operações assícronas com promises. 4 | 5 | ## Exercício 1 - Promessa verdadeira 6 | Em poucas palavras, diga o que são as Promises. 7 | 8 | ## Exercício 2 - E que tudo mais vá para o inferno 9 | O que é `callback hell` e qual a sua relação com as Promises? 10 | 11 | ## Exercício 3 - Você cumpre as suas promessas? 12 | Implemente o método simulaPromise() que recebe um parâmetro chamado `sucesso` que é um Boolean que indicará se a Promise foi realizada com sucesso ou não. O método deve receber esta parâmetro e imprimir a mensagem: `ok` em caso de sucesso e `not ok` no caso contrário. 13 | 14 | Exemplo: 15 | ``` javascript 16 | simulaPromise(false); // not ok 17 | simulaPromise(true); // ok 18 | ``` 19 | 20 | Não se esqueça de utilizar o `resolve`, `reject`, `then` e `catch` para resolver o exercício. 21 | 22 | ## Exercício 4 - Você cumpre as suas promessas em tempo? 23 | Para melhorar a simulação de Promise criada no exercício anterior, faça com o método receba mais um argumento chamado `delay` que é um inteiro que representa os milisegundos que a solicitação demora para responder. Ao executar o método, ele deve demorar o tempo do `delay` para exibir a mensagem no console. 24 | 25 | Exemplo: 26 | ``` javascript 27 | simulaPromise(true, 2000); // ok 28 | simulaPromise(false, 1000); // not ok 29 | 30 | // ordem que aparece no console 31 | // not ok 32 | // ok 33 | ``` 34 | 35 | ## Exercício 5 - Passando promessa de pai para filho 36 | Qual é o problema com o trecho de código a seguir? E como consertá-lo? 37 | ``` javascript 38 | // ... 39 | promise 40 | .then((data) => console.log(`resultado positivo: ${data}`)) 41 | .then((data) => console.log(`resultado positivo 2: ${data}`)) 42 | .catch((data) => console.log(`resultado negativo: ${data}`)); 43 | ``` 44 | -------------------------------------------------------------------------------- /Capítulo 04 - Iteração com iteradores e iteráveis/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios iremos exercitar os conceitos de Iteradores e Iteráveis. 4 | 5 | ## Exercício 1 - Você está muito longe 6 | Implemente uma função chamada `calculaDistancia` que recebe uma lista de objetos que representam ruas e faça a soma de seus tamanhos. Cada objeto `rua` da lista possui as seguintes propriedades: 7 | - nome: String que representa o nome da rua 8 | - tamanho: Número intero que representa a comprimento da rua em metros 9 | 10 | Utilize somente os conceitos que foram apresentados neste capítulo para iterar as `ruas`. Assuma que sempre haverá pelo menos uma rua no array. 11 | 12 | Tome como exemplo, a entrada abaixo. 13 | ``` javascript 14 | var ruas = [ 15 | { nome:'Rua 1', tamanho: 2500 }, 16 | { nome:'Rua 2', tamanho: 3400 }, 17 | { nome:'Rua 3', tamanho: 1400 } 18 | ]; 19 | ``` 20 | 21 | * Exemplo: calculaDistancia(ruas) → 7300 22 | 23 | 24 | ## Exercício 2 - Tem alguém ai? 25 | Desenvolva a função 'isListaVazia' que recebe como parâmetro uma lista de números inteiros qualquer e retorna o valor `true` caso esta lista não tenha nenhum item e `false` para os demais resultados. A lógica deve ser feita usando somente a propriedade `done` do objeto que é obtido ao executar o `next` no iterador do array. 26 | 27 | ## Exercício 3 - S-o-l-e-t-r-a-n-d-o 28 | Utilizando os aprendizados deste capítulo, implemente a função `soletraPalavra` que recebe como único parâmetro uma String e então exibe cada letra da String em uma linha do console. 29 | 30 | ## Exercício 4 - Eu prefiro o meu 31 | Crie o método 'criaIterador' que recebe como parâmetro uma lista e então o devolve um objeto que possui o mesmo comportamento de um iterador, ou seja, que possui o método `next` que toda vez que invocado, retorna um objeto com as propriedades: `value` e `done`. 32 | 33 | * Exemplo: criaIterador([1,2]).next() → { value: 1, done: false } 34 | -------------------------------------------------------------------------------- /Capítulo 11 - Melhorias em Objetos Literais/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios, iremos reforçar como fazer uso das melhorias em objetos literais. 4 | 5 | ## Exercício 1 - Dando um trato no busão 6 | Refatore o seguinte código para usar as vantagens oferecidas pelo ES6 em relação a objetos literais. 7 | 8 | ``` javascript 9 | var modelo = 'Mercedes-Benz Monobloco O-371 RSL'; 10 | var ano = 1993; 11 | var capacidade = 50; 12 | 13 | var acelerar = function() { 14 | console.log('vrum vrum'); 15 | } 16 | 17 | var busao = { 18 | modelo: modelo, 19 | ano: ano, 20 | capacidade: capacidade, 21 | acelerar : acelerar 22 | } 23 | 24 | busao.acelerar(); // vrum vrum 25 | ``` 26 | 27 | ## Exercício 2 - Corta isso fora 28 | Refatore o código abaixo com o que foi aprendido até agora. 29 | ``` javascript 30 | var dimensoes = function(comprimento, alturaInicial) { 31 | var altura = alturaInicial * 9 /16; 32 | return { comprimento : comprimento, altura : altura }; 33 | } 34 | 35 | console.log(dimensoes(10,10)); // { comprimento: 10, altura: 5.625 } 36 | ``` 37 | 38 | ## Exercício 3 - Oi, eu sou o Goku! 39 | Refatore o código a seguir para inserir o método `seApresentar` para dentro do objeto pessoa. Ela deve exibir o nome da pessoa. 40 | 41 | ``` javascript 42 | const pessoa = { 43 | nome: 'Goku', 44 | equipe: 'Guerreiro Z' 45 | } 46 | 47 | function seApresentar(pessoa) { 48 | console.log('Oi, eu sou o ' + pessoa.nome + '!'); 49 | } 50 | 51 | seApresentar(pessoa); // Oi, eu sou o Goku! 52 | ``` 53 | 54 | ## Exercício 4 - Criando à minha maneira 55 | Implemente o método `criaObjetoComCaracteristicas` quer recebe o seguinte parâmetro: 56 | - caracteristicas: Mapa que representa os atributos e valores do objeto (Ex: idade, 25) 57 | 58 | O método deve devolver um objeto literal que possua as características representadas no mapa. Para este exercício, não vamos considerar funções. 59 | 60 | ## Exercício 5 - Esse tal de JSON 61 | Responda: O que é um JSON? 62 | -------------------------------------------------------------------------------- /Capítulo 17 - Módulos/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Meu primeiro módulozinho 4 | - src/config.js 5 | 6 | ``` javascript 7 | const nome = 'ECMAScript 6'; 8 | export default nome; 9 | ``` 10 | - index.js 11 | 12 | ``` javascript 13 | import nome from './src/config'; 14 | console.log(nome); 15 | ``` 16 | 17 | ## Exercício 2 - Um ou outro, mas não os dois! 18 | - src/config.js 19 | 20 | ``` javascript 21 | const nome = 'ECMAScript 6'; 22 | const chave = 'chave'; 23 | export default nome; 24 | export {chave}; 25 | ``` 26 | 27 | - index.js 28 | 29 | ``` javascript 30 | import nome, {chave} from './src/config'; 31 | 32 | console.log(nome); // ECMAscript 6 33 | console.log(chave); // chave 34 | ``` 35 | 36 | ## Exercício 3 - Classe para todos 37 | - src/telefone.js 38 | 39 | ``` javascript 40 | class Telefone { 41 | constructor(modelo, numero){ 42 | this.modelo = modelo; 43 | this.numero = numero; 44 | } 45 | } 46 | 47 | export default Telefone; 48 | ``` 49 | 50 | - index.js 51 | 52 | ``` javascript 53 | import nome, {chave} from './src/config'; 54 | import Telefone from './src/telefone'; 55 | 56 | console.log(nome); // ECMAscript 6 57 | console.log(chave); // chave 58 | 59 | const tel = new Telefone('iphone', 971136132); 60 | console.log(`numero: ${tel.numero} | modelo: ${tel.modelo}`); 61 | ``` 62 | 63 | ## Exercício 4 - Trocando os nomes 64 | - src/config.js 65 | 66 | ``` javascript 67 | export const url = 'http://entendendoes6.com.br'; 68 | ``` 69 | 70 | - index.js 71 | 72 | ``` javascript 73 | import { url as link } from './src/config'; 74 | 75 | console.log(link); // http://entendendoes6.com.br 76 | ``` 77 | 78 | ## Exercício 5 - Exportação de funções 79 | 80 | - src/printer.js 81 | 82 | ``` javascript 83 | export default function printNoConsole(mensagem) { 84 | console.log(mensagem); 85 | } 86 | ``` 87 | 88 | - index.js 89 | 90 | ``` javascript 91 | import printer from './src/printer'; 92 | 93 | printer('Olá, esta é uma mensagem!'); 94 | ``` 95 | -------------------------------------------------------------------------------- /Capítulo 13 - Parâmetros infinitos com operador Rest/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | ## Exercício 1 - Gastando até o que não tem 4 | Refatore o código a seguir para utilizar o operador Rest: 5 | 6 | ``` javascript 7 | function calculaPrecoTotal(a, b, c, d, e) { 8 | let precos = [a,b,c,d,e]; 9 | return precos.reduce(function(total, preco) { 10 | return total + preco; 11 | }, 0) 12 | } 13 | 14 | calculaPrecoTotal(1,2,3,4,5); // 15 15 | ``` 16 | 17 | ## Exercício 2 - Eu sou maior do que você, lero lero! 18 | Utilize o operador Rest para criar uma função que recebe um parâmetro referência, que é obrigatório, e mais n parâmetros numéricos. O objetivo é que esta função calcule se todos os valores numéricos passados são maiores que a referência e retorne verdadeiro ou falso. 19 | 20 | Exemplo: 21 | todosSaoMaioresQue(2,3,4,5,6,7); // resultado esperado: true 22 | 23 | Outros exemplos de entradas: 24 | todosSaoMaioresQue(5,4,3,2,1); // resultado esperado: false 25 | todosSaoMaioresQue(1,2); // resultado esperado: true 26 | 27 | ## Exercício 3 - Bingo! 28 | Refatore o código abaixo para utilizar o operador Rest ao invés do `arguments` 29 | 30 | ``` javascript 31 | function anunciaBolasSorteadas() { 32 | var nBolas = arguments.length; 33 | for(var i = 0; i < nBolas; i++) { 34 | console.log('A bola escolhida foi: ' + arguments[i]); 35 | } 36 | } 37 | 38 | anunciaBolasSorteadas(1,2,3); 39 | // saída 40 | // A bola escolhida foi: 1 41 | // A bola escolhida foi: 2 42 | // A bola escolhida foi: 3 43 | ``` 44 | 45 | ## Exercício 4 - Mas o professor que ensinou assim! 46 | Um aluno de computação tentou utilizar o operador Rest para tratar números e letras, de quantidade indefinida, dentro do seu código, mas não conseguiu. Este foi o código que ele escreveu: 47 | 48 | ``` javascript 49 | function numerosELetras(...numeros, ...letras){ 50 | // corpo da função 51 | } 52 | 53 | Explique o porque este código não funciona. 54 | ``` 55 | 56 | ## Exercício 5 - Este sim saber argumentar 57 | O que é o objeto `arguments`? 58 | -------------------------------------------------------------------------------- /Capítulo 18 - Funções geradoras/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nos exercícios a seguir iremos rever os principais aspectos das funções geradoras. 4 | 5 | ## Exercício 1 - O que é isso? 6 | Em termos simples, explique o que são funções geradoras e como podemos identificá-las. 7 | 8 | 9 | ## Exercício 2 - Sinal de parada 10 | Considere o trecho de código a seguir: 11 | ``` javascript 12 | function* testeDeGeradores() { 13 | console.log('passei aqui!'); 14 | yield 'fim do método'; 15 | } 16 | ``` 17 | 18 | Ao executar o método, a frase "passei aqui!" não é exibida no console como esperado. Por quê? O que é necessário fazer para que a mensagem seja exibida? 19 | 20 | 21 | ## Exercício 3 - Corre Bolt! Corre! 22 | Implemente uma função geradora chamada 'correBolt' que retorna para cada parada um checkpoint. Em cada checkpoint, deve ser impresso a mensagem: `Usain passou no Checkpoint X`, onde "X" indica o número do checkpoint. A função deve ter quatro paradas. Não se esqueça de invocar o método `next`. 23 | 24 | 25 | ## Exercício 4 - Temos que pegar! 26 | Refatore o trecho de código a seguir utilizando todas as melhorias propostas pelo ES6 até então. Use obrigatoriamente funções geradoras. 27 | 28 | ``` javascript 29 | var pokemons = ['Pikachu', 'Charmander', 'Caterpie']; 30 | for(var index = 0; index < pokemons.length; index++) { 31 | var pokemon = pokemons[index]; 32 | console.log('Capturou o ' + pokemon + '!'); 33 | } 34 | ``` 35 | 36 | ## Exercício 5 - Símbolos dizem até demais 37 | Considere o seguinte objeto `equipe` representada pelo código que segue: 38 | ``` javascript 39 | const equipe = { 40 | gerente: 'Gilberto', 41 | estagiario: 'Fernanda', 42 | senior: 'Paulo', 43 | pleno: 'Camila', 44 | junior: 'Adão' 45 | } 46 | ``` 47 | 48 | Faça com que o objeto `equipe` se torne iterável em um laço de repetição do tipo `for...of`. 49 | 50 | Exemplo: 51 | ``` javascript 52 | for(let integrante of equipe) { 53 | console.log(integrante); 54 | } 55 | 56 | /* 57 | Gilberto 58 | Fernanda 59 | Paulo 60 | Camila 61 | Adão 62 | */ 63 | ``` 64 | -------------------------------------------------------------------------------- /Capítulo 05 - Iteração com o laço for...of/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios iremos exercitar como fazer laços de repetição utilizando a estrutura `for...of` 4 | 5 | ## Exercício 1 - Contando o faturamento 6 | Escreva uma função chamada `somaFaturamento` que recebe uma lista de números inteiros e devolve a soma destes valores. 7 | 8 | * Exemplo: somaFaturamento([1,2,3,4]) → 10 9 | 10 | ## Exercício 2 - Por quê não funciona? 11 | Um jovem programador tentou utilizar o laço de repetição `for...of` no objeto `Casa` na esperança de que o laço passasse por todas as propriedades deste objeto. No entanto, ele só recebeu o erro: `TypeError: Casa[Symbol.iterator] is not a function`. Por que não está funcionando? 12 | 13 | Este foi o código que ele tentou executar: 14 | ``` javascript 15 | var Casa = { 16 | metrosQuadrados: 4000, 17 | altura: 3000, 18 | nQuartos: 4, 19 | nBanheiros: 2 20 | 21 | //... 22 | } 23 | 24 | 25 | for(var atributo of Casa) { 26 | console.log(atributo); 27 | } 28 | ``` 29 | 30 | ## Exercício 3 - Agora vai funcionar 31 | Resolva o problema do Exercício 2 utilizando a estrutura `for...in`. 32 | 33 | ## Exercício 4 - Pare aqui senhor motorista 34 | Implemente o método `percorreRuas` que recebe uma lista de strings que representam nomes de ruas e um segundo parâmetro que também é um string, mas representa o nome da rua em que deve parar. Para cada rua percorrida, deve ser apresentada no console, como neste exemplo: 35 | 36 | * Exemplo: percorreRuas(['Rua 1, Rua 2', 'Rua 3'], 'Rua 2') → 'Rua 1' , 'Rua 2' 37 | 38 | Utilize o laço `for...of` e o `break` para não percorrer mais ruas que o necessário. 39 | 40 | ## Exercício 5 - Não vá por ali! 41 | Implemente o método 'percorreRuas' que recebe dois parâmetros: 42 | - ruas: Lista de strings que presentam as ruas que serão percorridas (ex: 'Rua 1') 43 | - ruaPerigosa: String que represeta o nome da rua que deve ser evitada 44 | 45 | Faça com que o método percorra cada uma das ruas exibindo no console, menos para a `ruaPerigosa`. 46 | Utilize o `for...of` e o `continue` para fazer esta lógica. 47 | -------------------------------------------------------------------------------- /Capítulo 09 - Manipulação de textos com template strings/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios iremos praticar a utilização de templates strings. 4 | 5 | ## Exercício 1 - Lista de compras 6 | Utilizando Templates Literais Marcadas, crie uma tag que transforma uma String que representa uma lista de compras (divididas por vírgula) em um elemento de lista HTML (<ul> com <li>). 7 | 8 | Por exemplo: 9 | ``` javascript 10 | const compras = ‘leite,feijão,arroz,mandioca’; 11 | var elemento = tag`${compras}`; 12 | 13 | console.log(elemento) 14 | // 15 | ``` 16 | 17 | ## Exercício 2 - Maçaroca de Strings 18 | Implemente o método `criaMacaroca` que recebe como parâmetro uma lista de strings. O método deve retornar uma única string que é o resultado de todos os itens do array concatenados. É obrigatório a utilização de template string. 19 | 20 | * Exemplo: criaMacaroca(['a','b','c', 'd']) → abcd 21 | 22 | ## Exercício 3 - Quero o seu endereço completo 23 | Implemente o método `montaEnderecoCompleto` que recebe os seguites parâmetros: 24 | - rua: String que reprenta o nome de uma rua 25 | - cidade: String que representa o nome de uma cidade 26 | - numero: Inteiro que representa o número da casa 27 | - cep: String que representa o CEP de um endereço 28 | 29 | O método deve retornar uma única string com esses dados no seguinte formato: 30 | , - , 31 | 32 | Lembre-se de respeitar as vírgulas e os espaços! 33 | 34 | ## Exercício 4 - Seja muito bem-vindo! 35 | Refatore o código a seguir para utilizar template strings. 36 | ``` javascript 37 | let nome = 'usuario'; 38 | console.log('Bem-vindo ' + usuário + '!'); 39 | ``` 40 | 41 | ## Exercício 5 - Cálculo interpolado 42 | Faça a implementação da função 'soma' que recebe como parâmetro dois valores que devem ser somados. O resultado da soma deve ser exibido no console no seguinte formato: 43 | 44 | + = 45 | 46 | Utilize template string para implementar este método. 47 | 48 | * Exemplo: soma(1,2) → 1 + 2 = 3 49 | -------------------------------------------------------------------------------- /Capítulo 11 - Melhorias em Objetos Literais/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Dando um trato no busão 4 | ``` javascript 5 | const modelo = 'Mercedes-Benz Monobloco O-371 RSL'; 6 | const ano = 1993; 7 | const capacidade = 50; 8 | 9 | const acelerar = () => console.log('vrum vrum'); 10 | 11 | var busao = { 12 | modelo, ano, capacidade, acelerar 13 | } 14 | 15 | busao.acelerar(); // vrum vrum 16 | ``` 17 | 18 | ## Exercício 2 - Corta isso fora 19 | ``` javascript 20 | const dimensoes = (comprimento, alturaInicial) => { 21 | return { 22 | comprimento, 23 | altura: alturaInicial * 9 /16 24 | }; 25 | } 26 | 27 | console.log(dimensoes(10,10)); // { comprimento: 10, altura: 5.625 } 28 | ``` 29 | 30 | ## Exercício 3 - Oi, eu sou o Goku! 31 | ``` javascript 32 | const pessoa = { 33 | nome: 'Goku', 34 | equipe: 'Guerreiro Z', 35 | seApresentar() { 36 | console.log(`Oi, eu sou o ${this.nome}!`); 37 | } 38 | } 39 | 40 | pessoa.seApresentar(); // Oi, eu sou o Goku! 41 | ``` 42 | 43 | ## Exercício 4 - Criando à minha maneira 44 | ``` javascript 45 | const caracteristicas = new Map(); 46 | caracteristicas.set('nome', 'diego pinho'); 47 | caracteristicas.set('idade', 24); 48 | 49 | function criaObjetoComCaracteristicas(caracteristicas) { 50 | const objetoNovo = {}; 51 | for(let caracteristica of caracteristicas.keys()) { 52 | objetoNovo[caracteristica] = caracteristicas.get(caracteristica); 53 | } 54 | 55 | return objetoNovo; 56 | } 57 | 58 | console.log(criaObjetoComCaracteristicas(caracteristicas)); 59 | // {nome: 'diego pinho', idade: 24} 60 | ``` 61 | 62 | ## Exercício 5 - Esse tal de JSON 63 | R: O JavaScript Object Notation (JSON) é um formato leve, criado como subconjunto da notação de objetos literais do JavaScript, para troca de dados. Originalmente criado por Douglas Crockford, o formato que é reconhecido devido a sua simplicidade e flexibilidade, não é usado somente no JavaScript, mas na maior parte das linguagens de programação voltadas para web. Ele é muito semelhante a um objeto literal e devido a sua simplicidade, tem sido usado por muitas empresas para criar APIs REST. 64 | -------------------------------------------------------------------------------- /Capítulo 20 - Metraprogramação com proxies/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios vamos rever como funciona a metaprogramação através dos proxies. 4 | 5 | ## Exercício 1 - Praticamente um sósia 6 | Diga, em poucas palavras, o que são Proxies e o que é possível fazer com eles. 7 | 8 | ## Exercício 2 - Meta o quê? 9 | Defina o que é metaprogramação e metaprogramas. 10 | 11 | ## Exercício 3 - Sorria, você está sendo filmado 12 | Tomando como base o objeto `Livro` abaixo, crie um proxy que alerta no console sempre uma propriedade foi acessada. Não se esqueça de usar a trap do `get` para isso. 13 | 14 | ``` javascript 15 | class Livro { 16 | constructor(titulo, autor) { 17 | this.titulo = 'ECMAScript 6 - Entre de cabeça no futuro do JavaScript'; 18 | this.autor = 'Diego Martins de Pinho'; 19 | } 20 | } 21 | ``` 22 | 23 | ## Exercício 4 - Aqui você não seta nada! 24 | Utilizando o mesmo proxy do exercício anterior, faça com o que mesmo proxy também indique com uma mensagem no console sempre que um propriedade for setada no objeto. 25 | 26 | ## Exercício 5 - Só aceitamos dinheiro vivo 27 | Considerando o objeto `Compras` a seguir, implemente um proxy que seja capaz de validar que o `valorPago` setado no objeto sempre deve ser maior que a propriedade `valorAPagar`. Caso isso não aconteça, lance uma exceção no console com a mensagem: "Valor insuficiente para pagar!". 28 | 29 | ``` javascript 30 | class Compras { 31 | constructor(itens, valorAPagar, valorPago) { 32 | this.itens = itens; 33 | this.valorAPagar = valorAPagar; 34 | this.valorPago = valorPago; 35 | } 36 | } 37 | ``` 38 | 39 | ## Exercício 6 - Fim da farsa, Usurpadora! 40 | Faça com que o proxy `usurpadora` seja desativado. 41 | 42 | ``` javascript 43 | class PaolaBracho { 44 | constructor(dinheiro, marido) { 45 | this.dinheiro = 10000000; 46 | this.marido = 'Carlos Daniel Bracho'; 47 | } 48 | } 49 | 50 | const usurpadora = { 51 | get(PaolaBracho, propriedade) { 52 | if(propriedade === 'dinheiro' || propriedade === 'marido') { 53 | console.log('A Usurpadora está atacando!'); 54 | } 55 | } 56 | } 57 | 58 | const paola = new Proxy({}, usurpadora); 59 | paola.dinheiro; // A Usurpadora está atacando! 60 | ``` 61 | -------------------------------------------------------------------------------- /Capítulo 08 - Declaração de variáveis com const e let/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Sei tudo sobre variáveis 4 | a) 10 várias vezes 5 | 6 | b) Alterando o `var` para `let` 7 | 8 | ## Exercício 2 - ISSO_EH_UMA_CONSTANTE 9 | R: Agora é possível utilizar o `const` para declarar esses tipos de variáveis. Além de revelar logo de cara que o valor armazenada em uma variável deste tipo é constante, o próprio JavaScript te impede de atribuir um novo valor a ela, dando mais segurança a constante. 10 | 11 | ## Exercício 3 - Eu estou mandando atribuir! 12 | R: Ele está tentando atribuir um novo valor a variável `nomeCompleto` logo depois de atribuir o valor da variável `primeiroNome`, mas como a variável foi declarada com a palavra `const`, não é possível fazer uma nova atribuição nesta variável. Para este caso, ele deveria ter usado o `let`. 13 | 14 | ## Exercício 4 - Pode ou não pode? 15 | R: É necessário ter em mente que um `const` não se trata de uma variável constante, mas uma referência constante. Em termos práticos, isso significa que o valor não é imutável, é possível adicionar e remover propriedades desta variável. Por isso funcionou. 16 | 17 | ## Exercício 5 - Lá vem um temporal 18 | R: No JavaScript, a declaração das nossas funções e variáveis possuem o comportamento de Hoisting. Este nome é dado ao comportamento de mover declarações para o topo de um escopo (global ou não). Em outras palavras, isso significa que é possível usar uma variável ou função antes mesmo de declará-las no código. No ES6, o “hoisting” do let e const são diferentes de variáveis e funções. Quando uma variável é declarada usando let ou const , ela possui o que é chamada de Temporal Dead Zone (TDZ), nome que descreve o comportamento de que, no seu escopo, ela é inacessível até que a execução alcance sua declaração 19 | 20 | ## Exercício 6 - Tudo fora de escopo 21 | ``` javascript 22 | const status = [ 23 | { codigo: 'OK', resposta: 'Sucesso' }, 24 | { codigo: 'FAILED', resposta: 'Erro' }, 25 | { codigo: 'PENDING', resposta: 'Pendente' } 26 | ]; 27 | let mensagem = ''; 28 | const codigoAtual = 'OK'; 29 | 30 | for (let i = 0; i < status.length; i++) { 31 | if (status[i].codigo === codigoAtual) { 32 | mensagem = status[i].resposta; 33 | } 34 | } 35 | 36 | console.log(mensagem); 37 | ``` 38 | -------------------------------------------------------------------------------- /Capítulo 16 - Modelando com Classes/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios revisaremos como funciona no novo modelo de classes proposto pelo ECMAScript 6. 4 | 5 | ## Exercício 1 - Dando uma transformada nos objetos 6 | Refatore o código a seguir para que declaração do objeto `VideoGame` seja uma classe de acordo com o ES6. Não se esqueça de criar o construtor e invocar um objeto desta classe. 7 | 8 | ``` javascript 9 | function VideoGame(marca, nControles, tipoMidia) { 10 | this.marca = marca; 11 | this.nControles = nControles; 12 | this.tipoMidia = tipoMidia; 13 | } 14 | 15 | var playstation = new VideoGame('sony', '2', 'dvd'); 16 | console.log(playstation); 17 | // { marca: 'sony', nControles: '2', tipoMidia: 'dvd' } 18 | ``` 19 | 20 | ## Exercício 2 - O meu videogame é muito melhor que o seu 21 | Aproveitando a classe `VideoGame` criada no exercício anterior, implemente a classe `PlayStation` que contém todas as propriedades do `VideoGame` mais as seguintes proprieades: 22 | - nEntradasUSB: inteiro que representa a quantidade de entradas usb do console 23 | - voltagem: inteiro que representa a voltagem do console. 24 | - adicionais: array de strings que representam os nomes dos adicionais do videogame (ex: adicionais=['Controle sem fio', 'Volante']) 25 | 26 | Não esqueça de invocar um objeto da classe. 27 | 28 | ## Exercício 3 - Tem alguém ai? 29 | Crie uma classe chamada `Porta` que contenha um método chamado `toctoc` que sempre responde no console a mensagem: 'Quem é?'. O método deve funcionar mesmo sem que exista uma instância da classe. 30 | 31 | 32 | ## Exercício 4 - Qual é o jeito certo de fazer isso então? 33 | Um programador codificou o seguinte trecho: 34 | ``` javascript 35 | const comida = new Comida('Feijão'); 36 | class Comida { 37 | constructor(nome) { 38 | this.nome = nome; 39 | } 40 | } 41 | ``` 42 | 43 | Ao tentar executar, ele recebeu o seguinte erro: 44 | ``` javascript 45 | ReferenceError: Comida is not defined 46 | ``` 47 | 48 | Por que aconteceu este erro? O que é preciso modificar para que o código funcione corretamente? 49 | 50 | 51 | ## Exercício 5 - Declarações anônimas 52 | Refatore o código a seguir para trocar a declaração da classe para que seja anônima: 53 | 54 | ``` javascript 55 | class Computador { 56 | // conteúdo da classe 57 | } 58 | ``` 59 | -------------------------------------------------------------------------------- /Capítulo 10 - Arrow Functions/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios iremos praticar a utilização de das arrow functions. 4 | 5 | ## Exercício 1 - Hora de usar as setas 6 | Utilize o que foi aprendido neste capítulo e refatore a função `imprimeProduto` para utilizar arrow functions. Não deixe de customizar o método para utilizar templates strings. 7 | ``` javascript 8 | let carrinho = [ 9 | { nome: 'abacaxi', preco: '2.00' }, 10 | { nome: 'detergente', preco: '2.50' }, 11 | { nome: 'bolacha', preco: '3.80' } 12 | ] 13 | 14 | carrinho.forEach(function(produto) { 15 | imprimeProduto(produto.nome, produto.preco); 16 | }) 17 | 18 | function imprimeProduto(nome, preco) { 19 | console.log('Produto: ' + nome + ' | ' + 'Preço: ' + preco); 20 | } 21 | ``` 22 | 23 | ## Exercício 2 - Hora de usar as setas novamente 24 | Refatore o código a seguir para utilizar arrow functions: 25 | ``` javascript 26 | let itens = ['abacaxi', 'banana', 'maçã', 'laranja', 'limão']; 27 | itens.forEach(function(item) { 28 | console.log(item); 29 | }) 30 | ``` 31 | 32 | ## Exercício 3 - Quem está na janela? 33 | Toda função declarada no escopo global possui o objeto `window` como valor do `this`. Por que acontece isso? 34 | 35 | ## Exercício 4 - Vou lavar sua boca com sabão! 36 | Utilize as arrow funcions para deixar o código a seguir ainda menor. 37 | ``` javascript 38 | let palavroes = [ 39 | "Inconstitucionalíssimo", 40 | "Otorrinolaringologista", 41 | "Pneumoultramicroscopicossilicovulcanoconiose", 42 | "Oftalmotorrinolaringologista" 43 | ]; 44 | 45 | let tamanhos = palavroes.map(function(palavrao){ return palavrao.length }); 46 | 47 | console.log(tamanhos); // [ 22, 22, 44, 28 ] 48 | ``` 49 | 50 | ## Exercício 5 - Tudo dentro do seu escopo 51 | O código a seguir utiliza um velho truque do JavaScript para conseguir utilizar o valor do `this` que referência o objeto dentro do loop. Utilize os seus conhecimentos de ES6 para refatorá-lo da melhor maneira. 52 | 53 | ``` javascript 54 | var equipe = { 55 | nome: 'Valentes da Glória', 56 | membros: ['Luciano', 'Maria', 'Virgínia', 'Daniela'], 57 | imprimeNomes: function() { 58 | var that = this; 59 | this.membros.forEach(function(membro) { 60 | console.log(membro + ' é da equipe ' + that.nome); 61 | }) 62 | } 63 | } 64 | 65 | equipe.imprimeNomes(); 66 | ``` 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | Entendendo o ECMAScript 6 3 | 4 | 5 | ECMAScript 6 - Entre de cabeça do futuro do JavaScript 6 | ====================== 7 | Repositório oficial do livro: ECMAScript 6 - Entre de cabeça do futuro do JavaScript 8 | 9 | Capa do livro 10 | 11 | Seja muito bem-vindo a uma nova era do JavaScript! O ECMAScript 6 é a maior evolução da linguagem desde a sua criação há 20 anos! Ela agora está muito mais dinâmica, clara e gostosa de se trabalhar. Neste repositório, você encontrará todos os recursos disponíveis para acompanhar a leitura do livro "ECMAScript 6: Entre de cabeça no futuro do JavaScript". 12 | 13 | Como estudar 14 | ------ 15 | Este repositório está dividido da mesma maneira que o livro. Cada diretório corresponde a um capítulo do livro e possui pelo menos dois arquivos: 16 | * exercicios.md 17 | * gabarito.md 18 | 19 | Após ler o capítulo no livro, acesse os exercícios do capítulo correspondente e tente resolvê-los. Você pode desenvolvê-los na sua máquina local ou utilizar algum interpretador JavaScript online. Recomendo o [repl>it](https://repl.it/languages/javascript). Se conseguir resolver, continue treinando! Caso trave ou tenha algum problema, você pode consultar o gabarito. Lá você encontrará a solução recomendada para o problema (normalmente existem inúmeras soluções para um único problema, coloquei apenas uma sugestão de solução que segue as boas práticas apresentadas no livro). 20 | 21 | Bons códigos! 22 | 23 | Obrigado! 24 | 25 | Dados do livro 26 | ------ 27 | **Número de páginas:** 206 28 | 29 | **ISBN:** 978-85-5519-258-6 30 | 31 | ------ 32 | Tendo algum dúvida, crítica, sugestão ou até mesmo encontrar um erro, não hesite em entrar em contato! Também fique a vontade para fazer um fork neste projeto e fazer sugestões de exercícios. 33 | 34 | **ECMAScript 6 - Entre de cabeça no futuro do JavaScript** © 2017+, Diego Martins de Pinho. Publicado pela editora [Casa do Código](https://www.casadocodigo.com.br/). Todos os direitos reservados. 35 | 36 | > Site oficial [entendendoes6.com.br](http://entendendoes6.com.br)  ·  37 | > Twitter [@entendendoes6](https://twitter.com/entendendoes6)  ·  38 | > Facebook [/entendendoes6](https://www.facebook.com/entendendoes6/)  ·  39 | -------------------------------------------------------------------------------- /Capítulo 16 - Modelando com Classes/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Dando uma transformada nos objetos 4 | ``` javascript 5 | class VideoGame { 6 | constructor(marca, nControles, tipoMidia) { 7 | this.marca = marca; 8 | this.nControles = nControles; 9 | this.tipoMidia = tipoMidia; 10 | } 11 | } 12 | 13 | let playstation = new VideoGame('sony', '2', 'dvd'); 14 | console.log(playstation); 15 | // { marca: 'sony', nControles: '2', tipoMidia: 'dvd' } 16 | ``` 17 | 18 | ## Exercício 2 - O meu videogame é muito melhor que o seu 19 | ``` javascript 20 | class VideoGame { 21 | constructor(marca, nControles, tipoMidia) { 22 | this.marca = marca; 23 | this.nControles = nControles; 24 | this.tipoMidia = tipoMidia; 25 | } 26 | } 27 | 28 | 29 | class PlayStation extends VideoGame { 30 | constructor(marca, nControles, tipoMidia, nEntradasUSB, voltagem, adicionais) { 31 | super(marca, nControles, tipoMidia); 32 | this.nEntradasUSB = nEntradasUSB; 33 | this.voltagem = voltagem; 34 | this.adicionais = adicionais; 35 | } 36 | } 37 | 38 | 39 | let playstation = new PlayStation('sony', 2, 'dvd', 2, 2, ['Volante']); 40 | console.log(playstation); 41 | /* 42 | { 43 | marca: 'sony', 44 | nControles: 2, 45 | tipoMidia: 'dvd', 46 | nEntradasUSB: 2, 47 | voltagem: 2, 48 | adicionais: [ 'Volante' ] 49 | } 50 | */ 51 | ``` 52 | 53 | ## Exercício 3 - Tem alguém ai? 54 | ``` javascript 55 | class Porta { 56 | static toctoc() { 57 | console.log('Quem é?'); 58 | } 59 | } 60 | 61 | Porta.toctoc(); // Quem é? 62 | ``` 63 | 64 | ## Exercício 4 - Qual é o jeito certo de fazer isso então? 65 | **R:** No ES5, quando criamos objetos por meio de funções, temos o comportamento de _hoisting_. Isto é, dentro de um escopo, as funções que são declaradas são imediatamente disponíveis para uso — independente de onde as declarações acontecem. Porém, declarações de classes não possuem este comportamento. A classe só existe quando a execução do código chega ao ponto onde a classe é avaliada. Se tentarmos acessar antes, tomaremos um `ReferenceError`. Para que o código funcione, basta trocar a ordem das declarações: 66 | 67 | 68 | ``` javascript 69 | class Comida { 70 | constructor(nome) { 71 | this.nome = nome; 72 | } 73 | } 74 | 75 | const comida = new Comida('Feijão'); 76 | ``` 77 | 78 | ## Exercício 5 - Declarações anônimas 79 | ``` javascript 80 | const Computador = class { 81 | // conteúdo da classe 82 | } 83 | ``` 84 | -------------------------------------------------------------------------------- /Capítulo 06 - As novas estruturas de Map e WeakMap/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Você tem esse produto? 4 | ``` javascript 5 | function possuiProduto(produtos, produtoDesejado) { 6 | return produtos.has(produtoDesejado); 7 | } 8 | ``` 9 | 10 | ## Exercício 2 - Comprinhas online 11 | ``` javascript 12 | var caixa = new Map(); 13 | caixa.set('Arroz', 7.10); 14 | caixa.set('Feijão', 2.30); 15 | caixa.set('Macarrão', 4.70); 16 | caixa.set('Refrigerante', 3.00); 17 | 18 | var fretes = new Map(); 19 | fretes.set('São Paulo', 10.10); 20 | fretes.set('Rio de Janeiro', 12.30); 21 | fretes.set('Brasília', 14.70); 22 | 23 | function calculaValorTotalDaCompra(produtos, cidade, caixa, fretes) { 24 | var total = 0; 25 | for(var produto of produtos) { 26 | total += caixa.get(produto); 27 | } 28 | 29 | var frete = 13.00; 30 | if(fretes.has(cidade)) { 31 | frete = fretes.get(cidade); 32 | } 33 | 34 | return(total + frete); 35 | } 36 | ``` 37 | 38 | ## Exercício 3 - Não sei qual algoritmo usar hoje 39 | R: Há algumas perguntas que podemos nos fazer que nos ajudam a decidir quando um `Map` ou um objeto literal: 40 | * As chaves são desconhecidas até o tempo de execução, 41 | você precisa procurá-las dinamicamente? 42 | * Todos os valores sempre serão do mesmo tipo, e podem 43 | ser usados de forma intercambiável? 44 | * Você precisa de chaves que não são Strings? 45 | * Os pares chave/valor são adicionados ou removidos 46 | frequentemente? 47 | * Você tem uma quantidade de pares chave/valor 48 | arbitrária (de troca fácil)? 49 | * A coleção é iterada? 50 | 51 | Se as respostas para as perguntas forem positivas, são sinais de que você provavelmente queremos usar uma instância de Map. 52 | 53 | ## Exercício 4 - Professor, quando eu vou usar isso na minha vida? 54 | R: É possível utilizar esta estrutura para criar dados privados dentro de uma classe JavaScript. 55 | 56 | ## Exercício 5 - Não vou mais com a sua cara. 57 | ``` javascript 58 | var amigos = new Map(); 59 | amigos.set('João Silva', {idade:23, sexo:'masculino'}); 60 | amigos.set('Luisa Pimenta', {idade:18, sexo:'feminino'}); 61 | amigos.set('Julio Marinho', {idade:52, sexo:'masculino'}); 62 | amigos.set('Marcela Mel', {idade:27, sexo:'feminino'}); 63 | 64 | function deletaAmigos(amigos, exAmigos) { 65 | for(var exAmigo of exAmigos) { 66 | if(amigos.has(exAmigo)) { 67 | amigos.delete(exAmigo); 68 | console.log(exAmigo + ' foi deletado!'); 69 | } 70 | else { 71 | console.log(exAmigo + ' não é seu amigo!'); 72 | } 73 | } 74 | } 75 | ``` 76 | -------------------------------------------------------------------------------- /Capítulo 18 - Funções geradoras/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - O que é isso? 4 | **R:** Funções geradoras são funções no JavaScript em que podemos interromper e retornar sua execução várias vezes. Em termos práticos, isso significa que a execução do método é realizada até um ponto e é interrompida até que invocada novamente. Quando invocada, continua sua execução a partir do ponto em que parou. Essas funções são identificadas pela presenta do `*` (asterisco) em sua declaração e da palavra reservada `yield` em sua implementação. 5 | 6 | ## Exercício 2 - Sinal de parada 7 | **R:** Quando chamamos uma função geradora, seu corpo não é executado imediatamente. Em vez disso, um objeto iterável é retornado. Esse objeto possui uma função muito útil chamada next. Ao utilizar este método next dele, o corpo da função geradora é executado até a primeira expressão yield, que define o valor que será devolvido no retorno da função. 8 | 9 | Logo, 10 | ``` javascript 11 | function* testeDeGeradores() { 12 | console.log('passei aqui!'); 13 | yield 'fim do método'; 14 | } 15 | 16 | testeDeGeradores().next(); // passei aqui! 17 | ``` 18 | 19 | ## Exercício 3 - Corre Bolt! 20 | ``` javascript 21 | function* correBolt() { 22 | console.log('Usain passou no Checkpoint 1'); 23 | yield 'checkpoint 1'; 24 | console.log('Usain passou no Checkpoint 2'); 25 | yield 'checkpoint 2'; 26 | console.log('Usain passou no Checkpoint 3'); 27 | yield 'checkpoint 3'; 28 | console.log('Usain passou no Checkpoint 4'); 29 | yield 'checkpoint 4'; 30 | } 31 | 32 | let bolt = correBolt(); 33 | bolt.next(); // Usain passou no Checkpoint 1 34 | bolt.next(); // Usain passou no Checkpoint 2 35 | bolt.next(); // Usain passou no Checkpoint 3 36 | bolt.next(); // Usain passou no Checkpoint 4 37 | ``` 38 | 39 | ## Exercício 4 - Temos que pegar! 40 | ``` javascript 41 | function* capturaTodosOsPokemons() { 42 | yield 'Pikachu'; 43 | yield 'Charmander'; 44 | yield 'Caterpie'; 45 | } 46 | 47 | for(let pokemon of capturaTodosOsPokemons()) { 48 | console.log(`Capturou o ${pokemon}!`); 49 | } 50 | ``` 51 | 52 | ## Exercício 5 - Símbolos dizem até demais 53 | ``` javascript 54 | const equipe = { 55 | gerente: 'Gilberto', 56 | estagiario: 'Fernanda', 57 | senior: 'Paulo', 58 | pleno: 'Camila', 59 | junior: 'Adão', 60 | [Symbol.iterator]: function* () { 61 | yield this.gerente; 62 | yield this.estagiario; 63 | yield this.senior; 64 | yield this.pleno; 65 | yield this.junior; 66 | } 67 | } 68 | 69 | for(let integrante of equipe) { 70 | console.log(integrante); 71 | } 72 | ``` 73 | -------------------------------------------------------------------------------- /Capítulo 20 - Metraprogramação com proxies/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Praticamenteo um sósia 4 | **R:** Proxies são objetos que representam outros objetos e através da metaprogração conseguem interceptar e customizar operações fundamentais em objetos, como: 5 | - Acessar e setar um propriedade (nova ou não) 6 | - Enumerar e deletar propriedades 7 | 8 | ## Exercício 2 - Meta o quê? 9 | **R:** Podemos nos arriscar a definir que a metaprogramação nada mais é que a programação de programas que manipulam a si mesmo e/ou a outros programas. Um metaprograma é todo programa que atua sobre ele mesmo ou outro, seja no formato fonte, binário ou em uma representação abstrata em memória. 10 | 11 | ## Exercício 3 - Sorria, você está sendo filmado 12 | ``` javascript 13 | const livroProxy = new Proxy(Livro, { 14 | get(alvo, prop) { 15 | console.log(`${prop} foi acessada`); 16 | return alvo[prop]; 17 | } 18 | }); 19 | 20 | livroProxy.titulo; // titulo foi solicitado! 21 | livroProxy.autor; // autor foi solicitado! 22 | ``` 23 | 24 | ## Exercício 4 - Aqui você não seta nada! 25 | ``` javascript 26 | const livroProxy = new Proxy(Livro, { 27 | get(alvo, prop) { 28 | console.log(`${prop} foi acessada`); 29 | return alvo[prop]; 30 | }, 31 | 32 | set(alvo, prop) { 33 | console.log(`${prop} foi setada`); 34 | return alvo[prop]; 35 | } 36 | }); 37 | 38 | 39 | livroProxy.titulo; // titulo foi solicitado! 40 | livroProxy.autor; // autor foi solicitado! 41 | 42 | livroProxy.titulo = 'ECMAScript 7'; // titulo foi setada! 43 | ``` 44 | 45 | ## Exercício 5 - Só aceitamos dinheiro vivo 46 | ``` javascript 47 | const validador = { 48 | set(Compras, propriedade, valor) { 49 | let valorAPagar = Compras.valorAPagar; 50 | console.log(valorAPagar); 51 | if(propriedade === 'valorPago' && valor < valorAPagar) { 52 | throw new TypeError('Valor insuficiente!'); 53 | } 54 | 55 | Compras[propriedade] = valor; 56 | } 57 | } 58 | 59 | let comprasValidador = new Proxy({}, validador); 60 | comprasValidador.valorAPagar = 100; 61 | comprasValidador.valorPago = 10; // Valor insuficiente! 62 | ``` 63 | 64 | ## Exercício 6 - Fim da farsa, Usurpadora! 65 | ``` javascript 66 | const usurpadora = { 67 | get(PaolaBracho, propriedade) { 68 | if(propriedade === 'dinheiro' || propriedade === 'marido') { 69 | console.log('A Usurpadora está atacando!'); 70 | } 71 | } 72 | } 73 | 74 | const {proxy:paola, revoke} = Proxy.revocable({}, usurpadora); 75 | paola.dinheiro; // A Usurpadora está atacando! 76 | 77 | revoke(); 78 | 79 | paola.marido; // TypeError: Cannot perform 'get' on a proxy that has been revoked 80 | ``` 81 | -------------------------------------------------------------------------------- /Capítulo 08 - Declaração de variáveis com const e let/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios iremos exercitar como utilizar a declaração de variáveis utilizando o `const` e o `let` 4 | 5 | ## Exercício 1 - Sei tudo sobre variáveis 6 | Considere o trecho de código abaixo e responda as questões: 7 | 8 | ``` javascript 9 | var arrayFuncoes = []; 10 | for(var i = 0; i < 10; i++){ 11 | arrayFuncoes.push(function(){ 12 | console.log(i); 13 | }); 14 | } 15 | 16 | arrayFuncoes.forEach(function(funcao){ 17 | funcao(); 18 | }); 19 | ``` 20 | a) Quais os valores são exibidos no console na execução desse código? 21 | b) Como podemos ajustar o comportamento desta função utilizando ES6? 22 | 23 | ## Exercício 2 - ISSO_EH_UMA_CONSTANTE 24 | Uma prática comum dos desenvolvedores é deixar o nome das variáveis que representam constantes em caixa alta. Como por exemplo, uma variável que armazena uma chave de API de um webservice. Com o ES6, temos uma maneira melhor de representar isso. Que maneira é essa? 25 | 26 | ## Exercício 3 - Eu estou mandando atribuir! 27 | Um programador júnior de uma empresa de software está tentando executar o seguinte código: 28 | 29 | ``` javascript 30 | function nomeCompleto(primeiroNome, segundoNome){ 31 | const nomeCompleto = primeiroNome; 32 | nomeCompleto += ' ' + segundoNome; 33 | 34 | return nomeCompleto; 35 | } 36 | ``` 37 | 38 | Ele não consegue entender o que está fazendo de errado. No que ele está errando? 39 | 40 | ## Exercício 4 - Não estou entendendo mais nada 41 | Uma jovem programadora pensou que havia entendido como funcionava a declaração de variáveis com `let` e `const` até ver o seguinte trecho de código: 42 | ``` javascript 43 | const jogador = {}; 44 | jogador.nome = 'Rodrigo'; 45 | jogador.idade = 33; 46 | 47 | console.log(jogador.nome + '_' + jogador.idade); // saída: Rodrigo_33 48 | ``` 49 | 50 | Ela achou que este código não funcionaria, pois havia entendido que não era possível colocar novos valores em variáveis declaradas com `const`. Por que este código funciona sem problemas? 51 | 52 | ## Exercício 5 - Lá vem um temporal 53 | O que significa o _Temporal Dead Zone_? Qual sua relação com o _Hoisting_? 54 | 55 | ## Exercício 6 - Tudo fora de escopo 56 | Refatore o código a seguir utilizando o `const` e `let`. 57 | ``` javascript 58 | var status = [ 59 | { codigo: 'OK', resposta: 'Sucesso' }, 60 | { codigo: 'FAILED', resposta: 'Erro' }, 61 | { codigo: 'PENDING', resposta: 'Pendente' } 62 | ]; 63 | var mensagem = ''; 64 | var codigoAtual = 'OK'; 65 | 66 | for (var i = 0; i < status.length; i++) { 67 | if (status[i].codigo === codigoAtual) { 68 | mensagem = status[i].resposta; 69 | } 70 | } 71 | 72 | console.log(mensagem); 73 | ``` 74 | -------------------------------------------------------------------------------- /Capítulo 06 - As novas estruturas de Map e WeakMap/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios iremos exercitar como utilizar as estruturas de Map e WeakMap 4 | 5 | ## Exercício 1 - Você tem esse produto? 6 | Crie um método chamado `possuiProduto` que recebe dois parâmetros: 7 | - produtos: Mapa com nome e preço dos produtos (ex: 'Feijão: 2.30') 8 | - produtoDesejado: String que representa o nome do produto desejado 9 | 10 | Faça com o método retorne `true` caso o produto esteja contido no mapa, caso contrário, devolva `false`. 11 | 12 | Considere o mapa a seguir: 13 | ``` javascript 14 | var produtos = new Map(); 15 | produtos.set('Arroz', 7.10); 16 | produtos.set('Feijão', 2.30); 17 | produtos.set('Macarrão', 4.70); 18 | produtos.set('Refrigerante', 3.00); 19 | ``` 20 | 21 | ## Exercício 2 - Comprinhas online 22 | Implemente o método 'calculaValorTotalDaCompra' que recebe quatro parâmetros: 23 | - produtos: Lista com o nome dos produtos comprados 24 | - cidade: String que representa o nome da cidade 25 | - caixa: Mapa que contém relação de produtos e preços 26 | - fretes: Mapa que contém relação de cidades e fretes 27 | 28 | Calcule o preço total da compra junto com o frete de acordo com as tabelas a seguir: 29 | 30 | Produtos: 31 | 32 | |Produto|Preço| 33 | |----|----| 34 | |Arroz|7.10| 35 | |Feijão|2.30| 36 | |Macarrão|4.70| 37 | |Refrigerante|3.00| 38 | 39 | Fretes: 40 | 41 | |Cidade|Frete| 42 | |----|----| 43 | |São Paulo|10.10| 44 | |Rio de Janeiro|12.30| 45 | |Brasília|14.70| 46 | |Outros|13.00| 47 | 48 | * Exemplo: calculaValorTotalDaCompra(['Arroz'], 'São Paulo', caixa, fretes) → 7.20 49 | 50 | ## Exercício 3 - Não sei qual algoritmo usar hoje 51 | Em que situações devemos usar uma implementação de `Map` ao invés de uma implementação de objeto literal? 52 | 53 | ## Exercício 4 - Professor, quando eu vou usar isso na minha vida? 54 | Cite um exemplo de uso para a estrutura de `WeakMap`. 55 | 56 | ## Exercício 5 - Não vou mais com a sua cara. 57 | Implemente o método `deletaAmigos` que recebe dois parâmetros: 58 | - amigos: Mapa com relação de nome e informações sobre os amigos 59 | - exAmigos: Lista com nome dos amigos que deve ser deletado 60 | 61 | Para cada nome em `exAmigos`, você deve: 62 | - Verificar se nome consta na lista. Se sim, deletá-lo e imprimir no console: " foi deletado!" 63 | - Se o nome não estiver no mapa de amigos, exibir no console para o usuário: " não é seu amigo!" 64 | 65 | Considere os seguintes amigos para este exercícios: 66 | 67 | Amigos: 68 | 69 | |Nome|Dados| 70 | |----|----| 71 | |João Silva|idade: 23, sexo: masculino| 72 | |Luisa Pimenta|idade: 18, sexo: feminino| 73 | |Julio Marinho|idade: 52, sexo: masculino| 74 | |Marcela Mel|idade: 27, sexo: feminino| 75 | -------------------------------------------------------------------------------- /Capítulo 19 - Operações assíncronas com promises/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Promessa verdadeira 4 | **R:** Promises são objetos que nos auxiliam a trabalhar com operações assíncronas. Este tipo de objeto aguarda a operação ser completada e oferece uma resposta positiva (resolvida) para quando realizada com sucesso, ou negativa caso algo tenha ocorrido algum erro no processo (rejeitada). 5 | 6 | ## Exercício 2 - E que tudo mais vá para o inferno 7 | **R:** Este nome foi dado para a situação na qual temos várias chamadas assíncronas que dependem uma da outra. Como as operações assíncronas ocorrem simultaneamente e respondem em tempos diferentes, torna-se uma tarefa extremamente árdua para o desenvolver entender o que acontece na execução deste código. As Promises foram criadas para que o desenvolvedor possa lidar melhor com as inúmeras chamadas assíncronas no código. 8 | 9 | ## Exercício 3 - Você cumpre as suas promessas? 10 | ``` javascript 11 | function simulaPromise(sucesso = true) { 12 | let promise = new Promise((resolve, reject) => { 13 | if(sucesso) { 14 | resolve("ok"); 15 | } else { 16 | reject("not ok"); 17 | } 18 | }); 19 | 20 | promise.then(data => console.log(`${data}`)); 21 | promise.catch(data => console.log(`${data}`)); 22 | } 23 | 24 | simulaPromise(); // ok 25 | simulaPromise(true); // ok 26 | simulaPromise(false); // not ok 27 | ``` 28 | 29 | ## Exercício 4 - Você cumpre as suas promessas em tempo? 30 | ``` javascript 31 | function simulaPromise(sucesso = true, delay = 0) { 32 | let promise = new Promise((resolve, reject) => { 33 | setTimeout(() => { 34 | if(sucesso) { 35 | resolve("ok"); 36 | } else { 37 | reject("not ok"); 38 | } 39 | }, delay); 40 | }); 41 | 42 | promise.then(data => console.log(`${data}`)); 43 | promise.catch(data => console.log(`${data}`)); 44 | } 45 | 46 | simulaPromise(true, 2000); // ok 47 | simulaPromise(false, 1000); // not ok 48 | 49 | // ordem que aparece no console 50 | // not ok 51 | // ok 52 | ``` 53 | 54 | ## Exercício 5 - Passando promessa de pai para filho 55 | **R:** O problema é que na execução do segundo `then`, o resultado da variável `data` será `undefined`. Isso acontece porque o valor da variável `data`, disponível na primeira chamada, não é passada adiante. Para resolver isso, basta fazer a seguinte alteração: 56 | 57 | ``` javascript 58 | // ... 59 | promise 60 | .then((data) => { 61 | console.log(`resultado positivo: ${data}`); 62 | return data; 63 | }) 64 | .then((data) => console.log(`resultado positivo 2: ${data}`)) 65 | .catch((data) => console.log(`resultado negativo: ${data}`)); 66 | ``` 67 | -------------------------------------------------------------------------------- /Capítulo 22 - Novidades do ES8/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios vamos rever como funcionam as novidades trazidas pelo ES8 (ES2017). 4 | 5 | ## Exercício 1 - Tim tim por tim tim 6 | Escreva uma função chamada `mapeiaObjeto` que recebe um objeto literal como parâmetro. A função deve retornar um mapa descrevendo todas as propriedades desta objeto, onde a chave é o nome da propriedade e o valor, o respectivo valor da propriedade. 7 | 8 | Exemplo: 9 | 10 | * mapeiaObjeto({nome: 'joão bobão'}) → mapa.get('nome'); // 'joão bobão' 11 | 12 | ## Exercício 2 - Quero os dados completos 13 | Escreva uma função `detalhaObjeto` que recebe um objeto literal como parâmetro e então exibe, para cada propriedade, uma linha no console no formato: `propriedade: valor`. Não se esqueça de usar as funcionalidade do ES6, como o desestruturamento, loop for...of e template literais. 14 | 15 | Exemplo: 16 | 17 | * detalhaObjeto({rua: 'oscar freire'}) → rua: oscar freire 18 | 19 | ## Exerício 3 - Ih, não deu ._. 20 | Qual o caso em que o `Object.entries` não funciona? 21 | 22 | ## Exercício 4 - Prove o seu valor 23 | Crie uma função chamada `somenteValores` que recebe um objeto literal e mostra no console, para cada propriedade, uma linha no console mostrando o valor da propriedade correspondente. 24 | 25 | ## Exercício 5 - Todos para a direita! 26 | Crie uma função chamada `tudoParaADireita` que recebe dois parâmetros: o primeiro é um array de strings; o segundo é o tamanho máximo em que as palavras devem ser empurradas para a direita. Esse valor precisa ser maior ou igual ao ao tamanho da palavra mais cumprida do primeiro parâmetro. A função deve alinhar todos os textos para a direita. 27 | 28 | Exemplo: 29 | 30 | ``` javascript 31 | tudoParaADireita([ 32 | 'carro', 'avião', 'foguete', 'helicóptero' 33 | ], 11); 34 | 35 | /* 36 | carro 37 | avião 38 | foguete 39 | helicóptero 40 | ``` 41 | 42 | ## Exercício 6 - Eu disse direita? Quis dizer esquerda! 43 | Faça um método semelhante ao do exercício anterior, mas chame-o de `tudoParaAEsquerda` e faça com o texto seja alinhado para a esquerda e preencha o espaço restante com hífen "-". 44 | 45 | Exemplo: 46 | 47 | ``` javascript 48 | function tudoParaAEsquerda(palavras, tamanho) { 49 | palavras.forEach(palavra => { 50 | console.log(palavra.padEnd(tamanho,'-')); 51 | }) 52 | } 53 | 54 | tudoParaAEsquerda([ 55 | 'carro', 'avião', 'foguete', 'helicóptero' 56 | ], 11); 57 | 58 | /* 59 | carro------ 60 | avião------ 61 | foguete---- 62 | helicóptero 63 | */ 64 | ``` 65 | 66 | ## Exercício 7 - Quais enumeráveis eu tenho na minha mão? 67 | Crie uma função de nome `quantidadePropriedadesEnumeraveis` que recebe um objeto literal e retorna o número de propriedade enumeráveis deste objeto. 68 | 69 | Exemplo: 70 | 71 | * quantidadePropriedadesEnumeraveis({nome: 'jão'}); // 1 -------------------------------------------------------------------------------- /Capítulo 22 - Novidades do ES8/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Tim tim por tim tim 4 | ``` javascript 5 | function mapeiaObjeto(objeto) { 6 | return new Map(Object.entries(objeto)); 7 | } 8 | 9 | const mapa = detalhaObjeto( 10 | { 11 | nome: 'joão bobão', 12 | idade: 32, 13 | sexo: 'masculino' 14 | } 15 | ); 16 | 17 | mapa.get('nome'); // 'joão bobão 18 | mapa.get('idade'); // 32 19 | mapa.get('sexo'); // masculino 20 | ``` 21 | 22 | ## Exercício 2 - Queros dados completos 23 | ``` javascript 24 | function detalhaObjeto(objeto) { 25 | for (let [chave, valor] of Object.entries(objeto)) { 26 | console.log(`${chave}: ${valor}`); 27 | } 28 | } 29 | 30 | detalhaObjeto( 31 | { 32 | nome: 'joão bobão', 33 | idade: 32, 34 | sexo: 'masculino' 35 | } 36 | ); 37 | 38 | /* 39 | nome: joão bobão 40 | idade: 32 41 | sexo: masculino 42 | */ 43 | ``` 44 | 45 | ## Exerício 3 - Ih, não deu ._. 46 | **R:** Quando há um símbolo como chave. Como por exemplo: 47 | ``` javascript 48 | Object.entries({ [Symbol()]: 123}); 49 | // [ [ ] ] 50 | ``` 51 | 52 | ## Exercício 4 - Prove o seu valor 53 | ``` javascript 54 | function somenteValores(objeto) { 55 | for (let valor of Object.values(objeto)) { 56 | console.log(valor); 57 | } 58 | } 59 | 60 | somenteValores( 61 | { 62 | nome: 'joão bobão', 63 | idade: 32, 64 | sexo: 'masculino' 65 | } 66 | ); 67 | 68 | /* 69 | joão bobão 70 | 32 71 | masculino 72 | */ 73 | ``` 74 | 75 | ## Exercício 5 - Tudo para a direita! 76 | ``` javascript 77 | function tudoParaADireita(palavras, tamanho) { 78 | palavras.forEach(palavra => { 79 | console.log(palavra.padStart(tamanho)); 80 | }) 81 | } 82 | 83 | tudoParaADireita([ 84 | 'carro', 'avião', 'foguete', 'helicóptero' 85 | ], 11); 86 | 87 | /* 88 | carro 89 | avião 90 | foguete 91 | helicóptero 92 | */ 93 | ``` 94 | 95 | ## Exercício 6 - Eu disse direita? Eu quis dizer esquerda! 96 | ``` javascript 97 | function tudoParaAEsquerda(palavras, tamanho) { 98 | palavras.forEach(palavra => { 99 | console.log(palavra.padEnd(tamanho,'-')); 100 | }) 101 | } 102 | 103 | tudoParaAEsquerda([ 104 | 'carro', 'avião', 'foguete', 'helicóptero' 105 | ], 11); 106 | 107 | /* 108 | carro------ 109 | avião------ 110 | foguete---- 111 | helicóptero 112 | */ 113 | ``` 114 | 115 | ## Exercício 7 - Quantos enumeráveis eu tenho na minha mão? 116 | ``` javascript 117 | function quantidadePropriedadesEnumeraveis(objeto) { 118 | let contador = 0; 119 | const propsDescriptors = Object.getOwnPropertyDescriptors(objeto); 120 | for(let [chave,] of Object.entries(objeto)) { 121 | if(propsDescriptors[chave].enumerable) contador++; 122 | } 123 | 124 | return contador; 125 | } 126 | 127 | quantidadePropriedadesEnumeraveis({nome: 'jão'}); // 1 128 | ``` -------------------------------------------------------------------------------- /Capítulo 15 - Desestruturamento de Arrays e Objetos/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios vamos revisar como o desestruturamento de objetos funciona. 4 | 5 | ## Exercício 1 - Desestruturando a definição 6 | De forma resumida, defina o que é o desestruturamento. 7 | 8 | ## Exercício 2 - Pegando a propriedade na lata 9 | Refatore o trecho de código a seguir para utilizar a técnica de desestruturamento. 10 | 11 | ``` javascript 12 | const email = usuario.email; 13 | const nome = usuario.nome; 14 | const idade = usuario.idade 15 | ``` 16 | 17 | ## Exercício 3 - Não gostei desse nome não 18 | Considere o objeto literal `usuario` e extraia as propriedades `nome` e `email` em variáveis com o nome `nick` e `login`, respectivamente. 19 | 20 | ``` javascript 21 | const usuario = { 22 | nome: 'Toreto', 23 | email: 'velozesefuriososparasempre@gmail.com' 24 | } 25 | ``` 26 | 27 | ## Exercício 4 - Minha mãe mandou eu escolher esse daqui... 28 | Considere a lista de contatos a seguir: 29 | ``` javascript 30 | const contatos = [ 31 | { 32 | nome: 'Mario Antonio', 33 | numero: '1234-5678' 34 | }, 35 | { 36 | nome: 'Reinalda Silva', 37 | numero: '1234-6789' 38 | }, 39 | { 40 | nome: 'Bárbara Lopes', 41 | numero: '1234-5567' 42 | } 43 | ]; 44 | ``` 45 | 46 | Utilizando a técnica de desestruturamento de arrays, obtenha somente os dados do segundo contato. 47 | 48 | ## Exercício 5 - Cara-Crachá 49 | Otimize o trecho de código a seguir utilizando o desestruturamento. 50 | ``` javascript 51 | const profissional = { 52 | titulo: 'Engenheiro de Software', 53 | departamento: 'Engenharia' 54 | }; 55 | 56 | function isEngenheiro(profissional) { 57 | const titulo = profissional.titulo; 58 | const departamento = profissional.departamento; 59 | 60 | return titulo.indexOf("Engenheiro") > -1 && departamento === 'Engenharia'; 61 | } 62 | 63 | isEngenheiro(profissional); // true 64 | profissional.titulo = 'Marketing'; 65 | isEngenheiro(profissional); // false 66 | ``` 67 | 68 | ## Exercício 6 - Mas o que são estes dados!? 69 | O seu sistema escolar contém uma série de informações armazenadas em arrays no seguinte formato: 70 | 71 | ``` javascript 72 | const corpoDocente = [ 73 | [ 'Gramática', '9:00', 'Sueli' ], 74 | [ 'Matemática', '10:15', 'Amilton'], 75 | [ 'Educação Física', '11:30', 'Bruno' ] 76 | ]; 77 | ``` 78 | 79 | Para o usuário final, é necessário que a informação seja apresentada de uma forma mais adequada, identificando o que significa cada um dos itens. Implemente o método `mostraGradeProfessores()` quer recebe um array de arrays no formato do objeto `corpoDocente` e devolve, para cada item, a seguinte mensagem no console: 80 | 81 | ``` javascript 82 | "Aula de às com professor(a) " 83 | ``` 84 | 85 | ## Exercício x - Converta do modelo 1 para o modelo 2 utilizando desestruturamento de objetos e arrays. 86 | ``` javascript 87 | // modelo1 88 | const pontos = [ 89 | [1,2], 90 | [3,4], 91 | [5,6] 92 | ]; 93 | 94 | // modelo 2 95 | const pontos = [ 96 | {x:1, y:2}, 97 | {x:3, y:4}, 98 | {x:5, y:6}, 99 | ] 100 | ``` 101 | -------------------------------------------------------------------------------- /Capítulo 03 - Métodos auxiliares para Array/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Par ou ímpar? 4 | ``` javascript 5 | var numeros = [0,1,2,3,4,5]; 6 | numeros.forEach(function(numero){ 7 | if(numero % 2 === 0) { 8 | console.log(numero + ' é par'); 9 | } else { 10 | console.log(numero + ' é ímpar'); 11 | } 12 | }); 13 | ``` 14 | 15 | ## Exercício 2 - Quero o dobro 16 | ``` javascript 17 | function dobrar(numeros) { 18 | return numeros.map(function(numero){ 19 | return numero * 2; 20 | }); 21 | } 22 | ``` 23 | 24 | ## Exercício 3 - NÃO ESTOU BRAVO 25 | ``` javascript 26 | function caps(palavras) { 27 | return palavras.map(function(palavra){ 28 | return palavra.toUpperCase(); 29 | }); 30 | } 31 | ``` 32 | 33 | ## Exercício 4 - Equilibrio de parênteses 34 | ``` javascript 35 | function validaParenteses(parenteses) { 36 | var arrayParenteses = parenteses.split(""); // reduce só funciona com arrays 37 | /** 38 | * Vamos utilizar números para essa solução. Para cada parêntese esquerdo, vamos 39 | * somar 1 e para cada parêntese direito vamos subtrair um 40 | **/ 41 | var balanceado = !arrayParenteses.reduce(function(soma, parentese) { 42 | if(soma < 0) { return soma } // para o caso de começar com ")" 43 | if(parentese === "(") { return ++soma } 44 | if(parentese === ")") { return --soma } 45 | }, 0); 46 | 47 | return balanceado; 48 | } 49 | ``` 50 | 51 | ## Exercício 5 - Sem duplicações 52 | ``` javascript 53 | function removeDuplicatas(numeros) { 54 | return numeros.reduce(function(anterior, valor) { 55 | var achouDuplicata = anterior.find(function(valor2){ 56 | return valor === valor2; 57 | }); 58 | 59 | if(!achouDuplicata){ 60 | anterior.push(valor); 61 | } 62 | 63 | return anterior; 64 | }, []); 65 | } 66 | ``` 67 | 68 | ## Exercício 6 - Reprovado! 69 | ``` javascript 70 | function aprovados(alunos, media) { 71 | return alunos.filter(function(aluno){ 72 | return aluno.media >= media; 73 | }); 74 | } 75 | ``` 76 | 77 | ## Exercício 7 - Dados precisos 78 | ``` javascript 79 | function buscar(propriedade, valor, lista) { 80 | return lista.find(function(item) { 81 | return item[propriedade] === valor; 82 | }); 83 | } 84 | ``` 85 | 86 | ## Exercício 8 - Calculadora Humana 87 | ``` javascript 88 | function calculaAreaTotal(dimensoes) { 89 | return dimensoes.reduce(function(anterior, valor) { 90 | return anterior + (valor.altura * valor.comprimento); 91 | }, 0); 92 | } 93 | ``` 94 | 95 | ## Exercício 9 - Raízes Quadradas 96 | ``` javascript 97 | function calculaRaizesQuadradas(numeros) { 98 | return numeros.map(function(numero) { 99 | return Math.sqrt(numero); 100 | }); 101 | } 102 | ``` 103 | 104 | ## Exercício 10 - E tem alguma diferença? 105 | Os dois métodos iteram toda a lista e tem a assinatura de método semelhante, no entanto, o `map` é capaz de nos devolver um array com valores que resultam da iteração de cada um dos valores do array original. Para cada item do array original, há um item no array resultante. O `forEach` não é capaz de fazer isso naturalmente. Logo, o `forEach` é útil quando o objetivo é somente iterar os itens de uma lista, como por exemplo, exibir todos os valores no console (`console.log`). Já o `map`, é mais apropriado para quando precisamos alterar os valores do array. Com ele, conseguimos alterar os valores sem danificar o array original. 106 | 107 | 108 | ## Exercício 11 - A pequena ovelha Dolly 109 | ``` javascript 110 | function clonaObjeto(alvo) { 111 | var propriedades = Object.getOwnPropertyNames(alvo); 112 | var copia = {}; 113 | propriedades.forEach(function(propriedade) { 114 | copia[propriedade] = alvo[propriedade]; 115 | }); 116 | 117 | return copia; 118 | } 119 | ``` 120 | 121 | ## Exercício 12 - Limpando o estoque 122 | ``` javascript 123 | function existeProdutosDatados(produtos, data) { 124 | var dataReferencia = new Date(); 125 | if(data) dataReferencia = new Date(data); 126 | return produtos.some(function(produto) { 127 | return new Date(produto.dataValidade) < dataReferencia; 128 | }); 129 | } 130 | ``` 131 | -------------------------------------------------------------------------------- /Capítulo 03 - Métodos auxiliares para Array/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | Nestes exercícios iremos exercitar os métodos auxiliares para array: 4 | * forEach 5 | * map 6 | * filter 7 | * find 8 | * every 9 | * some 10 | * reduce 11 | 12 | ## Exercício 1 - Par ou ímpar? 13 | Altere o código a seguir para utilizar o método `forEach` de modo que a saída permaneça a mesma. 14 | 15 | ``` javascript 16 | var numeros = [0,1,2,3,4,5]; 17 | for(var i = 0; i<= numeros.length; i++) { 18 | if(i % 2 === 0) { 19 | console.log(i + ' é par'); 20 | } else { 21 | console.log(i + ' é ímpar'); 22 | } 23 | } 24 | 25 | // saída: 26 | // 0 é par 27 | // 1 é ímpar 28 | // 2 é par 29 | // 3 é ímpar 30 | // 4 é par 31 | // 5 é ímpar 32 | ``` 33 | 34 | ## Exercício 2 - Quero o dobro 35 | Utilizando o método `map`, escreva o método `dobrar` que recebe um array de números inteiros e retorna um array com todos os valores do array original dobrados. 36 | 37 | * Exemplo: dobrar([1,2,3]) → [2,4,6] 38 | 39 | ## Exercício 3 - NÃO ESTOU BRAVO 40 | Escreva o método `caps` que recebe um array de strings e retorna um outro array com todas as strings do array original em CAIXA ALTA. 41 | 42 | * Exemplo: caps(['oi', 'tudo', 'bem?']) → ['OI', 'TUDO', 'BEM?'] 43 | 44 | ## Exercício 4 - Equilibrio de parênteses 45 | Utilizando a função auxiliar `reduce`, escreva uma função chamada `validaParenteses` que avalia se os parênteses estão balanceados. Isso significa que, pra cada parênteses esquerdo “(“ é necessário ter um parênteses direito “)” correspondente. A função deve aceitar uma `string` e retornar um valor booleano (true ou false). 46 | 47 | * Exemplo: validaParenteses(')((()()())))'); → false 48 | * Exemplo: "()()()" → true 49 | * Exemplo: ")(" → false 50 | 51 | ## Exercício 5 - Sem duplicações 52 | Faça uma função chamada `removeDuplicatas` que recebe um array de números inteiros e remove todas as suas duplicadas. 53 | 54 | Utilize as funções auxiliares: `reduce` e `find`. 55 | 56 | * Exemplo: removeDuplicatas([1,2,3,3,4,5]) → [1,2,3,4,5] 57 | 58 | ## Exercício 6 - Reprovado! 59 | Dada uma lista de objetos que contém o nome de um aluno e sua média final, crie o método 'aprovados' que recebe esta lista e retorna somente os alunos que foram aprovados. 60 | 61 | Para isto, utilize o método `filter`. 62 | 63 | ``` javascript 64 | var alunos = [ 65 | { nome: 'Diogo', media: 5.5 }, 66 | { nome: 'Julia', media: 9.5 }, 67 | { nome: 'Roberto', media: 1.5 }, 68 | { nome: 'Tiago', media: 6.0 } 69 | ]; 70 | ``` 71 | 72 | * Exemplo: aprovados(alunos, 6.5) → [ { nome: 'Julia', media: 9.5 } ] 73 | 74 | ## Exercício 7 - Dados precisos 75 | Crie uma função `buscar` que recebe três parâmetros: 76 | - propriedade: Nome da propriedade no objeto 77 | - valor: Valor da propriedade no objeto 78 | - lista: Lista de objetos onde a busca deve ser executada 79 | 80 | Dado estes parâmetros, a função deve buscar na lista e retornar o registro que possui a propriedade com o valor especificado. 81 | 82 | Utilize o método `find`. 83 | 84 | ``` javascript 85 | var lista = [ 86 | { nome: 'Tânia', sobrenome: 'Cardoso', idade: 65 }, 87 | { nome: 'Emilly', sobrenome: 'Barbosa', idade: 46 }, 88 | { nome: 'Vitória', sobrenome: 'Costa', idade: 83 }, 89 | { nome: 'Erick', sobrenome: 'Ferreira', idade: 16 } 90 | ] 91 | ``` 92 | 93 | * Exemplo: buscar('nome', 'Tânia', lista) → { nome: 'Tânia', sobrenome: 'Cardoso', idade: 65 } 94 | 95 | ## Exercício 8 - Calculadora humana 96 | Crie uma função `calculaAreaTotal` que recebe um parâmetro: 97 | - dimensoes: objeto que possui as propriedades `altura` e `comprimento` que são números inteiros 98 | 99 | A função deve retornar a soma de todas as áreas. 100 | Tome como base a entrada a seguir: 101 | 102 | ``` javascript 103 | var dimensoes = [ 104 | { altura: 10, comprimento: 20}, 105 | { altura: 2, comprimento: 4}, 106 | { altura: 1, comprimento: 1}, 107 | { altura: 50, comprimento: 50} 108 | ] 109 | ``` 110 | 111 | * Exemplo: calculaAreaTotal(dimensoes) → 2709 112 | 113 | ## Exercício 9 - Raízes quadradas 114 | Crie uma função chamada `calculaRaizesQuadradas` que recebe um array de números inteiros positivos e devolve um outro array com as raízes quadradas correspondentes de cada um dos itens. 115 | 116 | * para este exercício, assuma que a entrada terá somente números com raiz exata. 117 | * utilize a função Math.sqrt para calcular a raiz quadrada 118 | 119 | ## Exercício 10 - E tem alguma diferença? 120 | Diga, em poucas palavras, qual a diferença entre os métodos auxiliares `forEach` e `map`. 121 | 122 | ## Exercício 11 - A pequena ovelha Dolly 123 | Utilizando o método auxiliar `forEach`, crie uma função `clonaObjeto` que recebe como parâmetro um objeto e cria uma cópia exata dela. 124 | 125 | * utilize o método `Object.getOwnPropertyNames` para obter as propriedades do objeto 126 | 127 | ## Exercício 12 - Limpando o estoque 128 | Crie um método chamado `existeProdutosDatados` que recebe um parâmetro chamado `produtos` que é um array de `produtos` e identifica se há algum produto que está acima da data de validade. Caso existe, deve voltar `true`, caso contrário, `false`. Cada produto tem as seguintes características: 129 | - nome: String que representa o nome do produto 130 | - preco: Número que representa o preço do produto 131 | - dataValidade: Data de validade do produto 132 | 133 | O método também deve aceitar um segundo parâmetro `dataReferencia`. Se passado, o método deve fazer a comparação de validade em relação a ele, caso contrário, utiliza a data da execução como parâmetro. 134 | 135 | Tome como exemplo os produtos a seguir: 136 | ``` javascript 137 | var produtos = [ 138 | { nome:'Cereal', preco:'10', dataValidade:'21/02/2017' }, 139 | { nome:'Suco de Abacaxi', preco:'12', dataValidade:'01/01/2017' }, 140 | { nome:'Torta de frango', preco:'25', dataValidade:'07/07/2017' } 141 | ] 142 | ``` 143 | 144 | * Exemplo: existeProdutosDatados(produtos, '2017-03-01') → true 145 | * existeProdutosDatados(produtos,'2016-01-01') → false 146 | --------------------------------------------------------------------------------