React

Modern React From The Beginning EP5: Arrow Functions And Object Destructuring


Subscribe On YouTube

Episodes

In the last episode we’ve split up the code of our React sample application in two components: App component and CoursesList component. This has helped us to bring more structure into our project. To build a modern React application in this part we’re going to introduce more advanced concepts of JavaScript in our React application: we’ll make use of arrow functions and object destructuring.

What Are Arrow Functions

JavaScript arrow functions makes use of the fat arrow (=>) syntax to define functions. From the traditional way of declaring functions in JavaScript:

function () { ... }

You can move on and use the syntax you can see in the following:

const () => { ... }

By introducing arrow functions you’re able to come to a cleaner concise syntax and more intuitive scoping and this binding.

The arrow function is basically an anonymous function which accepts a fixed number or arguments, and operates in the context of the enclosing scope.

Let’s make use of arrow functions in our existing React application step by step …

Change Implementation To Make Use Of Arrow Functions

To change our existing implementation to make use of arrow functions we’ll start in App.js and change the code of the App function to the following:

const App = () => {
  return (
    <div>
      <h1>List of Courses</h1>
      <hr />
      <CoursesList courses={courses} />
    </div>
  );
}

As you can see the function keyword is not used anymore. Instead the App function is defined by using the arrow function syntax.

The same change can be made in CoursesList.js:

const CoursesList = (props) =>  {
    return props.courses.map(function(course) {
      return (
        <div key={course.id}>
          <span>
            <a href={course.url}><h4>{course.title}</h4></a>
          </span>
          <span>by <strong>{course.author}</strong></span>
          <span>| Video Hours: {course.hours_video}</span>
          <span>| Number of Lectures: {course.number_of_lectures}</span>
          <span>| Rating: {course.rating}</span>
          <br/><br/>
        </div>
      );
    }); 
  }

There is one main difference: CourseList components needs to access it’s properties therefore the method definition has one parameter: props. This parameter is defined in the arrow function syntax as well.

Arrow functions can not only be used to define a component. Arrow functions can also be used inside of components. Let’s replace the function which is passed into the call of props.courses.map with an arrow function:

const CoursesList = (props) =>  {
    return props.courses.map(course => {
      return (
        <div key={course.id}>
          <span>
            <a href={course.url}><h4>{course.title}</h4></a>
          </span>
          <span>by <strong>{course.author}</strong></span>
          <span>| Video Hours: {course.hours_video}</span>
          <span>| Number of Lectures: {course.number_of_lectures}</span>
          <span>| Rating: {course.rating}</span>
          <br/><br/>
        </div>
      );
    }); 
  }

What Is Object Destructuring

Object destructuring is another core ES6 feature will helps you to further streamline your React codebase. By using object destructuring we’re able to extract properties from an object (multiple at a time) and assign it directly to new variables.

Change Implementation To Make Use Of Object Destructuring

Let’s use object destructuring within the CoursesList implementation:

const CoursesList = ({courses}) =>  {
    return courses.map(course => {
      return (
        <div key={course.id}>
          <span>
            <a href={course.url}><h4>{course.title}</h4></a>
          </span>
          <span>by <strong>{course.author}</strong></span>
          <span>| Video Hours: {course.hours_video}</span>
          <span>| Number of Lectures: {course.number_of_lectures}</span>
          <span>| Rating: {course.rating}</span>
          <br/><br/>
        </div>
      );
    }); 
  }

Here you can see that the function declaration changed. Instead of just passing in the props argument we’re using object destructuring to pull out the courses property value and at the same time makes it available as a new courses variable inside the function. This is achieved by using curly braces and listing the name of the properties (in our case it’s just the property courses) we’d like to extract.

When now accessing the courses array inside the function we’re able to not access it via props.courses but instead just use courses.

What’s Next

In the next episode we’ll learn more about React event handling. Therefore we’re going to extend our sample application to include some user input element. By adding corresponding event handler functions we’ll then be able to respond to user input in our app.

Advertisement: Top 3 React Online Courses

If you want to dive deeper and become a React pro also consider taking one of the following great online courses.

React – The Complete Guide (incl Hooks, React Router, Redux)*
Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Go To Course*

Modern React with Redux*
Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

Go To Course*

The Complete React Developer Course (w/ Hooks and Redux)*
Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.