Curso JavaScript ES6 essencial

JavaScript ES6 essencial

Módulo I - Introdução ao ES6

• Autor: Guilherme Cabrini da Silva
• Origem: Digital Innovation One

Aula I - História e conceitos

História

• Javascript foi lançado em setembro de 1995
• Foi lançado junto com a versão beta do Netscape 2.0
• Criado por Brendan Eich
• O JavaScript teve dois nomes anteriores: Mocha e Livescript
• ECMAScript é uma especificação de linguagem script criada pela Ecma International, utilizada por linguagens como: ActionScript, JScript e Javascript.
• O comitê TC39 é quem avalia as propostas de melhorias

Conceitos

• Linguagem interpretada
• O JavaScript possui tipagem fraca e dinâmica pois
  • 1 - O tipo da variável no JavaScript é definido no momento de sua atribuição, esse processo se chama inferência de tipo.
  • 2 - Não é lançado um erro ou uma Exception durante a execução de: 1 + "texto".
  • 3 - Para mudarmos o tipo de uma variável já existente, basta setar um valor de outro tipo:
  • 4 - Não é necessário explicitar o tipo na criação de uma variável no JavaScript.
• Typescript é superset da linguagem Javascript
• Flow é um validador da linguagem.
• Funções de primeira classe e ordem maior significa que são funções que pode ser atribuídas a uma variável, pode ser atribuída a uma estrutura de dados, e pode ser passada por argumentos, e até retornada por outras funções.

//funcoes.js
function getName() {
  return 'Daniel Negrisoli Batista';
}
function logFn(fn) {
  console.log(fn());
}

//atribuição a uma variável
const logFnResult = logFn;

//atribuição a uma estrutura de dados
const obj = {
  logFn: logFn
}

//função passada por argumentos
logFnResult(getName);

• Closure ou escopo léxico é a capacidade da função "lembrar" do seu contexto de criação.
• Escopo em javascript podem ser de 3 maneiras: global, bloco e função

//escopo.js
//escopo global: arquivo todo

{
  //escopo de bloco, dentro dos branchs
}

function fn() {
  //escopo de função
}

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

Currying

É a técnica de transforma uma função com vários parâmetros em apenas um sendo que para cada parâmetro e retornando outra função.

//currying.js
//função natural
function somaFn(a, b) {
  return a + b;
}

//aplicação do currying
function somaCurrying(a) {
  return function(b) {
    return a + b;
  }
}

//chamada função natural
console.log(somaFn(1, 1));

//chamada função currying
const resultSoma = somaCurrying(1);
console.log(resultSoma(1));

Hoisting

Hoisting ou içamento é a capacidade do JavaScript elevar a criação de variáveis e funções ao topo do escopo de suas criações. Existem dois tipos de Hoisting: hoisting de variável e hoisting de função. No Hoisting de variável é elevado a sua criação e não a sua atribução, já no Hoisting de função ela é elevado como um todo.

Hoisting de variável

//hoisting-variveis.js
function fnHoistingVar) {
  //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 undefined
  console.log(text);

  var text = 'Exemplo';
  //aqui já é retornando string
  console.log(text);
}

fnHoistingVar();

Hoisting de função

//hoisting-funcao.js
function fnHoistingFun()) {
  //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 usar
  log('Hoisting de função');

  function log(value) {
    console.log(value);
  }
}

fnHoistingFun();

Imutabilidade

O valor da variável nunca muda, caso precise alterar é preciso criar outra. Exemplo: Se precisar inserir um array, você realizar uma cópia inclui o novo item na cópia. Se precisar atualar um objeto, você realizar uma cópia altera o novo item na cópia.

//1-imutabilidade.js
const user = {
  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.
function getUserWithFullName(user) {
  return {
    //spread operator
    ...user,
    //literal string
    fullName: `${user.name} ${user.lastName}`
  }
}

const userWithFullName = getUserWithFullName(user);
//o retorno é um novo objeto com as alteraçoes desejadas
console.log(userWithFullName, user);

//2-imutabilidade.js
//lista de alunos com nome e notas
const students = [
  {
    name: 'Grace',
    grade: 7
  },
  {
    name: 'Jennifer',
    grade: 4
  },
  {
    name: 'Paul',
    grade: 10
  },
];

//retorno de alunos aprovados com nota superior ou igual a 7
function getApprovedStudents(studentsList) {
  return studentsList.filter(student => student.grade >= 7);
}

console.log('Alunos aprovados');
//retorna uma nova lista com os alunsos aprovados
console.log(getApprovedStudents(students));

//retorna a lista completa de alunos
console.log('\nLista de alunos');
console.log(students);

Tipos e variáveis

No momento da criação de variáveis e necessário lembrar dos 3 tipos de escopo do javascript: global, bloco e função.

• var
• let
• const

Variáveis

//1-variaveis.js
var nameVar = 'Daniel';
let nameLet = 'Daniel';
const nameConst = '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 bloco
var test = 'example';

(() => {
//undefined, pois nesse momento não tem valor
console.log(`Valor dentro do função "${test}"`);

if (true) {
//essa declaração e atribuição sobre para o escopo
  var test = 'example';
  console.log(`Valor dentro do if "${test}"`);
}
//por isso nesse lugar o test possui o valor atribuido dentro do bloco
console.log(`Valor após a execução do if "${test}"`);
})();

Let

//2-2-variaveis.js
(() => {
//let respeita o contexto de bloco
let test = '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ção
  let test = '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
(() => {
const test = 'valor função';
console.log(`Valor dentro do função "${test}"`);

if (true) {
  const test = '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,
const name = 'Daniel';

//não podemos alterar o valor,
name = 'Daniel';

const user = {
  name: 'Daniel'
};

//mas se for um objeto, podemos trocar suas propriedades
user.name = 'Outro nome'

//não podemos fazer o objeto "apontar" para outro lugar
user = {
  name: 'Guilherme'
};

const persons = ['Daniel', 'Pedro', 'Jennifer'];

//podemos adicionar novos itens
persons.push('João');
//result ['Daniel', 'Pedro', 'Jennifer', 'João']

//podemos remover algum item
persons.shift();
//result ['Pedro', 'Jennifer', 'João']

//podemos alterar diretamente
persons[1] = 'James';
//result ['Pedro', 'James', 'João']

//mas não podemos "apontar" para outro array
persons = []

console.log('\nArray após as alterações: ', persons);

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

• Autor: Guilherme Cabrini da Silva
• Origem: Digital Innovation One

Aula I - Tipos e variáveis

Tipos

• string
• number
• boolean
• null
• undefined
• symbol
• Object
• Function
• Array

//1-string.js
//retorna o tamanho de uma string
const textSize = 'Texto'.length;
console.log(`Quantidade de letras: ${textSize}`)

//retorna um array quebrando a string por um delimitador
const splittedText = 'Texto'.split('x');
console.log('\nArray com as posições separadas pelo delimitador: ', splittedText);

//busca por um valor e substitui por outro
const replacedText = 'Texto'.replace('Text', 'txeT');
console.log('\nSubstituição de valor: ', replacedText);

//retorna a "fatia" de um valor
const lastChar = 'Texto'.slice(-1);
console.log('\nÚltima letra de uma string: ', lastChar);

const allWithoutLastChar = 'Texto'.slice(0, -1);
console.log('\nValor da string da primeira letra menos a última: ', allWithoutLastChar);

const secondToEnd = 'Texto'.slice(1);
console.log('\nValor da string da segunda letra até a última: ', secondToEnd);

//retorna N caracteres a partir de uma posição
const twoCharsBeforeFirstPosition = 'Texto'.substr(0, 2);
console.log('\nAs duas primeiras letras são : ', twoCharsBeforeFirstPosition);

//1-number.js
const myNumber = 12.4032;

//transformar número para string
const numberAsString = myNumber.toString();
console.log('Número trasnformado em string: ', numberAsString, typeof numberAsString);

//retorna número com um número de casas decimais
const fixedTwoDecimals = myNumber.toFixed(2);
console.log('\nNúmero com duas casa decimais: ', fixedTwoDecimals);

//transforma uma string em float
console.log('\nString convertida para float: ', parseFloat('13.22'));

//transforma uma string em int
console.log('\nString convertida para int: ', parseInt('13.20'));

//1-boolean.js
const isActive = true;

console.log('Tipo de variável :', typeof isActive)

//1-null.js
const nullVariable = null;

console.log('nullVariable :', typeof nullVariable)

//1-undefined.js
const undefinedVariable = true;

console.log('Tipo de variável :', typeof undefinedVariable)

//1-symbol.js

const symbol1 = Symbol();
const symbol2 = Symbol();

//symbols são únicos
console.log('symbols1 é igual a symbols2: ', symbol1 === symbol2);

//prevenir conflito entre nomes de propriedades
const nameSymbol1 = Symbol('name');
const nameSymbol2 = Symbol('name');

const user = {
  [nameSymbol1]: 'Daniel',
  [nameSymbol2]: 'Outro nome',
  lastName: 'Negrisoli Batista'
}

console.log(user);

//symbols criam propriedades que não são enuberables
for (const key in user) {
  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 objeto
console.log('Symbols registrados no objeto user: ', Object.getOwnPropertySymbols(user));

//acessando todas as propriedades do objeto
console.log('Todas propriedads do objeto user: ', Reflect.ownKeys(user));

//criar um enum
const directions = {
  UP: Symbol('UP'),
  DOWN: Symbol('DOWN'),
  LEFT: Symbol('LEFT'),
  RIGHT: Symbol('RIGHT')
};

//1-object.js
let user = {
  name: 'Daniel'
};

console.log(user);
//alterando a propriedade de um objeto
user.name = 'Outro nome 1';
console.log(user);
user['name'] = 'Outro nome 2';
console.log(user);

const prop = 'name';
user[prop] = 'Outro nome 3';
console.log(user);

//criando uma propriedade
user.lastName = 'Negrisoli Batista';
console.log(user);

//deletando uma propriedade
delete user.name;
console.log(user);

//2-object.js
let user = {
  name: 'Daniel',
  lastName: 'Negrisoli Batista'
};

//recupera as chaves do objeto
console.log('Propriedades do objeto user: ', Object.keys(user));

//recupera os valores das chaves do objeto
console.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 objetos
Object.assign(user, {