"ES6 não adicionou apenas recursos. Transformou como escrevemos JavaScript. O código de hoje parece uma linguagem diferente do código de 2014."
Desde o ECMAScript 2015 (ES6), JavaScript ganhou sintaxe que você usa todo dia: const, arrow functions, destructuring, spread, template literals, ?. e ??.
const user = { name: 'Alice', prefs: { theme: 'dark' } };const theme = user?.prefs?.theme ?? 'light';const greet = (name = 'Guest') => `Hello, ${name}!`;Neste guia da série 33 Conceitos JS — projeto open source criado por Leonardo Maldonado — você consolida os recursos ES6+ que definem o JS moderno.
Pré-requisitos: Scope and Closures (let/const) e this, call, apply & bind — essencial para entender arrow functions.
// metadados do artigo
{
"tag": "advanced topics",
"readTime": "24 min",
"author": "Vanderlei José Alamino",
"source": "33jsconcepts.com",
"series": "33 Conceitos JS",
"part": {
"current": 33,
"total": 38
}
}Fonte de referência
Conteúdo adaptado a partir do guia original em inglês.
seção
var | let | const | |
|---|---|---|---|
| Escopo | Função | Bloco | Bloco |
| Hoisting | Sim (undefined) | TDZ | TDZ |
| Redeclarar | Sim | Erro | Erro |
for (var i = 0; i < 3; i++) setTimeout(() => console.log(i), 100);// 3, 3, 3 for (let i = 0; i < 3; i++) setTimeout(() => console.log(i), 100);// 0, 1, 2Regra moderna: const por padrão, let se reatribuir, evite var. Detalhes em Scope and Closures.
seção
const add = (a, b) => a + b;const square = x => x * x;const greet = () => 'Hello!';Diferença crítica: arrow functions não têm this, arguments, super ou new.target próprios — herdam do escopo léxico.
const counter = { count: 0, start() { setInterval(() => { this.count++; // this = counter }, 1000); },};this não é o objetonew ArrowFn() → TypeErrorarguments — use rest ...argsconst createUser = name => ({ name, active: true }); // ✓ parêntesesconst bad = name => { name: name }; // ✗ undefined (bloco, não objeto)seção
Array — por posição:
const [first, , third] = ['red', 'green', 'blue'];const [head, ...tail] = colors;let x = 1, y = 2;[x, y] = [y, x]; // troca sem tempObject — por nome de propriedade:
const { name, age = 18 } = user;const { name: userName } = user;const { address: { city } } = user;const { id, ...rest } = obj;Parâmetros de função:
function createUser({ name, age = 18, role = 'user' } = {}) { return { name, age, role };}Erro comum: { name } = user → SyntaxError. Use ({ name } = user).
seção
| Contexto | Nome | Ação |
|---|---|---|
| Chamada, array/objeto literal | Spread | Expande |
| Parâmetro, destructuring | Rest | Coleta |
const combined = [...arr1, ...arr2];const settings = { ...defaults, ...userPrefs };function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }Math.max(...arr);Cópia rasa: spread copia só o primeiro nível. Aninhados ainda compartilham referência — use structuredClone() para deep copy.
seção
const msg = `Hello, ${name}! You are ${age} years old.`;const total = `Total: $${(price * (1 + tax)).toFixed(2)}`;Backticks permitem multiline sem concatenação de \n.
Tagged templates — função processa partes e valores:
function highlight(strings, ...values) { return strings.reduce((acc, s, i) => acc + s + (values[i] ?? ''), '');}Base de styled-components, GraphQL builders, etc.
seção
const city = user?.address?.city; // propriedadeconst val = user?.[dynamicKey]; // bracketconst result = obj.method?.(); // chamadaPara em null/undefined — retorna undefined sem TypeError.
// ✓ quando null é válidoconst name = apiResponse?.data?.user?.displayName ?? 'Anonymous'; // ✗ esconde bug se user é obrigatóriofunction process(user) { return user?.name?.toUpperCase(); }seção
| Valor | `\ | \ | ` | ?? |
|---|---|---|---|---|
null / undefined | default | default | ||
0, '', false | default | mantém |
const count = response.count ?? 10; // 0 permanece 0const port = process.env.PORT ?? 3000;Atribuição lógica (ES2021):
options.retries ??= 3;options.debug ||= false;user.lastLogin &&= new Date();Combine com ?.: user?.address?.city ?? 'Unknown'.
seção
function greet(name = 'Guest', greeting = 'Hello') { return `${greeting}, ${name}!`;}Disparam só com undefined — null, 0, '' e false não ativam default.
Defaults podem referenciar parâmetros anteriores: function rect(w, h = w) { ... }.
Expressões como Date.now() rodam a cada chamada, não na definição.
seção
const user = { name, age }; // property shorthandconst calc = { add(a, b) { return a + b; } }; // method shorthandconst obj = { [dynamicKey]: value }; // computed keysShorthand reduz { name: name } → { name }. Métodos async funcionam igual.
seção
Map — chaves de qualquer tipo, ordem de inserção, .size:
const map = new Map([['a', 1], [objKey, 2]]);map.set(key, value).get(key).has(key);for (const [k, v] of map) { ... }Set — valores únicos:
const unique = [...new Set([1, 2, 2, 3])]; // [1, 2, 3]Symbol — identificador único, chaves ocultas de Object.keys:
const ID = Symbol('id');const user = { name: 'Alice', [ID]: 12345 };Use Map quando chaves não são strings ou precisa de .size/performance. Object para JSON e records simples.
seção
for (const color of colors) { } // valores (iterables)for (const index in arr) { } // chaves (strings!)for...of | for...in | |
|---|---|---|
| Itera | Valores | Propriedades/chaves |
| Arrays | ✓ valores | índices como string |
Prefira for...of em arrays, strings, Map, Set. Combine com destructuring: for (const { name } of users).
seção
seção
seção
Você avançou na trilha Advanced Topics — quarto de nove conceitos avançados.
Aprofunde Scope and Closures e this, call, apply & bind para dominar arrow functions de verdade.
→ ES Modules — o sistema de entrega de código
Fonte de referência: 33jsconcepts.com/concepts/modern-javascript-syntax ⬀
this; não use como método/construtor({ x } = obj)...${expr} e multilineundefined