WEBVTT

00:00:00.710 --> 00:00:03.134
Agora que você domina 
o básico de funções,

00:00:03.134 --> 00:00:07.574
gostaria de falar sobre um tópico que 
pode se tornar um pouco complicado.

00:00:07.574 --> 00:00:11.228
A diferença entre variáveis
locais e globais.

00:00:11.228 --> 00:00:14.241
Estes termos podem não significar
nada para você agora.

00:00:14.241 --> 00:00:16.542
Então, vamos começar 
com um exemplo.

00:00:16.542 --> 00:00:20.178
Criei este programa para mostrar quantas
polegadas cresci na minha infância.

00:00:20.178 --> 00:00:22.329
Visto que humanos crescem 
a taxas diferentes,

00:00:22.329 --> 00:00:24.681
desenvolvi esta função
<i>calcInches</i> (calcPolegadas).

00:00:24.681 --> 00:00:25.690
cujos argumentos são:

00:00:25.690 --> 00:00:27.921
<i>startAge</i> (idadeInicial), 
<i>endAge</i> (idadeFinal)

00:00:27.921 --> 00:00:29.661
e <i>inchesPerYear</i> (polegadasPorAno).

00:00:29.661 --> 00:00:34.601
Ela calculará o crescimento total,
em polegadas, durante aquele período

00:00:34.601 --> 00:00:37.456
e então retornará o resultado
para quem quer que a chamou.

00:00:37.456 --> 00:00:40.329
Podemos ver aqui que de 
zero a oito anos

00:00:40.329 --> 00:00:44.840
eu chamo <i>calcInches</i> e passo zero,
oito e 2,5 como parâmetros.

00:00:44.840 --> 00:00:48.426
porque eu cresci aproximadamente
2,5 polegadas por ano.

00:00:48.426 --> 00:00:52.373
Então ela faz o cálculo e retorna 20.

00:00:52.373 --> 00:00:58.000
De oito para dezesseis, eu passei
oito, dezesseis e dois.

00:00:58.000 --> 00:01:01.710
porque eu não cresci tanto e pode-se 
ver que ela retorna dezesseis.

00:01:01.710 --> 00:01:04.852
Isso é agradável, mas 
agora quero, na verdade,

00:01:04.852 --> 00:01:07.035
mostrar quantas polegadas 
eu cresci no total,

00:01:07.035 --> 00:01:09.011
durante toda minha infância.

00:01:09.011 --> 00:01:11.623
Então, como faço isso?

00:01:11.623 --> 00:01:15.094
Bem, eu poderia começar a olhar 
meu código e pensar...

00:01:15.094 --> 00:01:17.094
quais valores eu tenho aqui?

00:01:17.094 --> 00:01:20.758
Será que tenho alguma coisa que
represente o total de polegadas?

00:01:20.758 --> 00:01:24.088
Veja, eu tenho esta variável
<i>totalInches</i> (totalPolegadas)

00:01:24.088 --> 00:01:26.471
dentro da minha função
<i>calcInches</i> (calcPolegadas).

00:01:26.471 --> 00:01:28.665
Nesse caso, eu poderia 
simplesmente mostrá-la,

00:01:28.665 --> 00:01:30.555
e ver seu valor, começar por aí.

00:01:30.555 --> 00:01:31.530
Então, escrevemos:

00:01:31.530 --> 00:01:34.525
<i>text(totalInches, 10, 200)</i>

00:01:34.525 --> 00:01:36.336
e colocamos isso na parte inferior.

00:01:36.336 --> 00:01:37.879
Ok, vamos ver o que temos.

00:01:39.210 --> 00:01:41.201
Apareceu o cara do 'Oh noes!'.

00:01:41.201 --> 00:01:45.470
E ele diz que há um problema:
"<i>totalInches</i> não está definida."

00:01:45.470 --> 00:01:49.735
Isso, é estranho porque definimos
totalInches bem aqui, certo?

00:01:49.739 --> 00:01:52.018
var totalInches igual...

00:01:52.018 --> 00:01:57.772
Bem, o problema é que declaramos
totalInches dentro de uma função,

00:01:57.772 --> 00:01:59.520
nesta linha aqui.

00:01:59.520 --> 00:02:02.139
E quando declaramos uma variável
dentro de uma função,

00:02:02.139 --> 00:02:05.229
a variável é considerada local.

00:02:05.229 --> 00:02:09.043
Ela vive apenas dentro desta função aqui

00:02:09.043 --> 00:02:12.077
e o código fora da função, isso tudo,

00:02:12.077 --> 00:02:15.613
não enxerga variáveis locais
dentro de funções.

00:02:15.613 --> 00:02:18.216
Apenas vê o que quer
que retorne da função.

00:02:18.216 --> 00:02:21.538
Apenas vê o valor, mas não a variável.

00:02:21.538 --> 00:02:24.524
Então quando tentamos usar 
totalInches fora da função,

00:02:24.524 --> 00:02:26.147
o código não sabe o que é.

00:02:26.147 --> 00:02:29.847
Ele apenas diz: "Ei, eu nunca vi esta 
variável antes. Ela não está definida.

00:02:29.847 --> 00:02:31.581
Não posso mostrá-la."

00:02:31.971 --> 00:02:34.183
Mas, existe uma maneira que

00:02:34.183 --> 00:02:38.003
podemos fazer isso, tal que o código
de fora possa ver esta variável, ou seja,

NOTE Paragraph

00:02:38.003 --> 00:02:42.602
se tornarmos esta variável local
em uma variável global.

00:02:42.602 --> 00:02:47.575
Podemos fazer isso, movendo a definição
dela para fora da função,

00:02:47.575 --> 00:02:51.105
para o que chamamos de escopo global.

00:02:51.105 --> 00:02:54.476
Agora, dentro da função, tudo que 
estamos fazendo é

00:02:54.476 --> 00:02:58.489
mudando o valor dela cada vez e 
não definindo-a e declarando-a.

00:02:58.489 --> 00:03:02.715
Veja que é mostrado "Crescimento 
total durante a vida: 16".

00:03:02.715 --> 00:03:06.584
Então, ele encontrou a variável, porque
a definimos em um escopo global.

00:03:06.584 --> 00:03:09.717
Mas este não é exatamente o 
valor que estamos procurando.

00:03:09.717 --> 00:03:11.460
Este é apenas o valor mais recente.

00:03:11.460 --> 00:03:13.726
Isso é porque toda vez que
chamamos esta função,

00:03:13.726 --> 00:03:18.476
ela atribui a totalInches o que quer 
que esteja calculando daquela vez, certo?

00:03:19.087 --> 00:03:22.035
O que realmente queremos
é uma nova variável,

00:03:22.035 --> 00:03:24.748
que usaremos apenas para 
armazenar o total geral,

00:03:24.748 --> 00:03:29.231
a qual aumentaremos sempre que
calcularmos o total para um período.

00:03:29.231 --> 00:03:33.853
Nesse caso, vamos alterar isso de volta 
para ser uma variável local

00:03:33.853 --> 00:03:38.333
e vamos criar uma nova variável global
chamada <i>lifeInches</i> (vidaPolegadas).

00:03:38.333 --> 00:03:40.762
Vamos iniciá-la com zero.

00:03:40.762 --> 00:03:42.996
Depois, dentro da função,

00:03:42.996 --> 00:03:46.053
incrementaremos esta 
variável global, escrevendo:

00:03:46.053 --> 00:03:48.970
<i>lifeInches += totalInches.</i>

00:03:48.970 --> 00:03:50.403
Então, adicionaremos a ela ...

00:03:50.403 --> 00:03:53.607
qualquer tanto que for calculado cada vez
que chamarmos esta função.

00:03:53.607 --> 00:03:56.233
Iremos adicioná-lo à variável
global <i>lifeInches</i>.

00:03:56.233 --> 00:03:58.888
Depois, após a última linha, 
mostraremos <i>lifeInches</i>:

00:03:58.888 --> 00:04:00.319
<i>text(lifeInches, 10, 200)</i>

00:04:01.267 --> 00:04:03.670
Nosso crescimento total durante a vida.

00:04:03.670 --> 00:04:06.383
Não é minha altura de verdade.
Sou maior que isso.

00:04:06.383 --> 00:04:10.756
Mas é porque começamos nascidos
com comprimento maior que zero.

00:04:10.756 --> 00:04:14.196
Então, se quero o total eu poderia
talvez começar em 20.

00:04:14.196 --> 00:04:17.087
E aí está! Essa é minha altura.

00:04:17.087 --> 00:04:18.783
Certo, então vamos revisar.

00:04:18.783 --> 00:04:22.292
<i>totalInches</i> é o que chamamos
de variável local.

00:04:22.292 --> 00:04:26.072
Sabemos isso porque ela foi 
declarada dentro desta função

00:04:26.072 --> 00:04:28.597
e não fora de uma função.

00:04:28.597 --> 00:04:34.703
Isso significa que este código de fora
não conhece a variável <i>totalInches</i>.

00:04:34.703 --> 00:04:37.632
Agora, <i>lifeInches</i> é o que chamamos
de variável global.

00:04:37.632 --> 00:04:41.451
Sabemos disso porque vemos sua
declaração fora de qualquer função,

00:04:41.451 --> 00:04:43.524
em um escopo global.

00:04:43.524 --> 00:04:47.195
Então, tente lembrar disso quando estiver
escrevendo funções e suas variáveis

00:04:47.195 --> 00:04:48.400
e pense consigo mesmo

00:04:48.400 --> 00:04:51.682
se você quer uma variável local para
ser usada apenas por sua função

00:04:51.682 --> 00:04:54.743
ou uma variável global, para
se programa inteiro utilizar.

00:04:54.743 --> 00:04:57.524
Não se preocupe se isso 
te faz quebrar a cabeça.

00:04:57.524 --> 00:05:00.116
É um dos conceitos mais difíceis 
em programação

00:05:00.116 --> 00:05:01.892
e em Javascript, em particular.

00:05:01.892 --> 00:05:04.428
Você ficará bom nisso com a prática.

00:05:04.428 --> 00:05:06.000
Legendado por [Carlos A. N. C. R.]
Revisado por [Fernando dos Reis]