Destructuring with JS 📡

You can use destructuring with vanilla javascript.

It is heavily used with React and we will be using it with React so the examples are based on props, components, useState etc..

Basic Object Destructuring syntax

When destructuring an object you use curly brackets {} on the lefthand side as it is an object.

const exampleObject = { 
  firstName: "Charlie", 
  lastName: "Richardson" 
  };

// LEFTHAND SIDE -> VARIABLES / KEYS YOU ARE UNPACKING / KEYS YOU WANT TO USE -> INSIDE CURLY BRACES { }
// RIGHTHAND SIDE -> THE OBJECT / SOURCE OF THE VALUES / KEYS YOU WANT
const { firstName, lastName} = exampleObject;

// USE THEM JUST LIKE VARIABLES
console.log(firstName); // "Charlie"
console.log(lastName); // "Richardson"

// IMPORTANT -> THE KEYS ON THE LEFT HANDSIDE NEED TO MATCH THE KEYS ON THE OBJECT THAT IS ON THE RIGHT HANDSIDE

Basic Props syntax, No destructuring

When you use a component you need to give it props.

When you use the component, after its names you give it the propName and set it equal to a value.

<MyComponent propName={"propValue"} firstName={"Charlie"} lastName={"Richardson"}/>

In the component you will want to now use these props.

Without destructuring props is an object with keys and values you are able to access with dot notation.

// THE COMPONENT ACCEPTS PROPS AS A PARAMETER
const MyComponent = (props) => {
  // PROPS IS AN OBJECT WITH KEY VALUE PAIRS YOU GIVE IT
  console.log(props) // { propName:"propValue", firstName:"Charlie", lastName:"Richardson" }
  console.log(props.firstName) // "Charlie"
  console.log(props.lastName) // "Richardson"
  
  // TO USE THE VALUES USE DOT NOTATION
  return <p>Hello my name is {props.firstName} {props.lastName}</p>
}

Destructuring props on a seperate line inside the component

You can destructure props on one line.

The left handside are the keys you need the right hand side is the props object.

const MyComponent = (props) => {
  // DESTRUCTURING FIRSTNAME AND LASTNAME FROM PROPS OBJECT
  const {firstName, lastName} = props;
  
  return <p>Hello my name is {firstName} {lastName}</p>
}

Destructuring props in the parameters of the functional component

If you are passing an object in the parameters of a function you are able to destructure it in the parameters.

Props is an object so you are able to destructure in the parameters.

// DESTRUCTURING FIRSTNAME AND LASTNAME FROM PROPS OBJECT
const MyComponent = ({firstName, lastName}) => {

  return <p>Hello my name is {firstName} {lastName}</p>
}

Array destructuring

You are able to destructure arrays as well. It has a similar syntax but it will relate to the index of the item in the array.

When destructuring you use square brackets [] as it is an array.

We use this when we use the useState() hook in React.

const exampleArray = [0,1,2];

// LEFTHAND SIDE -> VARIABLES / INDEXES YOU ARE UNPACKING / YOU WANT -> INSIDE SQUARE BRACKETS [] AS IT IS AN ARRAY
// RIGHTHAND SIDE -> THE ARRAY / SOURCE OF THE VALUES
const [indexZero, indexOne, indexTwo] = exampleObject

// USING THEM 
console.log(indexZero); // 0
console.log(indexOne); // 1
console.log(indexTwo); // 2

// IMPORTANT -> THE VARIABLES ON THE LEFT HANDSIDE WILL MATCH THE INDEXES OF THE ITEMS IN THE ARRAY

useState example

The useState() hook in React returns an Array, so we are able to use Array destructuring.

at index 0 you have the state
at index 1 you have the function to update that state

const MyComponent = () => {
  // THE FIRST ITEM IN THE ARRAY IS THE STATE
  // THE SECOND ITEM IN THE ARRAY IS THE FUNCTION TO UPDATE IT
  const [state, setStateFunction] = useState(true);
  
  const handleClick = () => {
    setStateFunction(false)
  }
  
  return <button onClick={handleClick} >{state ? "Click me" : "Don't click me"}</button>
}

Charlie-robin/object-destructuring.md