{"id":6805,"date":"2015-05-16T18:30:16","date_gmt":"2015-05-16T21:30:16","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=6805"},"modified":"2015-05-16T18:30:16","modified_gmt":"2015-05-16T21:30:16","slug":"como-funcionam-closures-em-javascript","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/como-funcionam-closures-em-javascript\/","title":{"rendered":"Como funcionam as Closures em JavaScript?"},"content":{"rendered":"

As\u00a0closures em JavaScript<\/strong><\/em>\u00a0permitem que programadores escrevam melhor, de modo mais conciso e expressivo. Mas voc\u00ea sabe o que, de fato, elas s\u00e3o? Ter um conhecimento sobre closures e como utiliza-las \u00e9 um passo importante para compreender mais ainda a linguagem de programa\u00e7\u00e3o JavaScript.<\/p>\n

Uma closure \u00e9 uma fun\u00e7\u00e3o interna que possui acesso a (refer\u00eancia) vari\u00e1veis independentes da fun\u00e7\u00e3o externa. Em outras palavras, a fun\u00e7\u00e3o definida na closure se lembra do ambiente na qual foi criada.<\/p>\n

Ap\u00f3s ler a defini\u00e7\u00e3o acima pode ter parecido um pouco complicado o que, de fato, elas s\u00e3o. Mas a partir de agora vamos apresentar alguns exemplos que v\u00e3o deixar mais claro o seu funcionamento.<\/p>\n

Escopo L\u00e9xico<\/strong><\/span><\/h1>\n

Antes de exemplificar o funcionamento das closures em JavaScript, \u00e9 preciso entender que o c\u00f3digo escrito na linguagem segue um padr\u00e3o l\u00e9xico (isso mesmo, uma estrutura lingu\u00edstica). O escopo l\u00e9xico de uma fun\u00e7\u00e3o \u00e9 definido como sua posi\u00e7\u00e3o f\u00edsica na estrutura do c\u00f3digo fonte. Veja o exemplo abaixo:<\/p>\n

var x = \u201cglobal\u201d
\nfunction iniciar() {
\nvar nome = “Impacta”; \/\/ nome da vari\u00e1vel criada dentro da fun\u00e7\u00e3o iniciar
\nfunction mostraNome() { \/\/ mostraNome() \u00e9 uma fun\u00e7\u00e3o interna.
\nalert(nome); \/\/ utiliza-se aqui a vari\u00e1vel criada na fun\u00e7\u00e3o parente.
\n}
\nmostraNome();
\n}
\niniciar();<\/p>\n

No exemplo acima, a fun\u00e7\u00e3o mostraNome() \u00e9 uma fun\u00e7\u00e3o interna que est\u00e1 est\u00e1 fisicamente englobada pela fun\u00e7\u00e3o iniciar(), logo, somente pode ser acessada no corpo desta. mostraNome() tamb\u00e9m n\u00e3o possui vari\u00e1veis pr\u00f3prias, mas consegue acessar a vari\u00e1vel nome j\u00e1 definida em sua fun\u00e7\u00e3o pai. J\u00e1 a fun\u00e7\u00e3o iniciar(), por sua vez, est\u00e1 envolvida pelo contexto global.<\/p>\n

Nesse sentido, o escopo l\u00e9xico de qualquer fun\u00e7\u00e3o \u00e9 definido pela estrutura l\u00e9xico-hierarquica de seus ancestrais. No exemplo acima, o escopo l\u00e9xico da fun\u00e7\u00e3o mostraNome() \u00e9 composto pela fun\u00e7\u00e3o iniciar() e o objeto global (vari\u00e1vel x).<\/p>\n

Closures<\/strong><\/span><\/h1>\n

Agora que ficou claro o que \u00e9 o escopo l\u00e9xico, vamos ao seguinte exemplo:
\nfunction foo(x) {
\nvar tmp = 3;
\nfunction bar(y) {
\nalert(x + y + (++tmp));
\n} bar(10);
\n}
\nfoo(2);<\/p>\n

Ao executar a fun\u00e7\u00e3o acima o resultado ser\u00e1 um alerta com o n\u00famero 16, pois a fun\u00e7\u00e3o bar() pode acessar a vari\u00e1vel x que foi definida como um argumento da fun\u00e7\u00e3o foo.<\/p>\n

E isto \u00e9 uma closure! O simples fato de que uma fun\u00e7\u00e3o pode acessar vari\u00e1veis que se encontram fora do escopo l\u00e9xico imediato cria uma closure.<\/p>\n

O pr\u00f3ximo exemplo vai deixar ainda mais claro a utilidade das closures.<\/p>\n

function adiciona(x) {
\nreturn function(y) {
\nreturn x + y;
\n};
\n}
\nvar add5 = adiciona(5);
\nvar add10 = adiciona(10);
\nconsole.log(add5(5)); \/\/ O resultado ser\u00e1 10
\nconsole.log(add10(5)); \/\/ O resultado ser\u00e1 15<\/p>\n

N\u00f3s criamos a fun\u00e7\u00e3o adiciona(x), que aceita um argumento \u201cx\u201d e retorna uma nova fun\u00e7\u00e3o. A fun\u00e7\u00e3o retornada aceita um argumento \u201cy\u201d e retorna a soma de \u201cx\u201d + \u201cy\u201d. Ou seja, a fun\u00e7\u00e3o adiciona(x) \u00e9 uma \u201cm\u00e1quina de fun\u00e7\u00f5es\u201d. Ao referenci\u00e1-la em vari\u00e1veis que definem a vari\u00e1vel \u201cx\u201d, uma nova fun\u00e7\u00e3o \u00e9 criada.<\/p>\n

No exemplo acima n\u00f3s criamos duas novas fun\u00e7\u00f5es, add5() e add10(), a primeira adicionando 5 como o argumento \u201cx\u201d e a segunda adicionando 10. Estas duas fun\u00e7\u00f5es s\u00e3o closures, pois compartilham o mesmo corpo da fun\u00e7\u00e3o adiciona(), mas guardam argumentos diferentes.<\/p>\n

Em termos de programa\u00e7\u00e3o, closures representam grande sofistica\u00e7\u00e3o. Tornam os c\u00f3digos mais compactos e f\u00e1ceis de ler, al\u00e9m de reaproveit\u00e1veis. Saber como utiliz\u00e1-las elimina muito tempo e retrabalho. Esperamos que este artigo tenha deixado claro como elas funcionam e seja o come\u00e7o para o entendimento deste artif\u00edcio genial. Se voc\u00ea ainda tiver d\u00favidas, favor deixar uma mensagem em nossos coment\u00e1rios.<\/p>\n

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

Seja um especialista em Javascript aprendendo no melhor centro de ensino tecnol\u00f3gico<\/span><\/h1>\n

No curso de JavaScript da Impacta<\/a> voc\u00ea\u00a0aprende os conceitos e t\u00e9cnicas b\u00e1sicas de utiliza\u00e7\u00e3o do JavaScript para o desenvolvimento de sites mais atrativos e efetivos. Vendo\u00a0na\u00a0pr\u00e1tica, voc\u00ea conhece os principais recursos da linguagem e como sua integra\u00e7\u00e3o com HTML oferece melhores op\u00e7\u00f5es de arquitetura de informa\u00e7\u00e3o e, consequentemente, um resultado melhor junto ao usu\u00e1rio.<\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>