Keyword arguments in JavaScript

twitter logo github logo ・1 min read

I am making a school project for NHD, and I need to add some pizzazz to my website, so I wanted to make some CSS using an easy function where I could do:


and it doesn't work of the simple fact that Javascript, unlick python, has no way to unpack an Object unless you know what the property names are,
so is there any way to unpack keyword arguments, and work-around?

twitter logo DISCUSS (10)
markdown guide

Javascript doesn’t have kwargs support like python. But the popular work around is,

function foo ({arg1=10, arg2='bar'}) {
  // do your stuff here


But what exactly does this do, doesn't this only supply properties for the object?


ES6 has this support only. So, get supported all browsers you may need to use babel.

Ok, but what does this code do?
Can you give some examples on how to use these defined properties in the function itself?

This is argument destructuring. It's sort of a pattern match on the keys of an object.

It can be done in the body of a function too, for example:

const obj = { width: 400, height: 300 };

const { width, height } = obj;

console.log(width + " x " height);
// => 400 x 300

You can then add to that by providing fallbacks or defaults for keys that may not exist in the object you are destructuring. The variables will only take the default if there isn't a key in the object.

const obj = { width: 400, height: 300 };

const { width = 100, height = 100, depth = 100 } = obj;

console.log(width + " x " height + " x " + depth);
// => 400 x 300 x 100

You can then move this to the function definition:

function printDimensions({ width = 100, height = 100, depth = 100 }) {
  console.log(width + " x " height + " x " + depth);

printDimensions({ width: 400, height: 300 });
// => 400 x 300 x 100
// => 100 x 100 x 100
printDimensions({ width: 10, height: 20, depth: 30 });
// => 10 x 20 x 30

Hope that helps. Check out this post for more detail: wesbos.com/destructuring-default-v...


You could try to pass an object into the function

let style_obj = {
        height: 50,
      color: "#ffff"

in your case it would be like


//in your generateCSS function
 for (var key in style_obj) {
      console.log(`${classes_obj[key]}: ${key}`)

Unpack an object? :S
I don't really understand what do you need, but you can Object.keys() to iterare the keys of an object.


If you know Python, then you know you can do:

def func(**kwargs):
func(hello="Hi!") # {"Hello": "Hi!"} bc it an Object

Yes, i knew. The last answer of Phil it's a good approximation of what do you want to do. Hope it helps :)

Classic DEV Post from Apr 4 '19

Design Patterns in Java

I thought it would be a fun to write a series of blog posts looking at differen...

PDS OWNER CALIN (Calin Baenen) profile image
I am a 13 (as of Oct 30 of 2019) yr/o developer (I have been developing mini-projects for 4, years now, since I was 9), who makes projects in languages like: Java, HTML, Python 3, JS, CSS, and C#.

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❀️