JavaScript methods will help you code better
Tags: javascript, promise, queryselector, restructuring
Published: 2020-07-19 19:59:50

These JavaScript methods will help your daily job easier.  I have not used these methods a lot, but I found out they are very handy when you are coding. They are `query selector`, `array methods`, `restructuring`, `promise`, `error handling`.

**query selector**
You can use `getElementByClassName` or `getEelementById`.  But we can use `querySelector` to replace them.`querySelector` returns the first Element with the document that matches the specified selector. `querySelectorAll`returns all the nodes.

```javascript
const classEle = document.getElementsByClassName('className')
cont idEle = document.getElementById('id')
```
```javascript
const classEle = document.querySelector('className')
cont idEle = document.querySelector('#id')
// sub elements
const subEle = document.querySelector('.className > li')
// returns all nodes
const subEle = document.querySelectorAll('div')
```
**array methods**
The `forEach` executes a provided function once for each array element.

```javascript
const colors = ['red','white','blue']
colors.forEach(color => console.log(color))
```

`reduce` gives you accumulator and value in the callback function.
accumulator doesn't have to be a number, it can be array, object
```javascript
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
```

```javascript
//Counting instance of values of an object
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

let countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++
  }
  else {
    allNames[name] = 1
  }
  return allNames
}, {})
console.log(countedNames)
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
)
```

**destructuring**
The [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

```javascript
//get propery of object
const listItem = {name: 'shirt', cost: 4}
const {cost} = listItem;
console.log(cost)  //4

//use destructuring as argument of function
// const listItem = {name: 'shirt', cost: 4}
function printCost(getCost) {
	console.log(getCost.cost)
}
printCost(listItem) 
//4
```

```javascript
//nested object and object destructuring
const clothesPrice = {
	shirts: {
		polo: 5,
		tShirt: 6
	}
}

const {shirts: {polo}} = clothesPrice
console.log(polo) //5

//destructor right afer creating the array
const arr = [3, 2, 6]

const[first] = arr.sort()
console.log(first) //2
```

**promise**
The [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

```javascript
//run multiple promises at the same time. It will give an array of results.  Some of these can be a failure, and it will handle the error.
const myURLs = [
  'https://amazon.com',
  'https://youtube.com',
  'https://unsplash.com/'
]
const requests = myURLs.map(url => fetch(url))
const responses = Promise.all(requests)
```

```javascript
//run promise one after the other.  You can use `async` and `await` inside `for of` or `forEach` loop

const myURLs = [
  'https://amazon.com',
  'https://youtube.com',
  'https://unsplash.com/'
]
(async () => {
  const responses = []
  
  myURLs.forEach(url => {
    const resp = await fetch(url)
    responses.push(resp)
  } 
})()
```
**error handling**
You can use `try catch` block. `catch` in regular `fetch` or `async await`.

```javascript
try {
  throw 'myException'; // generates an exception
}
catch (err) {
  // statements to handle any exceptions
  logMyErrors(err);    // pass exception object to error handler
}
```

```javascript
fetch('https://amazon.com')
  .then(res => {
     res.json().then(json => {
        console.log(json)
   })
   .catch(err => console.error('json failed'))
})
.catch(err => console.error('request failed'))
```

```javascript
//cleaner
(async () => {
  const resp = await fetch('https://amazon.com').catch(err => console(error(err))
  const json = await resp.json().catch(err => console.error(err))
  console.log('got json', json)
})()
```


_References_
https://www.youtube.com/watch?v=_n8x8MhQo1k
https://developer.mozilla.org/enUS/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_e