PRIMEIROS PASSOS AO FULL STACK
ENTENDENDO SOBRE FULL STACK
Como já mencionamos em videoaulas, é de uma importância muito grande que você
conheça as novas atualizações do JS. Nesse sentido, trouxemos este material exclusivo
para que você possa compreender melhor o que são, para que servem e por onde começar.
Claro que, acima de tudo, peço que busque mais informações e práticas à parte, pois este
material é complementar, ou seja, não é completo! O assunto é amplo e merece muito
mais atenção, mas aqui você vai encontrar os conceitos sobre o que foi estudado, com
exemplos e dicas para aprofundar cada vez mais seus estudos.
ECMAScript: o que é e como funciona?
O ECMA nada mais é do que padronizações atualizadas da linguagem do JavaScript. Com
ela, foram adicionados novos recursos e funcionalidades, tais como extrair campos de
objetos, misturar arrays diferentes em um só, declarar variáveis com escopos fechados e
muito mais. A linguagem permanece a mesma, no entanto.
Afinal, para que serve o ECMA?
Essas novas adaptações permitem à linguagem JS ampliar seu uso e trazer facilidades
ao programador na hora de criar os seus algoritmos. Em um exemplo de criação de uma
nova array adicionando um valor extra para cada elemento de uma array base, teríamos, no
modo clássico:
const familiaSantana = []
for(let i = 0; i < [Link]; i++) {
let pessoa = familia[i];
[Link](pessoa + “ Santana”);
}
2
E, no modo atualizado:
const familiaSantana = [Link](pessoa =>pessoa + “ Santana”)
Com isso, você já consegue perceber que há uma diferença gritante entre um algoritmo
e outro e que ambos já resolvem o mesmo problema, porém de maneira um pouco mais
sofisticada.
Veja a seguir algumas das vantagens de usar o ECMAScript:
» O processo traz mais rapidez tanto na leitura quanto na execução;
» Não há necessidade de compilação, como no caso de programas escritos em TypeScript;
» Dispõe de suporte na maior parte dos navegadores disponíveis no mercado;
» Tem um código leve e de fácil acesso;
» Há uma grande comunidade por trás para ajudar com qualquer dúvida.
O ECMAScript é muito simples de aprender e entender, principalmente para quem já
conhece JS. Além disso, ele oferece incontáveis bibliotecas, frameworks, que flexibilizam
demais os processos.
Features do ECMAScript
Entre as principais atualizações relacionadas às versões do ECMAScript, com as features,
podemos classificar algumas delas como:
» Funções map, filter e reduce;
» Funções arrow;
» Função find;
» Funções some e every.
»
Primeiras versões do ECMAScript
ES2005: Com a ampliação das tecnologias aplicadas à rede mundial de computadores, a
primeira versão foi criada para o ECMAScript. Por meio dela, foi possível adicionar novos
recursos e funções, facilitando, e muito, a vida de pessoas programadoras que precisavam
de uma maior versatilidade no programa.
3
Entre as principais features adicionais, estão:
[Link]();
.reduce();
.filter();
JSON;
string;
data.
ES2006: Também conhecida como ES6, a versão ECMAScript de 2006 acabou se
mostrando extremamente útil para quem a utiliza. Por meio dela, as pessoas começaram a
utilizar palavras-chave para criar variáveis com escopo de bloco. Além disso, dois recursos
foram adicionados: let e const.
Por meio do const, é possível criar constantes utilizando escopo de bloco. Além dessa
função muito útil, ainda foram adicionadas as seguintes funcionalidades:
» Desestruturação: utilizando a opção de desestruturação, é possível extrair algumas
propriedades de um determinado objeto, criando variáveis com os valores aplicados;
» Promises: com esta função, foi possível tornar o mundo assíncrono ainda mais simples, livrando
os programadores de resultados indefinidos e do callback.
» Instruções de importação/exportação: a partir desta versão, é possível exportar qualquer
coisa de um determinado arquivo usando export e importar com import.
ES2007: Com a versão de 2007 do ECMAScript, foi possível adicionar dois módulos muito
interessantes:
» Método [Link] (), que permite verificar se um elemento existe dentro de uma matriz
ou não;
» Operador exponencial: ‘**’, com o qual não será mais preciso utilizar o [Link] () para os
operadores.
Exemplos Práticos
Palavras-chave const e let: const é sempre utilizada para declarar valores constantes;
enquanto let declara as variáveis. A diferença entre var e let é quanto ao escopo da função.
Toda var é conhecida como “hoisted to the top”. Isso significa que uma variável pode ser
usada antes de ser declarada. Variáveis declaradas do tipo const e let ficam confinadas no
escopo do bloco { } no qual são declaradas.
4
function f() {
var x = 1
let y = 2
const z = 3
{
var x = 100
let y = 200
const z = 300
[Link](‘x in block scope is’, x)
[Link](‘y in block scope is’, y)
[Link](‘z in block scope is’, z)
}
[Link](‘x outside of block scope is’, x)
[Link](‘y outside of block scope is’, y)
[Link](‘z outside of block scope is’, z)
}
f()
x in block scope is 100
y in block scope is 200
z in block scope is 300
x outside of block scope is 100
y outside of block scope is 2
z outside of block scope is 3
Funções helper para arrays
Para facilitar a manipulação de arrays, temos os helpers, que realizam filtro, verificação de
condicionais por cada elemento, entre tantas outras funcionalidades importantes.
forEach: executa uma função para cada um dos elementos de um array. O argumento
dessa função helper é cada um dos elementos do array.
5
var colors = [‘red’, ‘green’, ‘blue’]
function print(val) {
[Link](val)
}
[Link](print)
red
green
blue
map: cria um array contendo o mesmo número de elementos de um determinado array. Os
elementos do array criado são definidos por uma função, ou seja, converte o array original
em outro, renomeando seus elementos.
const colors = [‘red’, ‘green’, ‘blue’]
function print(val) {
[Link](val)
}
[Link](print)
red
green
blue
filter: cria um array contendo um subconjunto dos elementos do array original. O
subconjunto de elementos do novo array é determinado por uma função que retorna true
ou false quando verifica uma determinada condição para cada elemento do array original.
const values = [1, 60, 34, 30, 20, 5]
function lessThan20(val) {
return val < 20
}
const valuesLessThan20 = values.
filter(lessThan20)
[Link](valuesLessThan20)
red
6
Arrow functions
A sintaxe para a escrita, até mesmo das mais simples funções JavaScript, tais como somar
ou multiplicar, é bastante verbosa e complexa. Existe uma maneira mais simples de se
escrever funções? Sim, experimente as arrow functions (funções de setas).
const array = [1, 2, 3, 4]
const sum = (acc, value) => acc + value
const product = (acc, value) => acc * value
const sumOfArrayElements = [Link](sum, 0)
const productOfArrayElements = [Link](product, 1)
red
Template Strings
Viu, no exemplo anterior, como tivemos de construir a mensagem no console
concatenando strings? Estamos acostumados a fazer isso, mas não deixa de ser ruim.
Com o ES6, agora temos os template strings, que nos permite fazer interpolação de strings
utilizando a crase e o cifrão acompanhado de chaves (${}), como neste exemplo, com o
meu nome:
const pessoa = {
nome: ‘Diego’,
sobrenome: ‘Martins de Pinho’
[Link](`Meu nome é ${[Link]} ${pessoa.
sobrenome}`);
[Meu nome é Diego Martins de Pinho]
Desestruturamento
Extrair informações de objetos e arrays ficou muito mais fácil também. Agora, podemos
criar variáveis que correspondem às propriedades do objeto tudo em uma tacada só
usando as chaves ({}).
7
const VideoGame = {
modelo: ‘PlayStation’,
fabricante: ‘Sony’,
midia: ‘Blu-Ray’,
armazenamento: ‘1TB’,
controles: 2,
preco: ‘R$ 2000.00’
}
const {modelo, fabricante} = VideoGame;
[Link](modelo, fabricante);
[PlayStation,Sony]
Agora que você já reforçou seus estudos sobre as funcionalidades do JavaScript e
exemplos de comandos, que tal começar a praticar?
No próximo módulo, veremos muito mais sobre o assunto e abordaremos mais sobre
como criar seu primeiro projeto NodeJS. Então, não deixe de aproveitar!
8
REFERÊNCIAS
[1] KRIGER, B. ECMAScript: O que é, para que serve e qual a versão atual. Kenzie, 8 set.
2022. Disponível em: [Link] Acesso em: 15 jan. 2023.
[2] KYĆ, Ł. Dez exemplos de funcionalidades das ES6. Maujor, 9 nov. 2017. Disponível em:
[Link] Acesso em: 15
jan. 2023.
[3] LOURENCO, L. JavaScript ECMAScript 6 - ES6 | Introdução | Coffee Tag #58. YouTube
[Canal: Leo @LeoCoffeeTag], 9 jan. 2021. Disponível em: [Link]
watch?v=msNMQEhemis. Acesso em: 15 jan. 2023.
[4] PINHO, D. M. de. As funcionalidades mais legais do ES6 através de exemplos. Medium
[Code Prestige], 22 set. 2017. Disponível em: [Link]
funcionalidades-mais-legais-do-es6-atrav%C3%A9s-de-exemplos-983a330ca314.
Acesso em: 15 jan. 2023.
[5] ZEMEL, T. 6 truques de ECMAScript 6. DPW – desenvolvimento para web, 31 ago. 2016.
Disponível em: [Link]
truques/. Acesso em: 15 jan. 2023.