- Sumário em construção| Tipo | Descrição |
|---|---|
| var | escopo global e de função |
| let | escopo global, de função e de bloco |
| const | utilizar para variavéis que não irão mudar de valor |
- Texto entre aspas simples ('') = texto híbrido, texto em qualquer linguagem
- Uma mesma variavél pode armazenar diversos tipos
- Number = função
+ number = tipo- JSON - é uma versão textual de um objeto
- Variáveis VAR tem escopo de função e global
- Variáveis LET tem escopo de função, global e de bloco
- FUJA do escopo GLOBAL!
- HOISTING - 'jogar para cima'
- a leitura de código normalmente é feita de cima para baixo, em JS isso não acontece 100%
- todas as funções são lidas antes de tudo
- Notação Ponto - colocar '.' para acessar membros
| Nome | Símbolo |
|---|---|
| Atribuição | = |
| Destructuring | { } ou [ ] depois de uma palavra reservada |
| Aritméticos | + - * / % ** |
| Relacionais | == === != !== > >= < <= |
| Lógicos | && || !!(var1 ^ var2) !== > >= < <= |
| Unários | ++ -- |
| Ternários | ? |
const a = 7
let b = 3
b += a // b = b + a
b -= 4 // b = b - 4
b *= 2 // b = b * 2
b /= 2 // b = b / 2
b %= 2 // b = b % 2- Novo recurso do ES2015;
- Ele tira da estrutura alguma coisa;
- É uma forma de extrair atributos de um objeto
Destructuring em objetos:
const pessoa = {
nome: 'Ana',
idade: 5,
endereco: {
logradouro: 'Rua ABC',
numero: 123
}
}
// extrair a variavél nome e idade
const { nome, idade } = pessoa
// extraindo atributos do endereço
const { endereco: { logradouro, numero} } = pessoaDestructuring em arrays:
const [a] = [10]
const [n1, , n3, , n5, n6 = 0] = [10, 7, 8, 9]
const [,[, nota]] = [[, 8, 8], [9, 6, 8]]Destructuring com objetos em funções:
function rand({ min = 0, max = 1000 }) {
const valor = Math.random() * (max - min) + min
return Math.floor(valor)
}
const obj = { max: 50, min: 40 }
console.log(rand(obj))Destructuring com arrays em funções:
function rand([ min = 0, max = 100 ]) {
if(min > max) [min, max] = [max, min]
const valor = Math.random() * (max - min) + min
return Math.floor(valor)
}
console.log(rand([ 50, 40 ]))- Operadores binários, ou seja, operam com dois operandos.
const [ a, b, c, d ] = [ 3, 5, 1, 15 ]
const soma = a + b + c + d
const subtracao = b - d
const multiplicacao = a * b
const exponenciacao = a ** b
const divisao = d / a
const modulo = a % 2
console.log(-divisao)
// operador unário, vai converter o valor de divisão para negativo- Resultados sempre serão true ou false.
Exemplos:
console.log('01)', '1' == 1) // true
console.log('02)', '1' === 1) // false
console.log('03)', '3' != 3) // false
console.log('04)', '3' !== 1) // true
console.log('05)', 3 < 2) // false
console.log('06)', 3 > 2) // true
console.log('07)', 3 <= 2) // false
console.log('08)', 3 >= 2) // true
const d1 = new Date(0)
const d2 = new Date(0)
console.log('09)', d1 === d2) // false
console.log('10)', d1 == d2) // false
console.log('11)', d1.getTime() === d2.getTime()) // true
console.log('12)', undefined == null) // true
console.log('13)', undefined === null) // falseTabela verdade:
-
AND (&&)
- V and V = V
- V and F = F
- F and F = F
- Basta um ser falso para tudo ser falso.
-
OR (||)
- V or V = V
- V or F = V
- F or F = F
- Baste um verdadeiro para tudo ser verdadeiro.
-
XOR (!= ou !!(var1 ^ var2))
- V xor V = F
- V xor F = V
- F xor V = V
- F xor F = F
- Os dois tem de ser diferentes para o resultado ser verdadeiro.
-
Negação lógica (!)
- !V = F
- !F = V
- Apenas um operando
- Pós-fixada
- Pré-fixada (precedência maior)
let num1 = 1
let num2 = 2
num1++ // pós-fixada
--num1 // pré-fixada
// Exemplo de precedência
console.log(++num1 === num2--) // true
// 1º ++ 2º === 3º --- Três operandos, composto por três partes:
- 1ª: expressão que retorna true ou false
- 2ª: o que será retornado caso a expressão seja verdadeira
- 3ª: o que será retornado caso a expressão for falsa
- Operador: ?
Exemplo:
const resultado = nota => nota >= 7 ? 'Aprovado': 'Reprovado'- try
- catch
- throw
- finally
function tratarErro(erro) {
throw new Erro('Tratando erro...')
}
try {
console.log('Há algum erro?')
} catch (e) {
tratarErro(e)
} finally {
console.log('Executa de qualquer maneira')
}-
Estruturas de condição:
- if
if(condition) {}
- if/else
if(condition) { } else { }
- if/else if...
if(condition) { } else if(condition) { }
- switch
switch(value) { case 1: case 2: ... break }
-
Estruturas de repetição:
- while
while(condition) { }
- do/while
do { } while(condition)
- for
for(let i = 0; i < cont.length; i++) { }
- for/in
for(let i in variavel) { }
- Desvio de fluxo.
- Funcionam dentro de laços for e while.
- Usar só quando necessário.
- break: para o laço mais próximo
- continue: pula quando encontrar a condição
Exemplos:
for(x in nums) {
if(x == 5) break
console.log(`${x} = ${nums[x]}`)
} // quando o índice for 5, o laço 'for' irá pararfor(y in nums) {
if(y == 5) continue
console.log(`${y} = ${nums[y]}`)
} // índice 5 não será exibido- Função JS é First-Class Object (Citizens) || Higher-order function
- Função como dado
// criar de forma literal
function Fun1() { }
// armazenar em variável
const Fun2 = function() { }
// armazenar em array
const Fun3 = [function() { }]
// armazenar em um atributo de um objeto
const obj = {}
obj.falar = function() { }
// passar função como parametro
function run(fun) {
fun()
}
// uma função pode retornar/conter uma função
function soma() {
return function() {
}
}Parâmetros e retornos são opcionais
- Uma função pode não ter parâmetros, mas mesmo assim pode receber parâmetros
- Use arguments. Exemplo:
function Soma() { let soma = 0 for(i in arguments) { soma += arguments[i] } return soma } console.log(Soma(1, 2, 3))
- Quatro estratégias
- ||
- var !== undefined ? var : 1
- 1 in arguments ? b : 1
- isNaN(c) ? 1 : c
- ES2015
- Definir já nos parâmetros
- function Soma(a = 1, b = 1, c = 1)
- Definir já nos parâmetros
- O this pode variar.
- Acessa alguma coisa do contexto de execução.
- Dependendo de como uma função é chamada o this varia.
- O this vai ser definido no momento que a função for definida.
- O bind amarra determinado objeto para ele ser o dono da execução de um método sempre que for chamado
const falarDePessoa = pessoa.falar.bind(pessoa)- Além de usar o bind para driblar o this que varia, é possível atribuir à umma constate o this, assim a constatnte sempre irá apontar para o objeto que deseja. Exemplo:
function Pessoa() {
const self = this
}- É usado uma seta =>, ao invés da palavra function.
- São sempre funções anônimas.
- Ajuda em casos em que o this vaira.
- A criação de uma arrow function consistem em 3 “passos”:
- Os parênteses, que é por onde a função recebe os argumentos (assim como na function tradicional);
- A “seta” => - responsável pelo nome “arrow” function;
- E as chaves: o bloco de código que representa o corpo da função.
- Porém ela possui algumas variações. Exemplos:
dobro = (a) => {
return 2 * a
}
// ou com retorno implicito
dobro = (a) => 2 * a
ola = () => 'Ola' // função sem parâmetro- Exemplos de funções anônimas:
- Variáveis recebendo uma função
const variavel = function() { }
- Enviar funções chamando uma função
funcao(a, b, function() { })
- Funções dentro de um contexto de objeto
const variavel = { atributo: function() { } }
- Funções arrow
funcao(a, b, (x, y) => x * y )
- Chamar de volta
- Uma função é passada, algum evento acontece e a função é chamada de volta para fazer alguma coisa
- Uma função que é chamda quando um evento acontecer. Exemplo:
const doces = ["Pirulito", "Bala", "Chiclete"] function imprimir(nome, indice) { console.log(`${indice + 1}. ${nome}`) } doces.forEach(imprimir)
- Pra cada elemento percorrido no array (evento) a função imprimir é chamada (callback).
- Usar 'this' torna o atributo público.
- Outro tipo de declaração (let, const), dentro de funções, torna os atributos privados.
- Function declaration - tradicional
function soma(x ,y) {
return x + y
}- Function expression
const sub = function(x, y) {
return x - y
}- Named function expression
const mult = function mult(x, y) {
return x * y
}Importante: JS carrega todas as funções antes de executar o código, ouseja, colocar funções antes ou depois de serem utilizadas não faz diferença. Porém isso só é possível com funções do tipo function declaration.
-
Contexto onde as coisas foram declaradas dentro da linguagem.
-
Mesmo que chamada longe do local onde foi definida, as funções carregam o contexto onde foram escritas.
- Escopo criado quando uma função é definida.
- Esse escopo permite o acesso e manipulação de variáveis externas à função.
- Escopo criado quando uma função é definida.
-
Função que retorna um objeto.
- Um molde para evitar repetições de criação de objetos.
- Parecida com classe.
- Diferença: a função factory tem mais noção do contexto léxico onde ela é criada.
- Porque o this na função factory não é necessário.
- Immediately Invoked Function Expression
- Função auto-invocada
(function () {
})()- Estudar melhor depois.
- Paradigma orientado à objeto
- Mais próximo à realidade
- Objeto: uma cápsula que agrupa comportamentos e atributos
objeto = {
valor1,
valor2,
valor3,
processamento() {
// ...
}
}
objeto.processamento()- Princípios importantes
- Abstração
- Encapsulamento
- Herança
- Polimorfismo
- Notação literal
const obj1 = {}- Object em JS
console.log(typeof Object, typeof new Object)
const obj2 = new Object- Funções construtoras
function Funcao(a, b, c) {
this.a = a
this.getSoma = () => {
return a + b + c
}
}- Função factory
function criarForma(nome, lados) {
return {
nome,
lados,
getLadosMaisUm() {
return lados + 1
}
}
}- Object.create
const a = Object.create(null)- Uma função famosa que retorna um objeto
const fromJSON = JSON.parse('{"info": "Sou um JSON"}')Um objeto pode ter outro objeto dentro, um objeto dentro do objeto, funções e etc.
- get = ler variável
- set = alterar valor de variavéis
- Com getters e setters é possível aplicar validações na hora do acesso a variavéis
- Garante um maior nível de encapsulamento
get variavel() { return this._variavel }
set variavel(variavel) { this._variavel = variavel }JS não suporta sobrecarga de valores, exceto nos métodos get e set.
- Pega todas as chaves de um objeto
Object.keys(objeto)- Pega os valores de um objeto
Object.values(objeto)- Pega uma lista das chaves e dos valores
Object.entries(objeto)
// (retorna um array, com subarrays com chaves e valores)- Define propriedade de um objeto
Object.defineProperty(objeto, atributo, {
enumerable: true,
writable: false
value: ' '- Concatena todos os objetos no primeiro objeto passado
Object.assing(destino, a, b)- Estabelece uma relação de protótipo entre dois objetos
Object.setPrototypeOf(objeto1, objeto2)
// 1º parâmetro = objeto -> 2º parâmetro = protótipo do objeto- Princípio da OO que faz com que seja possível a passagem de atributos e comportamentos
- Criar mecanismos para o reuso de código
- Objeto tem uma referência para o seu protótipo (forma como JS define herança)
- A partir dessa referência pra um prototipo, há uma referência para outro objeto que tem atributos e comportamentos que podem ser acessados pelo objeto filho
- Procura o atributo na cadeia inteira de protótipos
- Quando é feita a procura por um atributo passando em todas as hierarquia (filho, pai, avô) e o atributo não for encontrado, ele é dado como undefined.
const avo = { attr1: 'A' }
const pai = { __proto__: avo, attr2: 'B', attr3: '3' }
const filho = { __proto__: pai, attr3: '3' }- super referencia um método que está no protótipo
- super.metodo()
Duas maneiras para estabeler relação de protótipos:
Object.setPrototypeOf(objeto1, objeto2)
// ou
const filho = { __proto__: objetoPai }- Mais algumas funções importantes:
- Object.create(prototipo): passa o objeto que deseja ser o protótipo de outro
- hasOwnProperty(chave): aquela propriedade pertence ao objeto em questão?
Todos os objetos criados a partir de uma função construtura, a partir do atributo __proto__ apontam para o mesmo prototype da função. Exemplo.
-
Object.preventExtensions
- não permite a adição de novos atributos
-
Object.seal
- é permitido somente modificar os atributos já existentes
-
- é o resultado de um objeto selado com valores constantes, nada pode ser mudado
-
JSON é gerado de forma muito simples pela maioria das linguagens, por isso é muito usado para comunicação de sistemas.
- Classes são convertidas em funções no JS.
class NomeClasse {
constructor(attr1, attr2) {
this.attr1 = attr1
this.attr2 = attr2
}
}- Herança na visão de classe.
- A herança funciona em cima de prototype.
- extends para herdar uma clase.
class SuperClasse {
constructor(attr) {
this.attr = attr
}
}
class Classe extends SuperClasse {
constructor(attr) {
super(attr)
}
}tinha pulado a sessao array, voltando pra ela antes de continuar a de node
-
É um objeto, só que ao invés de organizar os atributos com chaves, ele organiza a partir de um índice que começa com zero.
-
É uma estrutura heterogênea, mas não é bom misturar os tipos de dados
- Deve-se trabalhar com dados homogêneos
Notação literal:
let array = ['Um', 'Dois', 'Três']| Método | Descrição |
|---|---|
| pop() | remove o último elemento do array |
| push('elemento') | adiciona elemento ao final do array |
| shift() | remove o primeiro elemento |
| unshift('elemento') | adiciona elemento no ínicio do array |
| splice(x, y, 'z') | splice pode adicionar e remover elementos |
| slice(x, y) | cria um novo array a partir de indices |
Clique no título para ver o arquivo de exemplos.
- Percorre o array
- Recebe como parâmetro uma função callback
- A função callback de um foreach recebe três parâmetros: nome, índice e o prórpio array.
nomeArray.foreEach()Exemplos de funções callback como parâmetros em forEach Simulando um forEach
- Um runtime que permite rodar JavaScript no back-end (no servidor).
- Formada por duas partes:
- V8 - interpretador de JS de código aberto do Google
- Libuv - trata de forma assíncrona a parte mais lenta do processo; tudo que diz respeito à I/O
Imagem
-
A forma como se organiza uma apliação no front e no back-end são diferentes
-
Tudo escrito dentro de um módulo fica visível apenas no módulo
- Para tornar isso visível pra fora é preciso exportar/importar
-
Para importar algo usando o sistema de módulos do node é usada a palavra require
-
Exemplos:
- Exportando:
- Importando:
- npm - gerenciador de pacotes do node
- Baixar módulos com npm
- Exemplo: npm i loadash
- Módulos de terceiros usados para teste:
+ npm i lodash
+ npm i -g nodemonEntender de onde as coisas estão vindo
- Referenciar as pastas e arquivos respeitando letras maiúsculas e minúsculas
- Para exportar um objeto já criado pode-se usar:
- this.obj
- exports.obj
- module.exports.obj
- Mas para exportar um novo objeto deve-se usar apenas module.exports, caso contrário, não será retornado o objeto que deseja.