Javascript function return object value

Function return values

There’s one last essential concept about functions for us to discuss — return values. Some functions don’t return a significant value, but others do. It’s important to understand what their values are, how to use them in your code, and how to make functions return useful values. We’ll cover all of these below.

Basic computer literacy, a basic understanding of HTML and CSS, JavaScript first steps, Functions — reusable blocks of code.

What are return values?

Return values are just what they sound like — the values that a function returns when it completes. You’ve already met return values several times, although you may not have thought about them explicitly.

Let’s return to a familiar example (from a previous article in this series):

const myText = "The weather is cold"; const newString = myText.replace("cold", "warm"); console.log(newString); // Should print "The weather is warm" // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with the replacement made 

The replace() function is invoked on the myText string, and is passed two parameters:

When the function completes (finishes running), it returns a value, which is a new string with the replacement made. In the code above, the result of this return value is saved in the variable newString .

If you look at the replace() function MDN reference page, you’ll see a section called return value. It is very useful to know and understand what values are returned by functions, so we try to include this information wherever possible.

Some functions don’t return any value. (In these cases, our reference pages list the return value as void or undefined .) For example, in the displayMessage() function we built in the previous article, no specific value is returned when the function is invoked. It just makes a box appear somewhere on the screen — that’s it!

Generally, a return value is used where the function is an intermediate step in a calculation of some kind. You want to get to a final result, which involves some values that need to be calculated by a function. After the function calculates the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation.

Using return values in your own functions

To return a value from a custom function, you need to use the return keyword. We saw this in action recently in our random-canvas-circles.html example. Our draw() function draws 100 random circles somewhere on an HTML :

function draw()  ctx.clearRect(0, 0, WIDTH, HEIGHT); for (let i = 0; i  100; i++)  ctx.beginPath(); ctx.fillStyle = "rgba(255,0,0,0.5)"; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); > > 

Inside each loop iteration, three calls are made to the random() function, to generate a random value for the current circle’s x-coordinate, y-coordinate, and radius, respectively. The random() function takes one parameter — a whole number — and returns a whole random number between 0 and that number. It looks like this:

function random(number)  return Math.floor(Math.random() * number); > 

This could be written as follows:

function random(number)  const result = Math.floor(Math.random() * number); return result; > 

But the first version is quicker to write, and more compact.

We are returning the result of the calculation Math.floor(Math.random() * number) each time the function is called. This return value appears at the point the function was called, and the code continues.

So when you execute the following:

.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); 

If the three random() calls return the values 500 , 200 , and 35 , respectively, the line would actually be run as if it were this:

.arc(500, 200, 35, 0, 2 * Math.PI); 

The function calls on the line are run first, and their return values are substituted for the function calls, before the line itself is then executed.

Active learning: our own return value function

Let’s have a go at writing our own functions featuring return values.

function squared(num)  return num * num; > function cubed(num)  return num * num * num; > function factorial(num)  if (num  0) return undefined; if (num === 0) return 1; let x = num - 1; while (x > 1)  num *= x; x--; > return num; > 

.addEventListener("change", () =>  const num = parseFloat(input.value); if (isNaN(num))  para.textContent = "You need to enter a number!"; > else  para.textContent = `$num> squared is $squared(num)>. `; para.textContent += `$num> cubed is $cubed(num)>. `; para.textContent += `$num> factorial is $factorial(num)>. `; > >); 

Here are some explanations for the addEventListener function in step 3 above:

• By adding a listener to the change event, this function runs whenever the change event fires on the text input — that is when a new value is entered into the text input , and submitted (e.g., enter a value, then un-focus the input by pressing Tab or Return ). When this anonymous function runs, the value in the input is stored in the num constant.
• The if statement prints an error message if the entered value is not a number. The condition checks if the expression isNaN(num) returns true . The isNaN() function tests whether the num value is not a number — if so, it returns true , and if not, it returns false .
• If the condition returns false , the num value is a number and the function prints out a sentence inside the paragraph element that states the square, cube, and factorial values of the number. The sentence calls the squared() , cubed() , and factorial() functions to calculate the required values.

Note: If you have trouble getting the example to work, check your code against the finished version on GitHub (see it running live also), or ask us for help.

Now it’s your turn!

At this point, we’d like you to have a go at writing out a couple of functions of your own and adding them to the library. How about the square or cube root of the number? Or the circumference of a circle with a given radius?

Some extra function-related tips:

• Look at another example of writing error handling into functions. It is generally a good idea to check that any necessary parameters are validated, and that any optional parameters have some kind of default value provided. This way, your program will be less likely to throw errors.
• Think about the idea of creating a function library. As you go further into your programming career, you’ll start doing the same kinds of things over and over again. It is a good idea to create your own library of utility functions to do these sorts of things. You can copy them over to new code, or even just apply them to HTML pages wherever you need them.

Test your skills!

You’ve reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you’ve retained this information before you move on — see Test your skills: Functions.

Conclusion

So there we have it — functions are fun, very useful, and although there’s a lot to talk about in regards to their syntax and functionality, they are fairly understandable.

If there is anything you didn’t understand, feel free to read through the article again, or contact us to ask for help.

See also

• Functions in-depth — a detailed guide covering more advanced functions-related information.
• Callback functions in JavaScript — a common JavaScript pattern is to pass a function into another function as an argument. It is then called inside the first function. This is a little beyond the scope of this course, but worth studying before too long.

• Previous
• Overview: Building blocks
• Next

Found a content problem with this page?

This page was last modified on Jul 3, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Return an Object From a Function in JavaScript

1. Return an Object From a Regular Function in JavaScript
2. Return an Object From an Anonymous Function in JavaScript
3. Return an Object From an Arrow Function in JavaScript

Whenever we say we want to return an object from a function, we return one object from another object (function). There are various ways to return an object using a function.

Let us now see how we can return an object from a function in JavaScript.

Return an Object From a Regular Function in JavaScript

There are various types of functions in JavaScript. Each of these functions is defined differently.

We will see each of these function types, and we will also see if we have to return an object using each of these functions in JavaScript and to return anything from a function, we always use a keyword known as return .

The regular function is a traditional way of defining a function in JavaScript. This type of function is present in the JavaScript programming language from its initial versions.

This function has three things, a function keyword, function name, and function body.

We have created a function called returnObj to return an object. This function aims to return an object.

We have created an obj object with two fields: the name and the company inside this function.

function returnObj()   var obj =   "name": "Adam",  "company": "Google",  >  return obj; >  var myObj = returnObj(); console.log(myObj); 

We must use a return keyword to return this object and return the obj created.

We must create a variable myObj and then call the returnObj function. After we call this function, whatever the function will return (in this case, an object) will be stored inside the myObj variable.

Finally, if you print the variable myObj , you will get the entire object as the output.

Return an Object From an Anonymous Function in JavaScript

An anonymous function is a function that does not have a name associated with it. This type of function only has a function keyword and a function body.

It was introduced in the ES6 version of JavaScript. Since this function does not have a name, we can’t call this function.

So, to call this function, we store this entire function into a variable first, and then we use this variable name as a function name to call this function, i.e., we add round brackets at the end.

Here, we have created a function that does not have a name. And we have created the same object obj which we have created earlier.

const myObj = function ()  var obj =   "name": "Adam",  "company": "Google",  >  return obj; >  console.log(myObj()); 

Finally, we will return this obj , and then after we call this function, the object we are returning from the function will be stored inside that variable.

Return an Object From an Arrow Function in JavaScript

The arrow function is also known as an anonymous function. The only difference between an arrow function and an anonymous function is that the arrow function does not use the function keyword while declaring a function.

Instead, it uses arrows (combination of equals and greater than sign) => to declare a function. This type of function was also introduced in the ES6 version of JavaScript.

Here, we have created an empty object, obj . We will create an arrow function that takes an object as a parameter ( entireObj ).

Inside the arrow function’s body, we will set the name and company properties of the entireObj object with some values. Then we will return the entireObj using the return keyword.

var obj = <>; const myObj = (entireObj)=>  entireObj.name = "Adam";  entireObj.company = "Google";  return entireObj; >  console.log(myObj(obj)); 

In the end, we will call the function myObj . Don’t forget to pass the empty object we created at the start as the parameter while calling the myObj function.

The result of this operation, i.e., the object, will be stored inside the myObj variable and then printed on the console.

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

Related Article — JavaScript Function

Источник