• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Computer Notes

Library
    • Computer Fundamental
    • Computer Memory
    • DBMS Tutorial
    • Operating System
    • Computer Networking
    • C Programming
    • C++ Programming
    • Java Programming
    • C# Programming
    • SQL Tutorial
    • Management Tutorial
    • Computer Graphics
    • Compiler Design
    • Style Sheet
    • JavaScript Tutorial
    • Html Tutorial
    • Wordpress Tutorial
    • Python Tutorial
    • PHP Tutorial
    • JSP Tutorial
    • AngularJS Tutorial
    • Data Structures
    • E Commerce Tutorial
    • Visual Basic
    • Structs2 Tutorial
    • Digital Electronics
    • Internet Terms
    • Servlet Tutorial
    • Software Engineering
    • Interviews Questions
    • Basic Terms
    • Troubleshooting
Menu

Header Right

Home » JScript » Tutorial » JavaScript Functions
Next →
← Prev

JavaScript Functions

By Dinesh Thakur

What is a function? A JavaScript Functions is really just an encapsulated bunch of code. We’ve been looking at a bunch of JavaScript syntax: all of that can go inside JavaScript Functions and often that’s what you’ll do. When you put code inside a JavaScript Functions it isn’t run right away, like “loose” code. You decide when the code runs by calling the function, and you can do that as often as you want to. This is part of the benefit of JavaScript Functions. 

But don’t forget the encapsulation part: that means that at the time you invoke, or call, a function, you don’t have any control (for the most part) of what goes on inside it. You’ll hand the JavaScript Functions some values to work with, and it will hand a value back; but what goes on inside it is black-boxed. This turns out to be an important thing that we can take advantage of.

There are two other important things you should know about JavaScript Functions. First off, functions are first-class objects in JavaScript, which means that they are objects, and that they are no different from any other value. Let’s take these two points a bit further.

JavaScript Functions are Objects: We saw how to create an object literal earlier. Now, we can’t create a function using that object literal notation, but a function can have properties and methods, because it is an object. You can add your own properties and methods to functions, but we’ll look at some of the built in ones soon.

JavaScript Functions are like other Values: In many programming languages, a function is something very different from primitive values like strings and numbers. However, in JavaScript, that’s not the case. You can use functions in most places that you’d use another value, like passing it to another function Also; you can redefine a function, just like you’d redefine any other variable. This, as you’ll see, is very handy. Now that we understand a bit of function theory, let’s look as some syntax.

JavaScript Functions Syntax

As we know, a JavaScript function is just any number of lines. But we need to wrap that in JavaScript functions material. Let’s say we have some code that determines an appropriate greeting for our website:

var  hour  =  10, 
var message; 
if  (hour  <  12)  
 { 
  message  =  "Good  Morning!"; 
 }  
else  if  (hour  <  17)  
 { 
  message  =  "Good  Afternoon!"; 
 }  
else  
  { 
   message  =  "Good  Evening!"; 
} 
Document.write (message); // Good Morning! 

We’ve created an hour variable, with the hypothetical current hour. Then, we use an if statement to figure out in what range our hour is, and assign message accordingly.

So, what do we do to convert this code to a javaScript functions? Well, first, let’s meet the Javascript function shell:

function  getGreeting  ()  {//  code  goes  here} 

Start with the keyword function; then, write the name of the JavaScript Function. it can be whatever you want, as long as it follows the rules for variable names (i.e. alphanumeric characters, underscore, and dollar sign, but not starting with a number). Next, parentheses. Then, the lines of code go between curly braces.

Now, you might be tempted to throw all the code we wrote above into a JavaScript Function. shell. This isn’t wise for two reasons. Firstly, there would be no way to get to the variable message (more on function scope soon). Secondly, with a bit of customization, we can increase the usefulness of the function by tweaking it a bit.

Let’s make our JavaScript Functions With Parameters. A parameter or (we say Javascript Function Arguments) is a value that you hand to the javascript function when you ask the function to run. The JavaScript Functions With Parameters can then use the parameters however it needs to. How does this work syntactically?

function  getGreeting  (hour)  {//code  here} 

Here, our JavaScript Function getGreeting accepts one parameter, which we’re calling hour. Function Parameters are like variable that you can only access from within the function. To invoke this function and give it an hour, we would do this:

getGreeting(10); 

We could store the hour in a variable, but we don’t need to, since we won’t need it after this.

So, we’re passing the current hour to getGreeting. Now we’re ready to write the code inside that function.

function  getGreeting(hour)  
 {             
  var  msg; 
   if  (hour  <  12)  
    { 
     msg  =  "Good  Morning!"; 
}  
  else  if  (hour  <  17) 
  { 
   msg  =  "Good  Afternoon!"; 
   }  
   else  { msg  =  "Good  Evening!";} 
   return  msg;} 
   var  message  =  getGreeting(  16  );  //  4  PM 
alert(message);  //  Good  Afternoon! 

If you’ve been following along carefully, there should be only one thing above that you’re not sure about: return msg. What’s up with that? To return a value is to pass it back to the code that called the function. That way, we can assign the calling of a function to a variable (as we do above), and it will be whatever value was returned from getGreeting.

Here are two more things I’d like to do to this function, to make it better. First, there’s really no need for the msg variable, because we only ever do one thing to it. Try this:

function  getGreeting(hour)  {             
  if  (hour  <  12)  
  {return  "Good  Morning!";} 
  else  if  (hour  <  17)  {             return  "Good  Afternoon!";}  
  else  {return  "Good  Evening!";}} 
 alert(  getGreeting(  3  )  );  //  Good  Morning! 

This makes it clear that we can have more than one return. Once we figure out which value we must return, we’ll do so right away. I should note that a return statement will be the last line to be executed in a function; once the Javascript functions returns, it’s done; nothing else is executed. Therefore, unless your return statement is inside a conditional statement, you usually won’t have any code after the return line in your function.

One more thing: When writing JavaScript Functions With Parameters, you want them to be user friendly. Let’s do this: if the user doesn’t pass in a parameter, we’ll provide a reasonable default.

function  getGreeting(hour)  {  
hour  =  hour  ||  new  Date().getHours();  
if  (hour  <  12)  {  return  "Good  Morning!"; }  
else  if  (hour  <  17)  {             return  "Good  Afternoon!"; }  
else  {  return  "Good  Evening!";  }  } 
 alert(  getGreeting(  new  Date().getHours()  )  ); 

What’s going on here? We’re using a logical OR operator; remember what this does: if the first side is true, it will use that; otherwise, it will use the second side. In this case, we’re saying that we want to set the hour parameter to either the value of the hour parameter (if the user passed one in), or the current hour. We’re using the getHours function of a current Date object; we’ll see more about this in a page or so. If the user didn’t pass a parameter, hour will be undefined, which is false. Therefore, the function will assign the current hour to hour. And yes, you can assign new values to parameters like this.

You’ll also like:

  1. What is Functions? Explain Features of Functions,Types of Functions and Calling a Function
  2. JavaScript Operators | Types of JavaScript Operators
  3. PHP Functions:User-defined functions
  4. JavaScript Comments
  5. JavaScript statements
Next →
← Prev
Like/Subscribe us for latest updates     

About Dinesh Thakur
Dinesh ThakurDinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps.

Dinesh Thakur is a Freelance Writer who helps different clients from all over the globe. Dinesh has written over 500+ blogs, 30+ eBooks, and 10000+ Posts for all types of clients.


For any type of query or something that you think is missing, please feel free to Contact us.


Primary Sidebar

JavaScript Tutorials

JavaScript Tutorials

  • JavaScript - Home
  • JavaScript - Operators
  • JavaScript - Comments
  • JavaScript - If...Else
  • JavaScript - For Loop
  • JavaScript - Popup Boxes
  • JavaScript - Switch Statement
  • JavaScript - while Loop
  • JavaScript - Functions
  • JavaScript - Variables
  • JavaScript - Statements
  • JavaScript - Substring()
  • JavaScript - indexOf()
  • JavaScript - Match()
  • JavaScript - Replace()
  • JavaScript - Search()
  • JavaScript - Split()
  • JavaScript - Substr()
  • JavaScript - Blink()
  • JavaScript - Anchor()
  • JavaScript - Big()
  • JavaScript - Strings Object
  • JavaScript - String Format
  • JavaScript - Length Property
  • JavaScript - Prototype
  • JavaScript - Slice Substr Vs Substring
  • JavaScript - JavaScript:void(0)

Other Links

  • JavaScript - PDF Version

Footer

Basic Course

  • Computer Fundamental
  • Computer Networking
  • Operating System
  • Database System
  • Computer Graphics
  • Management System
  • Software Engineering
  • Digital Electronics
  • Electronic Commerce
  • Compiler Design
  • Troubleshooting

Programming

  • Java Programming
  • Structured Query (SQL)
  • C Programming
  • C++ Programming
  • Visual Basic
  • Data Structures
  • Struts 2
  • Java Servlet
  • C# Programming
  • Basic Terms
  • Interviews

World Wide Web

  • Internet
  • Java Script
  • HTML Language
  • Cascading Style Sheet
  • Java Server Pages
  • Wordpress
  • PHP
  • Python Tutorial
  • AngularJS
  • Troubleshooting

 About Us |  Contact Us |  FAQ

Dinesh Thakur is a Technology Columinist and founder of Computer Notes.

Copyright © 2023. All Rights Reserved.