FlowingDev

JSON, Explicado: O Formato de Dados que Roda a Web por Baixo dos Panos

Aprenda o que é JSON (JavaScript Object Notation), por que ele é o formato dominante para troca de dados e como sua estrutura simples baseada em texto funciona.

Testar a ferramenta: Editor JSON

Em uma frase

JSON é um formato leve, baseado em texto, para estruturar e trocar dados que é fácil para humanos lerem e para máquinas fazerem o parse.

O problema que ele resolve

Na época das cavernas da web (final dos anos 90 e início dos anos 2000), se você quisesse que seu site buscasse novos dados sem um recarregamento completo da página, você provavelmente estaria usando uma tecnologia chamada AJAX (Asynchronous JavaScript and XML). E, como o nome indica, o formato de dados escolhido era o XML.

O XML é poderoso, mas também é... prolixo. É pesado. É cheio de tags de abertura, tags de fechamento, atributos e namespaces. Fazer o parse dele em JavaScript, a linguagem do navegador, era um porre. Você tinha que navegar por uma árvore de documentos desajeitada, e simplesmente não parecia nativo.

<!-- Este é apenas um usuário. Imagine uma lista de milhares. Credo. -->
<user id="123">
  <username>coder_dave</username>
  <isActive>true</isActive>
  <roles>
    <role>admin</role>
    <role>editor</role>
  </roles>
</user>

Por volta de 2001, um desenvolvedor chamado Douglas Crockford estava trabalhando em um projeto e precisava de uma maneira mais simples de passar dados para o navegador. Ele teve uma sacada genial: o JavaScript já tinha uma forma perfeitamente boa de representar estruturas de dados — sua própria sintaxe de objeto literal. E se você pudesse simplesmente enviar dados como uma string que parecesse um objeto JavaScript?

Este foi o nascimento do JSON (JavaScript Object Notation). Um servidor poderia enviar este texto:

{
  "id": 123,
  "username": "coder_dave",
  "isActive": true,
  "roles": ["admin", "editor"]
}

...e o navegador poderia, com esforço mínimo, transformá-la em um objeto JavaScript nativo com o qual poderia trabalhar instantaneamente. Era enxuto, limpo e perfeitamente adequado à língua nativa da web. Essa simplicidade causou uma explosão Cambriana nas APIs web, impulsionando a ascensão das aplicações de página única (single-page applications) dinâmicas, backends para mobile e, basicamente, toda a internet moderna como a conhecemos. O JSON não resolveu apenas um problema técnico; ele azeitou as engrenagens para uma geração inteiramente nova de software.

Como funciona por baixo dos panos

Em sua essência, JSON é apenas um conjunto de regras para escrever dados como texto. As regras são simples, e é exatamente por isso que ele faz tanto sucesso.

Os Blocos de Construção: Chaves e Valores

O universo inteiro do JSON é construído sobre uma estrutura simples: o par chave-valor.

"chave": valor

  • A chave é sempre uma string, entre aspas duplas. Isso não é negociável.
  • O valor pode ser um de alguns tipos de dados específicos.

Esse par descreve uma única informação, como "nome": "Luke Skywalker" ou "idade": 19.

Os Tipos de Dados

O JSON é rigoroso com seus tipos de valor. Você não pode simplesmente jogar qualquer coisa lá. Você tem seis tipos básicos mais o null.

Tipo Exemplo Descrição
String "A força é forte neste aqui." Qualquer texto. Deve estar entre aspas duplas.
Number 1138 ou 3.14 Números inteiros ou de ponto flutuante. Sem distinção.
Boolean true ou false Sempre em minúsculas. Representa um estado binário.
Array ["Tatooine", "Dagobah", "Bespin"] Uma lista ordenada de valores, entre [].
Object { "arma": "sabre de luz", "cor": "verde" } Uma coleção não ordenada de pares chave-valor, entre {}.
Null null Representa a ausência intencional de um valor.

É isso. Note o que está faltando: funções, datas (são enviadas como strings), undefined e, o mais famoso, comentários. Esse minimalismo é uma feature, não um bug; ele mantém o formato sem ambiguidades e fácil de ser processado por qualquer linguagem de programação.

Estruturando Dados: Objetos e Arrays

O poder real vem de aninhar esses tipos. O valor em um par chave-valor pode ser outro objeto ou um array. Isso permite que você construa estruturas de dados arbitrariamente complexas.

Objetos ({...}) são usados para agrupar dados relacionados sobre uma única "coisa". Pense nisso como um verbete de dicionário ou um perfil.

Arrays ([...]) são usados para listas ordenadas de itens. Os itens em um array podem ser de qualquer tipo, até mesmo misturados (embora geralmente seja uma boa prática mantê-los uniformes).

Vamos ver um exemplo mais completo:

{
  "squadName": "Heróis de Star Wars",
  "formed": 1977,
  "active": true,
  "members": [
    {
      "name": "Luke Skywalker",
      "age": 19,
      "secretIdentity": null,
      "powers": [
        "Truques mentais Jedi",
        "Pilotagem",
        "A Força"
      ]
    },
    {
      "name": "Han Solo",
      "age": 29,
      "secretIdentity": null,
      "powers": [
        "Precisão com blaster",
        "Sarcasmo",
        "Kessel Run em menos de 12 parsecs"
      ]
    }
  ]
}

Viu? Temos um objeto externo descrevendo o esquadrão. Uma de suas propriedades, "members", é um array. Cada elemento desse array é outro objeto, representando um único herói. E cada objeto de herói tem suas próprias propriedades, uma das quais ("powers") é outro array de strings. É assim que você constrói uma árvore de dados com JSON.

De Texto para Objeto: O Parse

O truque de mágica é transformar esse texto em algo que um programa possa usar.

  1. Serialização: Uma aplicação no lado do servidor (escrita em Python, Java, Go, etc.) tem dados em memória. Ela usa uma biblioteca JSON para serializar esses dados em uma string formatada em JSON. Em JavaScript, isso é JSON.stringify().
  2. Transmissão: Essa string é enviada pela rede, tipicamente como o corpo (body) de uma resposta HTTP.
  3. Parsing: O cliente (como um navegador web) recebe essa string. Ele usa um parser de JSON embutido para transformar a string de volta em uma estrutura de dados nativa que ele pode manipular. Em JavaScript, isso é JSON.parse().

Este processo de duas etapas de stringify-e-parse é o batimento cardíaco da comunicação web moderna.

Histórias do mundo real

O App Mobile Bugado

Uma startup lançou um aplicativo de pedidos para uma rede de restaurantes local. Certa manhã, o aplicativo começou a "crashar" para todos os usuários assim que era aberto. A equipe de desenvolvimento estava em pânico total. Os logs do servidor mostravam que a API estava enviando um status 200 OK, e os dados pareciam bons quando eles deram uma olhada rápida. Após horas de depuração frenética, eles finalmente inspecionaram o texto puro da resposta da API. Um desenvolvedor backend, tentando ser prestativo, adicionou uma nota para seus colegas diretamente no código que gerava o JSON: // TODO: Confirmar horários do fim de semana. Esse comentário estava sendo incluído na string JSON final. Embora inofensivo no código, um comentário torna o JSON inválido. O parser de JSON rigoroso do aplicativo viu o // inesperado e falhou imediatamente, "crashando" o app antes que ele pudesse sequer exibir uma mensagem de erro.

Lição: Parsers de JSON não perdoam. O formato é estritamente definido por uma razão: garantir a interoperabilidade. Um único caractere inválido — um comentário, uma vírgula no final (trailing comma), uma aspa simples — fará com que um parser válido rejeite todo o payload.

O Fiasco do Preço Internacional

Uma empresa americana de e-commerce estava expandindo para a Alemanha. Sua API enviava informações de produtos como JSON, incluindo um campo price. Para um item de $19.95, o JSON era "price": 19.95. Em preparação para o lançamento alemão, um desenvolvedor atualizou o backend para formatar o preço de acordo com as convenções alemãs, onde a vírgula é usada como separador decimal. A API começou a enviar "price": "19,95". O código do frontend, no entanto, ainda esperava um número. Em JavaScript, parseFloat("19,95") resulta em apenas 19, descartando tudo após a vírgula. De repente, todos os produtos na Alemanha estavam sendo exibidos com um desconto gigantesco e incorreto.

Lição: JSON é para dados brutos, não para apresentação. O tipo de dado importa. Um preço é um número, então envie-o como um número (19.95). Deixe a aplicação do lado do cliente (o navegador ou app mobile) cuidar da tarefa de formatar esse número para $19.95, 19,95 € ou ¥19 com base na localidade (locale) do usuário. Não misture dados com lógica de exibição.

O Arquivo de Configuração Inexplicável

Uma pequena equipe estava configurando um novo serviço usando um arquivo config.json para armazenar connection strings de banco de dados, chaves de API e feature flags. À medida que a configuração se tornava mais complexa, eles precisavam desesperadamente adicionar comentários para explicar o que cada configuração enigmática fazia e por que ela tinha um valor específico. Mas JSON proíbe comentários. A "solução" deles foi criar um arquivo config_documentation.md que precisava ser mantido em sincronia com config.json. Isso rapidamente se tornou um grande porre. Eventualmente, eles perceberam seu erro.

Lição: Use a ferramenta certa para o trabalho. O JSON é o campeão indiscutível para a troca de dados entre máquinas (como uma resposta de API). Mas para arquivos de configuração mantidos por humanos, onde comentários e legibilidade são críticos, outros formatos como YAML ou até mesmo um simples arquivo .js são muitas vezes uma escolha muito melhor.

Erros e armadilhas comuns

  • Vírgulas no final (Trailing Commas): Adicionar uma vírgula após o último elemento em um objeto ou array ("key": "value",}) tornará seu JSON inválido. Este é um erro comum para desenvolvedores acostumados com sintaxes mais tolerantes em JavaScript.
  • Comentários: Você não pode usá-los. // e /* ... */ não fazem parte da especificação e quebrarão o parse. Se você precisar adicionar metadados, terá que fazê-lo dentro da própria estrutura de dados, ex: { "_comment": "Esta é minha anotação", "realData": "..." }.
  • Aspas Simples: Todas as chaves e todos os valores de string devem usar aspas duplas ("). Usar aspas simples (') é JSON inválido, embora seja comum em JavaScript.
  • Chaves com undefined: Enviar {"key": undefined} não é possível. O par chave-valor geralmente será omitido durante a serialização. Para representar um valor ausente, use null.
  • Usar Números como Strings: Embora você possa enviar um número como uma string (ex: "id": "123"), é uma má prática. Isso força a aplicação receptora a ter trabalho extra para convertê-lo de volta para um número e pode levar a bugs sutis (ex: "10" > "9" é false na comparação de strings).

Por que isso deve estar no seu radar

Se você mexe com código de alguma forma, você vai encontrar JSON. Não é uma questão de se, mas de quando e com que frequência.

  • Desenvolvedores Web: Vocês consumirão JSON de APIs e o enviarão a partir de seus formulários. Todo o estado da sua aplicação é provavelmente gerenciado como um objeto tipo JSON.
  • Desenvolvedores Backend: Vocês construirão APIs que produzem JSON e consomem JSON de outros serviços.
  • Desenvolvedores Mobile: Vocês se comunicarão com o backend exclusivamente através de APIs que falam JSON.
  • DevOps/SREs: Ferramentas de infraestrutura como código, pipelines de CI/CD e APIs de provedores de nuvem são todos configurados e gerenciados com JSON ou formatos similares.
  • Cientistas de Dados: Vocês extrairão dados de APIs da web, e quase sempre eles chegarão como JSON.
  • Não desenvolvedores curiosos: Entender a estrutura simples de chave-valor do JSON pode desmistificar como os aplicativos no seu celular obtêm seus dados e como os sites carregam conteúdo dinamicamente. É uma espiada por baixo do capô do mundo digital.

JSON é a língua franca dos dados na internet. Conhecer suas regras e seu propósito é uma habilidade fundamental para qualquer pessoa que constrói ou trabalha com software moderno.

Aprofunde-se

  • JSON.org: A especificação original de uma página por Douglas Crockford. Uma aula de mestre em simplicidade.
  • RFC 8259: O "padrão" oficial da IETF que formaliza o formato JSON para a internet.
  • MDN: Working with JSON: O guia definitivo para desenvolvedores JavaScript, explicando JSON.parse() e JSON.stringify().
  • Wikipedia: JSON: Fornece uma ótima visão geral da história, derivados (como GeoJSON) e comparações com outros formatos.

Teoria feita. Hora de pôr a mão na massa — 100% no seu navegador.

Testar a ferramenta: Editor JSON