7.8.6 - Classes e Objetos

📦 JSON – O mensageiro universal da web

📦 JSON – O mensageiro universal da web

---

🧠 O que é JSON?

JSON (JavaScript Object Notation) é um formato leve de troca de dados. Ele permite que informações sejam armazenadas e transmitidas entre sistemas, de forma simples e compreensível tanto para humanos quanto para computadores.

💡 Apesar do nome ter "JavaScript", JSON é usado por praticamente todas as linguagens de programação!

---

🔎 Por que JSON foi criado?

JSON foi criado por Douglas Crockford no início dos anos 2000. Na época, os dados eram trocados em formatos como XML — que eram mais pesados e difíceis de ler.

JSON surgiu para resolver isso:

• 📤 Facilitar a troca de dados entre servidores e navegadores

• 🧾 Manter uma estrutura parecida com objetos do JavaScript

• 🔄 Ser fácil de converter, entender e manipular

---

📌 Quando usar JSON?

• Ao consumir APIs (serviços na internet)

• Ao salvar configurações ou dados locais

• Ao enviar ou receber dados de um banco de dados

• Ao trabalhar com arquivos .json

---

🧱 Estrutura do JSON

A estrutura do JSON é muito parecida com um objeto JavaScript, com algumas regras:

{
  "nome": "Ana",
  "idade": 22,
  "cursos": ["HTML", "CSS", "JavaScript"],
  "ativo": true
}

🔹 Chaves entre aspas 🔹 Valores podem ser: string, número, booleano, array, objeto ou null 🔹 Sem métodos! (JSON é só dados)

---

🔄 Conversões: Objeto ⇆ JSON

Objeto → JSON (string)

const usuario = {
  nome: "João",
  idade: 25
};

const jsonString = JSON.stringify(usuario);
console.log(jsonString);
// 👉 {"nome":"João","idade":25}

JSON → Objeto

const jsonData = '{"nome":"João","idade":25}';
const obj = JSON.parse(jsonData);

console.log(obj.nome); // João

---

📚 Tem métodos?

Sim! O objeto global JSON do JavaScript tem dois métodos principais:

Método	O que faz
JSON.stringify(obj)	Converte objeto JS → JSON (string)
JSON.parse(json)	Converte JSON (string) → objeto JS

---

📥 Acessando dados

const dados = '{"nome":"Luna","cidade":"São Paulo"}';
const obj = JSON.parse(dados);

console.log(obj.nome); // Luna
console.log(obj.cidade); // São Paulo

---

🧮 JSON com matrizes (arrays)

[
  { "id": 1, "nome": "Carlos" },
  { "id": 2, "nome": "Marina" }
]

const json = `[{"id":1,"nome":"Carlos"},{"id":2,"nome":"Marina"}]`;
const lista = JSON.parse(json);

console.log(lista[0].nome); // Carlos

---

⚠️ Erros comuns

• ❌ Esquecer as aspas nas chaves ("chave": valor)

• ❌ Colocar funções dentro do JSON (não é permitido)

• ❌ Usar comentários no JSON (não são suportados)

• ❌ Esquecer vírgulas entre pares chave:valor

---

📌 Convenções importantes

• Use aspas duplas " " (não simples)

• Use UTF-8 (padrão universal de texto)

• Mantenha as chaves organizadas e identadas

• Não use undefined, NaN ou Infinity (eles não são válidos em JSON)

---

🛠️ Boas práticas

✅ Usar JSON.stringify() e JSON.parse() sempre ✅ Validar seu JSON antes de enviar ou carregar ✅ Nomear suas chaves com clareza ✅ Usar ferramentas como https://jsonlint.com/ para validar

---

😵 Más práticas

🚫 Colocar métodos dentro de um JSON 🚫 Usar JSON para salvar dados sensíveis (como senhas) no front-end 🚫 Misturar JSON com HTML

---

📡 Como o JSON é lido pelo computador?

Quando o JSON chega ao navegador, ele vem como uma string de texto. O computador não entende ainda que aquilo são dados estruturados.

✅ É aí que usamos JSON.parse() — que transforma aquela string em um objeto JavaScript real, com o qual podemos interagir normalmente no código.

---

🌐 Exemplos reais de uso

• Consumir dados de uma API REST (fetch)

• Armazenar dados em localStorage

• Trocar informações entre sistemas backend/frontend

• Configuração de aplicativos em arquivos .json (package.json, por exemplo)

---

🧠 Dica final

Sempre que você ver uma API, um arquivo .json ou um backend conversando com o frontend... pode ter certeza: o JSON está ali no meio! 🕊️

Ele é o "inglês universal" dos dados na web — simples, direto e poderoso. Entender JSON é uma chave essencial pra entrar no mundo da programação moderna. 🔑✨