{"id":136155,"date":"2023-06-24T16:23:42","date_gmt":"2023-06-24T16:23:42","guid":{"rendered":"https:\/\/www.sushilkumar.ind.in\/blog\/?p=136155"},"modified":"2023-06-24T18:25:48","modified_gmt":"2023-06-24T18:25:48","slug":"how-many-types-of-functions-in-javascript","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/javascript\/how-many-types-of-functions-in-javascript\/","title":{"rendered":"how many types of functions in javascript?"},"content":{"rendered":"\n<p>JavaScript supports several types of functions. Here are some commonly used function types in JavaScript:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Named Function: <\/strong>A function with a specified name that can be called using its name. For example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   function add(a, b) {\n     return a + b;\n   }<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong>Anonymous Function: <\/strong>A function without a name, often assigned to a variable or used as a callback function. For example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   var greet = function() {\n     console.log(\"Hello!\");\n   };<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><strong>Arrow Function: <\/strong>A concise syntax for writing functions, introduced in ECMAScript 6 (ES6). Arrow functions have implicit returns and lexical scoping of <code>this<\/code>. For example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   var multiply = (a, b) =&gt; a * b;<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li><strong>Immediately Invoked Function Expression (IIFE): <\/strong>A function that is executed immediately after it is defined. It is typically wrapped in parentheses to create a function expression and then immediately invoked. For example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   (function() {\n     console.log(\"This is an IIFE.\");\n   })();<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li><strong>Constructor Function: <\/strong>A function used to create objects based on a template called a constructor. It is typically invoked with the <strong>new<\/strong> keyword. For example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   function Person(name, age) {\n     this.name = name;\n     this.age = age;\n   }\n\n   var john = new Person(\"John\", 25);<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li><strong>Generator Function:<\/strong> A special type of function that can be paused and resumed using the <strong>yield<\/strong> keyword. Generator functions are defined using the <strong>function*<\/strong> syntax. For example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   function* counter() {\n     var count = 0;\n     while (true) {\n       yield count++;\n     }\n   }\n\n   var iterator = counter();\n   console.log(iterator.next().value); \/\/ 0\n   console.log(iterator.next().value); \/\/ 1<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"7\">\n<li><strong>Recursive Function:<\/strong> A function that calls itself either directly or indirectly. Recursive functions are useful for solving problems that can be divided into smaller sub-problems. For example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   function factorial(n) {\n     if (n === 0) {\n       return 1;\n     } else {\n       return n * factorial(n - 1);\n     }\n   }<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"8\">\n<li><strong>Function Declarations:<\/strong> These are created using the <code>function<\/code> keyword, followed by the function name and a pair of parentheses. They can be declared anywhere in the code and are hoisted to the top of their scope.<\/li>\n<\/ol>\n\n\n\n<pre><code>function functionName(parameters) {<br>\/\/ function body<br>}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"9\">\n<li><strong>Function Expressions: <\/strong>These involve assigning a function to a variable or a property of an object. They are not hoisted, so they must be defined before they are used.<\/li>\n<\/ol>\n\n\n\n<pre><code>var functionName = function(parameters) {<br>\/\/ function body<br>};<\/code><\/pre>\n\n\n\n<p><strong>10.) What are lambda or arrow functions<br><\/strong>An <strong>arrow function<\/strong> is a shorter syntax for a function expression and does not have its own this, arguments, super, or <strong>new.target. <\/strong>These functions are best suited for non-method functions, and they cannot be used as constructors.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">11.) What is a first-class function?<\/h4>\n\n\n\n<p>In Javascript, functions are first-class objects. <strong>First-class functions <\/strong>mean when functions in that language are treated like any other variable.<\/p>\n\n\n\n<p>For example, in such a language, a function can be passed as an argument to other functions, returned by another function, and assigned as a value to a variable. For example, in the below example, handler functions assigned to a listener<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const handler = () => console.log(\"This is a click handler function\");\r\ndocument.addEventListener(\"click\", handler);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">12.) What is a first-order function?<\/h4>\n\n\n\n<p><strong>First-order function<\/strong> is a function that doesn\u2019t accept another function as an argument and doesn\u2019t return a function as its return value.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const firstOrder = () => console.log(\"I am a first order function!\");\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">13.) What is a higher-order function?<\/h4>\n\n\n\n<p>A <strong>higher-order function<\/strong> is a function that accepts another function as an argument or returns a function as a return value or both.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const firstOrderFunc = () =>\r\n  console.log(\"Hello, I am a First order function\");\r\nconst higherOrder = (ReturnFirstOrderFunc) => ReturnFirstOrderFunc();\r\nhigherOrder(firstOrderFunc);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">14.) What is a unary function?<\/h4>\n\n\n\n<p>An <strong>unary function<\/strong> (i.e. monadic) is a function that accepts exactly one argument. It stands for a single argument accepted by a function.<\/p>\n\n\n\n<p>Let us take an example of a unary function,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const unaryFunction = (a) => console.log(a + 10); \/\/ Add 10 to the given argument and display the value<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">15.) What is the currying function?<\/h4>\n\n\n\n<p><strong>Currying <\/strong>is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument. Currying is named after the mathematician Haskell Curry. By applying currying, an n-ary function turns it into a unary function.<\/p>\n\n\n\n<p>Let&#8217;s take an example of the n-ary function and how it turns into a currying function,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const multiArgFunction = (a, b, c) => a + b + c;\r\nconsole.log(multiArgFunction(1, 2, 3)); \/\/ 6\r\n\r\nconst curryUnaryFunction = (a) => (b) => (c) => a + b + c;\r\ncurryUnaryFunction(1); \/\/ returns a function: b => c =>  1 + b + c\r\ncurryUnaryFunction(1)(2); \/\/ returns a function: c => 3 + c\r\ncurryUnaryFunction(1)(2)(3); \/\/ returns the number 6\r\nCurried functions are great to improve code reusability and functional composition.<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">16.) What is a pure function?<\/h4>\n\n\n\n<p>A <strong>Pure function<\/strong> is a function where the return value is only determined by its arguments without any side effects. i.e, If you call a function with the same arguments &#8216;n&#8217; number of times and &#8216;n&#8217; number of places in the application then it will always return the same value.<\/p>\n\n\n\n<p>Let&#8217;s take an example to see the difference between pure and impure functions,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/Impure\r\nlet numberArray = &#91;];\r\nconst impureAddNumber = (number) => numberArray.push(number);\r\n\/\/Pure\r\nconst pureAddNumber = (number) => (argNumberArray) =>\r\n  argNumberArray.concat(&#91;number]);\r\n\r\n\/\/Display the results\r\nconsole.log(impureAddNumber(6)); \/\/ returns 1\r\nconsole.log(numberArray); \/\/ returns &#91;6]\r\nconsole.log(pureAddNumber(7)(numberArray)); \/\/ returns &#91;6, 7]\r\nconsole.log(numberArray); \/\/ returns &#91;6]<\/code><\/pre>\n\n\n\n<p>As per the above code snippets, the Push function is impure itself by altering the array and returning a push number index independent of the parameter value. . Whereas Concat on the other hand takes the array and concatenates it with the other array producing a whole new array without side effects. Also, the return value is a concatenation of the previous array.<\/p>\n\n\n\n<p>Remember that Pure functions are important as they simplify unit testing without any side effects and no need for dependency injection. They also avoid tight coupling and make it harder to break your application by not having any side effects. These principles are coming together with the Immutability concept of ES6 by giving preference to const over let usage.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript supports several types of functions. Here are some commonly used function types in JavaScript: Named Function: A function with a specified name that can be called using its name. For example: function add(a, b) { return a + b; } Anonymous Function: A function without a name, often assigned to a variable or used &hellip;<\/p>\n","protected":false},"author":1,"featured_media":136166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[323],"tags":[],"class_list":["post-136155","post","type-post","status-publish","format-standard","has-post-thumbnail","","category-javascript"],"jetpack_publicize_connections":[],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2023\/06\/javascript.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p99pkJ-zq3","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136155"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=136155"}],"version-history":[{"count":6,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136155\/revisions"}],"predecessor-version":[{"id":136165,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136155\/revisions\/136165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media\/136166"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=136155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/categories?post=136155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/tags?post=136155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}