Ranjeesh Loves to Share

I have worked with Javascript for years now but all these years I was using jQuery and plain javascript with various libraries like jQuery UI etc. Just couple of years ago I was moved into a work environment where everyone except me was doing Angular development. And some were working on moving the angular apps to React.

Given that I have never worked on Angular or React before, I was chose as a candidate for learning react from scratch. I have been working with React for 2 quarters now and I still see so many unknown syntaxes and functionalities.

I have gone through a couple of tutorials for react which made a little bit of sense. But most of the syntax things that I am not understanding are plain Javascript and not react syntax. This made me realize that I have been so out of touch with the javascript that all these new libraries and frameworks syntaxes seem so new to me.

Two of the main weirdness that I found were the array destructuring and the spread operators.

Array Destructuring

This deals with assigning array values to individual variables in very simple manner as follow:

const foo = [‘one’, ‘two’, ‘three’];

const [red, yellow, green] = foo;

console.log(red); // “one”
console.log(yellow); // “two”
console.log(green); // “three”

Refer to the mozilla documentation of javascript for other ways of assignments. All were very interesting way of doing things. The most common ones that I saw being used in React was returning a function’s return array values into variables in React Hooks using Array Destructuring as below:

const [count, setCount] = useState(0);

Spread Operator

This deals with extracting some of the values from an array into a few variables and then keeping rest of them as is. Going through this will probably explain it better than me.

In other words, if you have an array of 10 values and want to only separate 2 values out of it for use keep the rest of them where they came from, you use the spread operator. Look at the example below:

const [a, …b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

Overall, it is fun learning these new syntaxes and using them in day to day work. Will keep learning until I totally understand it and feel like a pro 🙂

If you need more info on these please refer to the Mozilla documentation of javascript.

Thank you for reading.