DEV Community: Sushmita Pandey

Introduction to Destructuring in JavaScript

Sushmita Pandey — Wed, 29 Sep 2021 06:32:06 +0000

Hey everybody 👋
In this article we will talk about Destructuring in JavaScript.

Destructuring syntax is helpful to unpack values from arrays and objects into variables in JavaScript. This feature was rolled out in ES6 along with many other cool features.

There are two types of destructuring - Object destructuring and Array destructuring.

Object Destructuring

Consider an Object with the properties name, age and address:

let person = {
  name: 'Harry Potter',
  age: 13,
  address: 'Hogwarts'
}

In pre-ES6 era, we would have to create new variables and assign each attribute to them, which is a repetitive process:

const name = person.name;
const age = person.age;
const address = person.address;

But with the destructuring assignment, we can write all the variables together surrounded by curly brackets {}, so that JavaScript can create new variables with the same names:

const {name, age, address} = person;

Let's log the new variables on the console:

console.log(name, age, address);
// output - "Harry Potter", 13, "Hogwarts"

Using a new Variable name

If we want to give a new name to the property of an object, we can use a colon:

const {name: personName, age, address} = person;

console.log(personName);
// "Harry Potter"

Using default values

We can provide default values to unpacked variables, the default value will be given to the variable in case the returned value is undefined.

const {x = 10, y = 20} = {x: 5};

console.log(x, y);
// 5, 20

Nested Destructuring

We can also destructure nested objects. As an example, let's modify the person object to include teachers:

let person = {
  name: 'Harry Potter',
  age: 13,
  address: 'Hogwarts',
  teachers: {
    potions: 'Severus Snape',
    transfiguration: 'Minerva Mcgonagall'
  }
};

We can destructure a nested object like this:

const {
  name,
  age,
  address,
  teachers: {
    potions,
    transfiguration
  },
} = person;

console.log(potions)
// output - 'Severus Snape'

Rest operator in object destructuring

We can use the rest operator to collect the remaining properties which have not been already picked by the destructuring pattern.

let person = {
  name: 'Harry Potter',
  age: 13,
  address: 'Hogwarts',
};

const {name, address, ...other} = person;

console.log(other);
// output - { age: 13 }

As we can see, the properties which were not defined in the variable names on the left were collected by the variable other.

Array Destructuring

Arrays can also be conveniently destructured into new variables. Let's take an example of this array:

let student = ['Ron Weasley', 13, 'Hogwarts'];

Instead of manually assigning each array item into a variable, we can simply unpack the variables in order:

const [name, age, address] = student;

console.log(name);
// 'Ron Weasley'

We can also declare the variables before assignment, like so:

const [name, age] = ['Ron Weasley', 13, 'Hogwarts'];

console.log(name);
// 'Ron Weasley'

For an array having length n on right side of the argument, if the number of variables on the left side exceed n, then the first n values will be assigned values by order and the remaining variables will not be assigned any value (they will be undefined).

Default Values

A variable can be assigned a default value, which will be assigned to the variable in case the returned value is undefined.

const [name, age, address, house = 'Gryffindor'] = ['Ron Weasley', 13, 'Hogwarts'];

console.log(house);
// 'Gryffindor'

Swapping Variables ✨

We can use the destructuring expression to swap 2 variables! How cool is that?

let a = 2;
let b = 3;

[a, b] = [b, a];

console.log(a, b);
// 3, 2

Without destructuring syntax, we would have to use a temporary variable to do the same thing.

Skipping Items in an Array

What if we want to ignore some of the values and only want the first and third value? This can be done by only defining variables in desired places:

const [name,,address] = ['Ron Weasley', 13, 'Hogwarts'];

console.log(name, address);
// "Ron Weasley", "Hogwarts"

In the above example, we have 2 commas instead of just one. Comma is being used to skip values in the array.

Suppose if we wanted to only get the age, we would do something like this:

const [,age,] = ['Ron Weasley', 13, 'Hogwarts'];

console.log(age);
// 13

Rest operator in array destructuring

The rest operator can be used in arrays too, to collect the remaining values which have not been picked.

const [name, ...other] = ['Ron Weasley', 13, 'Hogwarts'];

console.log(other);
// [13, "Hogwarts"]

The remaining values will be collected in an array which we can use later.

Destructuring in functions

If a function returns an array, we can destructure the value into variables. Let's look at a function that returns an array:

function func() {
    return ['Albus', 'Dumbledore'];
}

let [firstName, lastName] = func();
console.log(firstName, lastName);
// "Albus", "Dumbledore"

Nested Array destructuring

We can destructure nested arrays too by placing variables inside square brackets on the left side on the index where an array is present on the right side.

const [a, b, [c, d], e] = [10, 13, [20, 25], 9];

console.log(a, c, d);
// 10, 20, 25

That's it for this article! If you like this post please share it with your friends 😊 For any questions feel free to ping me on Twitter.

Happy coding! 👩‍💻

How to use React Hooks - 2 most commonly used Hooks explained ✨

Sushmita Pandey — Sun, 04 Apr 2021 03:55:42 +0000

Hey there!

Welcome to my first post :D. In this post, I'm gonna introduce you to React Hooks, and then teach you two of the most used hooks - the state hook and the effect hook. Let's dive right in!

What are Hooks?

Hooks were introduced for the first time in React v16.8. They let you write components without using JavaScript classes. Which is actually really cool, because that means that you get to use state, lifecycle methods and other awesome things inside a regular JavaScript function!

Note: It's still absolutely fine to write class components. React has no plans to deprecate them as of now. But, Hooks are increasingly becoming the more effective way to write react code, so I'd suggest you try it out and I'm sure you'll get Hooked!

Let's look at a simple component coded using both class components and hooks:

// using Class Components
class CounterComponent extends React.Component {
  constructor() {
    super();

    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    console.log("Component mounted");
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("Component rendered");

    if (prevState.count !== this.state.count) {
      console.log("current count is", this.state.count);
    }
  }

  componentWillUnmount() {
    console.log("Unmounting the component...");
  }

  render() {
    return (
      <>
        <div>
          <button
            onClick={() => this.setState({ count: this.state.count + 1 })}
          >
            Increase
          </button>
          <button
            onClick={() => this.setState({ count: this.state.count - 1 })}
          >
            Decrease
          </button>
        </div>
        <div>
          <p>Current count: {this.state.count}</p>
        </div>
      </>
    );
  }
}

// using Hooks
const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Component mounted");
  }, []);

  useEffect(() => {
    console.log("Component rendered");
    return () => console.log("Unmounting the component...");
  });

  useEffect(() => {
    console.log("current count is", count);
  }, [count]);

  return (
    <>
      <div>
        <button onClick={() => setCount(count + 1)}>Increase</button>
        <button onClick={() => setCount(count - 1)}>Decrease</button>
      </div>
      <div>
        <p>Current count: {count}</p>
      </div>
    </>
  );
};

As we can see, the code written using hooks is much more concise, and we don't have to worry about 'this' anymore.

Why hooks?

React class components don't minify well, and this makes hot reloading unreliable. Minification of functions in Javascript is much better.

Also, the useEffect hook combines many lifecycle methods of class components like componentDidMount, componentDidUpdate and componentWillUnmount. Which means we don't have to split our work in different methods anymore.

With hooks, it becomes easy to reuse stateful logic, by making your own hooks, known as custom hooks.

React hooks make our code cleaner and shorter, which provides a good development experience!

The useState Hook

The purpose of this hook is to let you use state in functional components. The basic syntax of a useState declaration is:

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

Here I have declared a state variable called count and set it to 0. For updating username, we will call setCount. UseState always returns two values, a state variable and a function to update it.

return (
<div>
  <button onClick={() => setCount(count + 1)}>Increase</button>
  <button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
...
)

To display the state, we directly use count:

return (
...
<div>
  <p>Current count: {count}</p>
</div>
)

Whenever the user clicks on Increase or Decrease, setCount updates count with the new value, and React re-renders the component. Let's look at the complete component:

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

  return (
  <>
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
    <div>
      <p>Current count: {count}</p>
    </div>
  </>
  )
}

You can create multiple state variables, and use them as per your liking.

The useEffect Hook

This hook lets you use lifecycle methods like componentDidMount(), componentDidUpdate() and componentWillUnmount() in functional components.

Let's take a look at a simple example:

useEffect(() => {
  // This runs at the first render and after every render by default
  console.log('Component rendered');

  // This runs just before React unmounts the component 
  return () => console.log('Unmounting the component...');
})

If you want to control how many times a particular useEffect runs, you can specify a second argument, a dependency array, which is an array of values to it. The useEffect will run only when atleast one of the values in this array have changed since the last time. To demonstrate, we will take the help of our previous 'count' example. Let's see how this works:

useEffect(() => {
  console.log('current count is', count)
}, [count])

If you pass an empty array, useEffect will run only once, on mount:

useEffect(() => {
  console.log('Component mounted');
}, [])

You can view the full code on this codesandbox link.

To summarize, hooks are a powerful way to write your React code. To get started, you can start using hooks in the new components you make. Happy Coding!

Nevertheless, I Coded, and had Fun!

Sushmita Pandey — Mon, 09 Mar 2020 18:15:11 +0000

I didn't know I was going to do Frontend. I was all set to do hardware programming using C. But then one day, I stumble upon this awesome site which hosted awesome coding bootcamps. And then boom, I am going. No one can stop me.

A lot of people told me a lot of things. Negative things about the industry. About being a woman in Tech. Someone told me I couldn't code. Someone said this industry isn't for women. Nevertheless, I kept on. And I'm glad I did.

A lot of people will throw a lot of negativity at you the moment you set yourself up for a goal. I say don't listen to them. Just keep walking the path until you're there. These are the same people who didn't achieve anything themselves, and don't want you to either.

Currently I'm working on (and learning) a lot of things such as React and Javascript. Frontend Development is so much fun, because I love creating beautiful and engaging interfaces. I love it when I see people using the things I have developed. This definitely is for me.

All the ladies out there, don't listen to the naysayers, just do it.