Advanced JavaScript function invocation

I have been learning JavaScript and I am struggling to understand the coding style I see in the code I read. I am familiar with the "old" way of writing JavaScript but I haven't come across any resources that explain this new way of creating and calling JavaScript functions. Here is an example of the "new way":

// object
var dog = {
    color: 'brown',
    size: 'big'
};

//function to write dog size
(function(dog) {
    return dog.size;
})(dog);

From the JavaScript documentation, I am familiar with the "old way" of doing things:

function prinSize(dog) {
    return dog.size
}
console.log(prinSize(dog));

Can you please provide me with a link to the JavaScript documentation that explains why:

  • in JavaScript code, there are brackets at the start and end of a function

  • it is possible to write brackets with .(dog) after declaring a function, which allows you to actually call the function with the argument dog.

Answer №1

Let's consider a different approach to representing the number 1:

(function() { return 1; })()

Here, we are defining a function that simply returns 1 and then immediately executing it using (). This results in the overall value being evaluated as 1.

While this method may seem unnecessary, as we could just write 1 directly, it provides an interesting perspective on how functions can be utilized.

For example, to calculate 1+2, we could express it as follows:

(function() { return 1; })() + function() { return 1; }()

(The second function does not require parentheses around it since it functions as an expression in this context.)

In a similar vein, the function

(function(dog) { return dog.size; })(dog)

is essentially identical to just writing dog.size directly. This construct may seem confusing at first glance, as it serves no practical purpose in this scenario. To actually utilize the result, you would need to modify it like so:

var size = function(dog) { return dog.size; }();

However, it would be more straightforward to simply write:

var size = dog.size;

Although there are valid uses for immediately-invoked function expressions (IIFEs), such as encapsulating information, this specific example does not showcase their advantages.

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

What is the best way to pass an input value into a function when a form is submitted in Angular 6?

When I press enter, my code works perfectly and the performSearch function runs successfully. However, when I attempt to run the function by clicking the submit button, I encounter the following error: Error: cannot read property of undefined This is m ...

Determine the height of an element within an ng-repeat directive once the data has been fetched from an

After sending an ajax request to fetch a list of products, I use angular's ng-repeat to render them. I am attempting to retrieve the height of a div element that contains one product in the list. However, the console always displays "0" as the result ...

Eliminate FormData usage from the Next.JS backend application

Looking to replicate the steps outlined in this guide: https://medium.com/@_hanglucas/file-upload-in-next-js-app-router-13-4-6d24f2e3d00f for file uploads using Next.js, encountering an error with the line const formData = await req.formData();. The error ...

Fulfill the promise once all map requests have been completed

Currently, my focus is on developing a bookmark page that retrieves bookmark results with the respective restaurant IDs. Once the response is mapped, I populate an array with objects. My objective is to ultimately resolve the entire array in order to mani ...

Guide on setting default attributes for all properties of an object at once

Currently, I'm in the process of developing an AngularJS service provider (function) that achieves the following objectives: Gathers data from multiple tables within an SQLite database Delivers the resulting object to various controller functions S ...

Utilizing the `filterBy` function with a custom select list that changes dynamically

I'm currently in the process of constructing a form with an extensive selection of drop-down items utilizing vue.js. My approach involves implementing the dynamic select list as detailed in this documentation: However, I am interested in providing us ...

How can I generate a list of JavaScript files to be included in a template for both production and development environments using Grunt?

I need a way to organize a list of JavaScript files in one central location, either within gruntfile.js or an external JSON file, and then dynamically implement it into a template for both development and production environments. List of JavaScript files: ...

Rendering a Component Inside Another Component

I am facing a situation where I have a component named TicketView being used within another component called Table. The initialization of TicketView in the table looks like this: <TableRow key={index}> ... <TableRowColumn style={{width: & ...

Quick fix for obtaining only one response

I'm facing a dilemma where I need to redirect the user to the dashboard page after they log in, but also send their JSON details to my client-side JavaScript. While I know that there can only be one res.send/end/json in a response and dynamic data can ...

Utilize the same variable within a React functional component across multiple components

Within a React functional component, I am utilizing the following constant: const superHeroPowers = [ { name: 'Superman', status: superManPowerList }, { name: 'Batman', status: batmanPowerList }, { name: 'Wonder Woman&a ...

Menu/navigation bar designed with floating lines and an array of color options

I'm currently working on implementing this specific menu into my Wordpress site. My main concern is figuring out how to customize the hover effect for each navigation item. Currently, the float line changes to red (background-color:#800; height:2px;) ...

Do not activate hover on the children of parents using triggers

Check out my demonstration here: http://jsfiddle.net/x01heLm2/ I am trying to achieve two goals with this code. Goal number one is to have the mini thumbnail still appear when hovering over the .box element. However, I do not want the hover event to be tr ...

Enhanced functionality in MUI TablePagination now allows users to easily select their desired page

I've implemented MUI TablePagination to enable pagination in my table. The code is performing well, offering most of the features I need: Users can choose between displaying 5, 10, or 20 entries per page using a dropdown. The number of pages displaye ...

There is a lag in the loading of css stylesheets

We created a single-page company website that utilizes three different stylesheets connected to the index.html. By clicking a button, users can switch between these stylesheets resulting in changes to colors, images, and text colors. However, Issue 1: The ...

Getting a page element by its id with QWebEngineView is a simple task that can be

Is there a way to access the page ElementById in order to input a value? import sys from PyQt5 import QtWebEngineWidgets from PyQt5.QtCore import * from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import * from PyQt5.QtWidgets import QAction from PyQt ...

The array.slice() method fails to work properly when I try to start it from any index other than 0

I am currently working with an array called $scope.results which contains 8 objects. I have also created a custom simple pagination and a function called selectAll() that I'm trying to get to work together. Please refrain from suggesting the use of b ...

Having trouble loading services within my Angular controller

After developing my Angular application, I added some basic code to my controller which is displayed below. Now, I am attempting to include two services that I created in my services.js file. This file is being loaded in my index.html and required within m ...

Adding a class-matched element with a corresponding ID

Despite finding similar questions, I am still unable to achieve the desired outcome. Here is a list: <ul> <li class="class1"></li> <li class="class2"></li> <li class="class3"></li> <li class="class4"&g ...

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

I've implemented EasyTabs for organizing my tabs on a webpage. I decided to use ajax-tabs functionality in order to fetch content from other pages when users click on the navigation menu buttons. However, I've encountered an issue where the conte ...

store events in a MySQL database using a servlet callback and display them on a full calendar

Hey there! I recently started using the full-calendar jQuery plugin and successfully integrated it into a JSP page. The events on the calendar are loaded from a MySQL database by calling a servlet that generates a JSON array of retrieved elements. Now, I& ...