{"id":232319,"date":"2023-01-12T11:18:00","date_gmt":"2023-01-12T08:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232319"},"modified":"2022-11-10T08:42:06","modified_gmt":"2022-11-10T05:42:06","slug":"5-recursos-javascript-de-ponta-para-melhorar-seu-codigo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/5-recursos-javascript-de-ponta-para-melhorar-seu-codigo\/","title":{"rendered":"5 recursos JavaScript de ponta para melhorar seu c\u00f3digo"},"content":{"rendered":"\n

Os recursos do JavaScript est\u00e3o sempre crescendo e recebendo novos, como operadores, constru\u00e7\u00f5es de sintaxe, express\u00f5es. Muitos que foram introduzidos nos \u00faltimos anos e alguns deles j\u00e1 s\u00e3o uma segunda natureza, como a express\u00e3o de seta gorda ou o operador de =><\/code>propaga\u00e7\u00e3o de objeto ....<\/code><\/p>\n

Os recursos do JavaScript come\u00e7am como propostas<\/h2>\n

Todos esses recursos JavaScript come\u00e7am como propostas submetidas ao TC 39. O Comit\u00ea T\u00e9cnico 39<\/a> se encarrega de padronizar:<\/p>\n

\n

a linguagem de programa\u00e7\u00e3o ECMAScript (JavaScript) de uso geral, plataforma cruzada e neutra em rela\u00e7\u00e3o ao fornecedor. Isso inclui a sintaxe, a sem\u00e2ntica e as bibliotecas da linguagem e as tecnologias complementares que suportam a linguagem.<\/p>\n<\/blockquote>\n

Existem muitas propostas JavaScript que podemos come\u00e7ar a adicionar ao nosso fluxo hoje, gra\u00e7as ao Babel, o compilador JavaScript<\/a>. Alguns deles oferecem mais clareza, como o separador num\u00e9rico. Outros, como as do<\/code>express\u00f5es, introduzem a capacidade de ter condicionais complexas misturadas com tags React JSX.<\/p>\n

Vejamos neste artigo 5 recursos JavaScript que ainda est\u00e3o em est\u00e1gios de proposta, mas que podemos usar com o Babel e melhorar\u00e3o significativamente sua experi\u00eancia de codifica\u00e7\u00e3o.<\/p>\n

Cada uma tem um link para sua p\u00e1gina do Babel onde voc\u00ea pode ver como configurar o Babel para us\u00e1-lo, embora os recursos JavaScript propostos descritos aqui j\u00e1 estejam inclu\u00eddos no Babel 7. Cada se\u00e7\u00e3o tamb\u00e9m tem um link para sua proposta na organiza\u00e7\u00e3o Ecma TC39<\/a> em GitHub<\/a>.<\/p>\n

Operador de coalesc\u00eancia nulo<\/h2>\n

\"5<\/a><\/p>\n

Proposta: https:\/\/github.com\/tc39\/proposal-nullish-coalescing<\/a><\/p>\n

Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-nullish-coalescing-operator.html<\/a><\/p>\n

Esta proposta JavaScript descreve um operador que permite fornecer um valor de fallback no lado direito do operador quando uma vari\u00e1vel ou uma propriedade de objeto \u00e9 indefinida. Se n\u00e3o for indefinido, usar\u00e1 o lado esquerdo do operador:<\/p>\n

const maybeUndef = undefined;\nconst val = maybeUndef ?? 2021; <\/code><\/pre>\n
Isso \u00e9 semelhante a escrev\u00ea-lo como um operador tern\u00e1rio:<\/p>\n
const maybeUndef = undefined;\nconst val = maybeUndef? maybeUndef: 2021; <\/code><\/pre>\n
Observe que esse operador n\u00e3o verifica se o var n\u00e3o existe. Isso lan\u00e7ar\u00e1 um erro:<\/p>\n
const val = maybeUndef ?? 2021;  <\/code><\/pre>\n
Mas cuidado, esse operador n\u00e3o \u00e9 100% como um operador tern\u00e1rio que retorna o primeiro lado se a condi\u00e7\u00e3o avaliada for verdadeira. Ele n\u00e3o avaliar\u00e1 valores que geralmente s\u00e3o falsos em JavaScript<\/a> para false<\/code>. Por exemplo, uma string vazia n\u00e3o ser\u00e1 considerada false<\/code>:<\/p>\n
const someEmptyString = '';\nconst val = someEmptyString ?? 'fallback'; <\/code><\/pre>\n
Ao contr\u00e1rio desse operador de coalesc\u00eancia nulo, um operador tern\u00e1rio seria lan\u00e7ado fallback<\/code>como resultado dessa avalia\u00e7\u00e3o.<\/p>\n
Operador de encadeamento opcional<\/h2>\n
\"5<\/a><\/p>\n
Proposta: https:\/\/github.com\/tc39\/proposal-optional-chaining<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-optional-chaining.html<\/a><\/p>\n
Este operador tamb\u00e9m funciona em vari\u00e1veis \u200b\u200be propriedades de objetos: ele verifica se as propriedades aninhadas que estamos percorrendo existem ou n\u00e3o. Sem este operador, temos que verificar cada propriedade aninhada:<\/p>\n
const val = anObj && anObj.aProp && anObj.aProp.aNestedProp<\/code><\/pre>\n
Com o novo operador de encadeamento opcional, podemos fazer algo como:<\/p>\n
const val = anObj.aProp?.aNestedProp<\/code><\/pre>\n
Isso parece muito mais claro e \u00e9 mais curto para escrever. Esse operador tamb\u00e9m funciona com arrays num\u00e9ricos, ent\u00e3o \u00e9 bom trabalhar com cole\u00e7\u00f5es:<\/p>\n
const val = anObj.anArray[0]?.someProp<\/code><\/pre>\n
E podemos empilhar v\u00e1rios operadores:<\/p>\n
const val = anObj.anArray[0]?.someProp?.aNestedProp<\/code><\/pre>\n
E se combinarmos isso com o anterior, coalesc\u00eancia nula? Obtemos uma sintaxe que verifica se cada propriedade atravessada existe e, se n\u00e3o existir, fornece um valor de fallback:<\/p>\n
const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'<\/code><\/pre>\n
Se algum dos valores n\u00e3o existir, ele retornar\u00e1 someDefaultValue<\/code>. Combinar esses dois operadores \u00e9 uma \u00f3tima maneira de substituir a fun\u00e7\u00e3o get<\/a> do lodash .<\/p>\n
Operador de pipeline<\/h2>\n
\"5<\/a><\/p>\n
Proposta: https:\/\/github.com\/tc39\/proposal-pipeline-operator<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-pipeline-op<\/a> e<\/a> rator<\/a><\/p>\n
Esse operador faz parte de v\u00e1rios recursos experimentais do JavaScript e fornece mais legibilidade ao encadear v\u00e1rias fun\u00e7\u00f5es. Considere a seguinte fun\u00e7\u00e3o:<\/p>\n
const reverseWords = \n      str => str\n        .split( ' ') .reduce( (revStr, word) => [ word, ...revStr ], []) .join( ' ' );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Se precisarmos reutilizar essas transforma\u00e7\u00f5es parciais que est\u00e3o encadeadas, podemos dividi-las em fun\u00e7\u00f5es diferentes e compor o resultado usando-as:<\/p>\n
const splitBySpace = str => str.split( ' ' );\nconst reverseArray = arr => arr.reduce( (acc, cur) => [ cur, ...acc ], [] );\nconst joinWithSpace = arr => arr.join( ' ' );\n\nconst reverseWords =\n    str => joinWithSpace(\n        reverseArray(\n            splitBySpace(\n                str)) );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
O que \u00e9 estranho nisso \u00e9 que temos que come\u00e7ar a ler isso de baixo, a splitBySpace<\/code>linha, para cima, para entender as transforma\u00e7\u00f5es aplicadas \u00e0 string. Isso vai contra nosso fluxo natural de leitura, de cima para baixo. Tamb\u00e9m acabamos com todos aqueles par\u00eanteses pendurados feios. Isso poderia ser escrito em uma linha e n\u00e3o \u00e9 muito mais bonito:<\/p>\n
const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str)) );<\/code><\/pre>\n
Aqui, temos que come\u00e7ar a ler da fun\u00e7\u00e3o central para as fun\u00e7\u00f5es externas, ou da direita para a esquerda, o que \u00e9 contra-intuitivo para a leitura ocidental da esquerda para a direita.<\/p>\n
O operador de pipeline pode tornar essas constru\u00e7\u00f5es muito mais leg\u00edveis e semelhantes ao encadeamento que t\u00ednhamos originalmente antes de mover as transforma\u00e7\u00f5es para fun\u00e7\u00f5es separadas:<\/p>\n
const reverseWords =\n    str => str\n        |> splitBySpace\n        |> reverseArray\n        |> joinWithSpace;<\/code><\/pre>\n
Agora as transforma\u00e7\u00f5es aplicadas s\u00e3o escritas de forma semelhante \u00e0 nossa maneira de escrever, de cima para baixo, s\u00e3o mais claras para ler, e n\u00e3o temos nenhum par\u00eantese pendurado. Sucesso!<\/p>\n
Separador num\u00e9rico<\/h2>\n
\"5<\/a><\/p>\n
Proposta: https:\/\/github.com\/tc39\/proposal-numeric-separator<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-numeric-separator.html<\/a><\/p>\n
Esse separador num\u00e9rico \u00e9 diferente dos outros recursos do JavaScript, pois n\u00e3o \u00e9 um operador. \u00c9 uma constru\u00e7\u00e3o de sintaxe que torna os literais num\u00e9ricos mais leg\u00edveis criando uma separa\u00e7\u00e3o visual entre grupos de d\u00edgitos. Literais num\u00e9ricos grandes s\u00e3o dif\u00edceis de analisar e entender rapidamente, principalmente quando um d\u00edgito \u00e9 repetido v\u00e1rias vezes. Por exemplo:<\/p>\n
const longNum = 1000000000000;<\/code><\/pre>\n
\u00c9 dif\u00edcil entender com uma olhada r\u00e1pida. Este separador torna mais leg\u00edvel:<\/p>\n
const longNum = 1_000_000_000_000;<\/code><\/pre>\n
Agora podemos entender rapidamente que isso \u00e9 um trilh\u00e3o.<\/p>\n
Fazer express\u00f5es<\/h2>\n
\"5<\/a><\/p>\n
Proposta: https:\/\/github.com\/tc39\/proposal-do-expressions<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-do-expressions<\/a><\/p>\n
O \u00faltimo dos novos recursos JavaScript que veremos \u00e9 uma express\u00e3o que pode ser avaliada. O resultado dessa express\u00e3o vem ap\u00f3s a execu\u00e7\u00e3o de um bloco que pode conter v\u00e1rias instru\u00e7\u00f5es. Podemos entender facilmente as express\u00f5es do se traduzirmos uma express\u00e3o de operador tern\u00e1rio como esta:<\/p>\n
const res = isCold( color )? 'light-blue': 'orange';<\/code><\/pre>\n
Escrever\u00edamos a do{}<\/code>express\u00e3o equivalente assim:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else {\n        'orange';\n    }\n};<\/code><\/pre>\n
Observe que n\u00e3o precisamos retornar o valor, pois isso n\u00e3o \u00e9 uma fun\u00e7\u00e3o. Embora neste caso em particular, isso possa ser escrito de forma mais sucinta como um tern\u00e1rio, as express\u00f5es do s\u00e3o muito mais poderosas, permitindo v\u00e1rias instru\u00e7\u00f5es, por exemplo:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else if (isHot( color)) {\n        'orange';\n    } else if (isRain( color)) {\n        'purple';\n    } else {\n        'green';\n    }\n};<\/code><\/pre>\n
Onde isso \u00e9 realmente poderoso \u00e9 no JSX, onde podemos mistur\u00e1-lo com suas tags sem precisar calcular o resultado externamente primeiro. Por exemplo, poder\u00edamos fazer o seguinte se estiv\u00e9ssemos usando React<\/a> para renderizar esses componentes:<\/p>\n
const MyComp = ({ color }) => ({\n            do {\n                if (isCold( color)) {\n                    ;\n                } else if (isHot( color)) {\n                    ;\n                } else if (isRain( color)) {\n                    ;\n                } else {\n                    ;\n                }\n            }\n        }\n\n);<\/code><\/pre>\n
Mais propostas de JavaScript<\/h2>\n
H\u00e1 mais propostas sendo discutidas a cada dia para adicionar recursos mais interessantes \u00e0 linguagem JavaScript. Uma lista cada vez maior desses recursos JavaScript propostos pode ser lida em https:\/\/github.com\/tc39\/proposals#ecmascript-proposals<\/a>. As propostas aqui est\u00e3o quase conclu\u00eddas e, portanto, pr\u00f3ximas de serem adicionadas ao padr\u00e3o ECMAScript, conforme explicado nesta tabela que descreve o processo de aceita\u00e7\u00e3o<\/a>.<\/p>\n
Alguns dos novos recursos de JavaScript que exploramos neste artigo, como as express\u00f5es do ou o operador de pipeline, s\u00e3o propostas de est\u00e1gio 1<\/a>, o que significa que eles ainda t\u00eam um caminho a percorrer antes de se tornarem parte do padr\u00e3o ECMAScript.<\/p>\n
Fonte de grava\u00e7\u00e3o:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Conhe\u00e7a 5 novos recursos, operadores e express\u00f5es JavaScript, que ir\u00e3o melhorar seu c\u00f3digo, tornando-o mais leg\u00edvel e eficiente.<\/p>\n","protected":false},"author":1,"featured_media":157555,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,753,722,733,846],"tags":[1170],"class_list":["post-232319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-codigo-aberto","category-desenvolvedor","category-javascript-8","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=232319"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232319\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/157555"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=232319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=232319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=232319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}