{"id":66,"date":"2020-01-09T19:38:20","date_gmt":"2020-01-09T19:38:20","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/javascript\/?p=66"},"modified":"2020-01-09T20:27:38","modified_gmt":"2020-01-09T20:27:38","slug":"functions","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/","title":{"rendered":"JavaScript – Functions"},"content":{"rendered":"

A function is a block of code which is written and can be reused elsewhere in the program. With functions, you can make your program more readable and modular.<\/p>\n

Functions are supported in JavaScript.<\/p>\n

In JavaScript, we have both inbuilt functions and user-defined functions. Inbuilt functions are functions that are part of the JavaScript language. For instance the write() function or the alert() function.<\/p>\n

User-defined functions are the ones created by the user. This is what we would be learning in this tutorial.<\/p>\n

 <\/p>\n

    \n
  1. Defining a Function<\/a><\/li>\n
  2. Calling a Function<\/a><\/li>\n
  3. Function Parameters<\/a><\/li>\n
  4. The Return Statement<\/a><\/li>\n<\/ol>\n

    The codes in this tutorial are tested using Notepad++ as shown below. You can download Notepad++ free from here.<\/p>\n

    \"\"<\/a><\/p>\n

     <\/p>\n

    1. Defining a Function<\/strong><\/h5>\n

    The first step to creating a function is to define it. You can do this using the function keyword, then followed by the function name and a list of parameters in brackets. Then the body of the function enclosed in curly braces.<\/p>\n

    The syntax is given below<\/p>\n

    Note that a parameter-list could also be empty.<\/p>\n

     <\/p>\n

    <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n   <!--<\/span>\r\n      function<\/span> functionname(parameter-<\/span>list) {\r\n         statements\r\n      }\r\n   \/\/--><\/span>\r\n<\/script><\/span>\r\n<\/pre>\n
    Let’s now take a real example.<\/p>\n
    The code below is a function that displays an alert message to the output<\/p>\n
    <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n   <!--<\/span>\r\n      function<\/span> greetings() {\r\n         alert(\"Good morning!\"<\/span>);\r\n      }\r\n   \/\/--><\/span>\r\n<\/script><\/span>\r\n<\/pre>\n
     <\/p>\n
    2. Calling a Function<\/strong><\/h5>\n
    Before you can use a function, you need to call it. This is also called invocation. For instance you want the function to run when a button is clicked, when a key is pressed or when any other event occurs.<\/p>\n
    The following code calls the greetings() function when a button is clicked.<\/p>\n
    Live Demo\r\n<html><\/span>\r\n   <head><\/span>   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         function<\/span> sayHello() {\r\n            document<\/span>.write (\"Hello there!\"<\/span>);\r\n         }\r\n      <\/script><\/span>\r\n      \r\n   <\/head><\/span>\r\n   \r\n   <body><\/span>\r\n      <p><\/span>Click the following button to call the function<\/p><\/span>      \r\n      <form><\/span>\r\n         <input<\/span> type =<\/span> \"button\"<\/span> onclick =<\/span> \"greetings()\"<\/span> value =<\/span> \"Good Morning!\"<\/span>><\/span>\r\n      <\/form><\/span>      \r\n      <p><\/span>Use different text in function and then try...<\/p><\/span>\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
     <\/p>\n
    3. Function Parameters<\/strong><\/h5>\n
    The previous functions we’ve written have been without parameters. But you can pass a parameter to functions when invoking the function. A function can take more than one parameter. Each parameter is separated by a comma.<\/p>\n
    Now we modify the greetings function to take the name and the age as parameters.<\/p>\n
    <html><\/span>\r\n   <head><\/span>   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         function<\/span> greetings(name, age) {\r\n            document<\/span>.write (name +<\/span> \" is \"<\/span> +<\/span> age +<\/span> \" years old.\"<\/span>);\r\n         }\r\n      <\/script><\/span>      \r\n   <\/head><\/span>\r\n   \r\n   <body><\/span>\r\n      <p><\/span>Click the button below to call the function<\/p><\/span>      \r\n      <form><\/span>\r\n         <input<\/span> type =<\/span> \"button\"<\/span> onclick =<\/span> \"greetings('Liudmyla', 30)\"<\/span> value =<\/span> \"Greet!\"<\/span>><\/span>\r\n      <\/form><\/span>      \r\n      <p><\/span>Use different parameters in the function and then try...<\/p><\/span>\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
     <\/p>\n
    4. The return Statement<\/strong><\/h5>\n
    The return statement can be used at the end of a function body. When the function needs to return a value, then it is required to use a return statement. However, if no values are returned, then the return statement is optional. For example, if you have a function that takes three numbers and calculates the sum.<\/p>\n
    The function below takes two parameters: the firstname and the lastname. It then concatenates them and returns the concatenated string.<\/p>\n
    <html><\/span>\r\n    <head><\/span>\r\n    <title><\/span>Functions Demo<\/title><\/span>\r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         function<\/span> concatenate(firstname, lastname) {\r\n            var<\/span> fullname;\r\n            full =<\/span> firstname +<\/span> lastname;\r\n            return<\/span> fullname;\r\n         }\r\n         function<\/span> secondFunction() {\r\n            var<\/span> result;\r\n            result =<\/span> concatenate('Mila'<\/span>, 'Kany'<\/span>);\r\n            document<\/span>.write (result );\r\n         }\r\n      <\/script><\/span>  \r\n    <\/head><\/span>\r\n   <body><\/span>      \r\n      <p><\/span>Click the following button to call the function<\/p><\/span>      \r\n      <form><\/span>\r\n         <input<\/span> type =<\/span> \"button\"<\/span> onclick =<\/span> \"secondFunction()\"<\/span> value =<\/span> \"Call Function\"<\/span>><\/span>\r\n      <\/form><\/span>   \r\n      <\/script><\/span>  \r\n      <p><\/span>Try changing the values firstname and lastname...<\/p><\/span>\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
     <\/p>\n
    Note that the outputs of the codes in this tutorial have not been provided. This is to enable you to try it yourself and see what you get. We also recommend watching the video lessons for clarification. Also feel free to ask for help you have any challenges.<\/p>\n","protected":false},"excerpt":{"rendered":"
    A function is a block of code which is written and can be reused elsewhere in the program. With functions, you can make your program … <\/p>\n","protected":false},"author":395,"featured_media":68,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[12],"class_list":["post-66","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-functions"],"yoast_head":"\nJavaScript - Functions - JavaScript Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript - Functions - JavaScript Tutorial\" \/>\n<meta property=\"og:description\" content=\"A function is a block of code which is written and can be reused elsewhere in the program. With functions, you can make your program …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-09T19:38:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-09T20:27:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/01\/Functions-in-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"849\" \/>\n\t<meta property=\"og:image:height\" content=\"380\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"kindsonthegenius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kindsonthegenius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"headline\":\"JavaScript – Functions\",\"datePublished\":\"2020-01-09T19:38:20+00:00\",\"dateModified\":\"2020-01-09T20:27:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/\"},\"wordCount\":439,\"commentCount\":2,\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/01\\\/Functions-in-JavaScript.jpg\",\"keywords\":[\"Functions\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/\",\"name\":\"JavaScript - Functions - JavaScript Tutorial\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/01\\\/Functions-in-JavaScript.jpg\",\"datePublished\":\"2020-01-09T19:38:20+00:00\",\"dateModified\":\"2020-01-09T20:27:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/01\\\/Functions-in-JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/01\\\/Functions-in-JavaScript.jpg\",\"width\":849,\"height\":380},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/functions\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript – Functions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#website\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/\",\"name\":\"JavaScript Tutorial\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\",\"name\":\"kindsonthegenius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"caption\":\"kindsonthegenius\"},\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/author\\\/kindsonthegenius-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript - Functions - JavaScript Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript - Functions - JavaScript Tutorial","og_description":"A function is a block of code which is written and can be reused elsewhere in the program. With functions, you can make your program …","og_url":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/","og_site_name":"JavaScript Tutorial","article_published_time":"2020-01-09T19:38:20+00:00","article_modified_time":"2020-01-09T20:27:38+00:00","og_image":[{"width":849,"height":380,"url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/01\/Functions-in-JavaScript.jpg","type":"image\/jpeg"}],"author":"kindsonthegenius","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kindsonthegenius","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/#article","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"headline":"JavaScript – Functions","datePublished":"2020-01-09T19:38:20+00:00","dateModified":"2020-01-09T20:27:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/"},"wordCount":439,"commentCount":2,"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/01\/Functions-in-JavaScript.jpg","keywords":["Functions"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kindsonthegenius.com\/javascript\/functions\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/","url":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/","name":"JavaScript - Functions - JavaScript Tutorial","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/#primaryimage"},"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/01\/Functions-in-JavaScript.jpg","datePublished":"2020-01-09T19:38:20+00:00","dateModified":"2020-01-09T20:27:38+00:00","author":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"breadcrumb":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindsonthegenius.com\/javascript\/functions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/#primaryimage","url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/01\/Functions-in-JavaScript.jpg","contentUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/01\/Functions-in-JavaScript.jpg","width":849,"height":380},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/functions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindsonthegenius.com\/javascript\/"},{"@type":"ListItem","position":2,"name":"JavaScript – Functions"}]},{"@type":"WebSite","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#website","url":"https:\/\/www.kindsonthegenius.com\/javascript\/","name":"JavaScript Tutorial","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kindsonthegenius.com\/javascript\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2","name":"kindsonthegenius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","caption":"kindsonthegenius"},"url":"https:\/\/www.kindsonthegenius.com\/javascript\/author\/kindsonthegenius-2\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/users\/395"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":3,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/66\/revisions\/77"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media\/68"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}