Pt br - util Destructuring objects and arrays Notion #62 (#115)

* transl headeLine * transl section -s Variable declaration: var, const, let * transl section Short explanation * transl section Short explanation * transl section Sample Code 1 * transl section Variable declaration -Detailed explanation -var * transl section Variable declaration -Detailed explanation -var * transl Varibles - Detailed explanation - let * transl Varibles - Detailed explanation - let * transl Varibles - Detailed explanation - const * transl Notions-Arrow function-Sample code * transl Notions-Arrow funct-Detailed expl-Concision * fix: last transl committed * transl Notions-Arrow funct-Detailed-this reference * transl Notions-Arrow funct-Useful resources * transl Notions-Arrow funct-Useful resources 2 * transl: pt-bt - Function default parameter value - #62 * changes after Merge with upstream * transl: pt-br - Destructuring objects and arrays - #62
mbeaudru · May 20, 2018 · e4ae20e · e4ae20e
1 parent df9572d
commit e4ae20e
Showing 1 changed file with 143 additions and 8 deletions.
diff --git a/translations/pt-BR.md b/translations/pt-BR.md
@@ -39,17 +39,17 @@ Se você estiver com dificuldades em entender alguma coisa, eu sugiro que você
       - [Exemplo](#exemplo)
       - [Explicação Detalhada](#explicação-detalhada)
       - [Material Complementar](#material-complementar)
-    + [Função de Seta](#-função-de-seta)
+    + [Função de Seta](#função-de-seta)
       - [Exemplo](#exemplo-de-codigo)
       - [Explicação Detalhada](#detailed-explanation-1)
         * [Concisão](#concisão)
         * [Referência *this*](#referência-this)
       - [Material Útil](#material-útil)
-    + [Parametros padrão de uma Function](#function-default-parameter-value)
-      - [Material Complementar](#external-resource-1)
-    + [Desestruturação de objetos e listas](#destructuring-objects-and-arrays)
-      - [Explicação com Exemplo](#explanation-with-sample-code)
-      - [Material Útil](#useful-resources-1)
+    + [Parametros padrão de uma Function](#parametros-padrão-de-uma-function)
+      - [Material Complementar](#material-complementar)
+    + [Desestruturação de objetos e arrays](#desestruturação-de-objetos-e-arrays)
+      - [Explicação com exemplo de código](#explicação-com-exemplo-de-código)
+      - [Material Útil](#material-útil-1)
     + [Metodos de lista - map / filter / reduce](#array-methods---map--filter--reduce)
       - [Exemplo](#sample-code-2)
       - [Explicação](#explanation)
@@ -287,7 +287,7 @@ person = ["Nick"] // lança um erro, porque a reatribuição não é permitida c
 - [Como let e const são escopados em JavaScript - WesBos](http://wesbos.com/javascript-scoping/)
 - [Zona temporal Inoperante (TDZ) desmistificada](http://jsrocks.org/2015/01/temporal-dead-zone-tdz-demystified)
 
-### <a name="arrow_func_concept"></a> Função de seta
+### <a name="função-de-seta"></a> Função de seta
 
 A atualização do JavaScript ES6 introduziu *funções de seta*, que é outra maneira de declarar e usar funções. Aqui estão os benefícios que elas trazem:
 
@@ -439,6 +439,141 @@ function myFunc() {
 
 #### Material Útil
 
-- [Arrow functions introduction - WesBos](http://wesbos.com/arrow-functions/)
+- [Arrow functions introduction (Introdução à Funções de Seta) - WesBos](http://wesbos.com/arrow-functions/)
 - [JavaScript arrow function - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
 - [Arrow function and lexical *this*](https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4)
+
+### Parametros padrão de uma Function
+
+A partir da atualização do JavaScript ES2015, você pode definir um valor padrão para os parâmetros da função usando a seguinte sintaxe:
+
+```js
+function myFunc(x = 10) {
+  return x;
+}
+console.log(myFunc()) // 10 -- nenhum valor é fornecido então o valor padrão de x que é 10 será atribuído a x em myFunc
+console.log(myFunc(5)) // 5 -- um valor é fornecido então x é igual a 5 em myFunc
+
+console.log(myFunc(undefined)) // 10 -- um valor undefined é fornecido então o valor padrão é atribuído para x
+console.log(myFunc(null)) // null -- um valor (null) é fornecido, veja abaixo para mais detalhes neste caso
+```
+
+O valor de parâmetro padrão é aplicado em duas e somente duas situações:
+
+- Nenhum parâmetro fornecido
+- *undefined* parâmetro fornecido
+
+Em outras palavras, se você passar um *null* o parâmetro padrão **não irá ser aplicado**.
+
+> **Nota:** Atribuição de valor padrão também pode ser usada com parâmetros desestruturados (veja o próximo conceito para ver um exemplo)
+
+#### Material Complementar
+
+- [Default parameter value - ES6 Features](http://es6-features.org/#DefaultParameterValues)
+- [Default parameters - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
+
+### Desestruturação de objetos e arrays
+
+*Desestruturação* é uma maneira conveniente de criar novas variáveis extraindo alguns valores de dados armazenados em objetos ou arrays (matrizes).
+
+Para nomear alguns casos de uso, *desestruturação* pode ser usado para desestruturar parâmetros de função ou *this.props* em projetos React, por exemplo.
+
+#### Explicação com exemplo de código
+
+- Objeto
+
+Vamos considerar o seguinte objeto para todos os exemplos:
+
+```js
+const person = {
+  firstName: "Nick",
+  lastName: "Anderson",
+  age: 35,
+  sex: "M"
+}
+```
+
+Sem desestruturação
+
+```js
+const first = person.firstName;
+const age = person.age;
+const city = person.city || "Paris";
+```
+
+Com desestruturação, tudo em uma única linha:
+
+```js
+const { firstName: first, age, city = "Paris" } = person; // É isso ! :)
+
+console.log(age) // 35 -- uma nova variável age é criada e é igual a person.age
+console.log(first) // "Nick" -- uma nova variável first é criada e é igual person.firstName
+console.log(firstName) // ReferenceError -- person.firstName existe MAS a nova variável criada é nomeada primeiro
+console.log(city) // "Paris" -- uma nova variável city é criada e uma vez que person.city é indefinida, city é igual ao valor padrão fornecido "Paris".
+```
+
+**Nota :** Em ```const { age } = person;```, os colchetes depois da palavra-chave *const* não são usados para declarar um objeto nem um bloco, mas é a sintaxe da *desestruturação*.
+
+- Parâmetros de função
+
+*Desestruturação* é freqüentemente usado para desestruturar parâmetros de objetos em funções.
+
+Sem desestruturação
+
+```js
+function joinFirstLastName(person) {
+  const firstName = person.firstName;
+  const lastName = person.lastName;
+  return firstName + '-' + lastName;
+}
+
+joinFirstLastName(person); // "Nick-Anderson"
+```
+
+Ao desestruturar o parâmetro de objeto *person*, obtemos uma função mais concisa:
+
+```js
+function joinFirstLastName({ firstName, lastName }) { // criamos variáveis firstName e lastName por desestruturação person parameter
+  return firstName + '-' + lastName;
+}
+
+joinFirstLastName(person); // "Nick-Anderson"
+```
+
+A desestruturação é ainda mais agradável para usar com [funções de seta] (#função-de-seta):
+
+```js
+const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName;
+
+joinFirstLastName(person); // "Nick-Anderson"
+```
+
+- Array (Matriz)
+
+Vamos considerar a seguinte array:
+
+```js
+const myArray = ["a", "b", "c"];
+```
+
+Sem desestruturação
+
+```js
+const x = myArray[0];
+const y = myArray[1];
+```
+
+Com desestruturação
+
+```js
+const [x, y] = myArray; // É isso !
+
+console.log(x) // "a"
+console.log(y) // "b"
+```
+
+#### Material Útil
+
+- [ES6 Features - Destructuring Assignment (Funcionalidades ES6 - Atribuição de Destruturação)](http://es6-features.org/#ArrayMatching)
+- [Destructuring Objects - WesBos](http://wesbos.com/destructuring-objects/)
+- [ExploringJS - Destructuring](http://exploringjs.com/es6/ch_destructuring.html)