What does ({"key": "value"} = {}) syntax mean inside a JavaScript function

user_4534703 0
Viewed 205

I am doing a JavaScript course (specifically the MongoDB University M220JS course) and in one of the tasks I've come across this syntax for a function declaration inside a class:

static async getMovies({
   filters = null,
   page = 0,
   moviesPerPage = 20,
} = {}) {
   // some code, e.g.
   console.log(moviesPerPage)
}

Where they've defined some JSON object and then written '= {}' inside the parameter list. The variables are then used inside the function (as I've shown) as if they've been declared like default parameters like so:

static async getMovies(filters = null, page = 0, moviesPerPage = 20) {
   // some code, e.g.
   console.log(moviesPerPage)
}

What does the syntax in the first example mean? What is the significance of the = {} part?

node.js function javascript
3 Answers

What does the syntax in the first example mean?

the used syntax is a combination of default parameters syntax and destructuring assignment syntax

What is the significance of the '= {}' part?

using the default parameters syntax: the '= {}' part set {} (an empty object) as the default value for the single parameter taken by getMovies

let's break it down:

here, we set 'flying' as default value for the power parameter

function giveSuperPower(power='flying'){
    console.log(`you have got: "${power}"`);
}

giveSuperPower('infinite energy');
// you have got: "infinite energy"
giveSuperPower();
// you have got: "flying"

what if the parameter was an object?

function giveSuperPower(power){
    console.log(`you have got: "${power.name||'flying'}"`);
    console.log(`it last for ${power.duration||'∞'}min`);
}
giveSuperPower({name: 'strength', duration: 5 });
// you have got: "strength"
// it last for 5min

looks good.. right? lets try

giveSuperPower();
// Uncaught ReferenceError: power is not defined

okay that's a problem.

lets set a default parameter value (an empty object)

function giveSuperPower(power={}){
    console.log(`you have got: "${power.name||'flying'}"`);
    console.log(`it last for ${power.duration||'∞'}min`);
}

giveSuperPower();
//you have got: "flying" 
//it last for ∞min

let's destructure the power power parameter

function giveSuperPower({name, length} = {}){
    console.log(`you have got: "${name||'flying'}"`);
    console.log(`it last for ${duration||'∞'}min`);
}

let's set default parameter values for name and length

function giveSuperPower({name = 'flying', length = '∞'} = {}){
    console.log(`you have got: "${name}"`);
    console.log(`it last for ${duration}min`);
}

that's it :)

user_149194860

They do not define a JSON object.

The 1st function is expecting a single object as the parameter, and it uses object destructuring to get the actual named properties.

See Destructuring_assignment: Setting a function parameters default value

Now if you call the object without a parameter, the 1st argument will be undefined and that is what will be destructured. But you cannot destructure undefined so you set a default value of {}.

user_1281650

What this function declaration will tell you is that the function getMovies is expecting to receive an object with that structure as an argument. So, for example:

var movieProperties = {
   filters : "a",
   page : 2
};

getMovies(movieProperties);

During the function execution, it will get the movieProperties object and spread its values to the properties on the function (filters, page, moviesPerPage). During this process of distribution, it will validate each property. For example, if you don't pass a moviesPerPage property, it will create one and set the value to 20.

function getMovies({ filters = null, page = 0, moviesPerPage = 20 } = {}) {
    debugger;
   // some code, e.g.
   console.log(filters);
   console.log(page);
   console.log(moviesPerPage);
}

/* Will Output */
// "a"
// 2
// 20

Additionally, if you pass an empty object, it will create each of the properties using the default values. If you have the "= {}" defined, you you also be albe to pass nothing to the function and it will create the whole object and then the properties.

getMovies({});
// or
getMovies();

/* Will Output */
// null
// 2
// 20

I hope to make any sense. Happy new year :)

user_78519730
Related