Function parameter accepting an anonymous value object

While working with prisma nexus and examining the prismaObjectType, I came across something unusual. A simple example of this is as follows:

In a basic function, demo(p), the parameter p should be an object.

function demo(p) {
    console.log(p);
    console.log(p.normal);
    console.log(p.normal());
}

I am passing a key normal with a function as its value.

demo({a:"a", normal: function(){console.log("normal")}, b:"b"});

The output in the console is:

{a: "a", normal: ƒ, b: "b"}
ƒ (){console.log("normal")}
"normal"

What's intriguing is that I'm passing a method without using the keyword function, also without specifying a key for it.

demo({a:"a", weird(){ console.log("it is weird") }, b:"b"});    

// console

{a: "a", weird: ƒ, b: "b"}
ƒ weird(){console.log("it is weird")}
it is weird             

{a:"a", the unusual part >>>>> weird(){console.log("it is weird")} <<<, b:"b"}

What do you call this type of practice? Any thoughts or comments?

Answer №1

JavaScript behavior can be quite predictable at times. This shorthand notation was actually introduced in ecma 2015 (mdn reference)

In simpler terms:

var o = {
  property(parameters) {}
};

essentially means the same as

var o = {
  property: function(parameters) {}
};

Answer №2

This is a concise way of defining a function property on an object, which was introduced in ES2015. Essentially, the following two examples achieve the same result:

// traditional syntax
const foo = {
    bar: function bar(msg) { console.log(msg); }
};

// shorthand syntax
const foo = {
    bar(msg) { console.log(msg); }
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get the latest html content and save it as a .html file using javascript or jQuery

Looking for a way to save an HTML page as a .html file? Having some trouble with jQuery modifications not being included in the exported file? Check out the code snippet below and let me know if you can spot what's going wrong! I'm still getting ...

There seems to be an issue with Jquery Ajax retrieving information from an ASP.NET WEB API

Recently, I have started delving into APS.NET MVC WEB API programming. My current dilemma involves creating an ASP.NET WEB API project with the following code: public class ValuesController : ApiController { // GET api/values public IEnumerable& ...

Uncovering secret divs with the power of jQuery timing upon reload

Currently, I am in the process of developing a custom Wordpress theme for my blog which includes an overlay-container. When a button is clicked, this container slides in from the top and pushes down the entire page. To achieve this functionality, I am uti ...

Exploring the functionalities of AngularJS' ng-options when working with select elements

In my search through other posts, I came across this issue but couldn't find a solution. Here is the array in question: $scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York' ...

I must create a dropdown and lift up feature similar to the one provided in the example

I am looking to implement a drop-down navigation bar on the top right and a pop-up button/links on the top left. The drop-down menu should appear when the screen size reaches a certain pixel width. If you can't see the drop-down navigation (NAV), adju ...

Electron does not prioritize the @css prefers-color-scheme option

I recently completed an Electron project and decided to incorporate dark mode support into it. However, for some reason, the dark mode feature is not functioning properly. Below you will find the dark.css styling that I have included in every page: @medi ...

Updating a particular column in a table with Jquery

In this table : $('#listview-table tr').each(function() { var status_id = $(this).find(".listViewEntryValue").$('[data-name~="cf_1525"]').text(); alert(status_id); }); <table id="listview-table" class="table listv ...

Discover the position of a dynamically added element

Is there a way to identify the specific dynamically added checkbox that was clicked, whether by index or name? I came across a similar question with a solution in this JSFiddle: JSFiddle Instead of just displaying "clicked", I would like it to show someth ...

Flipping the camera rotation matrix in three.js

I am struggling with a scenario involving objects and a camera being controlled by a trackball. Whenever I add a new object to the main object, I want it to maintain its original orientation regardless of how the camera has moved around. For instance, with ...

Start the setInterval function again after clearing it with the clearInterval button, but wait for

Currently, I am working on a content slider that automatically cycles through slides using the "next" function and setInterval. However, I want it to stop when the user clicks on the prev/next buttons by using clearInterval. Is there a way to resume setInt ...

Organizing outcome searches through ajax

I have a result table displayed on the left side https://i.stack.imgur.com/otaV4.png https://i.stack.imgur.com/pp9m0.png My goal is to transform it into the format shown on the right side of the table In a previous inquiry found here, @Clayton provided ...

Protractor: Configuration file failed to load

Upon the installation of protractor and initiation of selenium webdriver, I encountered an issue while attempting to run the config.js file located in the example folder of protractor. The error message "ERROR loading configuration file config.js" is displ ...

Troubleshooting Issues with Loading Styles and JavaScript for Wordpress Plugin in Admin Area

Can someone please help me with troubleshooting my stylesheet and scripts that are not working properly? I have included styles in the stylesheet and an alert in my script file, but for some reason they are not functioning as expected. (I have confirmed ...

Am I on track with this observation?

I am currently using the following service: getPosition(): Observable<Object> { return Observable.create(observer => { navigator.geolocation.watchPosition((pos: Position) => { observer.next(pos); observer.c ...

I am attempting to retrieve the JSON object value from an error response while making a POST request in my Next.js application

Users can input an email into an input field, which is then sent as a post request to an API using the following code: try { const res = await fetch("/api/email-registration", { method: "POST", headers: { ...

Loading Disqus comments dynamically upon clicking a button within a Next.js application

After noticing a significant decrease in page performance scores due to Disqus comments embedded on Vercel Analytics, I am considering implementing a "Load comments" button instead of loading the actual comments onClick. I have been using the disqus-react ...

Guide on how to copy data from an excel spreadsheet to a table and save it in the state using React

I have a React table where I need to paste values from an Excel sheet and store them in a state. I've attempted using both onPaste and onInput events, but only the last value is being stored in the state. function App() { // State setup } // Event ...

experimenting with a TypeScript annotation

I have created a simple decorator that can trigger either stopPropagation() or preventDefault() based on certain conditions. I have thoroughly tested this decorator in my application and am confident that it works correctly. However, I encountered an issue ...

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

Checking form data validity before submission in JavaScript and PHP

My goal is to send data to a PHP script using the POST method. I need to ensure that the form input is valid before initiating an AJAX request. $('#submitccform').click(function() { function validate() { var valid = true; var messa ...