JavaScript: você sabe o que são e por que usar Symbols? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 09 Horas 13 Min 07 Seg Tempo restante da oferta: 09 13 07 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) JavaScript: você sabe o que são e por que usar Symbols? [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # JavaScript: você sabe o que são e por que usar Symbols? Descubra a utilidade dos Symbols no JavaScript, novo tipo primitivo introduzido no ES2015. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/27155937/js-symbol.png) Olá web developers! Desde o ES2015 nós temos um novo tipo primitivo no JavaScript, os `Symbols`. Este tipo já existe em outras linguagens como o Ruby, onde é muito utilizado (no JavaScript seu funcionamento é um pouco diferente). Porém, no JavaScript ele ainda é pouco conhecido. Vamos conhecer melhor os `Symbols` e onde eles podem ser usados. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## O que são Symbols? De modo bem simples e direto, `Symbol` (símbolo) é um tipo primitivo que armazena um valor único. Seu propósito é esse, servir como um identificador único. Pense neles como as suas digitais: até irmãos gêmeos idênticos possuem o mesmo DNA mas possuem digitais diferentes, significando que cada dedo é único. ## Como os Symbols funcionam? Para declarar um `Symbol` basta usar a função `Symbol()`. ```js const meuSymbol = Symbol(); ``` Também podemos passar para esta função um parâmetro que indica uma descrição do `Symbol`. Isso serve apenas para nos ajuda na hora de debugar o código, para sabermos melhor sobre do que se trata aquele `Symbol`. Não muda nada em sua criação. ```js const meuSymbol = Symbol('meu simbolo'); ``` Como `Symbols` são únicos, mesmo que a gente os crie de forma igual teremos `Symbols` diferentes. ```js Symbol('meu simbolo') === Symbol('meu simbolo'); // false ``` ## Onde usar Symbols? E por que usar `Symbol`? Onde seria interessante o seu uso? Vamos ver alguns casos: [ ![React Native - Autenticação com Firebase Authentication](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Autenticação com Firebase Authentication Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-autenticacao-com-firebase-authentication) ### Eficiência no uso de memória Imagine que a gente tenha um objeto com uma propriedade nome: ```js const meuObjeto = {'nome': 'TreinaWeb'}; ``` Sempre que chamarmos `meuObjeto['nome']` estaremos criando uma `String` nova na memória, `'nome'`. Em um sistema grande com várias chamadas a propriedades de objetos, onde a otimização do uso de memória é essencial, usar `Symbols` poderia ajudar, já que cada `Symbol` é único e, portanto, ocupa um único lugar na memória. ```js const nome = Symbol(); const meuObjeto = {[nome]: 'TreinaWeb'}; ``` Agora sempre que acessarmos a propriedade `nome` iremos usar o `Symbol` que está armazenado na variável `nome`, nos ajudando a melhorar o consumo de memória. Porém, a gente poderia fazer isso com `Strings` salvas em constantes, não é mesmo? Acessando a mesma variável também teremos acesso ao mesmo elemento na memória. ```js const nome = 'nome'; const meuObjeto = {[nome]: 'TreinaWeb'}; ``` Vamos ter o mesmo resultado, mas como agora estamos usando `String`, um outro programador pode muito bem escrever direto `meuObjeto["nome"]` para acessar a propriedade, criando uma nova `String` na memória e jogando no lixo a melhoria que tentamos fazer. Com `Symbols` o programador seria forçado a usá-los para acessar as propriedades pois, por serem únicos, não tem como criar um outro idêntico. **Sim, eu sei que o programador poderia escrever `meuObjeto.nome` e não estaria criando uma nova `String`, mas isso é só para o exemplo.** Mesmo sendo um caso de uso, não fica muito bonito ter que ficar declarando várias propriedades antes, seja por `Symbols` ou constantes com `Strings`. Mas há momentos em que realmente precisamos declarar vários valores que serão constantes, e é aí que entra algo comum em várias linguagens, `Enums`. ### Enums `Enuns` são muito usados quando precisamos definir várias constantes. Imagine que a gente vai desenvolver um jogo e queremos criar constantes para definir as direções que o nosso personagem poderá andar. ```js // nosso Enum de direções const directions = { RIGHT: Symbol('Right'), LEFT: Symbol('Left') } /* função a ser chamada quando o jogador apertar algum botão, recebendo a tecla que foi pressionada */ function onButton(key){ /* lógica para movimentar o personagem */ switch(key){ case directions.RIGHT: x++; break; case directions.LEFT: x--; break; } } ``` Com `Symbols` nós obrigamos o programador a utilizá-los. Se usássemos `Strings` ele poderia escrever em algum lugar `case "RIGHT"`, o que criaria uma nova `String`. Para termos de manutenção, testes e performance, é melhor evitar ficar escrevendo valores literais pelo código. ### Colisão de Nomes Como `Symbols` são únicos, é impossível haver colisão de nomes. Imagine que a gente tenha um módulo JavaScript com um objeto. Esse objeto possui uma propriedade `contador` que foi criada com `Symbol` e temos uma função que incrementa o nosso contador. ```js const contador = Symbol(); export const meuObjeto = { [contador]: 1, incrementar(){ meuObjeto[contador]++; } }; ``` Podemos importar nosso objeto e executar o método `incrementar()`. Porém, mesmo se criarmos uma outra variável `contador` com `Symbol()`, não estaremos sobrescrevendo o contador do módulo. Como todo `Symbol` é único, nossa variável `contador` de um módulo é diferente da variável `contador` do outro módulo. ```js import { meuObjeto } from 'meuArquivo'; meuObjeto.incrementar(); // podemos incrementar const contador = Symbol(); meuObjeto[contador] = 55; // esta propriedade será outra ``` Assim evitamos colisões de nomes acidentalmente. Isso pode acontecer caso você utilize duas bibliotecas que armazenam algo no escopo global. Outro uso interessante para isso é poder acrescentar algo a um objeto já existente em um código, como uma biblioteca. Se você simplesmente alterar algo em um objeto de uma biblioteca, corre o risco de sobrescrever algo importante deste objeto e fazer a biblioteca parar de funcionar corretamente. Mesmo que você escolha um nome que não esteja em uso, há o risco de lançarem uma atualização utilizando exatamente este nome de propriedade. Há bibliotecas que criam variáveis com `"@@"` ou `"__"` como prefixo de nomes de propriedades que não devem ser usados. Com `Symbols` não há como haver esse perigo de algo ser acessado ou sobrescrito sem querer, pois ao criar seu `Symbol` ele será único. ### Separar propriedades do objeto Quando criamos propriedades em objetos usando `Symbols` podemos dizer que estas propriedades são “escondidas”. Onde isso poderia ser interessante? Imagine que a gente possua os seguintes objetos com algumas informações: ``` const minhaLista = [ {nome: 'maçã', total: 15, ativo: true}, {nome: 'banana', total: 28, ativo: true} ]; Object.keys(minhaLista[0]); // ['nome', 'total', 'ativo'] ``` Agora pense que a gente queira jogar os campos “nome” e “total” em uma tabela usando um código que gera uma tabela automaticamente. Cada coluna da tabela deve ser uma propriedade do objeto, então basta pegar um dos objetos e passar para `Object.keys()` que receberemos um `Array` com o nome das propriedades. Porém isso nos trará o campo `ativo` junto, que é um campo que não queremos. Se criarmos esse campo `ativo` com `Symbols` ele não será retornado. ``` const ativo = Symbol(); const minhaLista = [ {nome: 'maçã', total: 15, [ativo]: true}, {nome: 'banana', total: 28, [ativo]: true} ]; Object.keys(minhaLista[0]); // ['nome', 'total'] ``` Esse é um exemplo bem simples, mas que pode ser muito interessante caso você esteja trabalhando com `metaprogramação`. Para obter uma lista com os `Symbols` podemos usar a função `Object.getOwnPropertySymbols()`. ## Erros sobre Symbols ### Propriedades Privadas? NÃO! Há um certo engano sobre `Symbols`. Como eles são únicos, algumas pessoas pensam que podemos tentar usá-los para evitar que algo seja acessado. Imagine que a gente crie um objeto dentro de um módulo. Esse objeto possui uma propriedade criada com um `Symbol`. ```js const contador = Symbol(); export const meuObjeto = { [contador]: 1 }; /*aqui conseguimos acessar a propriedade criada com o Symbol */ meuObjeto[contador]; ``` Como o `Symbol` não foi exportado, não conseguiremos acessar a propriedade de fora do módulo (será mesmo?). ```js import { meuObjeto } from 'meuArquivo'; meuObjeto[?????]; // não tem como acessar ``` Mas lembre-se que podemos obter os `Symbols` de um objeto, então há sim como conseguirmos acessar as propriedades “ocultas”. ```js import { meuObjeto } from 'meuArquivo'; const meuSymbol = Object.getOwnPropertySymbols(meuObjeto)[0]; meuObjeto[meuSymbol]; // conseguimos pegar o Symbol e acessar a propriedade que armazena o contador ``` Devido ao fato de podermos recuperar `Symbols`, eles não garantem propriedades privadas. Há outros meios para se fazer isso. ## É impossível haver conflito de Symbols? Nem sempre Se você criar `Symbols` como mostrado nesse post (utilizando a função `Symbol()`), realmente você terá um `Symbol` único. Mas há outra forma de criá-los. ```js Symbol('a') === Symbol('a'); // false Symbol.for('a') === Symbol.for('a'); // true ``` `Symbol.for()` é um outro meio de se criar `Symbols`, mas ele os cria em um tipo de registro global. Então se você criar algo com `Symbol.for()` e passar um mesmo valor pelo parâmetro tanto em um Service Worker e um iFrame, por exemplo, teremos exatamente o mesmo `Symbol`. Então, já que a ideia dos `Symbols` é serem únicos, prefira evitar o uso de `Symbol.for()`. ## Conclusão A função de `Symbols` é apenas uma: servir como um identificador único. Então podemos usá-los muito bem com objetos onde usaríamos alguma `String` para criar certas propriedades (como os `Enums`), utilizá-los para inserir metadados ou acrescentar algo em um objeto já existente sem o perigo de sobrescrever algo que possa ser importante para seu funcionamento. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Programação ](https://www.treinaweb.com.br/blog/tag/programacao) - [ #Symbols ](https://www.treinaweb.com.br/blog/tag/symbols) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/13164211/JAVASCRIPT-COISAS-ESTRANHAS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Entendendo as partes estranhas ](https://www.treinaweb.com.br/blog/javascript-entendendo-as-partes-estranhas) Conheça o motivo por trás de vários comportamentos considerados estranhos que o JavaScript possui. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/javascript-generators-e-onde-usa-los-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Generators e onde usá-los ](https://www.treinaweb.com.br/blog/javascript-generators-e-onde-usa-los) Veja como e onde podemos aproveitar os Generators no JavaScript para melhorar o nosso código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/CONHECENDO-VÁRIAVEIS-CONSTANTES-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Conhecendo variáveis e constantes no JavaScript ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-javascript) Neste artigo vamos aprender a declarar e a utilizar constantes e variáveis no JavaScript, entendendo quando definir var, let e const. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/24103343/comecar-com-javascript1-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que é e como começar com JavaScript? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript) Quer iniciar seus estudos em JavaScript e não sabe por onde começar? Veja o que preparamos pra você. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/MONGO-DB-400x280.png) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 6 anos atrás ## [ O que é MongoDB? ](https://www.treinaweb.com.br/blog/o-que-e-mongodb) Certamente você já ouviu falar sobre o uso do MongoDB em projetos. Por isso, veremos neste artigo o que vem a ser o MongoDB e as vantagens que temos ao utilizá-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/qual-a-diferenca-entre-ecmascript-e-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Qual a diferença entre ECMAScript e JavaScript? ](https://www.treinaweb.com.br/blog/qual-a-diferenca-entre-ecmascript-e-javascript) Conheça a história e as curiosidades por trás da criação do ECMAScript e JavaScript. Entenda de uma vez por todas a diferença entre ECMAScript e JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/typescript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Precisamos falar sobre o TypeScript ](https://www.treinaweb.com.br/blog/precisamos-falar-sobre-o-typescript) O TypeScript é um caso interessante. Ou você o adora ou o odeia. Parece não haver um consenso intermediário de maneira geral na comunidade. Vamos conversar um pouco sobre? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/31131011/funções-js-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 8 anos atrás ## [ JavaScript: métodos de Arrays que você precisa conhecer ](https://www.treinaweb.com.br/blog/javascript-metodos-de-arrays-que-voce-precisa-conhecer) Trabalha com JavaScript? Então você precisa conhecer estes métodos para trabalhar com Arrays. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/javascript_generators-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Assíncrono com Generators ](https://www.treinaweb.com.br/blog/javascript-assincrono-com-generators) Generators são uma funcionalidade que veio no ES2015 para nos auxiliar no desenvolvimento de código assíncrono. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/5-bons-motivos-para-estudar-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ 5 bons motivos para estudar JavaScript ](https://www.treinaweb.com.br/blog/5-bons-motivos-para-estudar-javascript) O JavaScript é uma linguagem que está praticamente em todos os lugares por causa de sua flexibilidade e adaptabilidade à diversos ambientes. Vamos conferir nesse artigo 5 bons motivos para você estudar essa linguagem. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **09h 13min 07s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58