From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../reference/statements/block/index.html | 180 +++++++++++++ .../reference/statements/break/index.html | 159 +++++++++++ .../reference/statements/class/index.html | 85 ++++++ .../reference/statements/const/index.html | 224 ++++++++++++++++ .../reference/statements/continue/index.html | 206 ++++++++++++++ .../reference/statements/debugger/index.html | 71 +++++ .../reference/statements/default/index.html | 186 +++++++++++++ .../reference/statements/do...while/index.html | 138 ++++++++++ .../reference/statements/empty/index.html | 80 ++++++ .../reference/statements/export/index.html | 223 +++++++++++++++ .../reference/statements/for-await...of/index.html | 136 ++++++++++ .../reference/statements/for...in/index.html | 203 ++++++++++++++ .../reference/statements/for...of/index.html | 298 +++++++++++++++++++++ .../javascript/reference/statements/for/index.html | 191 +++++++++++++ .../reference/statements/for_each...in/index.html | 126 +++++++++ .../statements/funcoes_assincronas/index.html | 149 +++++++++++ .../reference/statements/function/index.html | 176 ++++++++++++ .../reference/statements/function_star_/index.html | 203 ++++++++++++++ .../reference/statements/if...else/index.html | 211 +++++++++++++++ .../reference/statements/import.meta/index.html | 93 +++++++ .../reference/statements/import/index.html | 286 ++++++++++++++++++++ .../web/javascript/reference/statements/index.html | 128 +++++++++ .../reference/statements/label/index.html | 101 +++++++ .../javascript/reference/statements/let/index.html | 140 ++++++++++ .../reference/statements/return/index.html | 197 ++++++++++++++ .../reference/statements/switch/index.html | 288 ++++++++++++++++++++ .../reference/statements/throw/index.html | 237 ++++++++++++++++ .../reference/statements/try...catch/index.html | 249 +++++++++++++++++ .../javascript/reference/statements/var/index.html | 238 ++++++++++++++++ .../reference/statements/while/index.html | 142 ++++++++++ .../reference/statements/with/index.html | 183 +++++++++++++ 31 files changed, 5527 insertions(+) create mode 100644 files/pt-br/web/javascript/reference/statements/block/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/break/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/class/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/const/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/continue/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/debugger/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/default/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/do...while/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/empty/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/export/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/for-await...of/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/for...in/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/for...of/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/for/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/for_each...in/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/function/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/if...else/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/import.meta/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/import/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/label/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/let/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/return/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/switch/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/throw/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/var/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/while/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/with/index.html (limited to 'files/pt-br/web/javascript/reference/statements') diff --git a/files/pt-br/web/javascript/reference/statements/block/index.html b/files/pt-br/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..6a86a4e7d7 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/block/index.html @@ -0,0 +1,180 @@ +--- +title: block +slug: Web/JavaScript/Reference/Statements/block +tags: + - Declaração + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/block +--- +
{{jsSidebar("Statements")}}
+ +

Uma declaração em bloco (ou declaração composta (compound) em outras linguagens) é usado para agrupar nenhum ou mais declarações. O bloco é delimitado por um par de chaves e pode opcionalmente ser {{jsxref("Statements/label", "nomeado")}}:

+ +

Sintaxe

+ +

Declaração de Bloco

+ +
{
+  ListaDeDeclarações
+}
+
+ +

Declaração de Bloco Nomeada

+ +
NomeIdentificador: {
+  ListaDeDeclarações
+}
+
+ +
+
ListaDeDeclarações
+
Declarações agroupadas com a declaração em bloco.
+
NomeIdentificador
+
Um {{jsxref("Statements/label", "nome (label)")}} opcional para identificação visual ou um alvo para {{jsxref("Statements/break", "break")}}.
+
+ +

Descrição

+ +

A declaração em bloco é frequentemente chamada de declaração composta (compound) em outras linguagens. Ela permite que você use multiplas declarações onde o JavaScript espera apenas uma declaração. Combinar declarações em blocos são uma prática comum em JavaScript. O comportamento oposto é possível usando uma declaração vazia, onde você fornece nenhuma declaração, mesmo que uma seja requerida.

+ +

Regras de Bloqueio de Escopo

+ +

Com var

+ +

Variáveis declaradas com var não possuem bloqueio de escopo. Variáveis introduzidas com um bloco são guardadas no escopo da função que elas estão ou script, e os efeitos de configura-las persistem pelo próprio bloco. Em outras palavras, declarações em bloco não introduzem um escopo. Mesmo blocos "standalone" são sintaxes válidas, você não vai querer usar blocos standalone em JavaScript, porque não fazem o que você pensa que eles fazem, se você pensa que eles fazer coisas como blocos em C ou Java. Por exemplo:

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // imprime 2
+
+ +

Isso loga 2 porque a declaração var x com o bloco está no mesmo escopo que a declaração var x antes do bloco. No C ou Java, o código equivalente iria imprimir 1.

+ +

Com let e const

+ +

Por contraste, variáveis declaradas com {{jsxref("Statements/let", "let")}} e {{jsxref("Statements/const", "const")}} tem escopo bloqueado:

+ +
let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // imprime 1 1
+ +

O x = 2 é limitado ao escopo do bloco em que ele foi definido.

+ +

O mesmo true de const:

+ +
const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // imprime 1 e não invoca uma throw SyntaxError...
+ +

Note que o escope bloqueado de const c = 2 não invoca uma SyntaxError: Identifier 'c' has already been declared porque ele foi unicamente declarado no bloco.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName('ESDraft', '#sec-block', 'Block statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-block', 'Block statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.1', 'Block statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.1', 'Block statement')}}{{Spec2('ES1')}} +

Definição inicial. Implementada no JavaScript 1.0.

+
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/break/index.html b/files/pt-br/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..1eb3e24b03 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/break/index.html @@ -0,0 +1,159 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +translation_of: Web/JavaScript/Reference/Statements/break +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Sumário

+ +

O comando break encerra o loop atual, {{jsxref("Statements/switch", "switch")}}, ou o loop que foi informado no {{jsxref("Statements/label", "label")}} e transfere o controle da execução do programa para o comando seguinte.

+ +

Síntaxe

+ +
break [label];
+ +
+
label
+
Opcional. Identificador associado ao label de um comando. Se a estrutura não for um loop ou {{jsxref("Statements/switch", "switch")}}, ele será um pré-requisito.
+
+ +

Descrição

+ +

O comando break inclui um label opcional que permite ao programa encerrar a execução da estrutura que possui o nome informado na label. O comando break deve estar dentro dessa estrutura informada no label. A estrutura que possui o nome informada na label pode ser qualquer comando {{jsxref("Statements/block", "block")}}; não é necessário que seja precedida por um loop.

+ +

Exemplos

+ +

A função a seguir possui um comando break que encerra o loop  {{jsxref("Statements/while", "while")}} quando a variável i vale 3, e então retorna o valor 3 * x.

+ +
function testaBreak(x) {
+   var i = 0;
+
+   while (i < 6) {
+      if (i == 3) {
+         break;
+      }
+      i += 1;
+   }
+   return i * x;
+}
+ +

O código a seguir possui o comando break dentro de uma estrutura nomeada. O comando break deverá estar dentro da estrutura na qual o label se refere. Veja que  inner_block está dentro de outer_block.

+ +
bloco_externo:{
+
+  bloco_interno:{
+    console.log ('1');
+    break bloco_externo;      // encerra bloco_interno e bloco_externok
+    console.log (':-(');    // não é executado
+  }
+
+  console.log ('2');        // não é executado
+}
+
+ +

O código a seguir também utiliza o comando break com blocos nomeados mas gera um erro de sintaxe pois o comando break está dentro do bloco_1 mas faz uma referência ao bloco_2. Um comando break sempre deverá estar dentro da estrutura nomeada na qual fizer referência.

+ +
bloco_1:{
+  console.log ('1');
+  break bloco_2;            // SyntaxError: label not found
+}
+
+bloco_2:{
+  console.log ('2');
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
ECMAScript 1st EditionStandardDefinição inicial. Versão sem o uso do label.
ECMAScript 3rd EditionStandardVersão com label adicionada.
{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}{{Spec2('ES6')}} 
+ +

Compatibilidade de Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/class/index.html b/files/pt-br/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..4a07ded20f --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/class/index.html @@ -0,0 +1,85 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +tags: + - Classes + - Declaração + - ES2015 + - ES6 + - Estático + - JavaScript + - Static +translation_of: Web/JavaScript/Reference/Statements/class +--- +
{{jsSidebar("Statements")}}
+ +
A declaração class cria uma nova classe com dado nome usando a herança do protótipo base.
+ +

 

+ +

Você também pode definir uma classe usando {{jsxref("Operators/class", "class expression", "", 1)}}.

+ +

Sintaxe

+ +
class name [extends] {
+  // class body
+}
+
+ +

Descrição

+ +

Assim como as expressões de classe, o corpo de uma declaração de classe é executado em strict mode.

+ +

Declarações de classe não são {{Glossary("Hoisting", "hoisted")}} (ao contrário de function declarations).

+ +

Exemplos

+ +

Declaração simples de classe

+ +

No exemplo a seguir, primeiro definimos uma classe chamada Polygon, então extendemos essa classe para criar uma classe chamada Square. Note que super(), usada no construtor, só pode ser usada em construtores e deve ser chamada antes da chave this ser usada.

+ +
class Poligono {
+  constructor(altura, largura) {
+    this.nome = 'Polígono';
+    this.altura = altura;
+    this.largura = largura;
+  }
+}
+
+class Quadrado extends Poligono {
+  constructor(altura) {
+    super(altura, altura);
+    this.nome = 'Quadrado';
+  }
+}
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}definição inicial.
+ +

Compatibilidade de Browser

+ + + +

{{Compat("javascript.statements.class")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/const/index.html b/files/pt-br/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..64aa4c2fc6 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/const/index.html @@ -0,0 +1,224 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - ECMAScript6 + - ES6 + - JavaScript + - Referencia + - constantes +translation_of: Web/JavaScript/Reference/Statements/const +--- +
{{jsSidebar("Statements")}}
+ +

Constantes possuem escopo de bloco, semelhantes às variáveis declaradas usando o palavra-chave let. O valor de uma constante não pode ser alterado por uma atribuição, e ela não pod ser redeclarada.

+ +
{{EmbedInteractiveExample("pages/js/statement-const.html")}}
+ + + +

Resumo

+ +

A  declaração const cria uma variável cujo o valor é fixo, ou seja, uma constante somente leitura. Isso não significa que o valor é imutável, apenas que a variável constante não pode ser alterada ou retribuída.

+ +

Sintaxe

+ +
const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]]];
+ +
+
nameN
+
Nome da constante. Pode ser qualquer identificador válido.
+
valueN
+
Valor atribuido a constante. Pode ser qualquer expressão válida, incluindo uma função.
+
+ +

Descrição

+ +

Esta declaração cria uma constante que pode pertencer tanto ao escopo global (na janela ou objeto) quanto ao local do bloco em que é declarada. Constantes globais não se tornam propriedades do objeto window, diferente da criação de variáveis com var.

+ +

Toda constante requer um inicializador, ou seja, é preciso especificar um valor para a constante no momento em que ela é declarada (o que faz sentido, uma vez que esse valor não pode ser alterado).

+ +

A declaração const cria uma referência somente leitura a um valor. Isso não significa que esse valor é imutável, apenas que o identificador da variável constante não pode ser alterado. Se o conteúdo do identificador for um objeto, isso significa que o conteúdo do objeto (ex. seus parâmetros) podem ser alterados.

+ +

Todas as considerações de "temporal dead zone" se aplicam tanto a let quanto a const.

+ +

Uma constante não pode ter o mesmo nome que uma função ou variável que esteja no mesmo escopo.

+ +

Exemplos

+ +

O exemplo abaixo demonstra o comportamento de uma constante. Experimente executá-lo no console do seu navegador.

+ +
// NOTA: constantes podem ser declaradas em caixa alta ou baixa,
+// mas uma convenção comum é usar apenas caixa alta
+
+// define MY_FAV como uma constante e lhe atribui o valor 7
+const MY_FAV = 7;
+
+// isto falha mas não emite erros no Firefox e Chrome (porém não falha no Safari)
+MY_FAV = 20;
+
+// a variável MY_FAV possui o valor 7
+console.log("my favorite number is: " + MY_FAV);
+
+// tentar redeclarar a constante emite um erro - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
+const MY_FAV = 20;
+
+// o nome MY_FAV está reservado para a constante acima, logo também irá falhar
+var MY_FAV = 20;
+
+// isso também vai falhar
+let MY_FAV = 20;
+
+// É importante notar a natureza de escopo por bloco
+if (MY_FAV === 7) {
+    // não tem problema fazer isso, pois cria uma variável de bloco MY_FAV
+    // com escopo local (o nome MY_FAV poderia ser usado com let também)
+    let MY_FAV = 20;
+
+    // MY_FAV agora é 20
+    console.log("meu número favorito é " + MY_FAV);
+
+    // isso retorna um erro, pois tenta registrar a variável no contexto global
+    var MY_FAV = 20;
+}
+
+//MY_FAV ainda é 7
+console.log('meu número favorito é ' + MY_FAV);
+
+// const deve ser inicializada
+const FOO; // SyntaxError: missing = in const declaration
+
+// const também funciona com objetos
+const MY_OBJECT = {'key':'value'};
+
+// Sobrescrever o objeto também falha (no Firefox e Chrome mas não no Safari) - Uncaught TypeError: Assignment to constant variable.
+MY_OBJECT = {"OTHER_KEY": "value"};
+
+// Entretanto, atributos de objetos não estão protegidos,
+// logo a seguinte instrução é executada sem problemas
+MY_OBJECT.key = "otherValue"; // Utilize Object.freeze() se quiser tornar um objeto imutável
+
+// o mesmo se aplica para arrays
+const MY_ARRAY = [];
+// É possível utilizar push para incluir itens no array
+MY_ARRAY.push('A'); //["A"]
+// Todavia, atribuir um novo array para a variável gera um erro
+MY_ARRAY = ['B'];
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ES6')}}Nenhuma mudança.
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ESDraft')}}Definição inicial.
+ +

Compatibilidade nos navegadores

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}36.0 (maybe earlier)IE1112.00 (maybe earlier)5.1.7 (maybe earlier)
+

Reassignment fails

+ 		{{ CompatChrome(20) }}{{ CompatGeckoDesktop(13) }}IE11{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Reassignment fails{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Observações

+ +

Em versões anteriores do Firefox & Chrome e a partir de Safari 5.1.7 e Opera 12.00, se você define uma variável com const, você ainda consegue alterar o valor depois. Este recurso não é suportado no Internet Explorer 6-10, mas está incluído no Internet Explorer 11.

+ +

Observações específicas para Firefox

+ +

 A declaração const foi implementada no Firefox muito antes de const aparecer na especificação ECMAScript 6. For const ES6 compliance see {{bug(950547)}} and {{bug(611388)}}.

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/continue/index.html b/files/pt-br/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..7bb4497634 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,206 @@ +--- +title: continue +slug: Web/JavaScript/Reference/Statements/continue +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/continue +--- +
{{jsSidebar("Statements")}}
+ +

A palavra chave continue termina a atual iteração do laço em que ele se encontra ou de um laço rotulado, e continua a execução deste laço com a próxima iteração.

+ +

Syntax

+ +
continue [rótulo];
+ +
+
rótulo
+
Identificador associado ao laço.
+
+ +

Descrição

+ +

Diferentemente do  {{jsxref("Statements/break", "break")}}, o continue não termina a execução do laço completamente, em vez disso ele:

+ + + + + +

O continue pode incluir, opcionalmente, um rótulo que premite ao programa pular para a próxima iteração de um laço rotulado em vez de pular o loop em que ele se encontra. Neste caso, o continue necessita estar dentro deste laço rotulado.

+ +

Exemplos

+ +

Usando continue com while

+ +

O exemplo abaixo mostra um laço {{jsxref("Statements/while", "while")}} que tem um  continue que será executado quando o valor de i for 3. Assim, n terá os valores 1, 3, 7, e 12.

+ +
var i = 0;
+var n = 0;
+
+while (i < 5) {
+  i++;
+
+  if (i === 3) {
+    continue;
+  }
+
+  n += i;
+}
+
+ +

Usando o continue com um rótulo

+ +

No exemplo abaixo, um laço rotulado como checkiandj contém o laço rotulado checkj. Se o continue for alcançado, o programa continua a execução voltando ao topo do rótulo checkj. Cada vez que o continue for alcançado, checkj reiterará até sua condição for falsa. Quando retornar false, o restante de checkiandj será executado.

+ +

Se o continue tivesse o rótulo checkiandj, o programa iria continuar retornando a execução ao label checkiandj.

+ +

Veja também {{jsxref("Statements/label", "label")}}.

+ +
var i = 0;
+var j = 8;
+
+checkiandj: while (i < 4) {
+  console.log("i: " + i);
+  i += 1;
+
+  checkj: while (j > 4) {
+    console.log("j: "+ j);
+    j -= 1;
+
+    if ((j % 2) == 0)
+      continue checkj;
+    console.log(j + " is odd.");
+  }
+  console.log("i = " + i);
+  console.log("j = " + j);
+}
+
+ +

Output:

+ +
"i: 0"
+
+// start checkj
+"j: 8"
+"7 is odd."
+"j: 7"
+"j: 6"
+"5 is odd."
+"j: 5"
+// end checkj
+
+"i = 1"
+"j = 4"
+
+"i: 1"
+"i = 2"
+"j = 4"
+
+"i: 2"
+"i = 3"
+"j = 4"
+
+"i: 3"
+"i = 4"
+"j = 4"
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentários
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Versão sem rótulo.
{{SpecName('ES3')}}{{Spec2('ES3')}}Versão rotulada adicionada.
{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/debugger/index.html b/files/pt-br/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..c8e428e365 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,71 @@ +--- +title: debugger +slug: Web/JavaScript/Reference/Statements/debugger +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +
{{jsSidebar("Statements")}}
+ +

A declaração debug invoca qualquer funcionalidade de depuração disponivel, como definir um breakpoint. Se nenhuma funcionalidade de depuração estiver disponivel, essa declaração não tem nenhum efeito.

+ +

Sintaxe

+ +
debugger;
+ +

Exemplos

+ +

O exemplo a seguir mostra o código onde uma declaração debugger foi inserida para invocar um depurador (se um existir) quando a função for chamada.

+ +
function codigoPotencialmenteBugado() {
+    debugger;
+    // faça atividades de depuração como examinar, pular um passo etc.
+}
+
+ +

Quando o depurador é invocado, a execução é parada na declaração debugger. É como um breakpoint no código-fonte.

+ +

Paused at a debugger statement.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}{{Spec2('ES5.1')}}Definição Inicial
{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}{{Spec2('ES1')}} +

Apenas mencioado como uma palavra reservada.

+
+ +

Compatibilidade entre navegadores

+ +

{{Compat("javascript.statements.debugger")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/default/index.html b/files/pt-br/web/javascript/reference/statements/default/index.html new file mode 100644 index 0000000000..fb84ae5e9e --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/default/index.html @@ -0,0 +1,186 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword + - Palavra-chave +translation_of: Web/JavaScript/Reference/Statements/switch +--- +
{{jsSidebar("Statements")}}
+ +

A palavra-chave default pode ser usada em duas situações no JavaScript: com uma declaração {{jsxref("Statements/switch", "switch")}}, ou com uma declaração {{jsxref("Statements/export", "export")}}.

+ +

Sintaxe

+ +

Com uma declaração {{jsxref("Statements/switch", "switch")}}:

+ +
switch (expressao) {
+  case value1:
+    //Declarações executadas quando o resultado da expressao for value1
+    [break;]
+  default:
+    //Declarações executadas quando nenhum dos valores for igual o da expressao
+    [break;]
+}
+ +

Com a declaração {{jsxref("Statements/export", "export")}}:

+ +
export default nameN
+ +

Descrição

+ +

Para mais detalhes, veja as páginas:

+ + + +

Exemplos

+ +

Usando default em declarações switch

+ +

No exemplo a seguir, se a variável expr for "Laranjas" ou "Maças", o programa encontra os valores com o case "Laranjas" ou "Maças"  e executa a declaração correspondente. A palavra-chave default vai ajudar em qualquer outro caso e executará a declaração associada.

+ +
switch (expr) {
+  case 'Laranjas':
+    console.log('Laranjas custam R$0,59.');
+    break;
+  case 'Maças':
+    console.log('Maças custam R$0,32.');
+    break;
+  default:
+    console.log('Desculpe, nós não temos ' + expr + '.');
+}
+ +

Usando default com export

+ +

Se você quiser exportar apenas um valor ou precisa de um valor fallback para um módulo, uma exportação padrão (default export) pode ser usada:

+ +
// module "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;
+ +

Então, no outro script, isso pode ser passado direto para o import do default export:

+ +
// module "my-module.js"
+import myFunction from 'my-module';
+console.log(myFunction(3)); // 27
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Switch default{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Export default{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Switch default{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Export default{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/do...while/index.html b/files/pt-br/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..a9396d0e82 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,138 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +
{{jsSidebar("Statements")}}
+ +
+ +
A declaração do...while cria um laço que executa uma declaração até que o teste da condição for falsa (false). A condição é avaliada depois que o bloco de código é executado, resultando que uma declaração seja executada pelo menos uma vez.
+ +

Sintaxe

+ +
do
+   statement
+while (condition);
+
+ +
+
declarações
+
A declaração é executada pelo menos uma vez e re-executada cada vez que a condição (condition) for avaliada como verdadeira (true). Para executar múltiplas declarações dentro do laço, use um {{jsxref("declaração/block", "block")}} declaração ({ ... }) ao grupo dessas declarações.
+
+ +
+
condição
+
Uma expressão é validade depois de cada passagem pelo laço. Se a condição (condition) é avaliada como verdadeira (true) o bloco de código é executado novamente. Quando a condição (condition) é avaliada como falsa (false),  o controle passa para a instrução seguinte ao laço do...while.
+
+ +

Exemplos

+ +

Usando do...while

+ +

No exemplo seguinte, o laço do...while soma pelo menos uma vez e executa novamente até i não ser menor que 5.

+ +

Conteúdo HTML 

+ +
<div id="exemplo"></div>
+ +

Conteúdo JavaScript 

+ +
var resultado = '';
+var i = 0;
+do {
+   i += 1;
+   resultado += i + ' ';
+} while (i < 5);
+document.getElementById('exemplo').innerHTML = resultado;
+ +

Resultado

+ +

{{ EmbedLiveSample('Exemplos') }}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 3rd Edition.StandardInitial definition.
+ Implemented in JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}{{Spec2('ES6')}}Trailing ; is now optional.
+ +

Compatibilidade do navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}IE6+{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/empty/index.html b/files/pt-br/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..e0570b0af1 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,80 @@ +--- +title: empty +slug: Web/JavaScript/Reference/Statements/Empty +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +
{{jsSidebar("Statements")}}
+ +

Uma declaração vazia é usada para fornecer nenhuma declaração, embora a sintaxe do JavaScript esperasse uma.

+ +
{{EmbedInteractiveExample("pages/js/statement-empty.html")}}
+ + + +

Sintaxe

+ +
;
+
+ +

Descrição

+ +

A instrução vazia é um ponto-e-vírgula (;) indicando que nenhuma instrução será executada, mesmo se a sintaxe do JavaScript exigir uma.

+ +

O comportamento oposto, em que você deseja várias instruções, mas o JavaScript permite apenas uma única, é possível usando uma instrução de bloco ; combina várias declarações em uma única.

+ +

Exemplos

+ +

A instrução vazia às vezes é usada com instruções de loop. Veja o exemplo a seguir com um corpo de loop vazio:

+ +
var arr = [1, 2, 3];
+
+// Assign all array values to 0
+for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ;
+
+console.log(arr)
+// [0, 0, 0]
+
+ +

Nota: É uma boa ideia comentar o uso intencional da declaração vazia, pois não é realmente óbvio distinguir entre um ponto e vírgula normal. No exemplo a seguir, o uso provavelmente não é intencional:

+ +
if (condition);       // Caution, this "if" does nothing!
+   killTheUniverse()  // So this gets always executed!!!
+
+ +

Outro Exemplo: Uma declaração if...else declaração sem chaves ({ }). Se três for verdadeiro, nada acontecerá, quatro não importa e também a função launchRocket ( ) no caso contrário não será executada.

+ +
if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // nothing here
+else if (four)
+  doFour();
+else
+  launchRocket();
+ +

Especificações

+ + + + + + + + + + +
Especificações
{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}
+ +

Browsers compatíveis

+ + + +

{{Compat("javascript.statements.empty")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/export/index.html b/files/pt-br/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..f429a13988 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/export/index.html @@ -0,0 +1,223 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +
{{jsSidebar("Statements")}}
+ +

O export é utilizado quando criamos módulos JavaScript para exportar ligações em tempo real para suas funções, objetos ou valores primitivos de um módulo sejam utilizados por outros programas através de declarações {{jsxref("Statements/import", "import")}}. Ligações que são exportadas ainda podem ser modificadas localmente; quando importadas, embora elas possam ser lidas somente pelo módulo que as importou, seu valor é atualizado sempre que ela modificada pelo módulo que a exportou.

+ +

Módulos exportados ficam em {{jsxref("Strict_mod", "strict mode")}}, independentemente se é declarado dessa forma, ou não. Export não pode ser utilizado em scripts embutidos.

+ +

Sintaxe

+ +

Há dois tipos de exportação:

+ +
    +
  1. Exportações Explícitas (Named Exports) (Zero ou mais exports por módulo)
    2. +
  2. Exportações Padrão (Default Exports) (Uma por módulo)
    3. +
+ +
// Exportando recursos individuais
+export let name1, name2, …, nameN; // também var, const
+export let name1 = …, name2 = …, …, nameN; // também var, const
+export function functionName(){...}
+export class ClassName {...}
+
+// Lista de exportações
+export { name1, name2, …, nameN };
+
+// Renomeando exports
+export { variable1 as name1, variable2 as name2, …, nameN };
+
+// Exportando atribuições desestruturadas renomeando
+export const { name1, name2: bar } = o;
+
+// Exportações Padrão (Default exports)
+export default expression;
+export default function (…) { … } // também class, function*
+export default function name1(…) { … } // também class, function*
+export { name1 as default, … };
+
+// Agregando módulos
+export * from …; // não define a exportação padrão
+export * as name1 from …; // Draft ECMAScript® 2O21
+export { name1, name2, …, nameN } from …;
+export { import1 as name1, import2 as name2, …, nameN } from …;
+export { default } from …;
+ +
+
nameN
+
Identificador para ser exportado (assim ele pode ser importado via import em outro script).
+
+ +

Descrição

+ +

Há dois diferentes tipos de export, explícito(named) e padrão(default).  Pode-se ter várias exportações explícitas por módulo, mas apenas uma padrão. Cada tipo corresponde à uma da síntaxe acima:

+ +

Exportações explícitas:

+ +
// exporta recursos declarados anteriomente
+export { myFunction, myVariable };
+
+// exporta recursos individuais (pode exportar var, let,
+// const, function, class)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };
+ +

Exportação padrão (pode ser feita apenas uma por script):

+ +
// exporta um recurso declarado anteriormente como padrão
+export { myFunction as default };
+
+// exporta recursos individuais como padrão
+export default function () { ... }
+export default class { .. }
+ +

Exportações explícitas são úteis para exportar vários valores. Durante a importação, é obrigatório usar o mesmo nome do objeto correspondente.

+ +

Mas a exportação padrão pode ser importada com qualquer nome, por exemplo:

+ +
// arquivo test.js
+let k; export default k = 12;
+
+ +
// algum outro arquivo
+import m from './test'; // note que temos a liberdade de usar import m ao invés de import k, porque k era uma exportaçào padrão
+console.log(m);        // vai retornar log 12
+
+ +

Você também pode renomear exportações explícitas para evitar conflitos e nome:

+ +
export { myFunction as function1,
+         myVariable as variable };
+ +

Re-exportando / Agregando

+ +

É possível também "importar/exportar" de módulos diferentes em um módulo pai, de modo que eles estejam disponíveis para serem importados daquele módulo. Em outras palavras, pode-se criar um módulo único concentrando várias exportações de vários módulos.

+ +

Isto pode ser feito com a sintaxe "export from":

+ +
export { default as function1,
+         function2 } from 'bar.js';
+
+ +

O que é comparável com um combinação de import e export:

+ +
import { default as function1,
+         function2 } from 'bar.js';
+export { function1, function2 };
+
+ +

Mas onde function1 e function2 não ficam disponíveis dentro do módulo atual.

+ +
+

Nota: Os exemplos a seguir são sintaticamente inválidos apesar de sua equivalência com o import:

+
+ +
import DefaultExport from 'bar.js'; // Válido
+
+ +
export DefaultExport from 'bar.js'; // Inválido
+ +

O modo correto de fazer isso e renomeando o export:

+ +
export { default as DefaultExport } from 'bar.js';
+
+ +

Exemplos

+ +

Usando exportações explícitas

+ +

Em um módulo my-module.js poderiamos usar o seguinte código:

+ +
// módulo "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+
+const foo = Math.PI + Math.SQRT2;
+
+var graph = {
+  options: {
+      color:'white',
+      thickness:'2px'
+  },
+  draw: function() {
+      console.log('Da função draw de graph');
+  }
+}
+
+export { cube, foo, graph };
+ +

Então, no módulo principal incluído sem sua página HTML, poderíamos ter:

+ +
import { cube, foo, graph } from './my-module.js';
+
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888
+ +

É importante notar o seguinte:

+ + + +

Usando a exportação padrão

+ +

Se queremos exportar um valor sozinho ou obter um valor de reserva para o nosso módulo, nós poderiamos usar export default:

+ +
// módulo "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+
+ +

Daí em outro script podemos usar:

+ +
import cube from 'my-module';
+console.log(cube(3)); // 27
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
+ +

Compatibilidade

+ + + +

{{Compat("javascript.statements.export")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/for-await...of/index.html b/files/pt-br/web/javascript/reference/statements/for-await...of/index.html new file mode 100644 index 0000000000..c584b497a8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for-await...of/index.html @@ -0,0 +1,136 @@ +--- +title: for await...of +slug: Web/JavaScript/Reference/Statements/for-await...of +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +
{{jsSidebar("Statements")}}
+ +

A declaração for await...of cria um loop que itera sobre objetos iteráveis ​​assíncronos, bem como sobre iteráveis ​​síncronos, incluindo: {{jsxref("String")}}, {{jsxref("Array")}}, Array-como objetos (e.g., {{jsxref("Functions/arguments", "arguments")}} or {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, e iteráveis async/sync. Invoca um hook de iteração personalizado com instruções a serem executadas para o valor de cada propriedade do objeto.

+ + + +

Sintaxe

+ +
for await (variável of iterável) {
+  // declaração
+}
+
+ +
+
variável
+
Em cada iteração, o valor de uma propriedade diferente é atribuído à variável. A variável pode ser declarada como const, let ou var.
+
iterável
+
Objeto cujas propriedades iteráveis devem ser iteradas.
+
+ +

Iterando sobre iteráveis assíncronos

+ +

Você também pode iterar sobre um objeto que explicidamente implementa protocolo iterável assíncrono(async iterable protocol):

+ +
var asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+   }
+})();
+
+// 0
+// 1
+// 2
+
+ +

Iterando sobre generators assíncronos

+ +

Como os geradores assíncronos implementam o protocolo assíncrono Iterator, eles podem fazer um loop usando for await... of

+ +
async function* asyncGenerator() {
+  var i = 0;
+  while (i < 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2
+ +

Para termos um exemplo mais concreto de iteração sobre um generator assíncrono usando for await... of, considere iterar sobre dados obtidos através de um fecth de uma API. Este exemplo cria primeiro um iterador assíncrono para um stream de dados e depois usa-o para encontrar o tamanho da resposta da API. 

+ +
async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// Obtém dados do URL e calcula o tamanho da resposta usando o generator assíncrono
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // Guardará o tamanho do response em bytes.
+  let responseSize = 0;
+  // O for-wait-loop irá iterar de forma assíncrona sobre cada parte do response.
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    // Incrementa o valor do responseSize
+    responseSize += chunk.length;
+  }
+
+  console.log(`Response Size: ${responseSize} bytes`);
+  // output esperado:"Response Size: 1071472"
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');
+ +

Especificações 

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}{{Spec2('ESDraft')}}
+ +

Compatibilidade de navegadores

+ + + +

{{Compat("javascript.statements.for_await_of")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/for...in/index.html b/files/pt-br/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..10d3f34bbb --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,203 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Laço de repetição + - Loop + - Statement + - for...in +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +
{{jsSidebar("Statements")}}
+ +

O laço for...in  interage sobre propriedades enumeradas de um objeto, na ordem original de inserção.  O laço pode ser executado para cada propriedade distinta do objeto.

+ +

Syntax

+ +
for (variavel in objeto) {...
+}
+ +
+
variavel
+
Uma propriedade diferente do objeto é atribuida em cada iteração.
+
objeto
+
Objeto com as propriedades enumeradas.
+
+ +

Descrição

+ +

O laço for...in somente iterage sobre propriedades enumeradas. Objetos criados a partir de construtores built-in (arrays e object) herdam propriedades não enumeradas de object.prototype e String.prototype, assim como método {{jsxref("String")}}'s {{jsxref("String.indexOf", "indexOf()")}} ou {{jsxref("Object")}}'s {{jsxref("Object.toString", "toString()")}}. O laço irá iterar sobre todas as propriedades enumeráveis do próprio objeto e somente aquelas enumeráveis herdadas de construtores de objetos prototype.

+ +

Propriedades deletadas, adicionadas ou modificadas

+ +

O laço for...in iterage sobre as propriedades de um objeto em uma ordem arbitrária (veja o {{jsxref("Operators/delete", "delete")}} ). Se uma propriedade é deletada durante a execução do loop, ela se torna indisponível para ser acessada depois. É recomendável não adicionar, remover ou alterar propriedades novas ao objeto durante a execução do laço (durante o loop)

+ +

Iteração em Arrays e for...in

+ +
+

Note: for...in não deve ser usado para iteração em uma {{jsxref("Array")}} onde a ordem é importante, visto que ele iterage em uma ordem arbitrária.

+
+ +

Indices de arrays somente se tornam propriedades enumeradas com inteiros (integer). Não há garantia de que utilizando o laço for...in os indices de um array serão retornados em uma ordem particular ou irá retornar todas as propriedades enumeráveis. É recomendável utilizar o laço {{jsxref("Statements/for", "for")}} com índices numéricos ou {{jsxref("Array.prototype.forEach()")}} ou ainda {{jsxref("Statements/for...of", "for...of")}} quando iteragir sobre arrays onde a ordem é importante.

+ +

Iteração apenas sobre suas próprias propriedades

+ +

Se você quer considerar somente as propriedades do próprio objeto e não as herdadas via prototype, use {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} ou execute {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}  ou ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable")}}

+ +

Exemplos

+ +

A função seguinte toma como argumento um objeto. O laço for...in iterage sobre todos as propriedades enumeráveis do objeto e retorna uma string com o nome das propriedades e seus respectivos valores.

+ +
//Objeto
+var obj = {a:1, b:2, c:3};
+
+//Para prop (propriedade) in obj (objeto) faça
+for (var prop in obj) {
+  // ctrl+shift+k (para abrir o console no mozilla firefox)
+  console.log("obj." + prop + " = " + obj[prop]);
+}
+
+//A saída (output) deverá ser:
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"
+ +

A função seguinte ilustra o uso de {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: as propriedades herdadas não são exibidas.

+ +
var triangle = {a:1, b:2, c:3};
+
+function ColoredTriangle() {
+  this.color = "red";
+}
+
+ColoredTriangle.prototype = triangle;
+
+var obj = new ColoredTriangle();
+
+for (var prop in obj) {
+  if( obj.hasOwnProperty( prop ) ) {
+    console.log("obj." + prop + " = " + obj[prop]);
+  }
+}
+
+// Output:
+// "obj.color = red"
+
+ +

Specificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaçãoStatusComentário
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}{{Spec2('ES1')}}Definição inicial
+ +

Compatibilidade de Browsers

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Compatibilidade: Initializer expressions

+ +

Anterior ao SpiderMonkey 40 {{geckoRelease(40)}}, era possível usar uma expressão inicial com o laço for...in, conforme exemplo que se segue:

+ +
var obj = {a:1, b:2, c:3};
+for(var i=0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+
+ +

Este não é o comportamento padrão e atualmente é ignorado a partir da versão 40 e posteriores e seu uso irá exibir o error {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers"). Outras engines como a v8 (Chrome), Chakra (IE/Edge) e JSC (Webkit/Safari) estão estudando o que fazer com esse comportamento.

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/for...of/index.html b/files/pt-br/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..fb6d5fb664 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,298 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Referência(2) + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +
{{jsSidebar("Statements")}}
+ +

O loop for...of percorre objetos iterativos (incluindo {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, o objeto arguments e assim por diante), chamando uma função personalizada com instruções a serem executadas para o valor de cada objeto distinto.

+ +

Sintaxe

+ +
for (variavel of iteravel) {
+  declaração
+}
+
+ +
+
variável
+
A cada iteração, um valor de uma propriedade diferente é atribuido à variável.
+
iteravel
+
Objeto cujos atributos serão iterados.
+
+ +

Exemplos

+ +

Iterando sobre um {{jsxref("Array")}}

+ +
let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30
+ +

Ao invés de let, você pode usar const se você não for modificar a variável dentro do bloco.

+ +
let iterable = [10, 20, 30];
+
+for (const value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30
+ +

Iterando sobre uma {{jsxref("String")}}

+ +
let iterable = "boo";
+
+for (let value of iterable) {
+  console.log(value);
+}
+// "b"
+// "o"
+// "o"
+ +

Iterando sobre uma {{jsxref("TypedArray")}}

+ +
let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 255
+ +

Iterando sobre um {{jsxref("Map")}}

+ +
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
+
+for (let entry of iterable) {
+  console.log(entry);
+}
+// [a, 1]
+// [b, 2]
+// [c, 3]
+
+for (let [key, value] of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+ +

Iterando sobre um {{jsxref("Set")}}

+ +
let iterable = new Set([1, 1, 2, 2, 3, 3]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+ +

Iterando sobre um objeto arguments

+ +
(function() {
+  for (let argument of arguments) {
+    console.log(argument);
+  }
+})(1,2,3);
+
+// 1
+// 2
+// 3
+ +

Iterando sobre uma coleção do DOM

+ +

Iterar sobre uma coleção do DOM como {{domxref("NodeList")}}: o seguinte exemplo adiciona uma classe read aos parágrafos que são descendentes diretos de uma tag article:

+ +
// Nota: Isso irá funcionar somente em plataformas que tem
+// suporte ao NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll("article > p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+ +

Iterando sobre generators

+ +

Você pode também iterar sobre generators:

+ +
function* fibonacci() { // uma função geradora (generator)
+  let [prev, curr] = [1, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // Trunca a sequência em 1000
+  if (n >= 1000) {
+    break;
+  }
+}
+ +

Não reuse generators

+ +

Generators não devem ser re-usados, mesmo se o loop for...of for terminado precocemente, por exemplo através da palavra-chave {{jsxref("Statements/break", "break")}}. Enquanto em um loop ativo, o generator é fechado e tentar iterar novamente sobre ele não produz (yield) nenhum resultado adicional. O Firefox ainda não implementou este comportamento (o generator pode ser reutilizado, violando o padrão do ES2015 (13.7.5.13, step 5m), mas isso irá mudar uma vez que o {{Bug(1147371)}} for resolvido.

+ +
var gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break;  // Closes iterator
+}
+
+// O generator não deve ser reutilizado, o código a seguir não
+// faz sentido!
+for (let o of gen) {
+  console.log(o); // Nunca será chamado.
+}
+ +

Iterando sobre outros objetos iteráveis

+ +

Você pode também iterar sobre um objeto que implementa explicitamente um protocolo iterável protocol:

+ +
var iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (var value of iterable) {
+  console.log(value);
+}
+// 0
+// 1
+// 2
+ +

Diferença entre for...of e for...in

+ +

O loop for...in irá iterar sobre todas as propriedades enumeráveis de um objeto.

+ +

A sintaxe do for...of é específica para coleções, ao invés de todos os objetos. Ela irá iterar desta maneira sobre os elementos de qualquer coleção que tiver uma propriedade [Symbol.iterator].

+ +

O exemplo a seguir mostra a diferença entre um loop for...of e um loop for...in.

+ +
Object.prototype.objCustom = function () {};
+Array.prototype.arrCustom = function () {};
+
+let iterable = [3, 5, 7];
+iterable.foo = "hello";
+
+for (let i in iterable) {
+  console.log(i); // escreve 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+
+for (let i of iterable) {
+  console.log(i); // escreve 3, 5, 7
+}
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ES6')}}Definition Inicial.
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)EdgeOperaSafari
Funções básicas{{CompatChrome(38)}} [1]{{CompatGeckoDesktop("13")}} [2]12257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Funções básicas{{CompatUnknown}}{{CompatChrome(38)}} [1]{{CompatGeckoMobile("13")}} [2]{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

[1] Do Chrome 29 ao Chrome 37 essa funcionalidade estava disponível através de uma configuração. Em chrome://flags/#enable-javascript-harmony, habilite a função “Enable Experimental JavaScript”.

+ +

[2] Do Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) ao Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) a propriedade iterator era usada (bug 907077), e do Gecko 27 ao Gecko 35 o placeholder "@@iterator" era usado. No Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), o símbolo @@iterator foi implementada (bug 918828).

+ +

Consulte também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/for/index.html b/files/pt-br/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..981f11051a --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for/index.html @@ -0,0 +1,191 @@ +--- +title: for +slug: Web/JavaScript/Reference/Statements/for +translation_of: Web/JavaScript/Reference/Statements/for +--- +
{{jsSidebar("Statements")}}
+ +

A instrução for cria um loop que consiste em três expressões opcionais, dentro de parênteses e separadas por ponto e vírgula, seguidas por uma declaração ou uma sequência de declarações executadas em sequência.

+ +

A fonte desse exemplo interativo está armazenada em um repositório do GitHub. Se você gostaria de contribuir com os projetos de exemplos interativos, por favor clone https://github.com/mdn/interactive-examples  e nos envie um pull request (requisição para puxar).

+ +

Sintaxe

+ +
for ([inicialização]; [condição]; [expressão final])
+   declaração
+
+ +
+
inicialização
+
Uma expressão (incluindo expressões de atribuição) ou declarações variáveis. Geralmente usada para iniciar o contador de variáveis. Esta expressão pode, opcionalmente, declarar novas variáveis com a palavra chave var. Essas variáveis não são locais no loop, isto é, elas estão no mesmo escopo que o loop for está. Variáveis declaradas com let são locais para a declaração.
+
O resultado desta expressão é descartado.
+
condição
+
Uma expressão para ser avaliada antes de cada iteração do loop. Se esta expressão for avaliada para true, declaração será executado. Este teste da condição é opcional. Se omitido, a condição sempre será avaliada como verdadeira. Se a expressão for avaliada como falsa, a execução irá para a primeira expressão após a construção loop for.
+
expressão final
+
Uma expressão que será validada no final de cada iteração de loop. Isso ocorre antes da próxima avaliação da condição. Geralmente usado para atualizar ou incrementar a variável do contador.
+
declaração
+
Uma declaração que é executada enquanto a condição for verdadeira. Para executar múltiplas condições dentro do loop, use uma instrução de bloco ({...}) para agrupar essas condições. Para não executar declarações dentro do loop, use uma instrução vazia (;).
+
+ +

Exemplos de uso

+ +

Usando for

+ +

A declaração for começa declarando a variável i e inicializando-a como 0. Ela verifica se i é menor que nove, executa as duas instruções subsequentes e incrementa 1 a variável i após cada passagem pelo loop.

+ +
for (var i = 0; i < 9; i++) {
+   console.log(i);
+   // more statements
+}
+
+ +

Expressões for opcionais

+ +

Todas as três expressões na condição do loop for são opcionais.

+ +

Por exemplo, no bloco de inicialização, não é necessário inicializar variáveis:

+ +
var i = 0;
+for (; i < 9; i++) {
+    console.log(i);
+    // more statements
+}
+
+ +

Assim como ocorre no bloco de inicialização, a condição também é opcional. Se você está omitindo essa expressão, você deve certificar-se de quebrar o loop no corpo para não criar um loop infinito.

+ +
for (var i = 0;; i++) {
+   console.log(i);
+   if (i > 3) break;
+   // more statements
+}
+ +

Você também pode omitir todos os três blocos. Novamente, certifique-se de usar uma instrução break no final do loop e também modificar (incrementar) uma variável, para que a condição do break seja verdadeira em algum momento.

+ +
var i = 0;
+
+for (;;) {
+  if (i > 3) break;
+  console.log(i);
+  i++;
+}
+
+ +

Usando for sem uma declaração 

+ +

O ciclo for a seguir calcula a posição de deslocamento de um nó na seção [expressão final] e, portanto, não requer o uso de uma declaração ou de um bloco de declaração, e no seu lugar é usado um ponto-vírgula - ;.

+ +
function showOffsetPos (sId) {
+  var nLeft = 0, nTop = 0;
+
+  for (var oItNode = document.getElementById(sId); // inicialização
+       oItNode; // condition
+       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // expressão final
+       /* empty statement */ ;
+
+  console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
+}
+
+// Exemplo de call:
+
+showOffsetPos("content");
+
+// Resultado:
+// "Offset position of "content" element:
+// left: 0px;
+// top: 153px;"
+ +
Nota: Nesse caso, quando você não usa a seção de declaração, o ponto-e-vírgula é colocada imediatamente após a declaração do ciclo.
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
ECMAScript 1st Edition.Padrão +

Definição inicial.

+
{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-for-statement', 'for statement')}}{{Spec2('ES6')}}
+ +

Compatibilidade em Browsers

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/for_each...in/index.html b/files/pt-br/web/javascript/reference/statements/for_each...in/index.html new file mode 100644 index 0000000000..8206aa9f5a --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/for_each...in/index.html @@ -0,0 +1,126 @@ +--- +title: for each...in +slug: Web/JavaScript/Reference/Statements/for_each...in +tags: + - Declaração + - Deprecado + - Deprecated + - JavaScript + - Obsoleto +translation_of: Archive/Web/JavaScript/for_each...in +--- +
{{jsSidebar("Statements")}}
+ +
+

A declaração for each...in está obsoleta como parte do padrão ECMA-357 (E4X). O suporte E4X foi removido, mas o for each...in não será desativado e removido por questões de compatibilidade que precisam ser consideradas.  Ao invés disso, procure utilizar for...of. (Por favor, referir-se a {{ bug("791343")}}.)

+ +

O Firefox agora alerta sobre o uso de for each...in e não funciona mais no Firefox Nighly. Por favor veja Alerta: Loops for-each-in do JavaScript 1.6 estão obsoletos para ajuda com a migração.

+
+ +

A declaração for each...in repete uma variável especifica sobre todos os valores das propriedades do objeto. Para cada propriedade distinta, uma declaração específica é executada.

+ +

Sintaxe

+ +
for each (variable in object) {
+  statement
+}
+ +
+
variável
+
Variável que itera sobre o valor da propriedade, opcionalmente declarado com a palavra-chave var. Essa variável é local à função, não ao loop.
+
+ +
+
objeto
+
Objeto ao qual as propriedades são iteradas.
+
+ +
+
declaração
+
Uma declaração a ser executada para cada propriedade. Para executar múltiplas declaração dentro do loop, utilize um bloco de declaração ({ ... }) para agrupar estas declarações.
+
+ +

Descrição

+ +

Algumas propriedades internas não são iterada. Isso inclui todos os métodos internos dos objetos, ex. o método String's indexOf . No entanto, todas propriedades definidas pelo usuários são iteradas.

+ +

Exemplos

+ +

Usando for each...in

+ +

Atenção: Nunca utiliza um loop assim com arrays. Apenas utilize em objetos. Veja for...in para mais detalhes.

+ +

O seguinte código itera sobre as propriedades do objeto, calculando sua soma:

+ +
var sum = 0;
+var obj = {prop1: 5, prop2: 13, prop3: 8};
+
+for each (var item in obj) {
+  sum += item;
+}
+
+console.log(sum); // escreve no log "26", que é 5+13+8
+ +

Especifições

+ +

Não faz parte da atual especificação ECMA-262. Implementado no JavaScript 1.6 e está obsoleto.

+ +

Compatibilidade de Browsers

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("1.8")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("1.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html b/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html new file mode 100644 index 0000000000..808f0b0306 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html @@ -0,0 +1,149 @@ +--- +title: Funções assíncronas +slug: Web/JavaScript/Reference/Statements/funcoes_assincronas +tags: + - Função + - assíncrono +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +
{{jsSidebar("Statements")}}
+ +

A declaração async function define uma função assíncrona, que retorna um objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.

+ +
+

Você também pode definir funções assíncronas usando uma {{jsxref("Operators/async_function", "expressão async function")}}.

+
+ +

Sintaxe

+ +
async function nome([param[, param[, ... param]]]) {
+   instruções
+}
+
+ +
+
nome
+
O nome da função.
+
+ +
+
param
+
O nome de um parâmetro a ser passado para a função.
+
+ +
+
instruções
+
As instruções que compõem o corpo da função.
+
+ +

Descrição

+ +

Quando uma função assíncrona é chamada, ela retorna uma {{jsxref("Promise")}}. Quando a função assíncrona retorna um valor, a Promise será resolvida com o valor retornado. Quando a função assíncrona lança uma exceção ou algum valor, a Promise será rejeitada com o valor lançado.

+ +

Uma função assíncrona pode conter uma expressão {{jsxref("Operators/await", "await")}}, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.

+ +
+

A proposta das funções async/await é de simplificar o uso de forma síncrona das Promises e executar alguns procedimentos em um grupo de Promises. Assim como Promises são similares a callbacks estruturados, funções async/await são similares à junção de generators com Promises.

+
+ +

Exemplos

+ +

Exemplo simples

+ +
function resolverDepoisDe2Segundos(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function adicionar1(x) {
+  var a = resolverDepoisDe2Segundos(20);
+  var b = resolverDepoisDe2Segundos(30);
+  return x + await a + await b;
+}
+
+adicionar1(10).then(v => {
+  console.log(v);  // exibe 60 depois de 2 segundos.
+});
+
+async function adicionar2(x) {
+  var a = await resolverDepoisDe2Segundos(20);
+  var b = await resolverDepoisDe2Segundos(30);
+  return x + a + b;
+}
+
+adicionar2(10).then(v => {
+  console.log(v);  // exibe 60 depois de 4 segundos.
+});
+
+ +

Reescrevendo uma cadeia de Promise com uma função async

+ +

Uma API que retorna uma {{jsxref("Promise")}} vai resultar em uma cadeia de Promises e separa a função em várias partes. Considere o seguinte código:

+ +
function pegarDadosProcessados(url) {
+  return baixarDados(url) // retorna uma Promise
+    .catch(e => {
+      return baixarDadosReservas(url) // retorna uma Promise
+    })
+    .then(v => {
+      return processarDadosNoWorker(v); // retorna uma Promise
+    });
+}
+
+ +

pode ser escrita em uma única função async desta forma:

+ +
async function pegarDadosProcessados(url) {
+  let v;
+  try {
+    v = await baixarDados(url);
+  } catch(e) {
+    v = await baixarDadosReservas(url);
+  }
+  return processarDadosNoWorker(v);
+}
+
+ +

Note que no exemplo acima não tem a instrução await na instrução do return, porque o valor retornado de uma função async é implícitamente passado por um {{jsxref("Promise.resolve")}}.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}Definição inicial no ES2017.
+ +

Compatibilidade de browser

+ +
{{Compat("javascript.statements.async_function")}}
+ +
+ +

Notas específicas do Firefox

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/function/index.html b/files/pt-br/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..77915f919b --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/function/index.html @@ -0,0 +1,176 @@ +--- +title: Declaração de função +slug: Web/JavaScript/Reference/Statements/function +translation_of: Web/JavaScript/Reference/Statements/function +--- +
{{jsSidebar("Statements")}}
+ +

A declaração function define uma função com os especificados parâmetros.

+ +

Você pode também definir funções usando o construtor {{jsxref("Function")}}  e uma {{jsxref("Operators/function", "function expression")}}.

+ +

Sintaxe

+ +
function name([param,[, param,[..., param]]]) {
+   [statements]
+}
+
+ +
+
name
+
O nome da função.
+
+ +
+
param
+
O nome de um argumento a ser passado para a função. Uma função pode ter atè 255 argumentos.
+
+ +
+
statements
+
As instruções que compõem o corpo da função.
+
+ +

Descrição

+ +

Uma função criada com uma declaração function é um objeto Function e tem todas as propriedades, métodos e comportamentos dos objetos Function. Veja {{jsxref("Function")}} para informações detalhadas sobre as funções.

+ +

Uma função pode também ser criada usando uma expressão (veja {{jsxref("Operators/function", "function expression")}}).

+ +

Por padrão, funções retornam undefined. Para retornar qualquer outro valor, a função precisa ter uma instrução {{jsxref("Statements/return", "return")}} que especifica o valor para retorno.

+ +

Criando funções condicionalmente.

+ +

Funções podem ser condicionalmente declaradas, isso é, uma instrução de função pode ser aninhada dentro de uma instrução if. A maioria dos navegadores que não sejam Mozilla ir tratar essas declarações condicionais como uma incondicional e criará a função se a condição for true ou não, veja esse artigo para uma visão geral. Portanto, ela não pode ser usada para criação de expressões de função condicional.

+ +

Declarações de funções hoisting

+ +

Declarações de funções em JavaScript são hoisted à definição da função. Você pode usar uma função antes de tê-la declarado:

+ +
hoisted(); // logs "foo"
+
+function hoisted() {
+  console.log("foo");
+}
+
+ +

Note que {{jsxref("Operators/function", "function expressions")}} não são hoisted:

+ +
notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log("bar");
+};
+
+ +

Exemplos

+ +

Usando funções

+ +

O seguinte código declara uma função que retorna a quantidade total das vendas, quando dados os números de unidades vendidas dos produtos a, b e c.

+ +
function calc_sales(units_a, units_b, units_c) {
+   return units_a * 79 + units_b * 129 + units_c * 699;
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Definição inicial. Implementado em JavaScript 1.0.
+ +

Compatibilidade com navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/function_star_/index.html b/files/pt-br/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..d80b9f8e3d --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,203 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +tags: + - ECMAScript6 + - Function + - Iterator + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/function* +--- +
{{jsSidebar("Statements")}}
+ +

A declaração function* (palavra chave function seguida de um asterisco) define uma função geradora (generator function), que retorna um objeto {{jsxref("Global_Objects/Generator","Generator")}}.

+ +

{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}

+ +

Você também pode definir funções geradoras usando o construtor {{jsxref("GeneratorFunction")}} ou a sintaxe da expressão de uma função. 

+ +

Sintaxe

+ +
function* name([param[, param[, ... param]]]) {
+   statements
+}
+ +
+
name
+
O nome da função.
+
+ +
+
param
+
O nome do argumento que será passado á função. Uma função pode ter até 255 argumentos.
+
+ +
+
statements
+
As instruções que formam o corpo da função.
+
+ +

Descrição

+ +

Geradores são funções cuja execução pode ser interrompida e posteriormente reconduzida. Seus contextos (de associações de variáveis) ficarão salvos entre cada recondução.

+ +

Geradores em JavaScript -- especialmente quando combinados com Promises -- são uma ferramenta muito poderosa para programação assíncrona, por mitigarem -- se não eliminarem -- problemas com callbacks, como o Callback Hell e Inversão de Controle. Funções async são fundamentadas nisso.

+ +

Chamar uma função geradora não executa seu conteúdo imediatamente; ao invés disso um objeto iterator é retornado. Quando o método next() do objeto iterator é chamado, o conteúdo da função do gerador é executado até a primeira expressão {{jsxref("Operators/yield", "yield")}}, que especifica o valor a ser devolvido do iterator ou com {{jsxref("Operators/yield*", "yield*")}} que delega para outra função geradora. O método next() retorna um objeto com uma propriedade value contendo o valor retornado e a propriedade boolean: done indicando se o gerador produziu seu último valor. Chamar o método next() com um argumento resumirá a execução da função geradora, substituindo a expressão yield onde a execução foi pausada com o argumento de next().

+ +

Uma expressão return em um gerador, quando executada, fará com que o gerador termine (isto é, a propriedade done do objeto retornado será atribuído com o valor true). Se um valor foi retornado, este será usado como propriedade value do objeto retornado pelo gerador. Semelhantemente a uma expressão return, um erro lançado dentro do gerador o terminará -- a não ser que tratado no corpo do gerador. Quando um gerador estiver terminado, chamadas next subsequentes não executarão nenhum código do gerador, retornarão simplesmente um objeto da seguinte forma: {value: undefined, done: true}.

+ +

Exemplos

+ +

Exemplo simples

+ +
function* idMaker(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+// ...
+ +

Exemplo com yield*

+ +
function* outroGerador(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* gerador(i){
+  yield i;
+  yield* outroGerador(i);
+  yield i + 10;
+}
+
+var gen = gerador(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+
+ +

Passando argumentos em geradores

+ +
function* logGenerator() {
+  console.log(0);
+  console.log(1, yield);
+  console.log(2, yield);
+  console.log(3, yield);
+}
+
+var gen = logGenerator();
+
+// a primeira chamada next é executada desde o início da função
+// até a primeira declaração yield
+gen.next();             // 0
+gen.next('pretzel');    // 1 pretzel
+gen.next('california'); // 2 california
+gen.next('mayonnaise'); // 3 mayonnaise
+ +

Declaração de retono em um gerador

+ +
function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "unreachable";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+ +

Geradores não possuem construtor

+ +
function* f() {}
+var obj = new f; // lança o TypeError: f não é construtor
+ +

Gerador definido em uma expressão

+ +
const foo = function* () {
+  yield 10;
+  yield 20;
+};
+
+const bar = foo();
+console.log(bar.next()); // {value: 10, done: false}
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2016')}}Mudou para que generators não tenham a armadilha de [[Construct]] e irão lançar um erro, quando usados com new.
{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ESDraft')}}
+ +

Compatibilidade entre Navegadores

+ +
+ +
{{Compat("javascript.statements.generator_function")}}
+ +

Observações específicas Firefox

+ +

Generators e iterators no Firefox em versões anteriores a 26

+ +

Versões mais antigas do Firefox implementam uma versão antiga da proposta de generators. Na versão mais antiga, generators foram intruídos a usarem a palavra chave function(sem um asterísco) dentre outras diferenças.

+ +

O retorno do objeto IteratorResult ao invés de um throw

+ +

Iniciando com Gecko 29 {{geckoRelease(29)}}, o generator finalizado não lança mais um {{jsxref("TypeError")}} "generator has already finished". Ao invés disso, ele retorna um objeto IteratorResult, como por exemplo { value: undefined, done: true } ({{bug(958951)}}).

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/if...else/index.html b/files/pt-br/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..e61389f5bb --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,211 @@ +--- +title: if...else +slug: Web/JavaScript/Reference/Statements/if...else +tags: + - Instrução + - JavaScript + - condicional + - if else + - se então +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +
{{jsSidebar("Statements")}}
+ +

A condicional if  é uma estrutura condicional que executa a afirmação, dentro do bloco, se determinada condição for verdadeira. Se for falsa, executa as afirmações dentro de else.

+ +

Sintaxe

+ +
if (condição) afirmação1 [else afirmação2]
+ +
+
condição
+
Uma expressão (premissa) que pode ser avaliada como verdadeira (true) ou falsa (false), veja lógica de programação para entender melhor.
+
+ +
+
condição1
+
Condicional que será executada caso a condição em if seja verdadeira (true). Pode ser qualquer instrução, incluindo mais condicionais if aninhadas à instrução. Para executar multiplas instruções, faça um agrupamento com uma instrução em bloco ({ ... }). Para não executar nenhuma instrução, utilize uma instrução vazia (empty).
+
+ +
+
condição2
+
Condicional que será executada caso a condição em if seja avaliada como falsa (false) e a condição else exista. Pode ser qualquer instrução, incluindo instruões em bloco e mais condicionais if aninhadas. 
+
+ +

Descrição

+ +

Múltiplas condicionais if ... else podem ser aninhados quando necessário. Observe que não existe elseif (em uma palavra). O correto é a instrução com espaços (else if), conforme abaixo:

+ +
if (condição1)
+   instrução1
+else if (condição2)
+   instrução2
+else if (condição3)
+   instrução3
+...
+else
+   instruçãoN
+
+ +

Para ver seu funcionamento, abaixo está a instrução como deveria ser caso identada corretamente.

+ +
if (condição1)
+   instrução1
+else
+   if (condição2)
+      instrução2
+   else
+      if (condição3)
+...
+
+ +

Para executar multiplas instruções dentro de uma condição, utilize um bloco ({ ... }) . Em geral, é sempre uma boa prática utilizar instruções dentro de blocos, especialmente em códigos que envolvam condicionais if aninhadas:

+ +
if (condição) {
+   instrução1
+} else {
+   instrução2
+}
+
+ +

Não confunda os valores boolean primitivos true e false com os valores true e false do objeto Boolean. Qualquer valor que não for undefined, null, 0, NaN, ou uma string vazia (""), e qualquer objeto, incluíndo um objeto Boolean cujo valor é false, é avaliado como true quando passado por uma condicional. Por exemplo:

+ +
var b = new Boolean(false);
+if (b) // essa condição é avaliada como true
+
+ +

Exemplos

+ +

Usando if...else

+ +
if (cipher_char === from_char) {
+   result = result + to_char;
+   x++;
+} else {
+   result = result + clear_char;
+}
+
+ +

Usando else if

+ +

Perceba que não existe sintaxe de elseif em JavaScript. Entretanto, você pode escrevê-la com um espaço entre o if e o  else.

+ +
if (x > 5) {
+
+} else if (x > 50) {
+
+} else {
+
+}
+ +

Atribuições junto de expressões condicionais

+ +

É recomendado não utilizar atribuições simples junto de uma expressão condicional, visto que atribuições podem ser confundidas com igualdade ao olhar o código. Por exemplo, não use o código abaixo:

+ +
if (x = y) {
+   /* faça a coisa certa */
+}
+
+ +

Caso você precise utilizar uma atribuição em uma expressão condicional, uma prática comum é inserir parênteses adicionais em volta da atribuição. Por exemplo:

+ +
if ((x = y)) {
+   /* faça a coisa certa */
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-if-statement', 'if statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.5', 'if statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.5', 'if statement')}}{{Spec2('ES1')}}Definição Inicial
+ +

Compatibilidade entre Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/import.meta/index.html b/files/pt-br/web/javascript/reference/statements/import.meta/index.html new file mode 100644 index 0000000000..9e6a31a523 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/import.meta/index.html @@ -0,0 +1,93 @@ +--- +title: import.meta +slug: Web/JavaScript/Reference/Statements/import.meta +translation_of: Web/JavaScript/Reference/Statements/import.meta +--- +
{{JSSidebar("Statements")}}
+ +

O objeto mostra o import.meta mostra o contexto específico metadata para um módulo JavaScript. Ele contém informações sobre o módulo, como a sua URL.

+ +

Sintaxe 

+ +
import.meta
+ +

Descrição

+ +

A sintaxe consiste na palavra chave {{JSxRef("Statements/import","import")}}, um ponto, e o identificador meta. Normalmente no lado esquerdo do ponto é o objeto na qual a propriedade de acesso é realizada is, mas aqui import não é exatamente um objeto.

+ +

O objetoimport.meta foi criado no implementação ECMAScript,com um protótipo {{JSxRef("null")}}. O objeto é extensível, e suas propriedades são grávaveis, configuráveis, e enumeráveis.

+ +

Exemplos

+ +

Usando import.meta

+ +

Dado o modulo my-module.js

+ +
<script type="module" src="my-module.js"></script>
+
+ +

Você pode acessar essa meta informação sobre o modulo usando o objeto import.meta.

+ +
console.log(import.meta); // { url: "file:///home/user/my-module.js" }
+ +

Irá returnar um objeto com propriedade URL indicando a base URL do módulo. Isso vai ser o URL da qual o script obteve, por scripts external, ou a base do documento URL contendo documento, para scripts inline.

+ +

Note que isso irá incluir parâmetros query e/ou cerquilha (i.e., seguindo o ? ou #).

+ +

Por exemplo, seguindo esse HTML:

+ +
<script type="module">
+import './index.mjs?someURLInfo=5';
+</script>
+ +

O arquivo JavaScript a seguir vai registrar o parâmetro `someURLInfo:

+ +
// index.mjs
+new URL(import.meta.url).searchParams.get('someURLInfo'); // 5
+ +

O mesmo se aplica quando um arquivo importa outro:

+ +
// index.mjs
+import './index2.mjs?someURLInfo=5';
+
+// index2.mjs
+new URL(import.meta.url).searchParams.get('someURLInfo'); // 5
+ +

Note que enquanto o Node.js vai passar nos parâmetros query (ou na cerquilha) como no exemplo passsado, a partir do Node 14.1.0, a URL com parâmetro query vai dar erro quando carregar no formulário  node --experimental-modules index.mjs?someURLInfo=5 (é tratado como um arquivo ao invés de uma  URL nesse contexto).

+ +

Nesse arquivo específico, o argumento passado pode ser complementar para ser usado na ampla aplicação location.href (com strings query ou cerquilha adicionada depois do caminho de arquivo HTML) (ou por Node.js, através do process.argv).

+ +

Especifícações

+ + + + + + + + + + + + + +
Especifícação
import.meta 
{{SpecName("HTML WHATWG", "webappapis.html#hostgetimportmetaproperties", "import.meta")}}
+ +

 Compartibilidade no Browser 

+ + + +

{{Compat("javascript.statements.import_meta")}}

+ +

Progressão de implementação

+ +

A tabela seguinte fornece um status de implementação diária para essa feature, porque ela ainda não alcançou a estabilidade cross-browser. Os dados são gerados por relevantes testes de feature no Test262, o padrão de teste para JavaScript, em build noturno, ou no ultimo lançamento de cada engine browser de JavaScript.

+ +
{{EmbedTest262ReportResultsTable("import.meta")}}
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/import/index.html b/files/pt-br/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..a87ed0f4bf --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/import/index.html @@ -0,0 +1,286 @@ +--- +title: import +slug: Web/JavaScript/Reference/Statements/import +tags: + - ECMAScript 2015 + - JavaScript + - Modules + - Reference + - Statement + - dynamic import + - import +translation_of: Web/JavaScript/Reference/Statements/import +--- +
{{jsSidebar("Statements")}}
+ +
+

A declaração estática import é usada para importar vínculos que são exportados por um outro módulo. Os módulos importados estão em {{JSxRef("Strict_mode","strict mode")}},  declarado como tal ou não. A declaração import não pode ser usada em scripts embutidos, a menos que tal script tenha um type="module".

+ +

Há também uma função dinâmica import(), que não requer scripts de type="module".

+ +

A compatibilidade com versões anteriores pode ser garantida usando o atributo nomodule na tag de script.

+ +

A importação dinâmica é útil em situações em que você deseja carregar um módulo condicionalmente ou sob demanda. A forma estática é preferível para carregar dependências iniciais e pode se beneficiar mais prontamente de ferramentas de análise estática e tree shaking.

+
+ +

Sintaxe

+ +
import defaultExport from "module-name";
+import * as name from "module-name";
+import { export } from "module-name";
+import { export as alias } from "module-name";
+import { export1 , export2 } from "module-name";
+import { foo , bar } from "module-name/path/to/specific/un-exported/file";
+import { export1 , export2 as alias2 , [...] } from "module-name";
+import defaultExport, { export [ , [...] ] } from "module-name";
+import defaultExport, * as name from "module-name";
+import "module-name"; var promise = import("module-name"); // This is a stage 3 proposal.
+ +
+
defaultExport
+
Nome que de referência para a exportação padrão do módulo.
+
module-name
+
O módulo para importar. Geralmente, esse é um nome de caminho relativo ou absoluto para o arquivo .js contendo esse módulo. Certos empacotadores podem permitir ou exigir o uso da extensão; verifique seu ambiente. Apenas aspas simples e aspas duplas são permitidas.
+
name
+
Nome do objeto do módulo que será usado como um tipo de espaço de nomes ao se referir às importações.
+
export, exportN
+
Nome das exportações a serem importadas.
+
alias, aliasN
+
Nomes que se referem às importações nomeadas.
+
+ +

Descrição

+ +

O parâmetro name é o nome do "objeto módulo", que será usado como um tipo de namespace para se referir às exportações. Os parâmetros de exportação especificam exportações nomeadas individuais, enquanto a importação * como sintaxe de nome importa todos eles. Abaixo estão alguns exemplos para esclarecer a sintaxe.

+ +

Importar o conteúdo de todo um módulo

+ +

Isso insere myModule no escopo atual, contendo todas as exportações do módulo no arquivo localizado em /modules/my-module.js.

+ +
import * as myModule from '/modules/my-module.js';
+ +

Aqui, acessar as exportações significa usar o nome do módulo ("myModule" neste caso) como um namespace. Por exemplo, se o módulo importado acima incluir um export doAllTheAmazingThings(), você o chamaria assim:

+ +
myModule.doAllTheAmazingThings();
+ +

Importar uma única exportação de um módulo

+ +

Dado um objeto ou valor chamado myExportque foi exportado do módulo my-module  implicitamente (porque o módulo inteiro é exportado) ou explicitamente (usando a instrução {{JSxRef("Statements/export", "export")}} statement), isso insere  myExport no escopo atual.

+ +
import {myExport} from '/modules/my-module.js';
+ +

Importar várias exportações do módulo

+ +

Isso inclui tanto foo como bar  no escopo atual.

+ +

Importar uma exportação com um alias mais conveniente

+ +

Você pode renomear uma exportação ao importá-la. Por exemplo, isso insere shortName no escopo atual.

+ +

 

+ +
import {reallyReallyLongModuleExportName as shortName}
+  from '/modules/my-module.js';
+ +

Renomear várias exportações durante a importação

+ +

Importe várias exportações de um módulo com aliases convenientes.

+ +

 

+ +
import {
+  reallyReallyLongModuleExportName as shortName,
+  anotherLongModuleName as short
+} from '/modules/my-module.js';
+ +

Importar um módulo apenas para seus efeitos colaterais

+ +

Importe um módulo inteiro somente para efeitos colaterais, sem importar nada. Isso executa o código global do módulo, mas na verdade não importa nenhum valor.

+ +

 

+ +
import '/modules/my-module.js';
+ +

Importando Padrões

+ +

É possível ter um padrão {{JSxRef ("Declarações / exportação", "exportação")}} (seja um objeto, uma função, uma classe etc.). A declaração de importação pode então ser usada para importar esses padrões.

+ +

 

+ +

A versão mais simples importa diretamente o padrão:

+ +

 

+ +
import myDefault from '/modules/my-module.js';
+ +

 

+ +

Também é possível usar a sintaxe padrão com as vistas acima (importações de namespace ou importações nomeadas). Em tais casos, a importação padrão terá que ser declarada primeiro. Por exemplo:

+ +

 

+ +
import myDefault, * as myModule from '/modules/my-module.js';
+// myModule used as a namespace
+ +

Ou

+ +

 

+ +
import myDefault, {foo, bar} from '/modules/my-module.js';
+// specific, named imports
+ +

 

+ +

Importações Dinâmicas

+ +

 

+ +

A palavra-chave import pode ser chamada como uma função para importar dinamicamente um módulo. Quando usado dessa maneira, retorna uma promessa.

+ +

 

+ +
import('/modules/my-module.js')
+  .then((module) => {
+    // Do something with the module.
+  });
+ +

 

+ +

Este formulário também suporta a palavra-chave await.

+ +

 

+ +
let module = await import('/modules/my-module.js');
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

Exemplos

+ +

Padrão Import

+ +

O código abaixo mostra como importar um módulo secundário para auxiliar no processamento de uma requisição AJAX que retorna um JSON.

+ +

 

+ +

O Módulo: file.js

+ +

 

+ +
function getJSON(url, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    callback(this.responseText)
+  };
+  xhr.open('GET', url, true);
+  xhr.send();
+}
+
+export function getUsefulContents(url, callback) {
+  getJSON(url, data => callback(JSON.parse(data)));
+}
+ +

O programa principal: main.js

+ +

 

+ +
import { getUsefulContents } from '/modules/file.js';
+
+getUsefulContents('http://www.example.com',
+    data => { doSomethingUseful(data); });
+ +

Dynamic Import

+ +

Este exemplo mostra como carregar a funcionalidade em uma página com base em uma ação do usuário, nesse caso, um clique no botão e, em seguida, chamar uma função dentro desse módulo. Esta não é a única maneira de implementar essa funcionalidade. A função import() também é compatível com await.

+ +

 

+ +
const main = document.querySelector("main");
+for (const link of document.querySelectorAll("nav > a")) {
+  link.addEventListener("click", e => {
+    e.preventDefault();
+
+    import('/modules/my-module.js')
+      .then(module => {
+        module.loadPageInto(main);
+      })
+      .catch(err => {
+        main.textContent = err.message;
+      });
+  });
+}
+ +

 

+ +

 

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
"function-like" dynamic import() proposalStage 3 
{{SpecName("ESDraft", "#sec-imports", "Imports")}}{{Spec2("ESDraft")}} 
{{SpecName("ES2018", "#sec-imports", "Imports")}}{{Spec2("ES2018")}} 
{{SpecName("ES2017", "#sec-imports", "Imports")}}{{Spec2("ES2017")}} 
{{SpecName("ES2016", "#sec-imports", "Imports")}}{{Spec2("ES2016")}} 
{{SpecName("ES2015", "#sec-imports", "Imports")}}{{Spec2("ES2015")}}Definição inicial.
+ +

Compatibilidade entre navegadores

+ +

{{Compat("javascript.statements.import")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/index.html b/files/pt-br/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..42b9a2850e --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/index.html @@ -0,0 +1,128 @@ +--- +title: Instruções e declarações +slug: Web/JavaScript/Reference/Statements +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Statements +--- +
{{jsSidebar("Instruções")}}
+ +

Aplicações em JavaScript são realizadas através de instruções com uma sintaxe apropriada. Uma única instrução pode abranger multiplas linhas. Multiplas instruções podem estar contidas em uma única linha se cada instrução estiver separada por ponto e vírgula ( ; ).

+ +

Instruções e declarações por categoria

+ +

Para visualizar em ordem alfabética use a barra de rolagem à esquerda.

+ +

Control flow

+ +
+
{{jsxref("Statements/block", "Block")}}
+
Uma instrução de bloqueio é usada para um grupo de zero ou mais instruções. O bloqueio é delimitado por um par de chaves.
+
{{jsxref("Statements/break", "break")}}
+
Termina o atual loop, troca, ou nomeia instruções e transfere o controle do programa para a próxima instrução após a que foi terminada agora.
+
{{jsxref("Statements/continue", "continue")}}
+
Termina a execução das instruções na atual iteração do atual loop, e continua a execução do loop com a seguinte iteração.
+
{{jsxref("Statements/Empty", "Empty")}}
+
Uma instrução vazia é usada para gerar uma "não-instrução", ainda que o JavaScrpit espere uma.
+
{{jsxref("Statements/if...else", "if...else")}}
+
Executa uma instrução se a condição especificada é verdadeira. Se a condição é falsa, outra instrução pode ser executada.
+
{{jsxref("Statements/switch", "switch")}}
+
Retorna uma expressão, combinando o valor da expressão a condição do caso, e executa a condição associada a este caso.
+
{{jsxref("Statements/throw", "throw")}}
+
Aplica uma exceção definida pelo usuário.
+
{{jsxref("Statements/try...catch", "try...catch")}}
+
Marca um bloco de instruções para tentar, e especifica a resposta, uma exceção deve ser retornada.
+
+ +

Declarações

+ +
+
{{jsxref("Statements/var", "var")}}
+
Declara uma variável, opcionalmente inicializando com um valor.
+
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
+
Declara acesso ao local da variável, opcionalmente inicializando com um valor.
+
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
+
Declara uma constante de apenas leitura.
+
+ +

Funções e classes

+ +
+
{{jsxref("Statements/function", "function")}}
+
Declara uma função com os parâmetros especificos.
+
{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}
+
Gera funções habilitando iteradores de escrita mais facilmente.
+
{{jsxref("Statements/return", "return")}}
+
Especifica o valor a ser retornado por uma função.
+
{{experimental_inline}} {{jsxref("Statements/class", "class")}}
+
Declara uma classe.
+
+ +

Iterações

+ +
+
{{jsxref("Statements/do...while", "do...while")}}
+
Cria um loop que executa uma especifica instrução até que a condição de teste seja falsa. A condição é retornada depois da execução da instrução, resultando na instrução especificada executando ao menos uma vez.
+
{{jsxref("Statements/for", "for")}}
+
Cria um loop que consiste em três opções de expressões, entre parenteses e separado por ponto e vírgula, seguido pela instrução executada no loop.
+
{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}
+
Itera uma variável especificada sobre todos os valores das propriedades do objeto. Para cada propriedade distinta, uma instrução especificada é executada.
+
{{jsxref("Statements/for...in", "for...in")}}
+
Itera através de enumeráveis propriedades de um objeto, em ordem arbitrária. Para cada propriedade distinta, instruções podem ser executadas.
+
{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}
+
Itera através de objetos iteráveis (incluindo arrays, array-like objects, iterators and generators), invocando uma iteração personalizada com  instruções para serem executadas pelo valor de cada propriedade.
+
{{jsxref("Statements/while", "while")}}
+
Cria um loop que executa uma especifica instrução enquanto o teste da condição for positivo. A condição é retornada antes de executar a instrução.
+
+ +

Outros

+ +
+
{{jsxref("Statements/debugger", "debugger")}}
+
Invoca qualquer funcionalidade de depuração disponível. Se não há funcionabilidade disponível, a instrução não tem efeito.
+
{{experimental_inline}} {{jsxref("Statements/export", "export")}}
+
Usado para exportar funções que os deixa disponível para importação em módulos externos, outros scripts.
+
{{experimental_inline}} {{jsxref("Statements/import", "import")}}
+
Usado para importar funções exportadas de um módulo externo, outro script.
+
{{jsxref("Statements/label", "label")}}
+
Fornece uma instrução com um identificador que pode ser referido usando break ou continue instruções.
+
+ +
+
{{deprecated_inline}} {{jsxref("Statements/with", "with")}}
+
Extende o alcance de uma instrução.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}New: function*, let, for...of, yield, class
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/label/index.html b/files/pt-br/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..b1f9aeb5af --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/label/index.html @@ -0,0 +1,101 @@ +--- +title: label (Etiqueta) +slug: Web/JavaScript/Reference/Statements/label +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/label +--- +
{{jsSidebar("Statements")}}
+ +

Provém uma declaração com um indentificador o qual pode ser referido posteriormente utilizando-se os comandos break ou continue.

+ +

Por exemplo, você pode usar um label para identificar um laço e então com um comando de break ou continue indicar se este deve ser interrompido ou então continuar sua execução.

+ +

Sintaxe

+ +
label :
+   declaração
+
+ +

Parâmetros

+ +
+
label
+
Qualquer idenfiticador JavaScript válido que não é uma palavra reservada.
+
declaração
+
Uma declaração qualquer. break pode ser utilizado com qualquer declaração entiquetada (com label) , assim como o continue também pode.
+
+ +
+

Evite usar labels

+ +

Labels não são comunmente utilizados em JavaScript já que estes fazem com que programas fiquei mais difíceis de ler e entender. Sempre que possível evite utilizar labels e, dependendo dos casos, prefira chamar funções ou lançar um erro.

+
+ +

Examplos

+ +

Exemplo com continue

+ +
var i, j;
+
+loop1:
+for (i = 0; i < 3; i++) {      //O primeiro 'for' é etiquetado com "loop1"
+   loop2:
+   for (j = 0; j < 3; j++) {   //O segundo é etiquetado com "loop2"
+      if (i == 1 && j == 1) {
+         continue loop1;
+      } else {
+         console.log("i = " + i + ", j = " + j);
+      }
+   }
+}
+
+// Sua saída é:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// Note como pula-se "i = 1, j = 1" e "i = 1, j = 2"
+
+ +

Exemplo 2 (continue)

+ +

Dado uma lista de itens e outra de testes, este exemplo conta o número de ítens que passam em todos os testes.

+ +
var itemsPassed = 0;
+var i, j;
+
+top:
+for (i = 0; i < items.length; i++){
+  for (j = 0; j < tests.length; j++)
+    if (!tests[j].pass(items[i]))
+      continue top;
+  itemsPassed++;
+}
+ +

Exemplo 3 (break)

+ +

Dado uma lista de ítens e uma lista de testes, neste exemplo determina-se se todos os ítens passam em todos os testes.

+ +
var allPass = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j < tests.length; i++)
+    if (!tests[j].pass(items[i])){
+      allPass = false;
+      break top;
+    }
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/let/index.html b/files/pt-br/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..757754a08a --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/let/index.html @@ -0,0 +1,140 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +tags: + - ECMAScript 2015 + - JavaScript + - Variable declaration + - Variables +translation_of: Web/JavaScript/Reference/Statements/let +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Declara uma variável local no escopo do bloco atual, opcionalmente iniciando-a com um valor.

+ +

Sintaxe

+ +

Definição let:

+ +
let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];
+ +

Expressão let:

+ +
let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;
+ +

Instrução let:

+ +
let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) statement;
+ +

Parâmetros

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ParameterDescription
var1, var2, …, varNNome da variável. Pode ser qualquer identificador válido.
value1, value2, …, valueNValor inicial da variável. Pode ser qualquer expressão válida.
expressionQualquer expressão válida.
statementQualquer instrução válida.
+ +

Descrição

+ +

let permite que você declare variáveis limitando seu escopo no bloco, instrução, ou em uma expressão na qual ela é usada. Isso é inverso da keyword var, que define uma variável globalmente ou no escopo inteiro de uma função, independentemente do escopo de bloco.

+ +
+

Nota do tradutor: o trecho acima: "independentemente do escopo de bloco", na verdade, significa dizer que variáveis declaradas dentro de blocos internos da função, por exemplo, são vinculadas no escopo da função, não no bloco no qual elas são declaradas. Se isso parece confuso - e realmente é -, apenas entenda que, ao contrário do que se poderia supor, em Javascript blocos não possuem escopo como em outras linguagens, somente funções têm! Isso quer dizer que mesmo uma váriavel definida com a keyword var dentro de um bloco de instrução if, será visível no resto inteiro da função.

+
+ + + +

Escopo de bloco

+ +

Variáveis declaradas com let são "içadas" para começo do bloco em que elas são definidas (isso é conhecido também pelo termo, hoisting).

+ +

Redeclaração de uma mesma variável num mesmo escopo de bloco causa um TypeError.

+ +
if (x) {
+  let foo;
+  let foo; // Emite um TypeError.
+}
+ +

No entanto, corpos de funções não possuem essa limitação!

+ +
function do_something() {
+  let foo;
+  let foo; // Isso funciona.
+}
+ +
Atenção: Os rascunhos do ECMAScript 6 (desde abril de 2012) tornam este comportamento ilegal. Isso significa, provavelmente, que as futuras versões do JavaScript levantarão um TypeError. Então, se você faz isso, deveria evitar essa prática!
+ +

Você pode encontrar erros em instruções switch porque existe apenas um bloco subjacente.

+ +
switch (x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // TypeError para a redeclaração.
+    break;
+}
+ +

Exemplos

+ +

Uma expressão let limita o escopo de uma variável declarada somente para aquela expressão.

+ +
var a = 5;
+let(a = 6) alert(a); // 6
+alert(a); // 5
+ +

Usada dentro de um bloco, let limita os escopo das variáveis para aquele bloco. Observe a diferença entre var em que o escopo é definido dentro da função onde é declarada

+ +
var a = 5;
+var b = 10;
+
+if (a === 5) {
+  let a = 4; // O escopo é dentro do bloco if
+  var b = 1; // O escopo é dentro da função
+
+  console.log(a);  // 4
+  console.log(b);  // 1
+}
+
+console.log(a); // 5
+console.log(b); // 1
+ +

É possível usar a keyword let para vincular variáveis ​​localmente no escopo de loops em vez de usar uma variável global (definida usando var) para isso.

+ +
for (let i = 0; i<10; i++) {
+  alert(i); // 1, 2, 3, 4 ... 9
+}
+
+alert(i); // i não está definida
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/return/index.html b/files/pt-br/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..e7c92426fe --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/return/index.html @@ -0,0 +1,197 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +tags: + - Declaração + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/return +--- +
{{jsSidebar("Statements")}}
+ +

A declaração return finaliza a execução de uma função e especifica os valores que devem ser retonados para onde a função foi chamada.

+ +

Sintaxe

+ +
return [[expression]];
+ +
+
expression
+
A expressão cujo valor será retornado. Se omitido, undefined é retornado.
+
+ +

Descrição

+ +

Quando uma declaração return é usada em um corpo de função, a execução dessa função é parada. Se especificado, um dado valor é retornado à quem chamou a função. Se a expressão for omitida, undefined será retornado. Todas as declarações return a seguir param a execução da função:

+ +
return;
+return true;
+return false;
+return x;
+return x + y / 3;
+
+ +

Inserção Automática de Ponto-e-Vírgula

+ +

A declaração return é afetada pela inserção automática de ponto e vírgula (ASI). Nenhum terminador de linha é permitido entre a palavra-chave return e a expressão.

+ +
return
+a + b;
+
+ +

é transformado pelo ASI em:

+ +
return;
+a + b;
+
+ +

O console irá alertar "unreachable code after return statement" (código inacessível após a declaração return).

+ +
A partir do Gecko 40 {{geckoRelease(40)}}, um alerta é mostrado no console se um código inacessível é encontrado após uma declaração return.
+ +

Exemplos

+ +

return

+ +

A função a seguir retorna o quadro do seu argumento, x, quando x é um número.

+ +
function square(x) {
+   return x * x;
+}
+
+ +

Interrompendo uma função

+ +

Uma função para imediatamente no ponto em que return é chamado.

+ +
function counter() {
+  for (var count = 1; ; count++) {  // loop infinito
+    console.log(count + 'A'); // até 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + 'B');  // até 4
+    }
+  console.log(count + 'C');  // nunca aparece
+}
+
+counter();
+
+// Saída:
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+
+ +

Retornando uma função

+ +

Veja também o artigo sobre Closures.

+ +
function magic(x) {
+  return function calc(x) { return x * 42; };
+}
+
+var answer = magic();
+answer(1337); // 56154
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial.
{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}{{Spec2('ESDraft')}}
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/switch/index.html b/files/pt-br/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..ff47dd69d2 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,288 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Statements/switch +tags: + - Instrução + - JavaScript + - Referência(2) + - Web +translation_of: Web/JavaScript/Reference/Statements/switch +--- +
+
{{jsSidebar("Statements")}}
+ +
A condicional switch avalia uma expressão, combinando o valor da expressão para um cláusula case, e executa as instruções  associadas ao case.
+ +
 
+
+ +

{{EmbedInteractiveExample("pages/js/statement-switch.html")}}

+ +

Sintaxe

+ +
switch (expressão) {
+  case valor1:
+    //Instruções executadas quando o resultado da expressão for igual á valor1
+    [break;]
+  case valor2:
+    //Instruções executadas quando o resultado da expressão for igual á valor2
+    [break;]
+  ...
+  case valueN:
+    //Instruções executadas quando o resultado da expressão for igual á valorN
+    [break;]
+  default:
+    //Instruções executadas quando o valor da expressão é diferente de todos os cases
+    [break;]
+}
+ +
+
expressão
+
Uma expressão que será comparada á cada cláusula case.
+
case expressão
+
Uma cláusula case que será comparada á expressão.
+
+ +

Descrição

+ +

Se a condição for correspondida, o programa executa as instruções asssociadas. Se múltiplos casos corresponderem o valor, o primeiro caso que corresponder é selecionado, mesmo se os casos não forem iguais entre si.

+ +

O programa primeiro procura por um caso o qual a expressão avalie como tendo o mesmo valor que o input da expressão (usando a comparação de igualdade estrita, ===) transferindo assim o controle para a cláusula encontrada e em seguida execudando as instruções associadas. Caso nenhum caso seja correspondido, então o programa procura pela cláusula opicional default, que, se encontrado, tem o controle transferido à ele, executando suas instruções associadas. Se não ouver uma cláusula default, o programa continua a execução da instrução seguindo para o final do switch. Por convenção, a cláusula default é a última, mas não é algo obrigatório.

+ +

A instrução opcional break associada com cada case garante que o programa saia da condicional switch assim que a instrução correspondente for executada  e executa a instrução que segue logo após o switch. Caso break seja omitido, o programa continua a execução para a próxima instrução dentro de switch. 

+ +

Exemplos

+ +

Exemplo: Usando switch

+ +

No exemplo a seguir, if expr é avaliado como "Bananas", o programa corresponde o valor com o case "Bananas" e executa a instrução associada. Quando break for encontrado, o programa para (break), saindo de switch e executa a instrução localizada após o switch. Se break fosse omitido, a instrução para "Cherries" também seria executada.

+ +
switch (expr) {
+  case "Laranjas":
+    console.log("As laranjas custam $0.59 o quilo.");
+    break;
+  case "Maçãs":
+    console.log("Maçãs custam $0.32 o quilo.");
+    break;
+  case "Bananas":
+    console.log("Bananas custam $0.48 o quilo.");
+    break;
+  case "Cerejas":
+    console.log("Cerejas custam $3.00 o quilo.");
+    break;
+  case "Mangas":
+  case "Mamões":
+    console.log("Mangas e mamões custam $2.79 o quilo.");
+    break;
+  default:
+    console.log("Desculpe, estamos sem nenhuma " + expr + ".");
+}
+
+console.log("Tem algo mais que você gostaria de levar?");
+
+ +

Exemplo: O que acontece se eu esquecer um break?

+ +

Se você esquecer um break então o script irá rodar a partir do caso onde o critério foi correspondido e irá rodar também o caso seguinte independentemente do critério ter sido correspondido ou não:

+ +
var foo = 0;
+switch (foo) {
+    case -1:
+        console.log('1 negativo');
+        break;
+    case 0: // foo é 0 então aqui o critério foi correspondido, então esse bloco vai rodar
+        console.log(0)
+        // NOTA: o break esquecido deveria estar aqui
+    case 1: // nenhuma instrução break em 'case 0:' então essa instrução vai rodar também
+        console.log(1);
+        break; // o programa encontra esse break então não vai continuar para o 'case 2:'
+    case 2:
+        console.log(2);
+        break;
+    default:
+        console.log('default');
+}
+ +

Exemplo: Métodos para múltiplos casos

+ +

Referência para esta técnica abaixo:

+ +

- Switch statement multiple cases in JavaScript (Stack Overflow)

+ +

Multi-Caso - Operação Simples

+ +

Esse método toma vantagem do fato de não existir um break após um case e irá continuara  executar o próximo case independentemente se o case corresponde ao critério. Veja o título desta seção "O que acontece se eu esquecer um break?"

+ +

Esse é um exemplo de uma operação sequencial simples com a instrução switch, onde quatro valores diferentes fazem a mesma coisa..

+ +

 

+ +
var Animal = 'Girafa';
+switch (Animal) {
+    case 'Vaca':
+    case 'Girafa':
+    case 'Cachorro':
+    case 'Porco':
+        alert('Esse animal irá para Arca de Noé');
+        break;
+    case 'Dinossauro':
+    default:
+        alert('Esse animal não vai.');
+}
+ +

Multi-Caso - Operações encadeadas 

+ +

Esse é um exemplo de múltiplas operações squenciais usando a instrução switch, onde, dependendo do número inteiro, você poderá receber outputs diferentes. Isso mostra que você pode alterar a ordem que você insere as instruções de case, e isso não precisa ser uma sequência numérica. Em JavaScript, você pode até mesmo misturar definições de strings dentro desses cases. 

+ +

This is an example of a multiple-operation sequential switch statement, where, depending on the provided integer, you can receive different output. This shows you that it wil traverse in the order that you put the case statements, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.

+ +
var foo = 1;
+var output = 'Output: ';
+switch (foo) {
+    case 10:
+        output += 'Então ';
+    case 1:
+        output += 'Qual ';
+        output += 'É ';
+    case 2:
+        output += 'O Seu ';
+    case 3:
+        output += 'Nome';
+    case 4:
+        output += '?';
+        alert(output);
+        break;
+    case 5:
+        output += '!';
+        alert(output);
+        break;
+    default:
+        alert('Favor escolher um número de 0 à 6!');
+}
+ +

Output para esse exemplo:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueAlert Text
foo é NaN ou não é 1, 2, 3, 4, 5 ou 10Favor escolher um número de 0 à 6!
10Output: Então Qual É O Seu Nome?
1Output: Qual É O Seu Nome?
2Output: Seu Nome?
3Output: Nome?
4Output: ?
5Output: !
+ +

Especificações

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
ECMAScript 3ª EdiçãoStandardDefinição inicial.
+ Implementado no JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
+ +

Compatibilidade de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/pt-br/web/javascript/reference/statements/throw/index.html b/files/pt-br/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..e8835f8d85 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,237 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +tags: + - Instrução + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/throw +--- +
{{jsSidebar("Statements")}}
+ +

A declaração throw lança uma exceção definida pelo usuário. A execução da função atual vai parar (as instruções após o throw não serão executadas), e o controle será passado para o primeiro bloco catch na pilha de chamadas. Se nenhum bloco catch existe entre as funções "chamadoras", o programa vai terminar.

+ +

Sintaxe

+ +
throw expressão;
+ +
+
expressão
+
A expressão a ser lançada.
+
+ +

Descrição

+ +

Use a instrução throw para lançar uma exceção. Quando você lança uma exceção, expressão especifica o valor da exceção. Cada uma das intruções a seguir lança uma exceção:

+ +
throw "Erro2"; // gera uma exceção com um valor string
+throw 42;      // gera uma exceção com o valor 42
+throw true;    // gera uma exceção com o valor true
+ +

Note também que a instrução throw é afetada pela inserção automática de ponto-e-vírgula (ASI) como nenhum terminador de linha entre a palavra throw e a expressão é permitido.

+ +

Exemplos

+ +

Lançando um objeto

+ +

Você pode especificar um objeto quando você lança uma exceção. Você pode então referenciar as propriedades do objeto no bloco catch. O exemplo a seguir cria um objeto do tipo UserException e o usa na intrução throw.

+ +
function UserException(message) {
+   this.message = message;
+   this.name = "UserException";
+}
+function getMonthName(mo) {
+   mo = mo-1; // Ajusta o número do mês para index de array (1=Jan, 12=Dec)
+   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
+      "Aug", "Sep", "Oct", "Nov", "Dec"];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException("InvalidMonthNo");
+   }
+}
+
+try {
+   // statements to try
+   var myMonth = 15; // 15 is out of bound to raise the exception
+   monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = "unknown";
+   logMyErrors(e.message, e.name); // pass exception object to err handler
+}
+
+ +

Outro exemplo lançando um objeto

+ +

O exemplo a seguir testa uma string de entrada para um cep dos Estados Unidos. Se o CEP utiliza um formato inválido, a intrução throw lança uma exceção através da criação de um objeto do tipo ZipCodeFormatException.

+ +
/*
+ * Cria um objeto ZipCode.
+ *
+ * Formatos aceitos para o CEP são:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * Se o argumento passado para o construtor do ZipCode não atende
+ * a um desses padrões uma exceção é lançada.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // o valor do CEP será a primeira combinação na string
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = "does not conform to the expected format for a zip code";
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * Isso poderia estar em um script que valida dados de endereços
+ * para os endereços dos Estados Unidos.
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // retorna 95060
+b = verifyZipCode(9560);          // retorna -1
+c = verifyZipCode("a");           // retorna -1
+d = verifyZipCode("95060");       // retorna 95060
+e = verifyZipCode("95060 1234");  // retorna 95060 1234
+
+ +

Relançando uma exceção

+ +

Você pode usar throw para relançar uma exceção após você pegá-la. O exemplo a seguir pega uma exceção com um valor numérico e a relança se o valor for maior que 50. A exceção relançada propaga para a função encapsuladora ou para o nível superior para que o usuário a veja.

+ +
try {
+   throw n; // lança uma exceção com um valor numérico
+} catch (e) {
+   if (e <= 50) {
+      // instruções para tratar exceções 1-50
+   } else {
+      // não pode tratar esta exceção então relança
+      throw e;
+   }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Definição inicial. Implementada no JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/try...catch/index.html b/files/pt-br/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..001e7fcc13 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,249 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Statements/try...catch +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +
{{jsSidebar("Statements")}}
+ +

As declarações try...catch marcam um bloco de declarações para testar (try),  e especifica uma resposta, caso uma exceção seja lançada.

+ +

Sintaxe

+ +
try {
+   try_statements
+}
+[catch (exception_var_1 if condition_1) {
+   catch_statements_1
+}]
+...
+[catch (exception_var_2) {
+   catch_statements_2
+}]
+[finally {
+   finally_statements
+}]
+
+ +
+
try_statements
+
Declarações (statements) a serem executadas.
+
+ +
+
catch_statements_1, catch_statements_2
+
Declarações que são executadas se uma exceção é lançada no bloco try.
+
+ +
+
exception_var_1, exception_var_2
+
Um indentificador que leva um objeto exceção para uma cláusula catch  associada.
+
+ +
+
condition_1
+
Uma expressão condicional.
+
+ +
+
finally_statements
+
Declarações que são executadas depois que a declaração try é completada. Essas declarações são executadas independetemente se uma exceção foi ou não lançada ou capturada.
+
+ +

Descrição

+ +

A declaração try consiste  em um bloco try, que contém uma ou mais declarações, e ao menos uma cláusula catch  ou uma cláusula finally,  ou ambas. Ou seja, há 3 formas de declarações try :

+ +
    +
  1. try...catch
    2. +
  2. try...finally
    3. +
  3. try...catch...finally
    4. +
+ +

Uma cláusula catch contém declarações que especificam o que fazer caso uma exceção seja lançada no bloco try. Ou seja, se você quer que o bloco try tenha êxito, e caso não tenha, você quer que o controle passe para o bloco catch. Caso qualquer declaração dentro do bloco try  (ou em uma função chamada no interior do bloco try) lançar uma exceção o controle imediatamente muda para a cláusula catch. Se nenhuma exceção for lançada no bloco try a cláusula catch é ignorada.

+ +

A cláusula finally é executada após a excecução do bloco try e da(s) cláusula(s) catch porém antes das declarações seguintes ao try. Ela sempre é executada, independente se uma exceção for lançada ou capturada.

+ +

Você pode aninhar uma ou mais declarações try. Caso uma declaração try interior não tenha uma cláusula catch, a cláusula catch pertencente a declaração try que a envolve é introduzida. 

+ +

Você pode usar a declaração try para manipular exceções em JavaScript. Veja o Guia Javascript para informações sobre exceções em JavaScript.

+ +

Cláusula catch incondicional

+ +

Quando uma única, incondicional cláusula catch é utilizada, o bloco catch  é inserido quando qualquer exceção for lançada. Por exemplo, quando a exceção ocorre no código a seguir, o controle é transferido para a cláusula catch.

+ +
try {
+   throw "myException"; // gera uma exceção
+}
+catch (e) {
+   // declarações para manipular quaisquer exceções
+   logMyErrors(e); // passa o objeto de exceção para o manipulador de erro
+}
+
+ +

Cláusulas catch condicionais

+ +

{{non-standard_header}}

+ +

Você pode utilizar uma ou mais cláusulas catch condicionals para manipular exceções específicas. Nesse caso a cláusula catch apropriada será inserida quando a exceção espeficica for lançada. No exemplo a seguir, o código no bloco try pode potencialmente jogar três exceções: TypeError, RangeError, e EvalError. Quando a exceção ocorre, o controle transfere para a cláusula catch apropriada. Caso a exceção não seja uma das especificadas e uma cláusula catch incondicional for encontrada, o controle é transferido para essa cláusula catch.

+ +

Se utilizar uma cláusula catch incondicional com uma ou mais cláusulas catch condicionais, o catch incondicional deve ser especificado por último. Caso contrário, o catch incondicional interceptará todos os tipos de exceção antes que eles alcancem os condicionais.

+ +

Nota: Essa funcionalidade não é parte da especificação ECMAScript.

+ +
try {
+    myroutine(); // pode lançar três tipos de exceções
+} catch (e if e instanceof TypeError) {
+    // declarações para manipular exceções TypeError
+} catch (e if e instanceof RangeError) {
+    // declarações para manipular exceções RangeError
+} catch (e if e instanceof EvalError) {
+    // declarações para manipular exceções EvalError
+} catch (e) {
+    // declarações para manipular quaisquer exceções não especificadas
+    logMyErrors(e); // passa o objeto de exceção para o manipulador de erro
+}
+ +

E aqui temos como implementar as mesmas "cláusulas catch condicionais" utilizando apenas JavaScript puro conforme a especificação ECMAScript (obviamente é mais verboso, porém, funciona em qualquer lugar):

+ +
try {
+    myroutine(); // pode lançar três tipos de exceções
+} catch (e) {
+    if (e instanceof TypeError) {
+        // declarações para manipular exceções TypeError
+    } else if (e instanceof RangeError) {
+        // declarações para manipular exceções RangeError
+    } else if (e instanceof EvalError) {
+        // declarações para manipular exceções EvalError
+    } else {
+       // declarações para manipular quaisquer exceções não especificadas
+       logMyErrors(e); // passa o objeto de exceção para o manipulador de erro
+    }
+}
+
+ +

O identificador de exceção

+ +

Quando uma exceção é lançada no bloco try, exception_var (ex. o e dentro de catch (e)) armazena o valor especificado pela declaração throw. Você pode usar esse identificador para conseguir informação sobre a exceção que foi lançanda.

+ +

Esse identificador é local para a cláusula catch. Ou seja, é criado quando a cláusula catch é introduzida e após terminar sua excecução o identificador não se torna mais disponível.

+ +

A cláusula finally

+ +

A cláusula finally é executada após a excecução do bloco try e da(s) cláusula(s) catch porém antes das declarações seguintes a declaração try. Ela sempre é executada, independente se uma exceção for lançada ou capturada.

+ +

A cláusula finally contém declarações para executarem após a execução do bloco try  e da(s) cláusula(s) catch  porém antes das declarações seguintes a declaração try. A cláusula finally é excutada independente se uma exceção for lançada ou não. Caso uma exceção seja lançada, as declarações no interior da cláusula finally são executadas mesmo que nenhum catch manipule a exceção.

+ +

Você pode utilizar a cláusula finally para fazer seu script falhar graciosamente quando uma exceção ocorrer; por exemplo, você pode precisar liberar um recurso que seu script possui vinculado. O exemplo seguinte abre um aquivo e então executa declarações que utilizam o arquivo (server-side JavaScript permite que você acesse arquivos). Se uma exceção for lançada enquanto o arquivo estiver aberto, a cláusula finally fecha o arquivo antes que o script falhe.

+ +
openMyFile()
+try {
+   // vincula o recurso
+   writeMyFile(theData);
+}
+finally {
+   closeMyFile(); // sempre fecha o recurso
+}
+
+ +

Exemplos

+ +

Blocos try aninhados

+ +

Primeiro vamos ver o que acontece com isso:

+ +
try {
+  try {
+    throw new Error("oops");
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Resultado
+// "finally"
+// "outer" "oops"
+ +

Agora, caso nós já capturamos a exceção no bloco try interno adicionando um bloco catch

+ +
try {
+  try {
+    throw new Error("oops");
+  }
+  catch (ex) {
+    console.error("inner", ex.message);
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Resultado:
+// "inner" "oops"
+// "finally"
+ +

E agora, vamos relançar o erro.

+ +
try {
+  try {
+    throw new Error("oops");
+  }
+  catch (ex) {
+    console.error("inner", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Resultado:
+// "inner" "oops"
+// "finally"
+// "outer" "oops"
+
+ +

Qualquer exceção lançada será capturada apenas uma vez pelo bloco catch envolvente mais próximo, a não ser que seja relançada. Obviamente qualquer nova exceção elevada no bloco "interno" (pois código em um bloco catch pode fazer algo que lance), será capturado pelo bloco "externo".

+ +

Retornando de um bloco finnaly

+ +

Caso o bloco finally retorne um valor, esse valor torna-se o valor de retorno do produto de try-catch-finally inteiro, independente de qualquer declaração return nos blocos try e catch. Isso inclui exceções lançadas dentro do bloco catch:

+ +
try {
+  try {
+    throw new Error("oops");
+  }
+  catch (ex) {
+    console.error("inner", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+    return;
+  }
+}
+catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Resultado:
+// "inner" "oops"
+// "finally"
+ +

O "oops" externo não é lançado devido ao retorno do bloco finally. O mesmo se aplicaria a qualquer valor retornado do bloco catch.

+ +

Vejam também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/var/index.html b/files/pt-br/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..6f3ec18977 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/var/index.html @@ -0,0 +1,238 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/var +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Sumário

+ +

O variable statement declara uma variável, opcionalmente é possível atribuir à ela um valor em sua inicialização.

+ +

Sintaxe

+ +
var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];
+ +
+
varnameN
+
Nome da variável. Pode ser utilizado qualquer identificador legal.
+
+ +
+
valueN
+
Valor inicial da variável. Pode ser qualquer expressão legal.
+
+ +

Descrição

+ +

Declarações de variáveis, onde quer que elas ocorram, são processadas antes que qualquer outro código seja executado. O escopo de uma variável declarada com  var é seu contexto atual em execução, o qual é a função a qual pertence ou, para variáveis declaradas fora de qualquer função, o escopo é o global.

+ +

Atribuir um valor a uma variável não declarada anteriormente implica em criar uma variável global (ela se torna uma propriedade do objeto global) quando a atribuição é executada. As diferenças entre uma variável declarada e uma não delcarada são:

+ +

1. Variáveis declaradas estão relacionadas com o contexto de execução quando elas são criadas (por exemplo, uma função, objeto). Por outro lado, as variaveis não declaradas sempre são globais.

+ +
function x() {
+  y = 1;   // Lança a exceção ReferenceError em modo restrito (strict mode)
+  var z = 2;
+}
+
+x();
+
+console.log(y); // logs "1"
+console.log(z); // Lança a exceção ReferenceError: z não foi definida fora da função x()
+
+ +

2. Variáveis declaradas são criadas antes de qualquer código ser executado. As variáveis não declaradas não existem até quando o código atribuir um valor a ela.

+ +
console.log(a);                // Lança a exceção ReferenceError.
+console.log('still going...'); // Nunca será executado.
+ +
var a;
+console.log(a);                // mostra "undefined" ou "" dependendo do naveador.
+console.log('still going...'); // mostra "still going...".
+ +

3. Variáveis declaradas são propriedades não configuráveis no contexto de execução (função ou global). Variaveis não declaradas são configuráveis (por exemplo, podem ser excluídas).

+ +
var a = 1;
+b = 2;
+
+delete this.a; // Lança a exceção TypeError em modo restrito(strict mode). Caso contrário, Falha silenciosamente.
+delete this.b;
+
+console.log(a, b); // Throws a ReferenceError.
+// A propriedade 'b' foi deletada e não existe mais.
+ +

Por conta dessas três diferenças, falha para declarar variáveis, muito provavelmente, levar a resultados inesperados. Então, é recomendado sempre declarar as variáveis, independentemente se as variáveis estão em escopo de função ou escopo global. E o modo restrito (strict mode) do ECMAScript 5 sempre lançará uma exceçao quando o código atribuir um valor a uma variável não declarada.

+ +

var hoisting

+ +

Como as declarações de variáveis (e declarações em geral) são processadas antes de qualquer código seja executado, declarar uma variável em qualquer lugar no código é equivalente a declarar no inicio. Isso também significa que uma variável pode aparecer para ser usada antes dela ser declarada. Esse comportamento é chamado de "hoisting", a variável é movida para o inicio da função ou do código global.

+ +
bla = 2
+var bla;
+// ...
+
+// é implicitamente entendido como:
+
+var bla;
+bla = 2;
+
+ +

Por essa razão, recomenda-se sempre declarar variáveis na parte superior do seu escopo de aplicação (o topo do código global e a parte superior do código da função). Por isso, é claro que as variáveis são função de escopo (local) e que são resolvidos na cadeia de escopo.

+ +

Exemplos

+ +

Declarando e inicializando duas variáveis

+ +
var a = 0, b = 0;
+
+ +

Atribuindo duas variáveis com uma única expressão

+ +
var a = "A";
+var b = a;
+
+// Equivalente a:
+
+var a, b = a = "A";
+
+ +

É sempre importante lembrar da ordem da declaração das variáveis:

+ +
var x = y, y = 'A';
+console.log(x + y); // undefinedA
+
+ +

Então, x e y são declarados antes de qualquer código seja executado, a atribuição ocorre posteriormente. Quando "x = y" for executado, y existe e nenhum exceção ReferenceError é lançada, e o valor de y será considerado como 'undefined'. Por este motivo, este valor é atribuido a x. Depois disso, o valor 'A' é atribuido a variável y. Consequentemente, depois da primeira linha, x === undefined && y === 'A', então o resultado.

+ +

Iniciando diversas variáveis

+ +
var x = 0;
+
+function f(){
+  var x = y = 1; // x é declarado localmente,y não é!
+}
+f();
+
+console.log(x, y); // 0, 1
+// x é uma variável global como experado
+// y vazou para fora da função!
+ +

Variável global implícita e fora do escopo da função

+ +

Variáveis que aparecem como variáveis globais implicitas podem ser referenciadas como variáveis fora do escopo da função:

+ +
var x = 0;  // x é declarada como global e é igual a 0
+
+console.log(typeof z); // undefined, desde que z não tenha sido criada anteriormente
+
+function a() { // quando a for chamada,
+  var y = 2;   // y é declarada como local desta função, e o valor 2 é atribuido
+
+  console.log(x, y);   // 0 2
+
+  function b() {       // quando b for chamado,
+    x = 3;  // atribui o valor 3 a variável global existente, ele não cria uma nova variável global
+    y = 4;  // atribui o valor 4 a uma variável fora, ele não cria uma nova variável
+    z = 5;  // cria uma nova variável global e atribui o valor 5.
+  }         // (Lança a exceção ReferenceError em modo restrito.)
+
+  b();     // chamando b, o código irá criar z como variável global
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // chamando a, também irá chamar b
+console.log(x, z);     // 3 5
+console.log(typeof y); // indefinido já que y é uma variável local da função a
+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st EditionStandardPrimeira definição.
+ Implementada no JavaScript 1.0
{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}{{Spec2('ES6')}} 
+ +

Compatibilidade dos Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/while/index.html b/files/pt-br/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..70fbb3e2f9 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/while/index.html @@ -0,0 +1,142 @@ +--- +title: while +slug: Web/JavaScript/Reference/Statements/while +tags: + - Declaração + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/while +--- +
{{jsSidebar("Statements")}}
+ +

A declaração while cria um laço que executa uma rotina especifica enquanto a condição de teste for avaliada como verdadeira. A condição é avaliada antes da execução da rotina.

+ +

Syntax

+ +
while (condição) {
+  rotina
+}
+ +
+
condição
+
Uma expressão avaliada antes de cada passagem através do laço. Se essa condição for avaliada como verdadeira, a rotina é executada. Quando a condição for avaliada como falsa, a execução continua na declaração depois do laço while.
+
rotina
+
Uma declaração que é executada enquanto a condição é avaliada como verdadeira. Para executar multiplas declarações dentro de um laço, use uma declaração em bloco ({ ... }) para agrupar essas declarações.
+
+ +

Exemplos

+ +

O seguinte laço while itera enquanto n é menor que três.

+ +
var n = 0;
+var x = 0;
+
+while (n < 3) {
+  n++;
+  x += n;
+}
+ +

Cada iteração, o laço incrementa n e soma à x. Portanto, x e n assumem os seguintes valores:

+ + + +

Depois de completar a terceira passagem, a condição n < 3 não é mais verdadeira, então o laço termina.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-while-statement', 'while statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}{{Spec2('ES1')}}Definição inicial
+ +

Compatibilidade nos browsers

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/with/index.html b/files/pt-br/web/javascript/reference/statements/with/index.html new file mode 100644 index 0000000000..0d18576236 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/with/index.html @@ -0,0 +1,183 @@ +--- +title: with +slug: Web/JavaScript/Reference/Statements/with +tags: + - Declaração + - Deprecado + - Deprecated + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/with +--- +
O uso da declaração with não é recomendado, isso porque ele pode ser a fonte de bugs confusos e problemas de compatibilidade. Veja o parágrafo "Contra de ambiguidade" na seção "Descrição" para mais detalhes.
+ +
{{jsSidebar("Statements")}}
+ +

A declaração with extende a cadeia de escopo para uma declaração.

+ +

Sintaxe

+ +
with (expressão)
+  declaração
+
+ +
+
expressão
+
Adiciona a dada expressão à cadeia de escopo quando estiver avaliando a declaração. O parênteses em volta da expressão é obrigatório.
+
declaração
+
Qualquer declaração. Para executação multiplas declarações, utilize a declaração em bloco ({ ... }) para agrupar estas declarações.
+
+ +

Descrição

+ +

JavaScript procura por um nome não qualificado procurando uma cadeia de escopo associada à execução do contexto do script ou função contendo um nome não qualificado. A declaração 'with' adiciona o dado objeto à frenet dessa cadeia de escopo durante a validação desse corpo de declarações. Se um nome não qualificado usado no corpo for igual ao de uma propriedade na cadeia de escopo,  então o nome ficará ligado à propriedade e ao objeto contendo a propriedade. Senão, um {{jsxref("ReferenceError")}} será invocado.

+ +
Usar with não é recomendado, e está probido no strict mode do ECMAScript 5. A alternativa recomendada é atribuir o objeto cujas propriedades você quer acessar a uma variável temporária.
+ +

Pros & contras de perfomance

+ +

Pro: A declaração with pode ajudar o tamanho do arquivo por reduzir a necessidade de repetir a referência a um objeto longo sem penalidade na perfomance. A cadeia de escopo mudada por um 'with' não é computacionalmente cara. O uso de 'with' irá aliviar o interpretador de tratar repetidamente as referências. Note que, no entando, isso em muitos casos pode ser substituído usando uma variável temporária para armazenar a referência do objeto desejado.

+ +

Contra: A declaração with força que o objeto especifícado a ser procurado primeiro por pesquisas de nome. Assim sendo, todos os indentificadores que não são membros do objeto espeficícado vão ser encontrados mais lentamente em um bloco 'with'. Onde a perfomance é importande, 'with' deve ser usado apenas para englobar blocos de código que acessam membros de um objeto especifíco.

+ +

Contra de ambiguidade

+ +

Contra: A declaração with faz ser difícil para um leitor humano ou compilador JavaScript decidir se um nome não qualificado var se encontrado em uma cadeia de escopo, e também, em qual objeto. Dado o exemplo seguinte:

+ +
function f(x, o) {
+  with (o) {
+    console.log(x);
+  }
+}
+ +

Apenas quando f é chamado é x ou encontrado ou não, e se for encontrado, ou em o ou (se nenhuma propriedade existir) no objeto de ativação de f, onde o nome de x é o primeiro argumento formal. Se você esquecer de definir x no objeto que você passou como segundo argumento, ou se há algum bug similar ou confusão, você não vai receber um erro -- apenas resultados inesperados.

+ +

Contra: Código utilizando with talvez não seja compatível posteriormente, especialmente quando usado com algo que não seja um objeto simples. Considere esse exemplo:

+ +
+
function f(foo, values) {
+  with (foo) {
+    console.log(values);
+  }
+}
+
+ +

Se você chamar f([1,2,3], obj) em um ambiente ECMAScript 5, então a referência de values dentro da declaração with irá ser obj. No entando, ECMAScript 6 introduz uma propriedade values no Array.prototype (então isso estará disponível em todas as arrays). Então, em um ambiente JavaScript que suporta ECMAScript 6, a referência de values dentro da declaração with irá ser [1,2,3].values.

+
+ +

Exemplos

+ +

Usando with

+ +

A seguinte declaração with irá especificar que o objeto Math é o objeto padrão. As seguintes declarações seguindo a declaração with irão referir a propriedade PI e aos métodos cos e sin, sem especificar um objeto. JavaScript assume o objeto Math para essas referências.

+ +
var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-with-statement', 'with statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}{{Spec2('ES5.1')}}Agora proibido no modo estrito.
{{SpecName('ES3', '#sec-12.10', 'with statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.10', 'with statement')}}{{Spec2('ES1')}}Definição inicial
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf