JavaScript ES6+ : Spread & Rest Operator

Follow me on twitter @jaymanpandya

Spread takes all the items in the specified iterables (arrays, objects etc) and copies it.

const indoorActivities = ['Table Tennis', 'Carrom', 'Chess',  'Gym'];
const outdoorActivities = ['Swimming Pool', 'Badminton Court', 'Tennis Court'];

const clubFacilites = [...indoorActivities, 'Squash Court', ...outdoorActivities];

console.log(`indoorActivities : ${indoorActivities}`);
console.log(`outdoorActivities : ${outdoorActivities}`);

console.log(`clubFacilites : ${clubFacilites}`);

When you do not know the number of arguments that will be passed in a function you can use Rest operator.

function calculateFines(baseFee, countyFee, tax = 0.18, ...fines) {
    console.log(baseFee, countyFee, tax = 0.18, fines);
    return fines.map(fine => baseFee + countyFee + tax + fine);
}

const totalFines = calculateFines(400, 0, .05, 24, 100, 76);

console.log(totalFines);

Peace ✌️

I am an UI designer with a flair for front-end development that makes any brand shine at what they do best. I am right now building amazing products for our clients both Indian and International at Interactive Digital Labs. I am part of the Design and Marketing Teams for Make WordPress and has spoken at local camps on Gutenberg as well as the importance of user experience. I am not intimidated by markup, languages, or tools: HTML to CSS, wireframing to prototyping, JavaScript to agile development, and design programs including Sketch, Adobe XD, Figma, Photoshop, Illustrator, InDesign etc. I love languages, and not just programming either. I speak English, Hindi, Marathi, and Gujarati. When I am not taking courses to improve my skills, I am trying new food, dabbling in filmmaking and photography, and running and cycling. Say hi to me on Twitter here @jaymanpandya.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.