{"id":2683,"date":"2020-04-10T17:32:58","date_gmt":"2020-04-10T20:32:58","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=2683"},"modified":"2025-09-02T13:56:23","modified_gmt":"2025-09-02T16:56:23","slug":"javascriptes","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2020\/04\/10\/javascriptes","title":{"rendered":"JavaScript:ES"},"content":{"rendered":"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ol\u00e1 pessoal, tudo bem? O PET-Reda\u00e7\u00e3o de hoje abordar\u00e1 um pouco sobre a linguaguem \u201cqueridinha\u201d dos programadores.<\/p>\n

O ECMAScript, mais conhecido como JavaScript, \u00e9 uma linguagem de programa\u00e7\u00e3o criada na d\u00e9cada de 90 que sofreu diversas mudan\u00e7as ao longo do tempo, sendo muito utilizada nos dias de hoje em frameworks como React, Vue.js, Node.js, entre outros.<\/p>\n

O ES6 \u00e9 uma vers\u00e3o dessa linguagem e buscou trazer novidades para melhor construir aplica\u00e7\u00f5es mais complexas, resolver alguns problemas do JavaScript e facilitar o desenvolvimento de bibliotecas. Vamos ver algumas dessas mudan\u00e7as, que ajudaram muito no desenvolvimento, utilizando a linguagem.<\/p>\n

O que mudou?<\/p>\n

Foi introduzido const e let, complementando a var, mas qual a diferen\u00e7a entre elas?<\/p>\n

Const<\/strong>\u00a0– \u00e9 uma constante, ou seja seu valor \u00e9 fixo, n\u00e3o podendo ser alterado ap\u00f3s a declara\u00e7\u00e3o. Em vetores, os elementos podem ser alterados, bem como adicionados.<\/p>\n

Exemplo:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Let<\/strong>\u00a0– permite declarar vari\u00e1vel no escopo do bloco, n\u00e3o podendo ser acessada fora dele. Ao utilizar let, pode-se redeclarar a vari\u00e1vel dentro de um bloco sem redeclarar a vari\u00e1vel fora dele.<\/p>\n

Exemplos:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Var<\/strong>– \u00e9 uma vari\u00e1vel que pode ter escopo de bloco, de fun\u00e7\u00e3o ou global.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Abaixo temos uma imagem que resumem onde o que cada tipo de vari\u00e1vel pode ou n\u00e3o.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

Fonte: constletvar.com<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Arrow function<\/strong>\u00a0–\u00a0Servem para encurtar fun\u00e7\u00f5es.<\/p>\n

Exemplos:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Classes<\/strong> – Para se criar uma classe utilizamos a keyword class, al\u00e9m do m\u00e9todo construtor.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Agora com a classe criada podemos criar objetos:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Podemos criar m\u00e9todos:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Al\u00e9m disso podemos criar heran\u00e7a de uma classe:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Podemos utilizar\u00a0get<\/strong>\u00a0e\u00a0set<\/strong>:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Valores padr\u00f5es de par\u00e2metros<\/strong> –\u00a0\u00c9 permitida a declara\u00e7\u00e3o de valores padr\u00f5es em par\u00e2metros de fun\u00e7\u00f5es. Exemplo:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Alguns m\u00e9todos foram implementados nessa vers\u00e3o para simplificar e ajudar quem utiliza a linguagem. Alguns destes:<\/p>\n

Array.find()<\/strong>: Retorna o valor do primeiro elemento do vetor conforme uma fun\u00e7\u00e3o<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

isInteger()<\/strong>: Retorna verdadeiro ou falso conforme o par\u00e2metro.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Operador expoente<\/strong>: Utiliza-se ** para representar o operador do expoente.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

M\u00f3dulos<\/strong>\u00a0–\u00a0Os m\u00f3dulos permitem que se encapsule todos tipos de funcionalidades, podendo utilizar essas funcionalidades em outros arquivos JavaScript, como bibliotecas.<\/p>\n

Para importar um m\u00f3dulo utilizamos:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Para exportar utilizamos:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Estamos exportando uma fun\u00e7\u00e3o que retorna uma string em mai\u00fasculo. Podemos tamb\u00e9m adicionar um m\u00f3dulo em uma p\u00e1gina HTML:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Diante disso, percebe-se que essa vers\u00e3o do JavaScript trouxe muitas evolu\u00e7\u00f5es para nos ajudar fazendo com que ela se tornasse a mais utilizada no mundo. Boas cria\u00e7\u00f5es utilizando essa incr\u00edvel linguagem! =)<\/p>\n

\u00a0<\/p>\n

Refer\u00eancias:<\/p>\n

https:\/\/www.w3schools.com\/js\/js_es6.asp<\/a><\/span><\/p>\n

https:\/\/flaviocopes.com\/es-modules\/<\/a><\/span><\/p>\n

https:\/\/medium.com\/@matheusml\/o-guia-do-es6-tudo-que-voc%C3%AA-precisa-saber-8c287876325f<\/a><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"

Ol\u00e1 pessoal, tudo bem? O PET-Reda\u00e7\u00e3o de hoje abordar\u00e1 um pouco sobre a linguaguem \u201cqueridinha\u201d dos programadores. O ECMAScript, mais conhecido como JavaScript, \u00e9 uma linguagem de programa\u00e7\u00e3o criada na d\u00e9cada de 90 que sofreu diversas mudan\u00e7as ao longo do tempo, sendo muito utilizada nos dias de hoje em frameworks como React, Vue.js, Node.js, entre […]<\/p>\n","protected":false},"author":2948,"featured_media":2681,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[149,192],"class_list":["post-2683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-redacao","tag-web-e-front-end"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/2683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/2948"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=2683"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/2683\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/2681"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=2683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=2683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=2683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}