Módulo I - Introdução ao ES6

Aula I - História e conceitos

História

Conceitos

//funcoes.jsfunctiongetName(){return'Daniel Negrisoli Batista';}functionlogFn(fn){console.log(fn());}//atribuição a uma variávelconstlogFnResult=logFn;//atribuição a uma estrutura de dadosconstobj={logFn:logFn}//função passada por argumentoslogFnResult(getName);

//escopo.js//escopo global: arquivo todo{//escopo de bloco, dentro dos branchs}functionfn(){//escopo de função}

Aula II - Currying, Hoisting, Imutabilidade, Tipos e Variáveis

Currying

//currying.js//função naturalfunctionsomaFn(a,b){returna+b;}//aplicação do curryingfunctionsomaCurrying(a){returnfunction(b){returna+b;}}//chamada função naturalconsole.log(somaFn(1,1));//chamada função curryingconstresultSoma=somaCurrying(1);console.log(resultSoma(1));

Hoisting

Hoisting de variável

//hoisting-variveis.jsfunctionfnHoistingVar){//Exemplo de variável que não foi ainda 'declarada', devido ao hoisting a váriavel é considerada indefinida ao invés de não declarada (reference error)//nesse console é escrito undefinedconsole.log(text);vartext='Exemplo';//aqui já é retornando stringconsole.log(text);}fnHoistingVar();

Hoisting de função

//hoisting-funcao.jsfunctionfnHoistingFun()){//mesmo a chamada da função aparecer primeiro que a função, não ocorre erro, porém como boa prática é melhor declarar a função antes de usarlog('Hoisting de função');functionlog(value){console.log(value);}}fnHoistingFun();

Imutabilidade

//1-imutabilidade.jsconstuser={name:'Daniel',lastName:'Negrisoli Batista'}//o parâmetro é passado para a função por referência, sendo assim caso ela altere o item o mesmo de onde veio a informação será alterada.functiongetUserWithFullName(user){return{//spread operator    ...user,//literal stringfullName:`${user.name}${user.lastName}`}}constuserWithFullName=getUserWithFullName(user);//o retorno é um novo objeto com as alteraçoes desejadasconsole.log(userWithFullName,user);

//2-imutabilidade.js//lista de alunos com nome e notasconststudents=[{name:'Grace',grade:7},{name:'Jennifer',grade:4},{name:'Paul',grade:10},];//retorno de alunos aprovados com nota superior ou igual a 7functiongetApprovedStudents(studentsList){returnstudentsList.filter(student=>student.grade>=7);}console.log('Alunos aprovados');//retorna uma nova lista com os alunsos aprovadosconsole.log(getApprovedStudents(students));//retorna a lista completa de alunosconsole.log('\nLista de alunos');console.log(students);

Tipos e variáveis

Variáveis

//1-variaveis.jsvarnameVar='Daniel';letnameLet='Daniel';constnameConst='Daniel';console.log(`nameVar :${nameVar}`);console.log(`nameLet :${nameLet}`);console.log(`nameConst :${nameConst}`);

Var

//2-1-variaveis.js//var não respeita o contexto de blocovartest='example';(()=>{//undefined, pois nesse momento não tem valorconsole.log(`Valor dentro do função "${test}"`);if(true){//essa declaração e atribuição sobre para o escopovartest='example';console.log(`Valor dentro do if "${test}"`);}//por isso nesse lugar o test possui o valor atribuido dentro do blococonsole.log(`Valor após a execução do if "${test}"`);})();

Let

//2-2-variaveis.js(()=>{//let respeita o contexto de blocolettest='valor função';console.log(`Valor dentro do função "${test}"`);if(true){//aqui o test não é o mesmo que o anterior, pois ele respeita o contexto de bloco, sendo assim o anterior não tem o valor alterado por esse atribuiçãolettest='valor if';console.log(`Valor dentro do if "${test}"`);}console.log(`Valor após a execução do if "${test}"`);})();

Const

//2-3-variaveis.js(()=>{consttest='valor função';console.log(`Valor dentro do função "${test}"`);if(true){consttest='valor if';console.log(`Valor dentro do if "${test}"`);}console.log(`Valor após a execução do if "${test}"`);})();

//3-variaveis.js//Se for uma const do tipo primitivo,constname='Daniel';//não podemos alterar o valor,name='Daniel';constuser={name:'Daniel'};//mas se for um objeto, podemos trocar suas propriedadesuser.name='Outro nome'//não podemos fazer o objeto "apontar" para outro lugaruser={name:'Guilherme'};constpersons=['Daniel','Pedro','Jennifer'];//podemos adicionar novos itenspersons.push('João');//result ['Daniel', 'Pedro', 'Jennifer', 'João']//podemos remover algum itempersons.shift();//result ['Pedro', 'Jennifer', 'João']//podemos alterar diretamentepersons[1]='James';//result ['Pedro', 'James', 'João']//mas não podemos "apontar" para outro arraypersons=[]console.log('\nArray após as alterações: ',persons);

Módulo II - Tipos, variáveis, operadores, condicionais e repetição em Javascript ES6

Aula I - Tipos e variáveis

Tipos

//1-string.js//retorna o tamanho de uma stringconsttextSize='Texto'.length;console.log(`Quantidade de letras:${textSize}`)//retorna um array quebrando a string por um delimitadorconstsplittedText='Texto'.split('x');console.log('\nArray com as posições separadas pelo delimitador: ',splittedText);//busca por um valor e substitui por outroconstreplacedText='Texto'.replace('Text','txeT');console.log('\nSubstituição de valor: ',replacedText);//retorna a "fatia" de um valorconstlastChar='Texto'.slice(-1);console.log('\nÚltima letra de uma string: ',lastChar);constallWithoutLastChar='Texto'.slice(0,-1);console.log('\nValor da string da primeira letra menos a última: ',allWithoutLastChar);constsecondToEnd='Texto'.slice(1);console.log('\nValor da string da segunda letra até a última: ',secondToEnd);//retorna N caracteres a partir de uma posiçãoconsttwoCharsBeforeFirstPosition='Texto'.substr(0,2);console.log('\nAs duas primeiras letras são : ',twoCharsBeforeFirstPosition);

//1-number.jsconstmyNumber=12.4032;//transformar número para stringconstnumberAsString=myNumber.toString();console.log('Número trasnformado em string: ',numberAsString,typeofnumberAsString);//retorna número com um número de casas decimaisconstfixedTwoDecimals=myNumber.toFixed(2);console.log('\nNúmero com duas casa decimais: ',fixedTwoDecimals);//transforma uma string em floatconsole.log('\nString convertida para float: ',parseFloat('13.22'));//transforma uma string em intconsole.log('\nString convertida para int: ',parseInt('13.20'));

//1-boolean.jsconstisActive=true;console.log('Tipo de variável :',typeofisActive)

//1-null.jsconstnullVariable=null;console.log('nullVariable :',typeofnullVariable)

//1-undefined.jsconstundefinedVariable=true;console.log('Tipo de variável :',typeofundefinedVariable)

//1-symbol.jsconstsymbol1=Symbol();constsymbol2=Symbol();//symbols são únicosconsole.log('symbols1 é igual a symbols2: ',symbol1===symbol2);//prevenir conflito entre nomes de propriedadesconstnameSymbol1=Symbol('name');constnameSymbol2=Symbol('name');constuser={[nameSymbol1]:'Daniel',[nameSymbol2]:'Outro nome',lastName:'Negrisoli Batista'}console.log(user);//symbols criam propriedades que não são enuberablesfor(constkeyinuser){if(user.hasOwnPoperty(key)){console.log(`\nValor da chave${key}:${user[key]}`);}}console.log('Propriedades do objeto user: ',Object.keys(user));console.log('Valores das propriedades do objeto user: ',Object.values(user));//exibir symbols de um objetoconsole.log('Symbols registrados no objeto user: ',Object.getOwnPropertySymbols(user));//acessando todas as propriedades do objetoconsole.log('Todas propriedads do objeto user: ',Reflect.ownKeys(user));//criar um enumconstdirections={UP:Symbol('UP'),DOWN:Symbol('DOWN'),LEFT:Symbol('LEFT'),RIGHT:Symbol('RIGHT')};

//1-object.jsletuser={name:'Daniel'};console.log(user);//alterando a propriedade de um objetouser.name='Outro nome 1';console.log(user);user['name']='Outro nome 2';console.log(user);constprop='name';user[prop]='Outro nome 3';console.log(user);//criando uma propriedadeuser.lastName='Negrisoli Batista';console.log(user);//deletando uma propriedadedeleteuser.name;console.log(user);

//2-object.jsletuser={name:'Daniel',lastName:'Negrisoli Batista'};//recupera as chaves do objetoconsole.log('Propriedades do objeto user: ',Object.keys(user));//recupera os valores das chaves do objetoconsole.log('\Valores das propriedades do objeto user: ',Object.values(user));//retorna um array de arrays contendo [nome.prop, valor.prop]console.log('\Lista de propriedades e valores: ',Object.entries(user));//merge de propriedades de objetosObject.assign(user,{fullName:'Daniel Negrisoli Batista'});console.log('\nAdiciona a propriedade fullName no objeto user: ',user);console.log('\Retorna um novo objeto mergeando dois ou mais objetos: ',Object.assign({},user,{age:36}));//previne todas as alterações em um objetoconstnewObj={foo:'bar'};Object.freeze(newObj);newObj.foo='change';deletenewObj.foo;newObj.bar='foo';console.log('\nVariável newObj após as alterações: ',newObj);//permite apenas a alteração de propriedades existetnes em um objetoconstperson={name:'Daniel'};Object.seal(person);person.name='Daniel Negrisoli Batista';deleteperson.name;person.age=36;console.log('\nVariável person após as alterações: ',person);

Aula II - Functions e operadores

Functions

//1-function.jsfunctionfn(){return'Code here';}constarrowFn=()=>'Code here';constarrowFn2=()=>{//mais de uma expressãoreturn'Code here';}//funções também são objetosfn.prop='Posso criar propriedades';console.log(fn());console.log(fn.prop);//receber parâmetrosconstlogValue=value=>console.log(value);constlogFnResult=fnParam=>console.log(fnParam());logFnResult(fn);//receber e retorna funçõesconstcontrolFnExec=>fnParam=>allowed=>{if(allowed){fnParam();}}consthandleFnExecution=controlFnExec(fn);handleFnExecution(true);//executará a função fnhandleFnExecution();//não executará a funçao fn//controlFnExec como funçãofunctioncontrolFnExec(fnParam){returnfunction(allowed){if(allowed){fnParam();}}}

//2-function.js(()=>{this.name='Nome no contexto de criação';constgetNameArrowFn=()=>this.name;functiongetName(){returnthis.name;}constuser={name:'Nome no objeto de execução',  getNameArrowFn,  getName}console.log(user.getNameArrowFn());console.log(user.getName());})();

//1-array.jsconstusers=['Daniel','Pedro','Jennifer'];constgender={MAN:Symbol('M'),WOMAN:Symbol('W')}constpersons=[{name:'Daniel',age:35,gender:gender.MAN},{name:'Pedro',age:44,gender:gender.MAN},{name:'Jennifer',age:18,gender:gender.WOMAN}];//retornar a quantidade de itens de um arrayconsole.log('Items: ',persons.length);//verificar se pe arrayconsole.log('A variável person é um array: ',Array.isArray(persons));//iterar os itens do arraypersons.forEach(person,index,arr=>{console.log(`Nome:${person.name} index:${index}`);});//filtrar arrayconstmens=persons.filter(person=>person.gender===gender.MAN);console.log('\nNova lista apenas com homens: ',mens);//retornar um novoconstpersonWithCourse=persons.map(person=>{person.course='Introdução ao Javascript';returnperson;});console.log('\nPessoal com a adição do curso: ',personWithCourse);//transformar um array em outro tipo (primeiro param é o novo item, o segundo param é o item do array)consttotalAge=persons.reduce((age,person)=>{age+=person.age;returnage;},0);console.log('\nSoma de idade das pessoas: ',totalAge);//justando operaçõesconsttotalEvenAges=persons.filter(person=>person.age%2===0).reduce((age,person)=>{age+=person.age;returnage;},0);console.log('\nSoma de idade das pessoas que possuem idade par: ',totalEvenAges);

Operadores

//1-artimeticos.js//módulo (%)//operador binário. retorna o inteiro restante da divisão dos dois operadores12%5// retorna 2//incremento (++) e decremento (--)++xx++--xx--//negação (-) adição (+)-3+"3"//retorna 3+true//retorna 1+false//retorna 0-true//retorna -1//operador de exponenciação (**)2**3//retorna 810**-1//retorna 0.1//operador de agrupamento ()2*(3+2)

//1-atribuicao.js//atribuiçãox=y//atribuição de adiçãox=x+y//oux+=y//atribução de subtraçãox=x-y//oux-=y//atribuição de multiplicaçãox=x*y//oux*=y//atribuição de divisãox=x/y//oux/=y//atribuição de restox=x%y//oux%=y

//1-comparacao.js//igual (==)//retorna verdadeiro caso os operandos sejam iguais. 3 == var1"3"==var13=='3'//não igual (!=)//retorna verdadeiro caso os operandos não sejam iguais. var1 != 4var2!="3"//estritamente igual (===)//retorna verdadeiro caso os operando sejam iguais e do mesmo tipo. Veja támbem Object.3===var1//estritamente não igual (!===)//retorna verdadeiro caso os operandos não sejam iguais e/ou não sejam do mesmo tipovar1!=="3"3!=='3'//maior que (>)//retorna verdadeiro caso o operando da esquerda seja maior que o da direitavar2>var1"12">2//maior que ou igual (>=)//retorna verdadeiro caso o operando da esquerda seja maior ou igual ao da direitavar2>=var1var1>=3//menor que (<)//retorna verdadeiro caso o operando da esquerda seja menor que o da direita.var1<var2"12"<"2"//menor que ou igual (<=)//retorna verdadeiro caso o operando da esquerda seja menor ou igual ao da direitavar1<=var2var2<=5

//1-condicional.js//ternáriocondicao ?valor1 :valor2true ?'foo' :'bar'//retorna 'foo'false ?'foo' :'bar'//retorna 'bar'

//1-logicos.jsexp1&&exp2//AND lógico (&&)vara1=true&&true//retorna truevara2=true&&false//retorna falsevara3=false&&true//retorna falsevara4=false&&(3==4)//retorna falsevara5="Gato"&&"Cão"//retorna Cãovara6=false&&"Gato"//retorna falsevara7="Gato"&&false//retorna false//OU lógico (||)exp1||exp2varo1=true||true//retorna truevaro2=false||true//retorna truevaro3=true||false//retorna truevaro4=false||(3==4)//retorna falsevaro5="Gato"||"Cão"//retorna Gatovaro6=false||"Gato"//retorna Gatovaro7="Gato"||false//retorna Gato//exemplo para atribuição de variávelconteudo=conteudo||'fallback';//NOT lógico (!)!exp1varn1=!true//retorna falsevarn2=!false;//retorna truevarn3=!"Gato";//retorna false (string com valor é verdadeira)//String com valor e sem valor//True" "//False""

//1-unarios.js//deletar algodeletesomething;//determinar o tipo//O typeof é um operador unário que retorna em um string indicando um tipo de operando.typeofsomething;

//2-binarios.js//insomethinginsomethingItems//arraysvararvores=newArray("pau-brasil","loureiro","cedro","carvalho","sicômoro");0inarvores;//retorna true3inarvores;//retorna true6inarvores;//retorna false"cedro"inarvores//retorna false (você deve especificar o número do índice),//não o valor naquele índice"cedro"inarvores[2]//retorna true"length"inarvores//retorna true (length é uma propriedade de Array)//objetos predefinidos"PI"inMath;//retona truevarminhaString=newString("coral");"length"inminhaString;//retorna true//objetos personalizadosvarmeuCarro={marca:"Honda",modelo:"Accord",ano:1998};"marca"inmeuCarro;//retorna true"modelo"inmeuCarro//retorna true//instanceofobjetoinstanceoftipoObjetovardia=newDate(2020,4,13);if(diainstanceofDate){//code here}

Aula III - Spread, estruturas condicionais e repetição

Spread

//1-spread.js//spread ...varpartes=['ombro','joelhos'];varmusica=['caceca', ...partes,'e','pés'];functionfn(x,y,x){}varargs=[0,1,2];fn(...args);

//1-if.js/*if (condition) {  //code}*/constarray=[0,1,2,3,4,5];array.forEach(item=>{if(item%2===0){console.log(`O número${item} é par`);}else{console.log(`o número${item} é impar`);}});

//1-esle-if.js/*if (condidtion) {  //code} else if (condition) {  //code}*/constarray=[2,3,4,5,6,8,10,15];array.forEach(item=>{if(item%2===0){console.log(`O número${item} é divisível por 2`);}elseif(item%3===0){console.log(`o número${item} é divisível por 3`);}elseif(item%5===0){console.log(`o número${item} é divisível por 5`);}});

//1-switch.js/*switch (expression) {  case valor1:    [break;]  case valorN:    [break;]  default:    [break;]}*/constfruit='pera';switch(fruit){case'banana':console.log('R$ 3,00 / KG')break;case'mamão':case'pera':console.log('R$ 2,00 / KG')break;default:console.log('Produto não existe no estoque');break;}

//1-for.js/*for ([expressaoInicial]; [condicao]; [incremento]) {  //code}*/constarray=['one','two','three'];for(letindex=0;index<array.length;index++){constelement=array[index];console.log(`Element #${index}:${element}`);}

//1-for-in-of.jsletarr=[3,5,7];arr.foo="hello";//for-in - imprime indices do arrayfor(letiinarr){console.log(i);//0, 1, 2, foo}//for-of - imprime valores do arrayfor(letiofarr){console.log(i);//3, 5, 7}

//1-while.js/*while(condicao) {code}*/varn=0;varx=0;while(n<3){n++;x+=n;//1, 3, 6}console.log(x);

//1-do-while.js/*do codewhile(condicao);*/leti=0;do{i+=1;console.log(i);}while(i<5);

//1-controle-repeticao.js//breakconsole.log('Exemplo de utilização de break');varindex=0;while(true){index++;if(index>2){break;}console.log(index);}//continueconsole.log('\nExemplo de utilização de continue');constarray=[1,2,3,4,5,6];for(letindex=0;index<array.length;index++){constelement=array[index];if(element%2===0){continue;}console.log(element);}

Módulo III - Orientação a objetos e Design Patterns com a linguagem ES6

Aula I - Introdução a orientação a objetos

Herança

'use strict';constmyText='Hello prototype!';console.log(myText.split(''));//<-- de onde vem o split?constmyText2=String('Hello prototype!');console.log(myText2.__proto__.split)//<-- quando é criado uma string é utilizado a função construtora String, essa função construtora carrega um prototype, e toda vez que é criado uma variável utilizando uma função construtora é criada uma referência __proto__ .

newFoo(...);

//1-heranca.js//exemplo simples de herança, onde um construtor chama o outrofunctionAnimal(quatidadePatas){this.quatidadePatas=quatidadePatas;}functionCachorro(morde){Animal.call(this,4);this.morde=morde;}constpug=newCachorro(false);console.log(pug);//Cachorro {quatidadePatas: 4, morde: false}

Classes

//1-classes.js'use strict';classAnimal{constructor(quatidadePatas){this.quatidadePatas=quatidadePatas}}classCachorroextendsAnimal{constructor(morde){super(4);this.morde=4;}}constpug=newCachorro(false);console.log(pug);//Cachorro {quatidadePatas: 4, morde: false}

Modificadores de acesso

//1-modificadores-de-acesso.js'user script';/*//como functionfunction Person(initialName) {  let name = initialName;  this.getName = function() {    return name  }  this.setName = function(newName) {    name = newName;  }}*///versão 12classPerson{  #name='';constructor(initialName){this.#name=initialName;}getName=function(){returnthis.#name}setName=function(newName){this.#name=newName;}}constp=newPerson('Daniel');console.log(p)//Person {getName: f, setName: f}p.getName();//danielp.name;//undefinedp.setName('Thiago');p.getName();//Thiago

Encapsulamento

//1-encapsulamento.js'use strict';//funções/*function Person(initialName) {  var name = initialName;  Object.defineProperty(this, 'name', {    get: function() {      return name;    },    set: function(value) {      name = value;    }  });}*/classPerson{  #name='';constructor(name){this.#name=name;}getname(){returnthis.#name}setname(name){this.#name=name;}}

Static

//1-static.js'use strict';/*//functionfunction Person() {}Person.walk = function() {  console.log('walking...');}console.log(Person.walk());//walking...*/classPerson{staticwalk(){console.log('walking..');}}console.log(Person.walk());//walking...

Aula II - Introdução a Design Patterns

Definição

A Pattern Language

Formato de um pattern

Using Pattern Languages for Object-Oriented Programs

Design Patters: Elements of Reusable Object-Oriented Software

Tipos

Criação

Padrões de criação

Estruturais

Padrões estruturais

Comportamentais

Padrões comportamentais

Patterns mais utilizados no javascript

Factory

//1-factory.js//Todas as funções que retornam um objeto, sem a necessidade de chamá-las com o new, são considerasd funções *Factory*.functionPessoa(customProperties){return{name:'Daniel',lastName:'Negrisoli Batista',    ...customProperties}}// Factoryconstpessoa=Pessoa({name:'Custom Name',age:35});console.log(pessoa);

Singleton

//2-singleton.jsvarSETTINGS={api:'http://localhost',trackJsToken:'12345'}//retorna Pessoa.instance quando instanciado, caso contrario instancia e depois devolvefunctionPessoa(){if(!Pessoa.instance){Pessoa.instance=this;}returnPessoa.instance}constpessoa=Pessoa.call({name:'Daniel'});constpessoa2=Pessoa.call({name:'Custom Name'});console.log(pessoa);console.log(pessoa2);

Decorator

//3-decorator.js//funçãoletloggedIn=false;functioncallIfAuthenticated(fn){return!!loggedIn&&fn();}functionsum(a,b){returna+b;}console.log(callIfAuthenticated(()=>sum(2,3)));//só executa se logadologgedIn=true;console.log(callIfAuthenticated(()=>sum(2,3)));loggedIn=false;console.log(callIfAuthenticated(()=>sum(2,3)));

Observer

//4-observer.jsclassObservable{constructor(){this.observables=[];}subscribe(fn){this.observables.push(fn);}notify(data){this.observables.forEach(fn=>fn(data));}unsubscribe(fn){this.observables=this.observables.filter(obs=>obs!==fn);}}consto=newObservable();constlogData1=data=>console.log(`Subscribe 1:${data}`);constlogData2=data=>console.log(`Subscribe 2:${data}`);constlogData3=data=>console.log(`Subscribe 3:${data}`);o.subscribe(logData1);o.subscribe(logData2);o.subscribe(logData3);o.notify('notified 1');o.unsubscribe(logData2);o.notify('notified 2');

Module

//5-module.jsletname='default';functiongetName(){returnname;}functionsetName(newName){name=newName;}module.exports={  getName,  setName};//6-module-import.jsconst{getName, setName}=require('./5-module.js');console.log(getName());console.log(setName('Daniel'));console.log(getName());

Exercícios - Módulo III - Aula II

functionPessoa(nome,idade){this.nome=nome;this.idade=idade;return{    nome,idade:20,falar(){console.log('objeto falar');}}}Pessoa.prototype.falar=function(){console.log('prototype falar');};constpessoa=newPessoa('Foo',30);

classID{static #contador=0;staticgetcontador(){returnthis.#contador;}staticincrementaContador(){return++this.#contador;}}classCliente{  #id=0;constructor(){this.#id=ID.incrementaContador();}getid(){returnthis.#id;}}constc1=newCliente();console.log(`Contador atual:${ID.contador}.`);constc2=newCliente();constc3=newCliente();console.log(`Contador atual:${ID.contador}.`);

constname='Foo';constlastName=String('Bar');

functionConta(){}Conta.prototype.rendimento=0;Conta.prototype.depositar=function(){}Conta.prototype.retirar=function(){}Conta.prototype.exibirSaldo=function(){return`O saldo da conta é:${this.saldo}.`;}functionContaPoupanca(){this.exibirSaldo=function(){return'Operação não disponível';}}ContaPoupanca.prototype.rendimento=0.03;ContaPoupanca.prototype=Object.create(Conta.prototype);constcontaPoupanca=newContaPoupanca();

functionPessoa(nome){this.nome=nome;}functionPessoaFisica(nome,cpf){Pessoa.call(this,nome);this.cpf=cpf;}functionPessoaJuridica(nome,cnpj){Pessoa(nome);this.cnpj=cnpj;}constpessoaFisica=newPessoaFisica('Foo','123.456.670-0');constpessoaJuridica=newPessoaJuridica('Bar','12.345.678/9012-34');console.log(pessoaFisica);console.log(pessoaJuridica);

functionadicionaUsuarioLogado(fn){constusuarioLogado={nome:'Foo',sobrenome:'Bar'};fn(usuarioLogado);}functionexecutaSeUsuarioEstaLogado(usuarioLogado,fn){if(!usuarioLogado){console.log('Usuário não está logado.');return;}fn();}functionnotificaUsuarioLogado(usuarioLogado){console.log(`Bem-vindo usuário${usuarioLogado.nome}!`);}adicionaUsuarioLogado(usuarioLogado=>executaSeUsuarioEstaLogado(usuarioLogado,()=>{notificaUsuarioLogado(usuarioLogado);}));

I-functionexibeNome(nome){console.log(nome);}II-functionPessoa(nome){this.nome=nome;}III-functionPessoa(nome){return{    nome};}IV-functionrecuperaDadosFormulario(formulario){if(!formulario){return{};}constdados={nome:formulario.nome,idade:formulario.idade};returndados;}V-functionsetNome(nome){this.nome=nome;}

classPessoa{  #nome='';constructor(nome){this.#nome=nome;}getnome(){return`Seu nome é:${this.#nome}.`;}setnome(novoNome){this.#nome=novoNome;}}constpessoa=newPessoa();console.log(pessoa);console.log(pessoa.nome);pessoa.nome='Foo';console.log(pessoa.nome);

Módulo IV - Manipulação e iteração de arrays

Aula I - Criando e manipulando arrays

Criar um array

Criação comum

//1-criando-arrays.jsconstarr=[1,2,3];constarr2=newArray(1,2,3);console.log(arr)console.log(arr2)

Array.of

//1-criando-arrays.jsconstarr3=Array.of(1,2,3);console.log(arr3)

Por instância

//1-criando-arrays.jsconstarr4=Array(3);console.log(arr4)// [empty x 3]constarr5=Array(3,2);console.log(arr5)// [3, 2]

Array.from

//1-criando-arrays.js//node listconstdivs=document.querySelectetorAll('div');//converte para arrayconstarr6=Array.from(divs);console.log(arr6)

Inserir e remover elementos

push

//2-inserir-remover-elementos-arrays.jsconstarr1=['banana','melancia','abacate'];constarr1Length=arr1.push('acerola');console.log(arr1Length)//4console.log(arr1)//['banana', 'melancia', 'abacate', 'acerola']

pop

//2-inserir-remover-elementos-arrays.jsconstarr2=['banana','melancia','abacate'];constremovedItem=arr2.pop();console.log(removedItem);//abacateconsole.log(arr2)//['banana', 'melancia'];

unshift

//2-inserir-remover-elementos-arrays.jsconstarr3=['banana','melancia','abacate'];constarr3Length=arr2.unshift('acerola');console.log(arr1Length)//4console.log(arr1)//['acerola', 'banana', 'melancia', 'abacate']

shift

//2-inserir-remover-elementos-arrays.jsconstarr4=['banana','melancia','abacate'];constremovedItemArr4=arr4.pop();console.log(removedItemArr4);//bananaconsole.log(arr4)//['melancia', 'abacate'];

concat

//2-inserir-remover-elementos-arrays.jsconstarr5=['banana','melancia','abacate'];constarr6=['coxinha','kibe','empada'];constarr7=arr5.concat(arr6);console.log(arr7)//['banana', 'melancia', 'abacate', 'coxinha', 'kibe', 'empada']

slice

//2-inserir-remover-elementos-arrays.jsconstarr8=['banana','melancia','abacate','acerola','laranja'];//retorna de-atéconsole.log(arr8.slice(0,2));//['banana', 'melancia']//retorna a partir deconsole.log(arr8.slice(2));//['abacate', 'acerola', 'laranja']//realiza o mesmo procedimento do a partir de porém ao contrárioconsole.log(arr8.slice(-1));//['laranja']//realiza o mesmo procedimento do a partir de porém ao contrárioconsole.log(arr8.slice(-3));//['abacate', 'acerola', 'laranja']

splice

//2-inserir-remover-elementos-arrays.jsconstarr9=[1,2,3,4,5];//remove os elementos do array original a partir dearr9.splice(2);//[3, 4, 5]console.log(arr9);//[1, 2]//é possível remover e adicionar ao mesmo tempo//nesse exemplo, na posição 0, remove 0 elementos, adiciona o item 'first'arr9.splice(0,0,'first');//retorno é sempre os elementos removidos//[]console.log(arr9);//["first", 1, 2]

Aula II - Iterar, buscar e transformar elementos

Iterar elementos

forEach

//3-iterar.jsconstarr1=[1,2,3,4,5];//forEach//Iteração de cada item dentro de um arrayarr1.forEach((value,index)=>{console.log(`${index}:${value}`);});

map

//3-iterar.jsconstarr2=[1,2,3,4,5];constarrMap=arr2.map(value=>value*2);console.log(arrMap)

flat

//3-iterar.jsconstarr3=[20,34,[35,60,[70,40]]];//recebe como parametro a profundidadeconstarrFlat=arr3.flat(2)

flatMap

//3-iterar.jsconstarr4=[1,2,3,4,5];constarrFlatMap=arr4.flatMap(value=>[value*2]);console.log(arrFlatMap);//[2, 4, 6, 8]

keys

//3-iterar.jsconstarr5=[1,2,3,4];constarrIterator=arr.keys();arrIterator.next();//{value: 0, done: false}arrIterator.next();//{value: 1, done: false}arrIterator.next();//{value: 2, done: false}arrIterator.next();//{value: 3, done: true}

Values

//3-iterar.jsconstarr6=[1,2,3,4];constarrIterator=arr.values();arrIterator.next();//{value: 1, done: false}arrIterator.next();//{value: 2, done: false}arrIterator.next();//{value: 3, done: false}arrIterator.next();//{value: 4, done: true}

Entries

//3-iterar.jsconstarr6=[1,2,3,4];constarrIterator=arr.entries();arrIterator.next();//{value: [0, 1], done: false}arrIterator.next();//{value: [1, 2], done: false}arrIterator.next();//{value: [2, 3], done: false}arrIterator.next();//{value: [3, 4], done: true}

Buscar elementos

find

//4-buscar.js//find//Retorna o primeiro item de um array que satisfaz a condiçãoconstarr=[1,2,3,4];constfirstGreatThanTwo=arr.find(value=>value>2);console.log(firstGreatThanTwo);

findIndex

//4-buscar.jsconstarr2=[1,2,3,4];constfirstGreatThanTwo2=arr2.findIndex(value=>value>2);console.log(firstGreatThanTwo2);//2

filter

//4-buscar.jsconstarr3=[1,2,3,4];constallValuesGreatThanTwo=arr3.findIndex(value=>value>2);console.log(allValuesGreatThanTwo);//[3, 4]

indexOf

//4-buscar.jsconstarr4=[1,2,3,4];constfirstIndexOfItem=arr4.indexOf(3);console.log(firstIndexOfItem);//1

lastIndexOf

//4-buscar.jsconstarr4=[1,2,3,4];constlastIndexOfItem=arr4.lastIndexOf(3);console.log(lastIndexOfItem);//4

includes

//4-buscar.jsconstarr5=[1,3,3,4,3]consthasItemOne=arr5.includes(1);//trueconsthasItemTwo=arr5.includes(2);//false

some

//4-buscar.jsconstarr6=[1,3,3,4,3];consthasSomeEvenNumber=arr6.some(value=>value%2===0);//true

every

//4-buscar.jsconstarr7=[1,3,3,4,3];constallEvenNumbers=arr7.some(value=>value%2===0);//false

Ordenar elementos

sort

//5-ordenar.jsconstarr8=[{name:'John',grade:7},{name:'Jenny',grade:5},{name:'Peter',grade:4}];console.log(arr8.sort((curret,next)=>next.grade-curret.grade));//[{name: 'John', grade: 7}, {name: 'Jenny', grade: 5}, {name: 'Peter', grade: 4}]

reverse

//5-ordenar.jsconstarr9=[1,2,3,4,5]console.log(arr.reverse());//[5, 4, 3, 2, 1]

Transforma em outro tipo de dados

join

//6-transformar-dados.jsconstarr10=[1,2,3,4,5];console.log('-');//"1-2-3-4-5"

reduce

//6-transformar-dados.jsconstarr2=[1,2,3,4,5]console.log(arr2.reduce((total,value)=>total+=value,0));//15constarr3=[{name:'John',grade:7},{name:'Jenny',grade:5},{name:'Peter',grade:4}];//média simples com reduceconsole.log(arr3.reduce((totalGrades,student)=>totalGrades+=student.grade,0)/arr3.length);//5.33console.log(arr3.reduce((studentsNames,student)=>studentsNames+=student.name+' ',''));//John Jenny Peter

Exercícios

I-[2];II-Array.from(2);III-Array.of(2);IV-Array(2);V-newArray(2);

constfamiliaPai=["Avó Zeca","Avô Aroldo"];constfamiliaMae=["Avô Carlos","Primo João Paulo"];constfamiliaFilho=familiaPai.concat(familiaMae);console.log(familiaPai);console.log(familiaMae);console.log(familiaFilho);

constpessoas=["Cris","Alexandre","Pablo","Cris"];console.log(pessoas.indexOf("Cris"));console.log(pessoas.findIndex(nome=>nome==="Cris"));console.log(pessoas.lastIndexOf("Cris"));console.log(pessoas.find(nome=>nome==="Cris"));

constfrutas=["amora",["laranja",["melancia"],"acerola"]];console.log(frutas.flat(2));

constfrutas=["melancia","laranja","acerola"];I-frutas.shift();II-frutas.pop();III-frutas.splice(2,1);IV-frutas.slice(2,1);V-frutas.unshift();

constcolaboradores=[{nome:"Cris",horasTrabalhadas:220},{nome:"Rebeca",horasTrabalhadas:210}];functionadicionaSalario(colaborador){constsalario=colaborador.horasTrabalhadas*50;colaborador.salario=salario;return{salario:salario};}constcolaboradoresComSalario=colaboradores.map(adicionaSalario);console.log(colaboradoresComSalario);

constperson=["Cris"];person.push("James","Jenny");person.push("John");console.log(person);

constalunos=[{nome:"Cris",nota:10},{nome:"Alexandre",nota:7},{nome:"Pablo",nota:4}];functionalunoAprovado(aluno){returnaluno.nota>=7;}console.log(alunos.filter(alunoAprovado));console.log(alunos.some(alunoAprovado));console.log(alunos.every(alunoAprovado));

constfrutas=["amora","laranja","melancia","acerola"];frutas.sort();frutas.reverse();