- [Instructor] Let's take our function one step further. Right now the function is logging the results directly in the console as it runs from within the code block. That works in some cases but not others. In many cases you want the function to do something and then return a value back to you to process further before you display it, either in the console or in the web page itself. To get that to work we need to create a value, and then return it where the function is called. I'll start out by setting up a new variable called result, then I want to change what happens inside this ternary operator, so I'll take out this console.log("a: ", a) and replace it with result.
And here I'll assign an array to result that contains firstFraction, followed by the value of 'a'. Then we'll do the same for when 'a' is not the biggest. result equals array secondFraction and the value of 'b'. Then finally I return result to where findBiggestFraction was originally called. Now when I save this, nothing happens in the console, and that's because although findBiggestFraction is sitting with the result, we're not actually doing anything with it.
And here we now have options. I can either simply console log out findBiggestFraction, calling out firstFraction and secondFraction, and that works fine. Or, I can create a new variable, fractionResult, set it equal to findBiggestFraction, and then console.log(fractionResult).
And here we see the point of returning values from a function. Once the value is returned you can do many different things with that value and you can choose when to actually output it in the browser. So, why have I done all these things? I have pretty much taken a very simple operation and made it super complicated. Well there's a simple reason. Right now if you look in the console, although you have a bunch of information that says, firstFraction 0.75, you don't really understand what this is all about. I've created this more complex function so I can provide some context to my answer.
Watch this. First I'll console.log out the firstFraction value, once it's calculated. So I'll say, "First fraction result" and then the value of firstFraction. Then console.log "Second fraction result" and the value of secondFraction. Then we'll take this array over here that has both the name of whatever value is biggest and its actual value, and combine it into a longer string.
So I'll say, console.log "Fraction" and then get the fraction name, which is fractionResult, and here we're looking for the index 0, which is the name. Plus, "with a value of" plus, then we're getting fractionResult again, and this time we're looking for the value which has an index of 1. Plus text, "is the biggest!" Save that.
And check out my console now. First fraction result: 0.75. Second fraction result: 0.71428 blah, blah, blah. Fraction firstFraction with a value of 0.75 is the biggest. And there you have it, a complete named function with arguments that returns a value to be used elsewhere.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Return values from a function