
In this post, we will be looking at some popular and must use Javascript Tips and tricks to boost your productivity and write clean code.


### Optional Chaining

we usually get stuck in accessing nested properties in a javascript object, most of the time initial render for the content throws an error.

Ex:
```js
   var array;
   array = fetchLogicWhichReturnsArray( )
   
   renderMethod(){
      array.map( data => {
           dispalyData(data);
      }
```
 
Most of the time you will get an array saying `.map is not function`, this is the most common error as a beginner in Javascript world, or even when your access a nested object data eg: `data.userName` it would throw an error like `data.userName does not exist or is not defined`.

These are the most common error, where as a Beginner i would write following code:
```js
    if(data){
        if(data.userName){
              logicFunction()
        }
   }
```

There is nothing wrong with the above chunk of code, but this spoils the readability of code, in  Javascript we can now use optional Chaining to prevent such stuff of code.

The code goes like this:

```js
   const userName = data?.response?.allUsers?.user[0]?.userName
```

The above piece of code, get equivalent of nested conditional checks using if else, using optional chaining is counted in best practices in Javascript world.


### Sum of values in an Array

javascript is no doubt a beautiful language, but Javascript is really powerful and also developer-friendly.

To add an Array, the simplest logic we would use is a `for` loop, and the worst-case complexity for it would be `O(n)` for sure.

```cpp
    int Arr[ ] = {1, 2,3,4};  // any size is possible 
    int sum=0;
    for(int i=0; i<Arr.size(); i++){
        sum = sum +Arr[i];
    }
    cout<<sum;  // outputs: 10
```

in Javascript, we could do it simply 

```js
var Arr = [1, 2,3,4];
var sum = Arr.reduce((x, y) => x + y);
console.log(sum) // outputs 10;
```

The above code looks pretty for sure.

### Resizing Array

Resizing an Array can be really hard in the world of Programming, in the world `cpp` we will have to create a new array and copy elements over to the new Array but Javascript got us.

To Resize an Array we can simply shorten the length of the array, using `.length ` function proved with Array Templates

Let us see how:

```js
var Arr =[3, 6, 8, 44, 99, 77, 33];

Arr.length = 4;
console.log(Arr.length) // outputs 4
console.log(Arr) // [3 ,6 ,8 ,44[

Arr.length =0
console.log(Arr) // output [ ]

### Get Unique Values of an Array

Getting an array of unique values is probably easier than you think in Javascript, wherein in other programming languages you have to sort the array, then iterate over to copy not duplicate values.

```js
var Arr = [...new Set([1, 44, 66, 88, 44, 99])]
console.log(Arr)  // outputs: [ 1, 44, 66, 88, 99 ]
```

### Merge Objects

Merging Objects is a really tough task in most of the Programming languages, but javascript has all you need, to merge multiple objects, you can simply use the `rest operator`.

Eg:

```js
const user ={ name:  'Jessica', gender : 'Female'}
const userName = { userName : 'jesss_codes'}
const profile = { role: 'Full Stack Developer'}

const AboutUser ={ ...user, ...userName, ...profile}

// AboutUser ={
// name:  'Jessica', gender : 'Female'
// userName : 'jesss_codes'
// role: 'Full Stack Developer'
// }
```

### Using Regex

To change or remove values from a string in Javascript you can simply use an inbuilt Javascript function 

eg:
```js
var string = "Jessica"; //
  
 console.log(string.replace(/ss/, "sss"));  // outputs: Jesssica
```

********
Thanks a lot for giving it a Read.

Thumbnail from: freecodecamp.org/news/9-neat-javascript-tricks-e2742f2735c3/

Javascript Tips and Tricks


### Banana🍌

Banana is a popular secret about javascript which goes like this:

```js
     > "b" + "a" + + "a" + "a"
     // output: "baNaNa"
```

**Here is sample output from playground**

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618900348424/Xjk2plknX.png)

Is this really mysterious?

Honestly telling No, I want you to focus on the javaScripts `baNaNa`, which goes like: `b` `a` `NaN` `a`.

Yup, baNaNa is made out of a `NaN`, let me show it to you visually

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618900549983/Dp1g42gpz.png)

```js
'b' + 'a';
// in Javascript is ba that's normal I guess.
```

Here comes the twist, the next I will be adding + "a" or ` + + "a"`

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618900652145/QuwW2T1jA.png)

Here is how NaN kicks into the console, that's obvious if you read closely that what I did.
I added + "a" to ba which turned to `b a NaN`

```js
'b' + 'a' + +'a' + 'a';
// turned into
'b' + 'a' + +'a' + 'a';

//    (+"a") is treated as numeric due to an addition symbol,  where a is not a number, (+ "a") === NaN.
```

That's awesome Right? only happens in the Javascript world.


baNaNa in JavaScript


Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary regelialia.

## On deer horse aboard tritely yikes and much

The Big Oxmox advised her not to do so, because there were thousands of bad
Commas, wild Question Marks and devious Semikoli, but the Little Blind Text
didn’t listen. She packed her seven versalia, put her initial into the belt and
made herself on the way.

- This however showed weasel
- Well uncritical so misled
  - this is very interesting
- Goodness much until that fluid owl

When she reached the first hills of the **Italic Mountains**, she had a last
view back on the skyline of her hometown _Bookmarksgrove_, the headline of
[Alphabet Village](http://google.com) and the subline of her own road, the Line
Lane. Pityful a rhetoric question ran over her cheek, then she continued her
way. On her way she met a copy.

### Overlaid the jeepers uselessly much excluding

But nothing the copy said could convince her and so it didn’t take long until a
few insidious Copy Writers ambushed her, made her drunk with
[Longe and Parole](http://google.com) and dragged her into their agency, where
they abused her for their projects again and again. And if she hasn’t been
rewritten, then they are still using her.

> Far far away, behind the word mountains, far from the countries Vokalia and
> Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
> right at the coast of the Semantics, a large language ocean.

It is a paradisematic country, in which roasted parts of sentences fly into your
mouth. Even the all-powerful Pointing has no control about the blind texts it is
an almost unorthographic life One day however a small line of blind text by the
name of Lorem Ipsum decided to leave for the far World of Grammar.

### According a funnily until pre-set or arrogant well cheerful

The Big Oxmox advised her not to do so, because there were thousands of bad
Commas, wild Question Marks and devious Semikoli, but the Little Blind Text
didn’t listen. She packed her seven versalia, put her initial into the belt and
made herself on the way.

1.  So baboon this
2.  Mounted militant weasel gregariously admonishingly straightly hey
3.  Dear foresaw hungry and much some overhung
4.  Rash opossum less because less some amid besides yikes jeepers frenetic
    impassive fruitlessly shut

When she reached the first hills of the Italic Mountains, she had a last view
back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet
Village and the subline of her own road, the Line Lane. Pityful a rhetoric
question ran over her cheek, then she continued her way. On her way she met a
copy.

> The copy warned the Little Blind Text, that where it came from it would have
> been rewritten a thousand times and everything that was left from its origin
> would be the word "and" and the Little Blind Text should turn around and
> return to its own, safe country.

But nothing the copy said could convince her and so it didn’t take long until a
few insidious Copy Writers ambushed her, made her drunk with Longe and Parole
and dragged her into their agency, where they abused her for their projects
again and again. And if she hasn’t been rewritten, then they are still using
her. Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts.

#### Silent delightfully including because before one up barring chameleon

Separated they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean. A small river named Duden flows by their place and
supplies it with the necessary regelialia. It is a paradisematic country, in
which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an
almost unorthographic life One day however a small line of blind text by the
name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox
advised her not to do so, because there were thousands of bad Commas, wild
Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

#### Wherever far wow thus a squirrel raccoon jeez jaguar this from along

She packed her seven versalia, put her initial into the belt and made herself on
the way. When she reached the first hills of the Italic Mountains, she had a
last view back on the skyline of her hometown Bookmarksgrove, the headline of
Alphabet Village and the subline of her own road, the Line Lane. Pityful a
rhetoric question ran over her cheek, then she continued her way. On her way she
met a copy.

#### Slapped cozy a that lightheartedly and far

The copy warned the Little Blind Text, that where it came from it would have
been rewritten a thousand times and everything that was left from its origin
would be the word "and" and the Little Blind Text should turn around and return
to its own, safe country. But nothing the copy said could convince her and so it
didn’t take long until a few insidious Copy Writers ambushed her, made her drunk
with Longe and Parole and dragged her into their agency, where they abused her
for their projects again and again.

Who doesn't like a long post showcasing the different headings?

Long Post


```jsx
import React from "react";

const CoolComponent = () => <div>I'm a cool component!!</div>;

export default CoolComponent;
```


Hi, I am Jessica Carter

You can also, follow me on

Javascript Tips and Tricks

baNaNa in JavaScript

Long Post

Coding Post

Second post

First post