/    Sign up×
Community /Pin to ProfileBookmark

What is this javascript code?

I was reading a JavaScript tutorial and saw the code below. I am confused by the parameters ({top = 0, right = 0, className, html})

Is that some way to set the values for an object?

Thanks for any clarification.

[code]
function showNotification({top = 0, right = 0, className, html}) {

let notification = document.createElement(‘div’);
notification.className = “notification”;
if (className) {
notification.classList.add(className);
}

notification.style.top = top + ‘px’;
notification.style.right = right + ‘px’;

notification.innerHTML = html;
document.body.append(notification);

setTimeout(() => notification.remove(), 1500);
}

// test it
let i = 1;
setInterval(() => {
showNotification({
top: 10,
right: 10,
html: ‘Hello ‘ + i++,
className: “welcome”
});
}, 2000);
[/code]

to post a comment
Full-stack DeveloperJavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@NogDogJun 20.2020 — Added ... tags for better readability.
Copy linkTweet thisAlerts:
@daveyerwinJun 20.2020 — put the code you posted between script tags and run it in a browser

you might need body tags also
``<i>
</i>function showNotification({top = 0, right = 0, className, html}) {// https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6

let notification = document.createElement('div');//https://www.w3schools.com/jsref/met_document_createelement.asp
notification.className = "notification";//https://www.w3schools.com/jsref/prop_html_classname.asp
if (className) {
notification.classList.add(className);//https://www.w3schools.com/howto/howto_js_add_class.asp
}

notification.style.top = top + 'px';
notification.style.right = right + 'px';

notification.innerHTML = html;
document.body.append(notification);//https://javascript.info/modifying-document

setTimeout(() =&gt; notification.remove(), 1500);//https://www.w3schools.com/JSREF/met_element_remove.asp
}<i>
</i>
``
Copy linkTweet thisAlerts:
@kjpellauthorJun 20.2020 — Thanks for the reply.

I think understand what the function does. What I am not understanding is what this structure is...

{top = 0, right = 0, className, html}

  • 1. - I don't think it's an object. An object would use colons like {top: 0, right: 0, className: , html:} not equals sign like above.


  • 2. - I don't think it's an array. An array would use square brackets [top = 0, right = 0, className, html] not curly brackets {top = 0, right = 0, className, html}


  • 3. - I think that a parameter signature with parenthesis only, without the curly brackets - something like (top = 0, right = 0, className, html) would make sense to me - but I am confused by the curly brackets being included in the parenthesis. ({top = 0, right = 0, className, html}).


  • There is something about the language that I am missing.
    Copy linkTweet thisAlerts:
    @daveyerwinJun 21.2020 — this is a very good explanation ...

    https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6
    Copy linkTweet thisAlerts:
    @kjpellauthorJun 21.2020 — Thank! You! So! Much!

    That was driving me nuts...
    Copy linkTweet thisAlerts:
    @VITSUSAJun 22.2020 — I agree with DaveyErwin, he have shared good hyperlink to understand JavaScript code.
    ×

    Success!

    Help @kjpell spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.5,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...