Destructure Named CSS-in-JS Arguments to use in JavaScript Mixin Functions
Often times it's hard to remember which order variables have to be used. This is where the concept of named arguments is helpful. The exact same name can then be used inside of a mixin or function.
To name argument in Sass, you need to put a name before the argument, a similar approach can be used with JavaScript functions. In this lesson, you'll see how you can pass in an object and use that objects keys as the named arguments for the function.
Instructor: [00:00] we have two buttons. One is written using Sass, and the other one is using CSS in JS. Let's have a look at this button size mixin. We have four arguments, padding-y, padding-x, font size, and border radius. Often, it's hard to remember in which order they have to be used.
[00:21] This is where the concept of named arguments is helpful. To name argument in Sass, you need to put a name before the argument. Exact same name can then be used inside of the mixin or function. Now, let's have a look at this mixin in JavaScript. JavaScript as a language has no named arguments concept.
[00:42] Instead, it has objects. Objects can be used exactly the same way as named arguments in Sass. Now we are going to convert these arguments to a named arguments object. Now you can see a single object instead of arguments list. Object declaration starts with an opening curly brace and ends with a closing curly brace.
[01:09] The body of an object consists of keys and values. In this case, padding-y is a key, which is also a name of the argument we want to use later. Padding ylg is a value. Now it looks like we broke our button. The reason is we need to adjust our mixin for named arguments. Here is our mixin in JavaScript, and those are our arguments.
[01:35] Now in order to convert our arguments to an object argument, we need to add curly braces. In JavaScript, this feature is called, "destructuring." Actually, we could do the exact same thing without that destructuring feature. We would name the object argument and then use this name in order to access its properties. I think the destructured version of it is more readable...
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!