{"id":5236,"date":"2023-06-24T00:32:03","date_gmt":"2023-06-24T05:32:03","guid":{"rendered":"https:\/\/www.incredigeek.com\/home\/?p=5236"},"modified":"2023-08-05T14:12:19","modified_gmt":"2023-08-05T19:12:19","slug":"javascript-functions","status":"publish","type":"post","link":"https:\/\/www.incredigeek.com\/home\/javascript-functions\/","title":{"rendered":"JavaScript Functions"},"content":{"rendered":"\n

https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Functions<\/a><\/p>\n\n\n\n

What is a function? A function is a block of code that does a particular task.<\/p>\n\n\n\n

<\/p>\n\n\n\n

JavaScript has 3 different types of functions<\/p>\n\n\n\n

    \n
  1. Function Declaration<\/li>\n\n\n\n
  2. Function Expression<\/li>\n\n\n\n
  3. Arrow Function Expression<\/li>\n<\/ol>\n\n\n\n

    Functions can also be named, or anonymous. There are a couple helpful things anonymous functions can help with.<\/p>\n\n\n\n

    Function Declaration<\/h2>\n\n\n\n

    Function declaration’s are your standard functions. Syntax is as follows<\/p>\n\n\n\n

    function add(num1, num2) {\n  return num1 + num2\n}\n\n\nconsole.log(add(1, 2));<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Function Expression<\/h2>\n\n\n\n
    A function expression can be thought of as a variable that is a function.  We define function expressions like so<\/p>\n\n\n\n
    const add = function myFunction (num1, num2) {\n  return num1 + num2;\n}\n\nconsole.log(add(1, 2));<\/code><\/pre>\n\n\n\n
    Function expressions can be anonymous.  To make the above function anonymous, remove “myFunction”.  It would then read “function (num1, num2)”<\/p>\n\n\n\n
    Typically it is a good idea to name your function expressions as debugging anonymous functions can be a bit more difficult.<\/p>\n\n\n\n
    A warning about function expressions.  They are not hoisted like function declarations.  Just be sure that you define the function expression before you call it.<\/p>\n\n\n\n
    Arrow Function Expressions<\/h2>\n\n\n\n
    Arrow functions are a compact version of function expressions that are always anonymous.  They can be a bit tricky to get the syntax correct.  Refer to the link below to get a better list of syntax and use.  Arrow functions also have some other limitations.  They do not have bindings to this, arguments or super.<\/p>\n\n\n\n
    const add = (num1, num2) => num1 + num2;\n\nconsole.log(add(1, 2);<\/code><\/pre>\n\n\n\n
    https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions<\/a><\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Anonymous Functions<\/h2>\n\n\n\n
    Anonymous functions are functions that don’t have a name.  For instance<\/p>\n\n\n\n
    function () {\n  do something\n}<\/code><\/pre>\n\n\n\n
    Does not have a name and is therefore an anonymous function.  Arrow functions are always anonymous.<\/p>\n\n\n\n
    When would you need to use an anonymous function?  <\/p>\n\n\n\n
    One good example is when you want to call a named function from a timer, or when a button is clicked.  For instance<\/p>\n\n\n\n
    \/\/ Find object id myButton\nlet buttonObject = document.getElementById('myButton')  \n\n\/\/ Add an event listener, and run Log function when clicked.\nbuttonObject.addEventListener('click', Log) \n\/\/ If we call Log(), it will immediately trigger the function\n\nfunction Log () {\n  console.log(\"Hello World!\")\n}<\/code><\/pre>\n\n\n\n
    But what if we want to pass in a variable to the Log function?  We can’t run Log('some text')<\/code> as the function will run before we click the object.<\/p>\n\n\n\n
    We can however wrap the Log function inside of an anonymous function like so<\/p>\n\n\n\n
    let buttonObject = document.getElementById('myButton')\n\n\/\/ Now Log() function will be run with the variable getting passed.\nbuttonObject.addEventListener('click', function () {\n  Log('Hello World!')\n})\n\nfunction Log (textVariable) {\n  console.log(textVariable)\n}<\/code><\/pre>\n\n\n\n
    And our Log function gets triggered when the object is clicked, and the variable is passed properly.  You can swap out function ()<\/code> with an arrow function () =><\/code><\/p>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Functions What is a function? A function is a block of code that does a particular task. JavaScript has 3 different types of functions Functions can also be named, or anonymous. There are a couple helpful things anonymous functions can … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1460,792],"tags":[1520,1521,1500,1519,1437,1463,606],"class_list":["post-5236","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","tag-arrow-funtion","tag-coding","tag-function","tag-functions","tag-javascript","tag-js","tag-programming"],"_links":{"self":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/comments?post=5236"}],"version-history":[{"count":4,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5236\/revisions"}],"predecessor-version":[{"id":5421,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/posts\/5236\/revisions\/5421"}],"wp:attachment":[{"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/media?parent=5236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/categories?post=5236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.incredigeek.com\/home\/wp-json\/wp\/v2\/tags?post=5236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}