diff options
Diffstat (limited to 'files/pt-pt/web/javascript/reference/operators')
4 files changed, 1007 insertions, 0 deletions
diff --git a/files/pt-pt/web/javascript/reference/operators/comma_operator/index.html b/files/pt-pt/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..fd3d1ab53c --- /dev/null +++ b/files/pt-pt/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,95 @@ +--- +title: Operador Vírgula +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: + - Composto + - Expressão + - Funcionalidade de Linguagem + - JavaScript + - Operador + - Referencia + - Vírgula +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +original_slug: Web/JavaScript/Reference/Operadores/Operador_virgula +--- +<div>Operador {{jsSidebar("Operators")}}</div> + +<p>O <strong>operador vírgula </strong>(<strong><code>,</code></strong>) avalia cada um dos seus operandos (da esquerda para a direita) e devolve o valor do último operando. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. This is commonly used to provide multiple parameters to a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> loop.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>expr1</code>, <code>expr2</code>, <code>expr3</code>...</dt> + <dd>One or more expressions, the last of which is returned as the value of the compound expression.</dd> +</dl> + +<h2 id="Notas_de_utilização">Notas de utilização</h2> + +<p>You can use the comma operator when you want to include multiple expressions in a location that requires a single expression. The most common usage of this operator is to supply multiple parameters in a <code>for</code> loop.</p> + +<p>The comma operator is fully different from the comma within arrays, objects, and function arguments and parameters.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>If <code>a</code> is a 2-dimensional array with 10 elements on each side, the following code uses the comma operator to increment <code>i</code> and decrement <code>j</code> at once.</p> + +<p>The following code prints the values of the diagonal elements in the array:</p> + +<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) + console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre> + +<p>Note that the comma operators in assignments may appear not to have the normal effect of comma operators because they don't exist within an expression. In the following example, <code>a</code> is set to the value of <code>b = 3</code> (which is 3), but the <code>c = 4</code> expression still evaluates and its result returned to console (i.e., 4). This is due to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence and associativity</a>.</p> + +<pre class="brush: js">var a, b, c; + +a = b = 3, c = 4; // Returns 4 in console +console.log(a); // 3 (left-most) + +var x, y, z; + +x = (y = 5, z = 6); // Returns 6 in console +console.log(x); // 6 (right-most) +</pre> + +<h3 id="Processing_and_then_returning">Processing and then returning</h3> + +<p>Another example that one could make with comma operator is processing before returning. As stated, only the last element will be returned but all others are going to be evaluated as well. So, one could do:</p> + +<pre class="brush: js">function myFunc() { + var x = 0; + + return (x += 1, x); // the same as return ++x; +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.operators.comma")}}</p> + +<h2 id="Consulte_também">Consulte também</h2> + +<ul> + <li>Repetição (<em>loop</em>) de <a href="/pt-PT/docs/Web/JavaScript/Reference/Extratos_e_declarações/for"><code>for</code> </a></li> +</ul> diff --git a/files/pt-pt/web/javascript/reference/operators/function/index.html b/files/pt-pt/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..fe2858c796 --- /dev/null +++ b/files/pt-pt/web/javascript/reference/operators/function/index.html @@ -0,0 +1,140 @@ +--- +title: Expressão função (Function expression) +slug: Web/JavaScript/Reference/Operators/function +tags: + - Expressões Primárias + - Funiconaldiade de Linguagem + - Função + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/function +original_slug: Web/JavaScript/Reference/Operadores/função +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A palavra-chave <strong><code>function</code></strong> pode ser utilziada para definir uma função dentro de uma expressão.</p> + +<p>You can also define functions using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> constructor and a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function declaration</code></a>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html", "shorter")}}</div> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">let <var>myFunction</var> = function [<var>name</var>]([<var>param1</var>[, <var>param2[</var>, ..., <var>paramN</var>]]]) { + <var>statements</var> +};</pre> + +<p>As of ES2015, you can also use {{jsxref("Functions/Arrow_functions", "arrow functions")}}.</p> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code><var>name</var></code> {{optional_inline}}</dt> + <dd>The function name. Can be omitted, in which case the function is <em>anonymous</em>. The name is only local to the function body.</dd> + <dt><code><var>paramN</var></code> {{optional_inline}}</dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code><var>statements</var></code> {{optional_inline}}</dt> + <dd>The statements which comprise the body of the function.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>A function expression is very similar to and has almost the same syntax as a function declaration (see {{jsxref("Statements/function", "function statement")}} for details). The main difference between a function expression and a function declaration is the <em>function name</em>, which can be omitted in function expressions to create <em>anonymous</em> functions. A function expression can be used as an <a href="/en-US/docs/Glossary/IIFE">IIFE (Immediately Invoked Function Expression)</a> which runs as soon as it is defined. See also the chapter about {{jsxref("Functions", "functions")}} for more information.</p> + +<h3 id="Function_expression_hoisting">Function expression hoisting</h3> + +<p>Function expressions in JavaScript are not hoisted, unlike {{jsxref("Statements/function", "function declarations", "#Function_declaration_hoisting")}}. You can't use function expressions before you define them:</p> + +<pre class="brush: js">console.log(notHoisted) // undefined +// even though the variable name is hoisted, the definition isn't. so it's undefined. +notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +}; +</pre> + +<h3 id="Named_function_expression">Named function expression</h3> + +<p>If you want to refer to the current function inside the function body, you need to create a named function expression. <u><strong>This name is then local only to the function body (scope)</strong></u>. This also avoids using the non-standard {{jsxref("Functions/arguments/callee", "arguments.callee")}} property.</p> + +<pre class="brush: js">let math = { + 'factit': function factorial(n) { + console.log(n) + if (n <= 1) { + return 1; + } + return n * factorial(n - 1); + } +}; + +math.factit(3) //3;2;1; +</pre> + +<p>The variable the function expression is assigned to will have a <code>name</code> property. The name doesn't change if it's assigned to a different variable. If function name is omitted, it will be the variable name (implicit name). If function name is present, it will be the function name (explicit name). This also applies to {{jsxref("Functions/Arrow_functions", "arrow functions")}} (arrows don't have a name so you can only give the variable an implicit name).</p> + +<pre class="brush: js">var foo = function() {} +foo.name // "foo" + +var foo2 = foo +foo2.name // "foo" + +var bar = function baz() {} +bar.name // "baz" + +console.log(foo === foo2); // true +console.log(typeof baz); // undefined +console.log(bar === baz); // false (errors because baz == undefined) +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>The following example defines an unnamed function and assigns it to <code>x</code>. The function returns the square of its argument:</p> + +<pre class="brush: js">var x = function(y) { + return y * y; +}; +</pre> + +<p>More commonly it is used as a <a href="/en-US/docs/Glossary/Callback_function">callback</a>:</p> + +<pre class="brush: js">button.addEventListener('click', function(event) { + console.log('button is clicked!') +})</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.operators.function")}}</p> + +<h2 id="Consulte_também">Consulte também </h2> + +<ul> + <li>{{jsxref("Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> +</ul> diff --git a/files/pt-pt/web/javascript/reference/operators/index.html b/files/pt-pt/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..2856a917bc --- /dev/null +++ b/files/pt-pt/web/javascript/reference/operators/index.html @@ -0,0 +1,310 @@ +--- +title: Expressões e operadores +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - Operadores + - Página Landing + - Resumo + - Sinopse +translation_of: Web/JavaScript/Reference/Operators +original_slug: Web/JavaScript/Reference/Operadores +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Este capítulo documenta todos os operadores, expressões e palavras-chave da linguagem JavaScript.</p> + +<h2 id="Expressões_e_operadores_por_categoria">Expressões e operadores por categoria</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Expressões_primárias">Expressões primárias</h3> + +<p>Basic keywords and general expressions in JavaScript.</p> + +<dl> + <dt>{{JSxRef("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to a special property of an execution context.</dd> + <dt>{{JSxRef("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{JSxRef("Operators/class", "class")}}</dt> + <dd>The <code>class</code> keyword defines a class expression.</dd> + <dt>{{JSxRef("Operators/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{JSxRef("Operators/yield", "yield")}}</dt> + <dd>Pause and resume a generator function.</dd> + <dt>{{JSxRef("Operators/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{JSxRef("Operators/async_function", "async function")}}</dt> + <dd>The <code>async function</code> defines an async function expression.</dd> + <dt>{{JSxRef("Operators/await", "await")}}</dt> + <dd>Pause and resume an async function and wait for the promise's resolution/rejection.</dd> + <dt>{{JSxRef("Global_Objects/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{JSxRef("Operators/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{JSxRef("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{JSxRef("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Expressões_Left-hand-side">Expressões "Left-hand-side"</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>In constructors, <code>new.target</code> refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Aumento_e_diminuição">Aumento e diminuição</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Operadores_unários">Operadores unários</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Operadores_de_aritmética">Operadores de aritmética</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<dl> + <dt>{{JSxRef("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Exponentiation operator.</dd> +</dl> + +<h3 id="Operadores_relacionais">Operadores relacionais</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<div class="note"> +<p><strong>Nota: =></strong> não é um operador, mas a notação para <a href="/pt-PT/docs/Web/JavaScript/Reference/Funcoes/Funcoes_seta">funções seta (<em>arrow</em></a>).</p> +</div> + +<h3 id="Operadores_de_equality">Operadores de <em>equality</em></h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Operadores_de_binário_bitwise">Operadores de binário <em>bitwise</em></h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Operadores_de_binário_logical">Operadores de binário <em>logical</em></h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Operdor_condicional_ternário">Operdor condicional (ternário)</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Operadores_de_Assignment">Operadores de <em>Assignment</em></h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Operador_de_aspas">Operador de aspas</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Funcionalidades_não_padrão">Funcionalidades não padrão</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.operators")}}</p> + +<h2 id="Consulte_também">Consulte também</h2> + +<ul> + <li><a href="/pt-PT/docs/Web/JavaScript/Reference/Operadores/Precedencia_operador">Precedência de operador</a></li> +</ul> diff --git a/files/pt-pt/web/javascript/reference/operators/operator_precedence/index.html b/files/pt-pt/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..a33ba19b4b --- /dev/null +++ b/files/pt-pt/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,462 @@ +--- +title: Precedência de operador +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - Guía + - JavaScript + - precedência +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +original_slug: Web/JavaScript/Reference/Operadores/Precedencia_operador +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A <strong>precedência de operador</strong> determina a maneira pela qual os operadores são analisados em relação a cada um. Os operadores com maior precedência tornam-se operandos dos operadores com menor precedência..</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div> + + + +<h2 id="Precedência_e_Associabilidade">Precedência e Associabilidade</h2> + +<p>Consider an expression describable by the representation below. Note that both OP<sub>1</sub> and OP<sub>2 </sub>are fill-in-the-blanks for OPerators.</p> + +<pre class="syntaxbox">a OP b OP c +</pre> + +<p>If <code>OP<sub>1</sub></code> and <code>OP<sub>2</sub></code> have different precedence levels (see the table below), the operator with the highest precedence goes first and associativity does not matter. Observe how multiplication has higher associativity than addition and executed first, even though addition is written first in the code.</p> + +<pre>console.log(3 + 10 * 2); // logs 23 +console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous +console.log((3 + 10) * 2); // logs 26 because the parentheses change the order </pre> + +<p>Left-associativity (left-to-right) means that it is processed as <code>(a OP<sub>1</sub> b) OP<sub>2</sub> c</code>, while right-associativity (right-to-left) means it is interpreted as <code>a OP<sub>1</sub> (b OP<sub>2</sub> c)</code>. Assignment operators are right-associative, so you can write:</p> + +<pre>a = b = 5; // same as writing a = (b = 5); +</pre> + +<p>with the expected result that <code>a</code> and <code>b</code> get the value 5. This is because the assignment operator returns the value that is assigned. First, <code>b</code> is set to 5. Then the <code>a</code> is also set to 5, the return value of <code>b = 5</code>, aka right operand of the assignment.</p> + +<p>As another example, the unique exponentiation operator has right-associativity, whereas other arithmetic operators have left-associativity. It is interesting to note that, the order of evaluation is always left-to-right irregardless of associativity.</p> + +<table> + <tbody> + <tr> + <td>Código</td> + <td>Resultado</td> + </tr> + <tr> + <td> + <pre> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the division operator (/) +console.log(echo("left", 6) / echo("right", 2)); +</pre> + </td> + <td> + <pre> +Evaluating the left side +Evaluating the right side +3 +</pre> + </td> + </tr> + <tr> + <td> + <pre> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the exponentiation operator (**) +console.log(echo("left", 2) ** echo("right", 3));</pre> + </td> + <td> + <pre> +Evaluating the left side +Evaluating the right side +8</pre> + </td> + </tr> + </tbody> +</table> + +<p>The difference in associativity comes into play when there are multiple operators of the same precedence. With only one operator or operators of different precedences, associativity does affect the output, as seen in the example above. In the example below, observe how associativity affects the output when multiple of the same operator are used.</p> + +<table> + <tbody> + <tr> + <td>Código</td> + <td>Resultado</td> + </tr> + <tr> + <td> + <pre> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the division operator (/) +console.log(echo("left", 6) / echo("middle", 2) / echo("right", 3)); +</pre> + </td> + <td> + <pre> +Evaluating the left side +Evaluating the middle side +Evaluating the right side +1 +</pre> + </td> + </tr> + <tr> + <td> + <pre> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the exponentiation operator (**) +console.log(echo("left", 2) ** echo("middle", 3) ** echo("right", 2)); +</pre> + </td> + <td> + <pre> +Evaluating the left side +Evaluating the middle side +Evaluating the right side +512 +</pre> + </td> + </tr> + <tr> + <td> + <pre> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the parentheses around the left and middle exponentiation +console.log((echo("left", 2) ** echo("middle", 3)) ** echo("right", 2));</pre> + </td> + <td> + <pre> +Evaluating the left side +Evaluating the middle side +Evaluating the right side +64</pre> + </td> + </tr> + </tbody> +</table> + +<p>Looking at the code snippets above, <code>6 / 3 / 2</code> is the same as <code>(6 / 3) / 2</code> because division is left-associative. Exponentiation, on the other hand, is right-associative, so <code>2 ** 3 ** 2</code> is the same as <code>2 ** (3 ** 2)</code>. Thus, doing (<code>2 ** 3) ** 2</code> changes the order and results in the 64 seen in the table above.</p> + +<p>Remember that precedence comes before associativity. So, mixing division and exponentiation, the exponentiation comes before the division. For example, <code>2 ** 3 / 3 ** 2</code> results in 0.8888888888888888 because it is the same as <code>(2 ** 3) / (3 ** 2)</code>.</p> + +<h3 id="Note_on_Grouping_and_Short-Circuiting">Note on Grouping and Short-Circuiting</h3> + +<p>In the table below, <strong>Grouping</strong> is listed as having the highest precedence. However, that does not always mean the expression within the grouping symbols <code>( … )</code> is evaluated first, especially when it comes to short-circuiting.</p> + +<p>Short-circuiting is jargon for conditional evaluation. For example, in the expression <code>a && (b + c)</code>, if <code>a</code> is <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Falsy">“falsy”</a>, then the sub-expression <code>(b + c)</code> will not even get evaluated, even if it is in parentheses. We could say that the logical disjunction operator (“OR”) is “short-circuited”. Along with logical disjunction, other short-circuited operators include logical conjunction (“AND”), nullish-coalescing, optional chaining, and the conditional operator. Some more examples follow.</p> + +<pre>a || (b * c); // evaluate `a` first, then produce `a` if `a` is “truthy” +a && (b < c); // evaluate `a` first, then produce `a` if `a` is “falsy” +a ?? (b || c); // evaluate `a` first, then produce `a` if `a` is not `null` and not `undefined` +a?.b.c; // evaluate `a` first, then produce `a` if `a` is `null` or `undefined` +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre>3 > 2 && 2 > 1 +// returns true + +3 > 2 > 1 +// Returns false because 3 > 2 is true, then true is converted to 1 in inequality operators, therefore true > 1 becomes 1 > 1, which +// is false. Adding parentheses makes things clear: (3 > 2) > 1. + +</pre> + +<h2 id="Tabela">Tabela</h2> + +<p>The following table is ordered from highest (20) to lowest (1) precedence.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Precedência</th> + <th>Tipo de operador (Operator)</th> + <th>Associatividade</th> + <th>Operadores individuais</th> + </tr> + <tr> + <td>20</td> + <td>{{jsxref("Operators/Grouping", "Grouping")}}</td> + <td>n/a</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td colspan="1" rowspan="4">19</td> + <td>{{jsxref("Operators/Property_Accessors", "Member Access", "#Dot_notation")}}</td> + <td>left-to-right</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Property_Accessors", "Computed Member Access","#Bracket_notation")}}</td> + <td>left-to-right</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/new","new")}} (with argument list)</td> + <td>n/a</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Function Call</a></td> + <td>left-to-right</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td rowspan="1">18</td> + <td>{{jsxref("Operators/new","new")}} (without argument list)</td> + <td>right-to-left</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">17</td> + <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Increment","#Increment")}}</td> + <td colspan="1" rowspan="2">n/a</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Decrement","#Decrement")}}</td> + <td><code>… --</code></td> + </tr> + <tr> + <td colspan="1" rowspan="10">16</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Logical NOT</a></td> + <td colspan="1" rowspan="10">right-to-left</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Bitwise NOT</a></td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Unary Plus</a></td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Unary Negation</a></td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Prefix Increment</a></td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Prefix Decrement</a></td> + <td><code>-- …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void">void</a></td> + <td><code>void …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></td> + <td><code>delete …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></td> + <td><code>await …</code></td> + </tr> + <tr> + <td>15</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponentiation</a></td> + <td>right-to-left</td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td rowspan="3">14</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">Multiplication</a></td> + <td colspan="1" rowspan="3">left-to-right</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">Division</a></td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Remainder</a></td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">13</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Addition</a></td> + <td colspan="1" rowspan="2">left-to-right</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">Subtraction</a></td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">12</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Left Shift</a></td> + <td colspan="1" rowspan="3">left-to-right</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Right Shift</a></td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Unsigned Right Shift</a></td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">11</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">Less Than</a></td> + <td colspan="1" rowspan="6">left-to-right</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">Less Than Or Equal</a></td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">Greater Than</a></td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">Greater Than Or Equal</a></td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></td> + <td><code>… in …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">10</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">Equality</a></td> + <td colspan="1" rowspan="4">left-to-right</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">Inequality</a></td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">Strict Equality</a></td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">Strict Inequality</a></td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Bitwise AND</a></td> + <td>left-to-right</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Bitwise XOR</a></td> + <td>left-to-right</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Bitwise OR</a></td> + <td>left-to-right</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Logical AND</a></td> + <td>left-to-right</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Logical OR</a></td> + <td>left-to-right</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional</a></td> + <td>right-to-left</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="13">3</td> + <td rowspan="13"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment</a></td> + <td rowspan="13">right-to-left</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td rowspan="2">2</td> + <td>{{jsxref("Operators/yield", "yield")}}</td> + <td colspan="1" rowspan="2">right-to-left</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/yield*", "yield*")}}</td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="/pt-PT/docs/Web/JavaScript/Reference/Operadores/Operador_virgula">Vírgula / Sequência</a></td> + <td>left-to-right</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> |