diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index ff1fe52..42ea3ee 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -1,41 +1,42 @@
-# Contributors
-
-- [Rick West](https://twitter.com/rick_west8)
-- [P.E. Butler III](https://github.com/pebutler3)
-- [Dean W Lofts](https://github.com/loftwah)
-- [Leslie Alldridge](https://github.com/leslie-alldridge)
-- [Paskalouis Patressi](https://github.com/Paskalouis)
-- [Muhammad Shaharyar](https://github.com/shaharyar123)
-- [Hegar Garcia](https://github.com/hegargarcia)
-- [Jesus Mava](https://github.com/jesusMava)
-- [Quazi Hasan](https://github.com/quazihasan)
-- [Mikee Ramirez](https://github.com/mikeermz)
-- [Qazi Wahaj](https://github.com/Wahaj26)
-- [Giovane da Silva Sobrinho](https://github.com/silvasobrinho)
-- [Syed Sabih Ur Rehman](https://github.com/SabihRehman)
-- [Craig Ramsden](https://github.com/crammers)
-- [spaceshipdev](https://github.com/spaceshipdev)
-- [Cem Ugur Karacam](https://github.com/cemuka)
-- [Erica Perry](https://github.com/comealongerica)
-- [Grant Glidewell](https://github.com/grantglidewell)
-- [Amir Kiumarsi](https://github.com/codacy20)
-- [Shah Quadri](https://github.com/shah78677)
-- [Sabiha Shaik](https://github.com/Sabihashaik)
-- [Cristian Silva](https://github.com/Cristuker)
-- [Hojjat Jashnniloofar](https://github.com/hjn66)
-- [Ramsha Saeed](https://github.com/RamshaS)
-- [Tarun Khandelwal](https://github.com/kaitou786)
-- [Hilary Matusiak](https://github.com/hwilson2563)
-- [Akshay Thakare](https://github.com/akshaythakare7)
-- [Giovanni Motterle](https://github.com/GiovanniCS)
-- [Cristian Garcia](https://github.com/criscros-garcia)
-- [Akhil Surendran](https://github.com/akhillllldev)
-- [Lee Connelly](https://github.com/LeeConnelly12)
-- [Nate Jonah](https://github.com/ntjnh)
-- [Christian Dimas](https://github.com/kenanchristian)
-- [Gabe Rose](https://github.com/roseg43)
-- [Augusto Scher](https://github.com/augustoscher)
-- [Subbu Swaroop](https://github.com/SubbuSwaroop)
-- [Bhaskar Gupta](https://github.com/guptabhaskar)
-- [Rabin Khatiwada](https://github.com/rabinkhatiwada)
-- [Adrian Hernandez-Lopez](https://github.com/AdrianHL)
\ No newline at end of file
+# Contributors
+
+- [Rick West](https://twitter.com/rick_west8)
+- [P.E. Butler III](https://github.com/pebutler3)
+- [Dean W Lofts](https://github.com/loftwah)
+- [Leslie Alldridge](https://github.com/leslie-alldridge)
+- [Paskalouis Patressi](https://github.com/Paskalouis)
+- [Muhammad Shaharyar](https://github.com/shaharyar123)
+- [Hegar Garcia](https://github.com/hegargarcia)
+- [Jesus Mava](https://github.com/jesusMava)
+- [Quazi Hasan](https://github.com/quazihasan)
+- [Mikee Ramirez](https://github.com/mikeermz)
+- [Qazi Wahaj](https://github.com/Wahaj26)
+- [Giovane da Silva Sobrinho](https://github.com/silvasobrinho)
+- [Syed Sabih Ur Rehman](https://github.com/SabihRehman)
+- [Craig Ramsden](https://github.com/crammers)
+- [spaceshipdev](https://github.com/spaceshipdev)
+- [Cem Ugur Karacam](https://github.com/cemuka)
+- [Erica Perry](https://github.com/comealongerica)
+- [Grant Glidewell](https://github.com/grantglidewell)
+- [Amir Kiumarsi](https://github.com/codacy20)
+- [Shah Quadri](https://github.com/shah78677)
+- [Sabiha Shaik](https://github.com/Sabihashaik)
+- [Cristian Silva](https://github.com/Cristuker)
+- [Hojjat Jashnniloofar](https://github.com/hjn66)
+- [Ramsha Saeed](https://github.com/RamshaS)
+- [Tarun Khandelwal](https://github.com/kaitou786)
+- [Hilary Matusiak](https://github.com/hwilson2563)
+- [Akshay Thakare](https://github.com/akshaythakare7)
+- [Giovanni Motterle](https://github.com/GiovanniCS)
+- [Cristian Garcia](https://github.com/criscros-garcia)
+- [Akhil Surendran](https://github.com/akhillllldev)
+- [Lee Connelly](https://github.com/LeeConnelly12)
+- [Nate Jonah](https://github.com/ntjnh)
+- [Christian Dimas](https://github.com/kenanchristian)
+- [Gabe Rose](https://github.com/roseg43)
+- [Augusto Scher](https://github.com/augustoscher)
+- [Subbu Swaroop](https://github.com/SubbuSwaroop)
+- [Bhaskar Gupta](https://github.com/guptabhaskar)
+- [Rabin Khatiwada](https://github.com/rabinkhatiwada)
+- [Adrian Hernandez-Lopez](https://github.com/AdrianHL)
+- [Mateus Oliveira](https://github.com/mateusmlo)
diff --git a/source/snippets/javascript/index.md b/source/snippets/javascript/index.md
index 21109ab..9f83825 100644
--- a/source/snippets/javascript/index.md
+++ b/source/snippets/javascript/index.md
@@ -5,24 +5,27 @@ description: Javascript Dev Snippets
section: content
---
-# Javascript
+# **Javascript**
-- [Variables](#variables)
-- [Arrays](#arrays)
-- [Objects](#objects)
-- [Strings](#strings)
-- [Dates](#dates)
-- [Promises](#promises)
-- [Async/Await](#asyncawait)
-- [Useful Functions](#useful-functions)
-- [Closures](#closures)
-- [Destructuring](#destructuring)
+Summary:
-## Variables
+- [Variables](#variables)
+- [Arrays](#arrays)
+- [Objects](#objects)
+- [Strings](#strings)
+- [Dates](#dates)
+- [Promises](#promises)
+- [Functions](#functions)
+- [Destructuring](#destructuring)
+
+
+
+
+# **Variables**
### Scopes
-#### var
+#### _var_
The JavaScript variables statement is used to declare a variable and, optionally, we can initialize the value of that variable.
Variable declarations are processed before the execution of the code.
@@ -44,7 +47,9 @@ function nodeSimplified(){
}
```
-### let
+
+
+### **let**
The let statement declares a local variable in a block scope. It is similar to var, in that we can optionally initialize the variable.
The let statement allows you to create a variable with the scope limited to the block on which it is used.
@@ -67,7 +72,9 @@ function nodeSimplified(){
```
-### const
+
+
+### **const**
const statement values can be assigned once and they cannot be reassigned. The scope of const statement works similar to let statements.
@@ -84,23 +91,28 @@ function test(){
console.log(MY_VARIABLE);
}
```
+
The fact that the value of a `const` cannot be changed, only applies for **Primitive** types (numbers, strings, booleans, null, undefined). However, they don't apply for **Non-Primitive** types (objects, functions and arrays)
##### Code
-````javascript
-const obj = {a: 20, b: 30}
-console.log(obj.a); // 20
-obj.a = 30;
-console.log(obj.a); // 30
+```javascript
+const obj = { a: 20, b: 30 }
+console.log(obj.a) // 20
+obj.a = 30
+console.log(obj.a) // 30
```
----
-## Arrays
+
+
+
+
+# **Arrays**
Arrays are data types used for storing sequences of values. An array is written as a list of comma-separated values inside a pair of square brackets. Any data type can be put into an array including other arrays.
##### Code
+
```JavaScript
const numbers = [1, 2, 3, 4, 5];
const strings = ["apple", "window", "puppy", "cup"];
@@ -121,13 +133,21 @@ const objects = [
];
```
-### shift, unshift, push, pop
-The unshift() and push() methods are for adding elements to the beginning and end of an array respectively, while the shift() and pop() methods are for removing elements from arrays in the same way.
+
+
+### **shift, unshift, push, pop:**
+
+The unshift() and push() methods are for adding elements to the beginning and
+end of an array respectively, while the shift() and pop() methods are for
+removing elements from arrays in the same way.
+
+
+### **unshift()**
-#### unshift()
[Array.prototype.unshift()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) is the method used to add new elements to the beginning of an array. When used, it returns the new length of the array.
##### Code
+
```JavaScript
const letters = ["c", "d", "e"];
@@ -135,10 +155,14 @@ console.log(letters.unshift("a", "b")); // Output: 5
console.log(letters); // Output: Array ["a", "b", "c", "d", "e"]
```
-#### shift()
+
+
+### **shift()**
+
[Array.prototype.shift()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) is the method used to remove the first element of an array.
##### Code
+
```JavaScript
const nums = ["one", "two", "three"];
const firstElement = nums.shift();
@@ -147,10 +171,15 @@ console.log(nums); // Output: Array ["two", "three"]
console.log(firstElement); // Output: "one"
```
-#### push()
+
+
+### **push()**
+
[Array.prototype.push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) is a method used to add elements to the end of an array.
+
##### Code
+
```JavaScript
const cities = ["London", "Amsterdam", "Berlin"];
@@ -158,10 +187,14 @@ cities.push("Copenhagen", "Geneva");
console.log(cities); // Output: Array ["London", "Amsterdam", "Berlin", "Copenhagen", "Geneva"]
```
-#### pop()
+
+
+### **pop()**
+
[Array.prototype.pop()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) is a method used to remove the last element of an array. The removed element is returned.
##### Code
+
```JavaScript
const sports = ["football", "cricket", "rugby", "baseball", "basketball"];
@@ -169,7 +202,9 @@ sports.pop();
console.log(sports); // Output: Array ["football", "cricket", "rugby", "baseball"]
```
-### find, findIndex, map, filter, and reduce
+
+
+### **find, findIndex, map, filter, and reduce**
All of these array methods provide a declarative programming alternative to writing a loop. Each performs some block of code, given in a callback function, to some or all elements of an array.
@@ -177,9 +212,11 @@ Find() and filter() are used to select values from an array that meet some condi
FindIndex() is similar to the Find() method but instead of returning the object, it only return the index of the first item that matches the condition
-Map() is used to apply a transformation to all elements of an array, and reduce() is used to apply some accumulation to the values in an array.
+Map() is used to apply a transformation to all elements of an array, and
+reduce() is used to apply some accumulation to the values in an array.
+
-### Using the find() Method
+### **Using the find() Method**
[Array.prototype.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) is the inbuilt function in JavaScript which is used to get a value of the first item in the array that meets the provided condition.
@@ -187,23 +224,27 @@ If more than one item meets the condition, then the first item satisfying the co
**Find returns a single value from the array, or null if no matching value is found.**
-#### When to use find()
-When you want to find the **first** value in an array that meets some condition.
+#### When to use find():
+
+> When you want to find the **first** value in an array that meets some condition.
#### Example: finding an odd number in an array
+
This is how you would use find to find the first odd number in an array of numbers
##### Code
```javascript
-const numbers = [2,4,6,5,6,7];
+const numbers = [2, 4, 6, 5, 6, 7]
-let firstOddNumber = numbers.find((number) => number % 2 === 1);
+let firstOddNumber = numbers.find((number) => number % 2 === 1)
-console.log(firstOddNumber); // 5
+console.log(firstOddNumber) // 5
```
-### Using the findIndex() Method
+
+
+### **Using the findIndex() Method**
[Array.prototype.findIndex()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) is a builtin function in JavaScript that returns the index of the first item that matches the provided condition.
@@ -211,42 +252,50 @@ If more than one item meets the condition, it will only return the fist one and
**Find returns the index of the first matching value, or -1 if no matching value is found.**
-#### When to use findIndex()
-When you want to find the **first** index of a value inside an array that meets some condition
+#### When to use findIndex():
+
+> When you want to find the **first** index of a value inside an array that meets some condition
#### Example: finding the index of an object inside an array
##### Code
```javascript
-const arrayOfObjects = [{foo: "bar", baz: "qux"}, {bar: "foo", baz: "qux"}]
+const arrayOfObjects = [{ foo: 'bar', baz: 'qux' }, { bar: 'foo', baz: 'qux' }]
-let objectIndex = arrayOfObjects.findIndex((object) => object.bar === "foo")
+let objectIndex = arrayOfObjects.findIndex((object) => object.bar === 'foo')
-console.log(objectIndex); // 1
+console.log(objectIndex) // 1
```
-#### Using the filter() method
+
+
+### **Using the filter() method**
[Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) is a built in JavaScript function that returns a subset of the original array in which all of the values match some condition. Like with find, the callback function passed to filter returns either true or false. If it returns true then filter adds that element to the return array, and if it returns false the element is not included.
**Filter returns an array with all values that meet the condition, or an empty array if no value meet the condition.**
-#### When to use filter()
-Use filter when you want **all the values** from an array that meet some condition.
+#### When to use filter():
+
+> Use filter when you want **all the values** from an array that meet some condition.
#### Example: filter all even numbers in a numeric array
+
This is how you would use filter() to get all even numbers in an array of numbers.
##### Code
+
```javascript
-const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
-const evenNumbers = numbers.filter(number => number % 2 === 0);
-console.log(evenNumbers); // [2, 4, 6, 8]
+const evenNumbers = numbers.filter((number) => number % 2 === 0)
+console.log(evenNumbers) // [2, 4, 6, 8]
```
-### Using the map() method
+
+
+### **Using the map() method**
[Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) is a built in JavaScript function that applies some transformation to every element of an array.
@@ -254,178 +303,226 @@ It does this by running a callback function on each element in the array, and re
**Map returns an array that is the same length as the original array.**
-#### When to use map()
-When you want to apply some function on all elements of an array.
+#### When to use map():
+
+> When you want to apply some function on all elements of an array.
#### Example: doubling the values in a numeric array
+
This is how you would use map() to return a new array with the values in the original array doubled.
##### Code
+
```javascript
-const original = [1, 2, 3, 4];
+const original = [1, 2, 3, 4]
-const double = original.map(val => val * 2);
-console.log(double); // [2, 4, 6, 8]
+const double = original.map((val) => val * 2)
+console.log(double) // [2, 4, 6, 8]
```
-#### Using the reduce() method
+
+
+### **Using the reduce() method**
Just like map(), [Array.prototype.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) also runs a callback for each element of an array. What’s different here is that reduce passes the result of this callback (the accumulator) from one array element to the other, accumulating the result.
**Reduce returns a single value that is some accumulation of values in the array.**
-#### When to use reduce()
+#### When to use reduce():
+
Use reduce() when you want to accumulate the values in an array into a single value.
-#### Example - accumulating student scores from an array of objects
-In this example, we want the sum of all student scores from the given array of objects.
+Example - accumulating student scores from an array of objects
-##### Code
+In this example, we want the sum of all student scores from the given array of
+objects.
-We have an array with students and their respective score. We can use reduce() to get the total score as shown here.
+##### Code
```javascript
+// We have an array with students and their respective score. We can use reduce() to get thetotal score as shown here.
const students = [
- {
- id: 10,
- name: "Poe Dameron",
- score: 75
- },
- {
- id: 2,
- name: "Temmin 'Snap' Wexley",
- score: 30
- },
- {
- id: 4,
- name: "Tallissan Lintra",
- score: 50
- },
- {
- id: 19,
- name: "Ello Asty",
- score: 10
- }
-];
-
-const totalScore = students.reduce((total, student) => total + student.score, 0); // 0 is used as the initial value for total
-
-console.log(totalScore); // 165
+ {
+ id: 10,
+ name: 'Poe Dameron',
+ score: 75,
+ },
+ {
+ id: 2,
+ name: "Temmin 'Snap' Wexley",
+ score: 30,
+ },
+ {
+ id: 4,
+ name: 'Tallissan Lintra',
+ score: 50,
+ },
+ {
+ id: 19,
+ name: 'Ello Asty',
+ score: 10,
+ },
+]
+const totalScore = students.reduce((total, student) => total + student.score, 0) // 0 is used asthe initial value for total
+console.log(totalScore) // 165
```
-#### Using the join() method
+
+
+#### **Using the join() method**
The [join()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) method will join all the elements of an array into a string. It has an optional _separator_ parameter. If no parameter is given, the elements are separated with a comma.
-#### When to use join()
+#### When to use join():
+
Use join() when you want to represent the values in an array as a single, delimited string.
##### Code
+
```javascript
-const arr = ["Lions", "tigers", "bears."];
+const arr = ['Lions', 'tigers', 'bears.']
-const str = arr.join(" and ");
+const str = arr.join(' and ')
-console.log(str); //"Lions and tigers and bears."
+console.log(str) //"Lions and tigers and bears."
```
-### List items from an array until a specific string is found
+
+
+#### **List items from an array until a specific string is found**
##### Code
+
```javascript
-let cards = ['Diamond', 'Spade', 'Heart', 'Club'];
+let cards = ['Diamond', 'Spade', 'Heart', 'Club']
-let currentCard = 'Heart';
+let currentCard = 'Heart'
while (currentCard !== 'Spade') {
- console.log(currentCard);
- currentCard = cards[Math.floor(Math.random() * 4)];
- }
-console.log('found a spade');
+ console.log(currentCard)
+ currentCard = cards[Math.floor(Math.random() * 4)]
+}
+console.log('found a spade')
```
----
+
+
+
-### Objects
+# **Objects**
You can use objects to store functions, other objects and properties, so you can create more descriptive code. Objects are easy and widely used in javascript.
-### Code
+##### Code
```javascript
const car = {
- name: 'Ferrari',
- year: 2015,
- horsepower: 670,
- isCar: true
+ name: 'Ferrari',
+ year: 2015,
+ horsepower: 670,
+ isCar: true,
}
-console.log(`The ${car.name} of ${car.year} has a hoserpower of ${car.horsepower} and is really a car ? ${car.isCar}`)
+console.log(
+ `The ${car.name} of ${car.year} has a hoserpower of ${
+ car.horsepower
+ } and is really a car ? ${car.isCar}`
+)
//Another example with functions
const calc = {
- sum: function(a,b){
- return a+b;
- },
- subtraction: function(a,b){
- return a-b;
- }
+ sum: function(a, b) {
+ return a + b
+ },
+ subtraction: function(a, b) {
+ return a - b
+ },
}
-console.log(`The sum of 5 plus 4 is ${calc.sum(5,4)} and the subtraction is ${calc.subtraction(5,4)}`)
-
+console.log(
+ `The sum of 5 plus 4 is ${calc.sum(
+ 5,
+ 4
+ )} and the subtraction is ${calc.subtraction(5, 4)}`
+)
//An example with nested objects and functions
-const computer ={
- monitor: 'Acer',
- cpu: {
- name: 'FX-6300',
- core: 6,
- socket: 'AM3 +'
- },
- gpu:{
- name: 'GTX-950',
- memory: 2
- },
- ram:{
- name: 'Hyperx',
- gb: 8
- },
- printDetails: function() {
- console.log(`My computer has a monitor ${computer.monitor}, a cpu ${computer.cpu.name} with ${computer.cpu.core} cores, GPU ${computer.gpu.name} and ${computer.ram.gb} of ram.`)
- }
+const computer = {
+ monitor: 'Acer',
+ cpu: {
+ name: 'FX-6300',
+ core: 6,
+ socket: 'AM3 +',
+ },
+ gpu: {
+ name: 'GTX-950',
+ memory: 2,
+ },
+ ram: {
+ name: 'Hyperx',
+ gb: 8,
+ },
+ printDetails: function() {
+ console.log(
+ `My computer has a monitor ${computer.monitor}, a cpu ${
+ computer.cpu.name
+ } with ${computer.cpu.core} cores, GPU ${computer.gpu.name} and ${
+ computer.ram.gb
+ } of ram.`
+ )
+ },
}
-computer.printDetails();
+computer.printDetails()
```
-## Strings
+
+
+
+
+# **Strings**
-### Template strings (string interpolation)
+
+
+### **Template strings (string interpolation)**
Instead of using string concatenation, we can use a template string, or string interpolation, to include interpreted values in strings.
#### Example: using template strings to print values
+
You can use template strings to print variable values, or the results of functions - anything that can be interpreted by javascript.
-### Code
+##### Code
+
```javascript
const name = 'Cristian'
const age = 20
-function myCountry(){
- return 'Brazil'
+function myCountry() {
+ return 'Brazil'
}
// Using concatenation:
-console.log('My name is '+name+' and i am '+age+' years old and i live in '+myCountry()+'.')
+console.log(
+ 'My name is ' +
+ name +
+ ' and i am ' +
+ age +
+ ' years old and i live in ' +
+ myCountry() +
+ '.'
+)
// Using template string:
-console.log(`My name is ${name} and I am ${age} years old and I live in ${myCountry()}.`)
+console.log(
+ `My name is ${name} and I am ${age} years old and I live in ${myCountry()}.`
+)
```
-#### split() method
+
+
+### **split() method**
This method is used to split a string into an array of substrings. It takes two optional parameters, the _separator_ and the _limit_. If the _separator_ parameter is not given, the method will return the entire string. A _separator_ parameter of an empty string ("") will split the string between each character.
@@ -434,65 +531,80 @@ This method is used to split a string into an array of substrings. It takes two
Here are some examples of a string being split using different separators. The first example also uses the limit parameter.
```javascript
-const str = "A very interesting string!";
+const str = 'A very interesting string!'
-const arr = str.split(" ", 3);
-console.log(arr); //["A", "very", "interesting"]
+const arr = str.split(' ', 3)
+console.log(arr) //["A", "very", "interesting"]
-const arr2 = string.split("r");
-console.log(arr2); //["A ve", "y inte", "esting st", "ing!"]
+const arr2 = string.split('r')
+console.log(arr2) //["A ve", "y inte", "esting st", "ing!"]
```
-#### reverse() method
+
+
+### **reverse() method**
The reverse() method will reverse the order of an array. It changes the original array, it does not return a new array.
##### Code
```javascript
-const arr = ["goldfish", "cats", "dogs"];
+const arr = ['goldfish', 'cats', 'dogs']
-arr.reverse();
+arr.reverse()
-console.log(arr); //["dogs", "cats", "goldfish"]
+console.log(arr) //["dogs", "cats", "goldfish"]
```
-#### Using split(), reverse() and join() to reverse the letters of a string.
+
+
+### **Using split(), reverse() and join() to reverse the letters of a string.**
##### Code
+
```javascript
-const str = "abcde";
+const str = 'abcde'
const rev = str
- .split("")
- .reverse()
- .join("");
+ .split('')
+ .reverse()
+ .join('')
-console.log(rev); //"edcba"
+console.log(rev) //"edcba"
```
-#### Using map(), split(), reverse() and join() to reverse the letters of each word in a string.
+
+
+### **Using map(), split(), reverse() and join() to reverse the letters of each word in a string.**
##### Code
+
```javascript
-const str = "All work and no play makes Jack a dull boy"
+const str = 'All work and no play makes Jack a dull boy'
// First the string is split into an array:
-const arr = str.split(" ");
+const arr = str.split(' ')
// Then the letters of each word/element in the array are reversed
-const arr2 = arr.map((x) => x.split("").reverse().join(""));
+const arr2 = arr.map((x) =>
+ x
+ .split('')
+ .reverse()
+ .join('')
+)
// ["llA", "krow", "dna", "on", "yalp", "sekam", "kcaJ", "a", "llud", "yob"]
// Then join each element together again, making sure to use a separator.
-const newStr = arr2.join(" ");
+const newStr = arr2.join(' ')
-console.log(newStr); // "llA krow dna on yalp sekam kcaJ a llud yob"
+console.log(newStr) // "llA krow dna on yalp sekam kcaJ a llud yob"
// Then go watch The Shining.
```
-#### Using replace() to strip off any html tag from a given html text.
+
+
+### **Using replace() to strip off any html tag from a given html text.**
The syntax for [replace()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) is:
@@ -502,424 +614,533 @@ replace(pattern|matchString, replaceString|function)
Where the first parameter "pattern" can be a regular expression, or a string and the second parameter can be a string that you want to replace with or a function that can be called for a matched pattern/string.
-You can strip the html tags from any string with the regular expression: ```/<(?:.|\n)*?>/gi```
+You can strip the html tags from any string with the regular expression: `/<(?:.|\n)*?>/gi`
#### Example: Strip html tags from an h1 header
+
This is how you could use replace with the regular expression above to strip the h1 tags from a string.
##### Code
+
```javascript
-function stripHtmlTags(htmlText){
- if(htmlText && htmlText.length){
- return htmlText.replace(/<(?:.|\n)*?>/gi, ''); // g is for global replace, i for ignore case.
+function stripHtmlTags(htmlText) {
+ if (htmlText && htmlText.length) {
+ return htmlText.replace(/<(?:.|\n)*?>/gi, '') // g is for global replace, i for ignore case.
}
- return htmlText;
+ return htmlText
}
-const str = "replace() method in javascript is really powerful.
";
-
-console.log(stripHtmlTags(str)); // "replace() method in javascript is really powerful."
+const str = 'replace() method in javascript is really powerful.
'
+console.log(stripHtmlTags(str)) // "replace() method in javascript is really powerful."
```
-#### Using the match() method
+
+
+### **Using the match() method**
+
The [match()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match) method is similar to replace(), but it simply returns an array with all values from the string that match the expression given.
#### Example: finding all vowels in a string using match()
+
To find all vowels in a string we can use match() as shown here.
##### Code
+
```javascript
-let input = "A fox runs fast. Oh, how fast it runs!";
+let input = 'A fox runs fast. Oh, how fast it runs!'
-let vowels = input.match(/[aeiouAEIOU]/g);
+let vowels = input.match(/[aeiouAEIOU]/g)
```
In this example, `vowels` is an array containing all of the vowels:
```javascript
-console.log(vowels);
+console.log(vowels)
// [ 'A', 'o', 'u', 'a', 'O', 'o', 'a', 'i', 'u' ]
```
----
-## Dates
+
+
+
-#### Add/Sub time period to/from a Date variable
+# **Dates**
+
+
+
+### **Add/Sub time period to/from a Date variable**
to add a period (for example 10 minutes) to Date variable in javascript.
```javascript
function addSecond(date, seconds) {
- // Time period is in milliseconds so you must multiply second with 1000
- return new Date(date.getTime() + seconds * 1000);
+ // Time period is in milliseconds so you must multiply second with 1000
+ return new Date(date.getTime() + seconds * 1000)
}
// add 60 seconds to current time
-expired = addSecond(new Date(), 60);
+expired = addSecond(new Date(), 60)
```
-#### Display current date format as DD/MM/YYYY
+
+
+### **Display current date format as DD/MM/YYYY**
```javascript
-var d = new Date();
+var d = new Date()
-var date = d.getDate();
-var month = d.getMonth() + 1; // Since getMonth() returns month from 0-11 not 1-12
-var year = d.getFullYear();
-date = (date < 10 ? "0" : "") + date;
-month = (month < 10 ? "0" : "") + month;
+var date = d.getDate()
+var month = d.getMonth() + 1 // Since getMonth() returns month from 0-11 not 1-12
+var year = d.getFullYear()
+date = (date < 10 ? '0' : '') + date
+month = (month < 10 ? '0' : '') + month
-var dateStr = date + "/" + month + "/" + year;
-console.log(dateStr); // Displays current date in DD/MM/YYYY format
+var dateStr = date + '/' + month + '/' + year
+console.log(dateStr) // Displays current date in DD/MM/YYYY format
```
----
+
+
+
+
+# **Promises**
-## Promises
+
-#### Using the Promise.race() method
+### **Using the Promise.race() method**
The [Promise.race()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race) method is used to act on the first promise in a group of promises that resolves or rejects.
When we pass multiple promises to the Promise.race method, it executes the callback for the first promise that resolves/rejects.
#### Example: demonstrating Promise.race() with setTimeout
+
This trivial example will just demonstrate how Promise.race() works using setTimeout.
#### Code
+
```javascript
const firstPromise = new Promise((res, rej) => {
- setTimeout(res, 500, "one");
-});
+ setTimeout(res, 500, 'one')
+})
const secondPromise = new Promise((res, rej) => {
- setTimeout(res, 100, "two");
-});
+ setTimeout(res, 100, 'two')
+})
-Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
+Promise.race([firstPromise, secondPromise]).then((res) => console.log(res))
```
-### Using async/await to simplify control flow
+
+
+### **Using async/await to simplify control flow**
+
Async/await can help with code readability and executing Promises after another.
+
```javascript
function thenWay() {
- loadData().then(data=>{
- if(data) {
- // Do something in case data is null
- }
- process(data);
- moreProcessing(data.thingy);
- loadMoreData().then(data => {
- process(data);
- moreProcessing(data.thingy);
- })
- });
+ loadData().then((data) => {
+ if (data) {
+ // Do something in case data is null
+ }
+ process(data)
+ moreProcessing(data.thingy)
+ loadMoreData().then((data) => {
+ process(data)
+ moreProcessing(data.thingy)
+ })
+ })
}
async function asyncWay() {
- const data = await loadData();
- if(data) {
- // Do something in case data is null
- }
- process(data);
- moreProcessing(data.thingy);
-
- const newData = loadMoreData();
- process(newData);
- moreProcessing(newData.thingy);
+ const data = await loadData()
+ if (data) {
+ // Do something in case data is null
+ }
+ process(data)
+ moreProcessing(data.thingy)
+
+ const newData = loadMoreData()
+ process(newData)
+ moreProcessing(newData.thingy)
}
```
----
-## Async/Await
+
+
+## **Async/Await**
+
Introduced in ES8, async/await is a new way to write asynchronous code. One of its main advantanges over callbacks and Promises is that it makes asynchronous code look very much like synchronous code. There are two parts to this new function:
-#### 1) [Async](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
+#### 1) **[Async](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)**
+
Adding the Async keyword to a function will cause that function to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise):
+
##### Code
+
```javascript
async function sayHi() {
- return 'hello';
+ return 'hello'
}
console.log(sayHi()) //we will get [object Promise] { ... } instead of 'hello'
//to display 'hello', we can do the following:
-sayHi()
-.then(res => console.log(res));
+sayHi().then((res) => console.log(res))
```
-#### 2) [Await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
+
+
+#### 2) **[Await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)**
+
The Await operator is used to wait for a **Promise** to be resolved or rejected before resuming the rest of the **Async** function. Do note that **Await can only be used inside an Async function.**
##### Code
+
```javascript
function resolveAfter2Seconds() {
- return new Promise(res => {
- setTimeout(function() { //we use setTimeout here to mimic a HTTP request
- res('Promise resolved!!!');
- }, 2000);
- })
+ return new Promise((res) => {
+ setTimeout(function() {
+ //we use setTimeout here to mimic a HTTP request
+ res('Promise resolved!!!')
+ }, 2000)
+ })
}
async function sayHi() {
- const message = await resolveAfter2Seconds(); //waiting for Promise to resolve...
- console.log(message); //this line will not run until await resolveAfter2Seconds() line returns with a fulfilled Promise
+ const message = await resolveAfter2Seconds() //waiting for Promise to resolve...
+ console.log(message) //this line will not run until await resolveAfter2Seconds() line returns with a fulfilled Promise
}
-sayHi(); //'Promise resolved!!!' will be displayed after 2 seconds
+sayHi() //'Promise resolved!!!' will be displayed after 2 seconds
```
The improved clarity and readability may not be that obvious from the above example because we are dealing with only a single Promise. Let's use Async/Await to handle multiple Promises:
+
##### Code
+
```javascript
//let's use the Pokemon API to demonstrate this
function getPokemon(ID) {
- return fetch('https://pokeapi.co/api/v2/pokemon/' + ID).then(res => res.json());
+ return fetch('https://pokeapi.co/api/v2/pokemon/' + ID).then((res) =>
+ res.json()
+ )
}
async function displayPokemon() {
- const pokemon1 = await getPokemon(1);
- const pokemon2 = await getPokemon(2);
- const pokemon3 = await getPokemon(10);
- console.log(pokemon1.name);
- console.log(pokemon2.name);
- console.log(pokemon3.name);
+ const pokemon1 = await getPokemon(1)
+ const pokemon2 = await getPokemon(2)
+ const pokemon3 = await getPokemon(10)
+ console.log(pokemon1.name)
+ console.log(pokemon2.name)
+ console.log(pokemon3.name)
}
-displayPokemon();
+displayPokemon()
//output should be:
//bulbasaur
//ivysaur
//caterpie
```
-When it comes to handling multiple Promises, Async/Await provides a very clear advantage - you can read and understand the code as if it were synchronous despite it running asynchronously!
+When it comes to handling multiple Promises, Async/Await provides a very clear
+advantage - you can read and understand the code as if it were synchronous
+despite it running asynchronously!
+
+### **Caveat**
-### Caveat
If you look carefully at the `displayPokemon()` function, the three asynchronous calls are actually being executed sequentially. This means `await getPokemon(2)` will only run after `await getPokemon(1)` is resolved and `await getPokemon(10)` will only run after `getPokemon(2)` is resolved; this results in our function taking a much longer time to return the output. Since all three values are independent of each other, they all should run at the same time. That's when we can bring `Promise.all` into the picture:
```javascript
function getPokemon(ID) {
- return fetch('https://pokeapi.co/api/v2/pokemon/' + ID).then(res => res.json());
+ return fetch('https://pokeapi.co/api/v2/pokemon/' + ID).then((res) =>
+ res.json()
+ )
}
async function displayPokemonParallel() {
- //since we want to fetch the data in parallel, we don't need the await operator here
- const getPokemon1 = getPokemon(1);
- const getPokemon2 = getPokemon(2);
- const getPokemon3 = getPokemon(10);
- //Promise.all takes in an array of Promises and returns a single promise when all of them are resolved.
- //By using await here, we are waiting for all three Promises to resolve and then use array destructuring to store the resolved values in its own variable
- const [pokemon1, pokemon2, pokemon3] = await Promise.all([getPokemon1, getPokemon2, getPokemon3]);
- console.log(pokemon1.name);
- console.log(pokemon2.name);
- console.log(pokemon3.name);
+ //since we want to fetch the data in parallel, we don't need the await operator here
+ const getPokemon1 = getPokemon(1)
+ const getPokemon2 = getPokemon(2)
+ const getPokemon3 = getPokemon(10)
+ //Promise.all takes in an array of Promises and returns a single promise when all of them are resolved.
+ //By using await here, we are waiting for all three Promises to resolve and then use array destructuring to store the resolved values in its own variable
+ const [pokemon1, pokemon2, pokemon3] = await Promise.all([
+ getPokemon1,
+ getPokemon2,
+ getPokemon3,
+ ])
+ console.log(pokemon1.name)
+ console.log(pokemon2.name)
+ console.log(pokemon3.name)
}
-displayPokemonParallel();
+displayPokemonParallel()
//output should be:
//bulbasaur
//ivysaur
//caterpie
```
-So when using **Async/Await**, it is important to not accidentally run all your requests sequentially and slow down your application.
-### Handling errors
+So when using **Async/Await**, it is important to not accidentally run all your
+requests sequentially and slow down your application.
+
+
+
+### **Handling errors**
+
If a Promise is rejected, the **await** expression throws the rejected value. Hence, one of the ways to handle errors when using **Async/Await** is using a try-catch block:
+
#### Code
+
```javascript
function rejected() {
- return new Promise((resolve, reject) => {
- setTimeout(function() {
- reject('this is an error!!!');
- }, 1000)
- })
+ return new Promise((resolve, reject) => {
+ setTimeout(function() {
+ reject('this is an error!!!')
+ }, 1000)
+ })
}
async function getPromise() {
- try {
- const value = await rejected(); //Promise is rejected. Await will throw the rejected value
- } catch(err) { //catch rejected value here
- console.log(err)
- }
+ try {
+ const value = await rejected() //Promise is rejected. Await will throw the rejected value
+ } catch (err) {
+ //catch rejected value here
+ console.log(err)
+ }
}
getPromise() //output: this is an error!!!
```
----
+
-## Useful functions
+
-#### Whitelist Checker
+# **Functions**
-Checks provided keys in reqInput are in whiteList or not
+
-##### Code
-```javascript
-/**
-* @param {*} reqInput {data input to check white list on}
-* @param {*} whiteList {the list of properties to become checked in reqInput}
-*/
-whiteChecker(reqInput, whiteList) {
- let keys = Object.keys(reqInput);
- for (let key of keys) {
- if (!whiteList.includes(key)) {
- return false;
+### **Useful functions:**
+
+
+
+- Whitelist Checker:
+
+ Checks provided keys in reqInput are in whiteList or not.
+
+ ### Code
+
+ ```javascript
+ /**
+ * @param {*} reqInput {data input to check white list on}
+ * @param {*} whiteList {the list of properties to become checked in reqInput}
+ */
+ whiteChecker(reqInput, whiteList) {
+ let keys = Object.keys(reqInput);
+ for (let key of keys) {
+ if (!whiteList.includes(key)) {
+ return false;
+ }
+ }
+ return true;
}
- }
- return true;
-}
-```
+ ```
-#### Random Generator
+
-Returns a random number between provided min and max numbers
+- Random Generator:
-##### Code
-```javascript
-/**
-* @param {!number} min {Minimum number to be GTE in output number}
-* @param {!number} max {Maximum number to be LTE in output number}
-*/
-generateRandomNumber(min, max) => {
- return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-```
+ Returns a random number between provided min and max numbers.
-### Converting an Array to a Keyed Object
+ #### Code
-Using reduce, you can convert an array of objects to an object keyed by a value within the objects, or the index of the object.
+ ```javascript
+ /**
+ * @param {!number} min {Minimum number to be GTE in output number}
+ * @param {!number} max {Maximum number to be LTE in output number}
+ */
+ generateRandomNumber(min, max) => {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+ ```
-##### Code
-```javascript
-function convertListToObject(list, keyBy) {
- return list.reduce((newObject, listItem, index) => {
- const key = keyBy ? listItem[keyBy] : index.toString();
- return {
- ...newObject,
- [key]: listItem
- };
- }, {});
-}
+
-const foods = [{ food: 'bacon', id: '1234 '}, { food: 'eggs', id: '1345' }, { food: 'toast', id: '1456'}];
-const clothes = [{ type: 'socks' }, { type: 'jacket' }, { type: 'shoes' }];
-
-console.log(convertListToObject(foods, 'id'));
-/*
- * {
- * '1345': { food: 'eggs', id: '1345' },
- * '1456': { food: 'toast', id: '1456' },
- * '1234 ': { food: 'bacon', id: '1234 ' }
- * }
- */
-
-console.log(convertListToObject(clothes));
-/*
- * {
- * '0': { type: 'socks' },
- * '1': { type: 'jacket' },
- * '2': { type: 'shoes' }
- * }
- */
-```
-
-#### Grab URL Query Parameters By Name
-Grabs the value of a url query parameter based on its name
-```javascript
-/**
-* @param {!string} name {Parameter name to search for in the URL}
-* @param {string} url {The url to check, if not the currently active URL}
-*/
-getParameterByName(name, url = window.location.href) => {
- name = name.replace(/[\[\]]/g, '\\$&');
- const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
- results = regex.exec(url);
- if (!results) return null;
- if (!results[2]) return '';
- return decodeURIComponent(results[2].replace(/\+/g, ' '));
-}
+- Converting an Array to a Keyed Object
-```
+ Using reduce, you can convert an array of objects to an object keyed by a value within the objects, or the index of the object.
+
+ #### Code
-#### Perform deep copy on an object
+ ```javascript
+ function convertListToObject(list, keyBy) {
+ return list.reduce((newObject, listItem, index) => {
+ const key = keyBy ? listItem[keyBy] : index.toString()
+ return {
+ ...newObject,
+ [key]: listItem,
+ }
+ }, {})
+ }
+
+ const foods = [
+ { food: 'bacon', id: '1234 ' },
+ { food: 'eggs', id: '1345' },
+ { food: 'toast', id: '1456' },
+ ]
+ const clothes = [{ type: 'socks' }, { type: 'jacket' }, { type: 'shoes' }]
+
+ console.log(convertListToObject(foods, 'id'))
+ /*
+ * {
+ * '1345': { food: 'eggs', id: '1345' },
+ * '1456': { food: 'toast', id: '1456' },
+ * '1234 ': { food: 'bacon', id: '1234 ' }
+ * }
+ */
+
+ console.log(convertListToObject(clothes))
+ /*
+ * {
+ * '0': { type: 'socks' },
+ * '1': { type: 'jacket' },
+ * '2': { type: 'shoes' }
+ * }
+ */
+ ```
+
+
+
+- Grab URL Query Parameters By Name.
+
+ Grabs the value of a url query parameter based on its name
+
+ ```javascript
+ /**
+ * @param {!string} name {Parameter name to search for in the URL}
+ * @param {string} url {The url to check, if not the currently active URL}
+ */
+ getParameterByName(name, url = window.location.href) => {
+ name = name.replace(/[\[\]]/g, '\\$&');
+ const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+ results = regex.exec(url);
+ if (!results) return null;
+ if (!results[2]) return '';
+ return decodeURIComponent(results[2].replace(/\+/g, ' '));
+ }
+
+ ```
+
+
+
+- Perform deep copy on an object.
-Can be used to copy one object into another when an object has nested objects.
+ Can be used to copy one object into another when an object has nested objects.
-````javascript
-function deepCopyObject(obj){
- const keys = Object.keys(obj);
- const newObject = {}
+ ```javascript
+ function deepCopyObject(obj) {
+ const keys = Object.keys(obj)
+ const newObject = {}
- for(let i=0; i
-## Closures
+## **Closures**
#### Why we use closures?
-The concept of closure is used to restrict the analogy of functional scope to initialized the variable in functional scope and restrict the local variable to be excess from global. When a function created and passed around or returned from another function it carries a variables with it. Due to which, inner variable will come with all the necessary attachments. Hope this will give you a core concept of JavaScript closure.
+The concept of closure is used to restrict the analogy of functional scope to
+initialized the variable in functional scope and restrict the local variable to
+be excess from global. When a function created and passed around or returned
+from another function it carries a variables with it. Due to which, inner
+variable will come with all the necessary attachments. Hope this will give you a
+core concept of JavaScript closure.
+
+
#### How we use closures?
-A closure is an inner function that has access to the outer (enclosing) function’s variables — scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables
+A closure is an inner function that has access to the outer (enclosing)
+function’s variables — scope chain. The closure has three scope chains: it has
+access to its own scope (variables defined between its curly brackets), it has
+access to the outer function’s variables, and it has access to the global
+variables.
-Lets move on the examples
+
-##### Code
+Lets move on the examples.
-Example - 1
+
-```javascript
-function init() {
- var name = "hello world"; // parent scope
- function displayName() {
- console.log(name); // child scope
- }
- displayName();
-}
-init(); // hello world
+- Example 1:
-// name — is a local variable created by init function
-// displayName() — is the nested function.
-```
+ ##### Code
-#### Explanation
+ ```javascript
+ function init() {
+ var name = 'hello world' // parent scope
+ function displayName() {
+ console.log(name) // child scope
+ }
+ displayName()
+ }
+ init() // hello world
-init() creates a local variable called name and a function calling displayName(). The displayName() function is an nested function and is only available within the body of the init() function. The displayName() function has no local variables of its own. However, because nested function have access to the variables of outer function, displayName() can access the variable name declared in the parent function.
+ // name — is a local variable created by init function
+ // displayName() — is the nested function.
+ ```
-Example-2
+ ### Explanation:
-```javascript
-function createCounter() {
- let counter = 0;
- const myFunction = function() {
- counter = counter + 1;
- return counter;
- };
- return myFunction;
-}
-const increment = createCounter();
-const c1 = increment();
-const c2 = increment();
-const c3 = increment();
-console.log("example increment", c1, c2, c3); // 1, 2, 3
-```
+ init() creates a local variable called name and a function calling
+ displayName(). The displayName() function is an nested function and is only
+ available within the body of the init() function. The displayName() function has
+ no local variables of its own. However, because nested function have access to
+ the variables of outer function, displayName() can access the variable name
+ declared in the parent function.
+
+
+
+
-#### Explanation
+- Example 2:
-When file execute a code, A self calling function execute and initialized a local variable counter and function initialized in a myFunction variable. Self calling function return function definition of myFunction. Every time createCounter function called it will return an incremented value like:
+ ##### Code
-0+1 = 1
-1+1 = 2
-2+1 = 3
-and so on…
+ ```javascript
+ function createCounter() {
+ let counter = 0
+ const myFunction = function() {
+ counter = counter + 1
+ return counter
+ }
+ return myFunction
+ }
+ const increment = createCounter()
+ const c1 = increment()
+ const c2 = increment()
+ const c3 = increment()
+ console.log('example increment', c1, c2, c3) // 1, 2, 3
+ ```
+
+ ### Explanation:
+
+ When file execute a code, A self calling function execute and initialized a local variable counter and function initialized in a myFunction variable. Self calling function return function definition of myFunction. Every time createCounter function called it will return an incremented value like:
+
+ 0+1 = 1
+ 1+1 = 2
+ 2+1 = 3
+ and so on…
+
+
+
+
-#### **IIFE (Immediately Invoked Function Expressions)**
+### **IIFE (Immediately Invoked Function Expressions):**
An **IIFE** is a JavaScript function that runs as soon as it is defined. It is another example of how **Closures** work in Javascript.
@@ -927,91 +1148,115 @@ Example
```javascript
var result = (function() {
- var name = "Dev Snippets";
- return name;
-})();
+ var name = 'Dev Snippets'
+ return name
+})()
// Immediately creates the output:
-console.log(result); // "Dev Snippets"
+console.log(result) // "Dev Snippets"
```
+
+
Assigning an IIFE to a variable will store the value that the function return and not the function definition. Also, variables declared inside IIFE **will not be accessible** outside elsewhere.
### Conclusion:
The key to remember is that when a function gets declared, it contains a function definition and a closure. The closure is a collection of all the variables in scope at the time of creation of the function.
----
+
+
+
+# **Destructuring**
-## Destructuring
[Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) allows the extraction of values from arrays and properties from objects into their own variables using a pretty terse, yet clear syntax.
-### Destructuring Arrays
+## Destructuring Arrays
+
Before destructuring, the way to access items in an array looks something like this:
#### Code
+
```javascript
-const items = ['car', 'computer', 'wallet'];
-const itemA = items[0];
-const itemB = items[1];
-const itemC = items[2];
+const items = ['car', 'computer', 'wallet']
+const itemA = items[0]
+const itemB = items[1]
+const itemC = items[2]
```
+
+
With destructuring, this becomes a one-liner:
#### Code
+
```javascript
-const items = ['car', 'computer', 'wallet'];
-const [ itemA, itemB, itemC ] = items; //assign individual variables to the corresponding item in the array
+const items = ['car', 'computer', 'wallet']
+const [itemA, itemB, itemC] = items //assign individual variables to the corresponding item in the array
console.log(itemB) //'computer'
```
+
+
You can also choose to ignore items in an array by 'skipping' its variable assigment:
#### Code
+
```javascript
-const items = ['car', 'computer', 'wallet'];
-const [ itemA, , itemC] = items; //'computer' is being ignored
+const items = ['car', 'computer', 'wallet']
+const [itemA, , itemC] = items //'computer' is being ignored
console.log(itemC) //'wallet'
```
+
+
And you can also choose to unpack only some values and assign the remaining to a variable using the [rest (...)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) syntax:
#### Code
+
```javascript
-const items = ['car', 'computer', 'wallet'];
-const [ itemA, ...rest] = items; //extract first item and assign the remaining items to the 'rest' variable
+const items = ['car', 'computer', 'wallet']
+const [itemA, ...rest] = items //extract first item and assign the remaining items to the 'rest' variable
console.log(itemA) //'car'
console.log(rest) //['computer', 'wallet']
```
-### Destructuring Objects
+
+
+## Destructuring Objects
Destructuring objects allows us to store its properties in variables like so:
#### Code
+
```javascript
-const obj = {name: 'Foo', age: 31};
-const {name, age} = obj; //extract the 'name' and 'age' properties into variables. Notice how the variable names match the properties
+const obj = { name: 'Foo', age: 31 }
+const { name, age } = obj //extract the 'name' and 'age' properties into variables. Notice how the variable names match the properties
console.log(name) // 'Foo'
console.log(age) // 31
```
+
+
We can also extract the properties and assign them to new variable names:
#### Code
+
```javascript
-const obj = {name: 'Foo', age: 31};
-const {name: newName, age: newAge} = obj; //extract the 'name' and 'age' properties and assign them to new variables - newName and newAge - respectively
+const obj = { name: 'Foo', age: 31 }
+const { name: newName, age: newAge } = obj //extract the 'name' and 'age' properties and assign them to new variables - newName and newAge - respectively
console.log(newName) // 'Foo'
console.log(newAge) // 31
```
+
+
Using the [rest (...)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) syntax in Object destructuring:
#### Code
+
```javascript
-const obj = {name: 'Foo', age: 31, hobby: 'coding'};
-const {name, ...rest} = obj; //extract 'name' property and assign the remaining properties to the 'rest' variable
+const obj = { name: 'Foo', age: 31, hobby: 'coding' }
+const { name, ...rest } = obj //extract 'name' property and assign the remaining properties to the 'rest' variable
console.log(name) // 'Foo'
console.log(rest) // {age: 31, hobby: 'coding'}
```