Modern JavaScript also gives us better access to destructuring. Destructuring is a way of matching the patterns in data structures (for example, in arrays or objects) and being able to turn those into individual variables in function arguments or in variable declarations. Let's mess around with a few different examples to get a good feel for how destructuring works and how we can better take advantage of it. Open up src/App.js, where we'll use destructuring a few times. Before we make our change, the App function should look like the following code:

const App = () => (
  <div className="App">
    <h2>Todoifier</h2>
    <br />
    <TodoList />
  </div>
);

Nothing exciting yet, so let's make this code exciting! We'll start off by allowing you to rename your app, since maybe you don't feel that Todoifier is a great name for an app! We'll start off by adding a simple data structure above our code:

const details = {
  header: "Todoifier",
  headerColor: "red"
};

Next, we'll destructure this data structure into a single variable name. We'll add the following line right after we declare our details data structure:

const { header } = details;

What we're doing here is rewriting the structure of the data structure we created in the details variable and then saying that we want it to take the value in the header key of the details variable and ignore everything else, and then throw it into the header variable. The end result is that we should expect to see Todoifier in the header variable. Just to make sure, let's throw a console.log statement and verify the results:

console.log("appName is " + appName);

We should see it show up in our JavaScript console in the browser if all went well:

There we are! Now that we know this works, let's hop back over to the App component and add in a reference to the header variable:

const App = () => (
  <div className="App">
    <h2>{appName}</h2>
    <br />
    <TodoList />
  </div>
);

When our page refreshes, we should see whatever value you threw in the header value in the details variable! Let's make it a little cleaner and a little bit closer to what you'd normally expect to see in production code, because right now the code we've written is a bit redundant. Delete the reference to appName and the console.log statement and we'll write a new function to use in our component:

const headerDisplay = ({ header: title, headerColor: color }) => (
  <h2 style={{ color: color }}>{title}</h2>
);

We're actually using a few separate tricks here! We're using the new function declaration syntax and simple function return syntax, and we're using destructuring to make our code super simple and clean! We destructure a passed-in argument to pull the title and headerColor out and store those in the title and color variables, respectively!

We then pass those into the h2 tag to set the CSS color style and the displayed title of the application! The final step is that we need to hook up this component to use the new header function we just defined:

const App = () => (
  <div className="App">
    {headerDisplay(details)}
    <br />
    <TodoList />
  </div>
);

And there we are! With this code in place, we should see a red header with the name Todoifier! Let's take a look:

We can actually destructure arrays as well! For example, let's say we have a few unique options we want to start off our list with. We can capture those as named variables through array-destructuring, and we can also take advantage of some other syntax tricks we'll learn later, such as array spreads! Let's take a look at src/TodoList.js and change our constructor to use array-destructuring:

const [item1, item2, ...rest] = [
  "Write some code",
  "Change the world",
  "Take a nap",
  "Eat a cookie"
];
this.state = {
  items: [item1, item2, rest.join(" and ")]
};

Array-destructuring is just based on position; the only new trick here is that after matching item1 and item2, we're just going to throw the remainder of the array onto a variable called rest, which we'll join with some spaces and the word "and". Let's see the result: