1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. Introduction to JavaScript Rest Operator

Introduction to JavaScript Rest Operator

Contents

keyboard_tab
JavaScript Rest Operator
Introduction to JavaScript Rest Operator
Overview
Difficulty
Intermediate
Duration
4m
Students
13
Ratings
5/5
starstarstarstarstar
Description

This practical course explores the JavaScript Rest Operator. The rest operator is a syntax with the purpose of capturing individual values and placing them into a data collection.

Learning Objectives

  • Learn how to use the rest operator to create a function parameter.
  • Learn how to use the rest operator in destructuring arrays and objects.

Intended Audience

This course is intended for anyone who wants to learn about the JavaScript Rest Operator.

Prerequisites

Anyone with an interest in using the rest operator in JavaScript or who wants to improve their knowledge of JavaScript in general.

Transcript

Introduction to JavaScript rest operator. To demonstrate the rest operator, I need to begin with a function. Function sumAll. And for the parameter, three dots, followed by the abbreviation args, short for arguments. Now, inside of the function, I'm gonna console log the arguments. Down below, I will call the function passing in the arguments of one, two, three, four, and five. I will execute the function and in the console, there is an array, and each one of the array's elements is one of the arguments that were passed through. The spread operator is designed to separate elements from an iterable to spread them apart. The rest operator allows you to take any remaining arguments, the rest of them, and place them into a data collection, in this case into an array.

Taking this a little further, I'm gonna add two parameters before the arguments parameter, X and a Y. I will execute the function again. And in the console, we can see that the arguments array only has the values of three, four, and five, capturing the remaining arguments. The rest of them. Now there is one specific rule. The rest parameter has to be the final parameter. I'm gonna move the Y parameter to be after the arguments parameter. When I execute this function, there is an error in the console stating that the rest parameter must be the last formal parameter. Now the rest operator isn't solely designed for function parameters. It could also be part of the destructuring of an object or an array.

On the screen, I have a user object in the numbers array. I will begin by destructuring the user object. Const, curly brackets, username, which is the direct property that I am destructuring. Now the rest syntax. Three dots, and the object declaration, userInfo. And I will set this equal to the user object. Now I will console log userInfo. I will execute this. And in the console, there's a new object with the email, first name, and last name properties from the user object. The rest operator is flexible when it comes to destructuring. When working with objects, whatever remaining properties that are not being destructured out of the object will be captured into a new object with the given name. And the same principles apply when destructuring an array. I'm going to comment out the console log of userInfo.

Now I will type const, square brackets. For the first element it will be assigned to a firstNumber declaration. And then for the remaining elements, I'm gonna use the rest syntax, and assign it to an array name remainingNumbers. And I will set this equal to the numbers array. Now down below, I'm going to console log the remainingNumbers array, and execute it. And in the console, there's an array with the values of two, three, four, and five. And that's it. Thanks for watching at Cloud Academy.

About the Author
Avatar
Farish Kashefinejad
Full-Stack Development Content Creator
Students
863
Labs
12
Courses
21
Learning Paths
2

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics