🕷️ Crawler Inspector

[Tech Altum Tutorial](https://tutorial.techaltum.com/) - [Frontend](https://tutorial.techaltum.com/javascript-functions.html) - [Frontend](https://tutorial.techaltum.com/frontend.html) - [HTML](https://tutorial.techaltum.com/HtmlBasics.html) - [HTML5](https://tutorial.techaltum.com/html5.html) - [CSS](https://tutorial.techaltum.com/css.html) - [CSS3](https://tutorial.techaltum.com/css3.html) - [PSD to HTML](https://tutorial.techaltum.com/psd-to-html.html) - [JavaScript](https://tutorial.techaltum.com/javascript.html) - [JQuery](https://tutorial.techaltum.com/jquery.html) - [SASS](https://tutorial.techaltum.com/sass.html) - [Bootstrap](https://tutorial.techaltum.com/bootstrap.html) - [Interview Questions](https://tutorial.techaltum.com/ui-interview-questions.html) - [React](https://tutorial.techaltum.com/javascript-functions.html) - [React JS](https://tutorial.techaltum.com/reactjs.html) - [TypeScript](https://tutorial.techaltum.com/typescript.html) - [Angular](https://tutorial.techaltum.com/javascript-functions.html) - [Angular](https://tutorial.techaltum.com/angular.html) - [TypeScript](https://tutorial.techaltum.com/typescript.html) - [Angular JS](https://tutorial.techaltum.com/angularjs.html) - [Node JS](https://tutorial.techaltum.com/javascript-functions.html) - [Node JS](https://tutorial.techaltum.com/nodejs.html) - [Express JS](https://tutorial.techaltum.com/express-js.html) - [MongoDB](https://tutorial.techaltum.com/mongodb.html) - [Mongoose](https://tutorial.techaltum.com/mongoose.html) - [Others](https://tutorial.techaltum.com/javascript-functions.html) - [Web Designing](https://tutorial.techaltum.com/webdesigning.html) - [Angular](https://tutorial.techaltum.com/angular.html) - [Asp.net](https://tutorial.techaltum.com/Asp.net.html) - [Videos](https://tutorial.techaltum.com/video-tutorial.html) - [PHP](https://tutorial.techaltum.com/PHP.html) - [Linux](https://tutorial.techaltum.com/Linux.html) - [C Language](https://tutorial.techaltum.com/CLanguageTutorial.html) - [Selenium](https://tutorial.techaltum.com/SeleniumTutorial.html) - [Python](https://tutorial.techaltum.com/python-tutorial.html) - [Android](https://tutorial.techaltum.com/android-tutorial.html) - [Hadoop](https://tutorial.techaltum.com/hadoop-tutorial.html) - [Youtube Channel](https://www.youtube.com/c/techaltumtutorial) - [Interviews](https://tutorial.techaltum.com/Interview-Question-with-Ans.html) - [Javascript Tutorial](https://tutorial.techaltum.com/javascript.html) - [Javascript Variables](https://tutorial.techaltum.com/javascript-variables.html) - [Javascript data types](https://tutorial.techaltum.com/datatype-javascript.html) - [Javascript Operators](https://tutorial.techaltum.com/javascript-operators.html) - [Javascript Strings](https://tutorial.techaltum.com/javascript-string.html) - [Javascript Numbers](https://tutorial.techaltum.com/javascript-number.html) - [Javascript Functions](https://tutorial.techaltum.com/javascript-functions.html) - [Closure](https://tutorial.techaltum.com/js-closure.html) - [Callback Function](https://tutorial.techaltum.com/callback-function.html) - [Arrow Function](https://tutorial.techaltum.com/arrow-functions.html) - [Javascript If Else](https://tutorial.techaltum.com/javascript-if-else.html) - [Javascript Switch](https://tutorial.techaltum.com/javascript-switch.html) - [Javascript Try Catch](https://tutorial.techaltum.com/javascript-try-catch.html) - [Document Object Model](https://tutorial.techaltum.com/document-object-model.html) - [Javascript CSS](https://tutorial.techaltum.com/javascript-css.html) - [Javascript Animations](https://tutorial.techaltum.com/javascript-animate.html) - [Javascript Events](https://tutorial.techaltum.com/javascript-events.html) - [Javascript event listener](https://tutorial.techaltum.com/addeventlistener.html) - [Javascript Loops](https://tutorial.techaltum.com/javascript-loops.html) - [Javascript Arrays](https://tutorial.techaltum.com/javascript-arrays.html) - [Javascript Sets](https://tutorial.techaltum.com/javascript-sets.html) - [Javascript Objects](https://tutorial.techaltum.com/javascript-objects.html) - [Javascript Maps](https://tutorial.techaltum.com/javascript-maps.html) - [call, bind & apply methods](https://tutorial.techaltum.com/javascript-call-bind-apply-functions.html) - [Javascript JSON](https://tutorial.techaltum.com/javascript-json.html) - [Javascript Ajax](https://tutorial.techaltum.com/javascript-ajax.html) - [Fetch API](https://tutorial.techaltum.com/fetch-api.html) - [Javascript Timing Functions](https://tutorial.techaltum.com/javascript-timing-function.html) - [Javascript Date Object](https://tutorial.techaltum.com/javascript-date-object.html) - [Javascript Constructor](https://tutorial.techaltum.com/javascript-constructor.html) - [Javascript Class](https://tutorial.techaltum.com/javascript-class.html) - [Javascript Promise](https://tutorial.techaltum.com/javascript-promise.html) - [Async and Await Function](https://tutorial.techaltum.com/javascript-async-await.html) - [JS Destructuring](https://tutorial.techaltum.com/js-destructuring.html) - [Spread Operator](https://tutorial.techaltum.com/js-spread-operator.html) - [Rest Parameters](https://tutorial.techaltum.com/js-rest-parameters.html) - [Debouncing and Throttling](https://tutorial.techaltum.com/js-debouncing-and-throttling.html) - [JavaScript Modules](https://tutorial.techaltum.com/js-modules.html) - [JavaScript Generators](https://tutorial.techaltum.com/js-generator.html) - [Javascript Math Object](https://tutorial.techaltum.com/javascript-math-object.html) - [Javascript Console](https://tutorial.techaltum.com/javascript-console.html) - [Javascript Cookies](https://tutorial.techaltum.com/javascript-cookies.html) - [Javascript Window Object](https://tutorial.techaltum.com/javascript-window-object.html) - [Javascript Screen Object](https://tutorial.techaltum.com/javascript-screen-object.html) - [Javascript History](https://tutorial.techaltum.com/javascript-history.html) - [Javascript Location Object](https://tutorial.techaltum.com/javascript-location.html) - [Javascript Navigator Object](https://tutorial.techaltum.com/javascript-navigator.html) - [Javascript Regular Expression](https://tutorial.techaltum.com/javascript-regexp.html) - [Javascript Form Validation](https://tutorial.techaltum.com/javascript-form-validation.html) - [Canvas API](https://tutorial.techaltum.com/html5-canvas.html) - [Geolocation API](https://tutorial.techaltum.com/html5-geolocation.html) - [Local and Session Storage](https://tutorial.techaltum.com/local-and-session-storage.html) # JavaScript Functions Written By: [Avinash Malhotra](https://www.linkedin.com/in/avimalhotra/) Updated on 04-Nov-2025 - [←JavaScript Numbers](https://tutorial.techaltum.com/javascript-number.html "Javascript Numbers") - [Closure →](https://tutorial.techaltum.com/js-closure.html "Closure") JS Functions Tutorial rated by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 4\.9, based on 193 reviews 1. [Home](https://tutorial.techaltum.com/) 2. [Frontend](https://tutorial.techaltum.com/frontend.html) 3. [JavaScript](https://tutorial.techaltum.com/javascript.html) 4. [Functions](https://tutorial.techaltum.com/javascript-functions.html) 1. [Function Declaration](https://tutorial.techaltum.com/javascript-functions.html#declaration) 2. [Function Expression](https://tutorial.techaltum.com/javascript-functions.html#expression) 3. [Arrow Function](https://tutorial.techaltum.com/javascript-functions.html#arrow) 4. [Function Return value](https://tutorial.techaltum.com/javascript-functions.html#return) 5. [Parameters & Arguments](https://tutorial.techaltum.com/javascript-functions.html#parameters) 6. [Function Properties](https://tutorial.techaltum.com/javascript-functions.html#function-properties) 7. [IIFE](https://tutorial.techaltum.com/javascript-functions.html#iife) 8. [Video](https://tutorial.techaltum.com/javascript-functions.html#video) ## Function **Functions** are reusable blocks of code that perform a specific task. They help avoid repetition, can accept inputs (parameters), and return outputs. In JavaScript, functions are first-class, reference data types and are one of the core building blocks of the language. To call a function, use parentheses after its name, for example `sayHi()`. Built-in methods such as `alert()` or `parseInt()` are also functions and are invoked the same way. Functions can be user-defined or built-in (provided by the runtime). This article covers function declarations, expressions, arrow functions, parameters & arguments, IIFE, return values, and useful function properties.  JavaScript Functions JavaScript functions are **first-class objects**. Means they are very powerful in javascript as compared to other programming languages. They are even more powerful than objects. ### Why JavaScript Functions are first class objects? 1. Functions can be assigned to variables (Function Expression). 2. Functions can have properties and methods (like objects). 3. Functions can return functions (*High order function*). 4. Functions can have parameter function, [callbacks](https://tutorial.techaltum.com/callback-function.html) (*High order function*). **Functions** can be easily reused. To invoke a function, we can use events like click, hover, submit, focus, mousemove etc, or just call by function name followed by parentheses. *** ### How to define function? #### Function Declaration ``` <script> function add(){ // statements } </script> ``` #### Function Expression ``` <script> const add=function(){ // statements }; </script> ``` ### Call a Function To call a function in javascript, use function name followed by parenthesis. ``` <script> function sayHi(){ console.log('hello'); } sayHi(); </script> ``` ``` <script> const sayBye=function(){ console.log('bye bye'); }; sayBye(); </script> ``` *** *** ## Function Declarations **Function declaration** is the most commonly used method to declare functions in Javascript. A *function* keyword is started and followed by function name, then parentheses () and then code written inside curly brackets {}. Here is an example. ### How to declare function in javascript ``` function functionName(){ // statements } ``` ### Call a function To call or invoke a function, use function name followed by Parenthesis, i.e. ( ). For example, if function name is sayHi, use `sayHi()`. We can call a declared function after or before declaration. They are also known as **named function**. ### Function declaration example ``` <script> sayHello() // will work function sayHello(){ alert("Hello there"); } sayHello() // will work </script> <button onclick="sayHello()">Click</button> ``` Say Hello *** ## Function Expression Another way to create function is **function expression**. In function expression, a variable is declared and then assigned a anonymous function, as it does not have a name. They are not named functions, as they are stored inside a variable. **Function Expression** are only invoked after function. If we call a **function expression** before, an error will occur (function\_name is not defined). ``` <script> goodBye() // will not work, syntax error var goodBye=function(){ alert("Good Bye") }; goodBye() // will work </script> <button onclick="goodBye()">Click</button> ``` Say Bye *** ### Call a function on button click. To call a function on button click, use the example below. In first example, a function is created on button click. In Second example, an already built-in function ( myFunction) is invoked on button click. As function is used inside another function (addEventListener), no need to use parentheses. #### Call a function using onclick attribute ``` <script> function sayHi(){ alert("Hi"); } <script> <button onclick="sayHi()">Say Hi</button> ``` Expression functions are first created and then invoked. If we call an expression function before, an error will occur. Also semicolon is required after function expression. *** ## Arrow Functions **Arrow functions** are actually short form of [function expression](https://tutorial.techaltum.com/javascript-functions.html#expression). They are called arrow as they use arrow symbol, i.e. \=\> To call **arrow functions**, we have to declare function first and then call. **Arrow functions** were introduced in ES6. Its recommended to use arrow function as a [callback function](https://tutorial.techaltum.com/callback-function.html). ``` const myFunc1=(x,y)=>x+y; // 2 parameters const myFunc2=(x)=>x*2; // 1 parameter const myFunc3=x=>x*3; // 1 parameter ``` Know more about [Arrow Functions](https://tutorial.techaltum.com/arrow-functions.html) *** ## `this` keyword **this** keyword in function refers to the **current object**. In a function, **this keywords** value depends upon how the function is called. For any function, **this** keyword is window object, but in *strict mode*, **this** keyword is `undefined`. For Events, this keyword is element on which event is triggered. ### this in function Window {parent: Window, opener: null, top: Window, length: 6, frames: Window, …} ``` function sayHi(){ console.log(this); } sayHi() ``` ### this in strict mode undefined ``` "use strict"; function sayHi(){ console.log(this); } sayHi() ``` ### this in events ` <body>...</body>` ``` document.body.addEventListener("click",function(){ console.log(this); // this is body }); ``` ### Where not to use this? In **expression function**, `this` keyword refers to current object. But in **arrow function**, it is window object. For such cases, avoid using arrow functions for events. Window {parent: Window, opener: null, top: Window, length: 6, frames: Window, …} ``` document.body.addEventListener("click",()=>{console.log(this)}); ``` ` <body>...</body>` ``` document.body.addEventListener("click",function(){console.log(this)}); ``` *** *** ## Return value Each function returns a value. The default **return** value is undefined for all function without return. **return operator** is used to get a custom value in return when function is called or invoked. This could be a `string`, `number`, `function`, `array` or `object`. ### Function returns undefined ``` function sayHi(){ const x="Hello"; } sayHi(); // return undefined ``` ### Function returns string ``` function sayHi(){ return "hello"; } sayHi(); // return "hello" ``` ### Function returns number ``` function getNumber(){ return 2+3; } getNumber(); // return 5 ``` ### Function returns function Function can also returns a function. Both Functions that returns a function and callback ( function with argument function) are **high order functions**. See example ``` function sayHi(){ return function(){ return "hi"}; } sayHi(); // return function sayHi()(); // return "hi" ``` ### typeof function and return value **typeof** function is `"function"` , but **typeof** `function()` is datatype of return value. ``` typeof mean; // datatype of function typeof mean(); // datatype of return value ``` Use **return keyword** in function only once and at the end. Actually **return in function** block the code after return keyword. *** ## Parameters and Arguments A Function can have **parameters**. While declaration, they are called **parameters**, but when function is invoked, they are **arguments**. Parameters are used to provide dynamic values to function on runtime to get different output. Parameters could be of any datatype like string, number etc. The default parameter of function is `undefined`. ### Difference between parameters and arguments ``` function mean(x,y,z){ const sum =x+y+z; // x, y and z are parameters const a=sum/3; return a; } var i=mean(1,2,9); // 1,2,9 are arguments, and i is 4 var j=mean(2,3,4); // 2,3,4 are arguments, and i is 3 ``` ### Function parameter and argument examples #### Area of rectangle ``` function getArea(x,y){ return x*y; } getArea(2,3); // return 6 ``` #### Perimeter of rectangle ``` function getPerimeter(x,y){ return 2*(x+y); } getArea(2,3); // return 10 ``` #### Area of circle ``` function getArea(r){ return 3.14*r*r; } getArea(2); // return 12.56 ``` *** ### Default Parameter The default parameter of any function is *undefined*. Using a function without argument will return invalid result like NaN as default parameters are undefined. ``` function getArea(l,w){ return l*w; } getArea(); // return NaN ``` ### How to handle default parameters To **handle default parameters** in javascript, we can use *or* operator ( \|\| ) in function statement. ``` function getArea(l,w){ l=l || 0; w=w || 0; return l*w; } getArea(); // return 0 ``` ### Handle default parameters in ES6 In JavaScript ES6, we can use assignment operator (=) in parameters to handle **default parameters**. This will pick assign value if argument is not defined. ``` function getArea(l=0,w=0){ return l*w; } getArea(); // return 0 getArea(2,3); // return 6 ``` *** ## Function Properties **Functions** are first class objects in javascript, means they have both properties and methods. These properties are same for function declaration and expression functions. ### function.name **function.name** is a readonly property which returns name of the function. The name of function is always string. ``` function area1(){} const area2=function(){}; const area3=function area4(){}; area1.name // returns "area1" area2.name // returns "area2" area3.name // returns "area4" ``` ### function.length **function.length** is also a readonly property that returns total no of parameters used inside function. ``` function area1(x,y){ } function area2(x,y,z){ } area1.length // return 2 area2.length // return 3 ``` **name** and **length** are *readonly* properties of function. We can only read values, but we cannot change. ### custom property Apart from length and name, functions can have custom properties and methods. ``` function user(){ } user.brandname="Tech Altum"; user.location="Noida"; user.year=2012; user.getAge=function(){ return 2019-user.year }; user.name // return "user" user.brandname // return "Tech Altum" user.location // return "Noida" user.year // return 2012 user.getAge() // return 7 ``` Its better to use [JavaScript Objects](https://tutorial.techaltum.com/javascript-objects.html) to declare properties and methods instead of functions. See example ``` const user={ "name":"Tech Altum", "year":2012, "location":"Noida" } ``` *** ## Immediate Invoke Function **Immediate Invoke Function** or **self invoking function** are anonymous function who call themself. They are not assigned and named. That's why they are anonymous. But they call themself on page load. They are mainly used to keep variables local. ### Immediate Invoke Function Example ``` (function(){ // statement Statement }()); ``` ### Immediate Invoke Function with parameters ``` (function(x){ console.log("Hello", x ); }("user")); ``` It is recommended to use block scope {} with let instead of IIFE in ES6. *** ## Frontend Video Tutorial - [←Javascript Numbers](https://tutorial.techaltum.com/javascript-number.html "Javascript Numbers") - [Closure →](https://tutorial.techaltum.com/js-closure.html "Closure") *** *** Frontend Tutorial *** 1. [Frontend Tutorial](https://tutorial.techaltum.com/frontend.html) 2. [HTML Tutorial](https://tutorial.techaltum.com/HtmlBasics.html) 3. [HTML5 Tutorial](https://tutorial.techaltum.com/html5.html) 4. [CSS Tutorial](https://tutorial.techaltum.com/css.html) 5. [CSS3 Tutorial](https://tutorial.techaltum.com/css3.html) 6. [JavaScript](https://tutorial.techaltum.com/javascript.html) 7. [JQuery Tutorial](https://tutorial.techaltum.com/jquery.html) 8. [SASS Tutorial](https://tutorial.techaltum.com/sass.html) 9. [PSD to HTML](https://tutorial.techaltum.com/psd-to-html.html) 10. [Bootstrap](https://tutorial.techaltum.com/bootstrap.html) Backend Tutorial *** 1. [Node JS](https://tutorial.techaltum.com/nodejs.html) 2. [Asp.net](https://tutorial.techaltum.com/Asp.net.html) 3. [MVC](https://tutorial.techaltum.com/MVC.html) 4. [Linq](https://tutorial.techaltum.com/LINQ.html) 5. [WCF](https://tutorial.techaltum.com/wcf.html) 6. [Entity Framework](https://tutorial.techaltum.com/entityframework.html) 7. [PHP](https://tutorial.techaltum.com/PHP.html) 8. [Java](https://tutorial.techaltum.com/java-tutorial.html) 9. [Python](https://tutorial.techaltum.com/python-tutorial.html) 10. [Ruby](https://tutorial.techaltum.com/ruby-language-tutorial.html) *** Others Tutorials *** 1. [Web Designing](https://tutorial.techaltum.com/webdesigning.html) 2. [Angular](https://tutorial.techaltum.com/angular.html) 3. [C++](https://tutorial.techaltum.com/c-plus-plus-tutorial.html) 4. [MongoDB](https://tutorial.techaltum.com/mongodb.html) 5. [Selenium](https://tutorial.techaltum.com/SeleniumTutorial.html) 6. [Linux](https://tutorial.techaltum.com/Linux.html) 7. [Hadoop](https://tutorial.techaltum.com/hadoop.html) 8. [Android](https://tutorial.techaltum.com/android-tutorial.html) 9. [R language](https://tutorial.techaltum.com/r-language-tutorial.html) 10. [Video Tutorial](https://tutorial.techaltum.com/video-tutorial.html) Interview Questions *** 1. [UI Interview Questions](https://tutorial.techaltum.com/ui-interview-questions.html) 2. [JavaScript Interview Questions](https://tutorial.techaltum.com/javascript-interview-questions.html) 3. [HTML Interview Questions](https://tutorial.techaltum.com/html-interview-question-p1.html) 4. [C\# Interview Questions](https://tutorial.techaltum.com/Interview-Question-on-C-sharp-part-1.html) 5. [SQL Interview Questions](https://tutorial.techaltum.com/sql-interview-questions.html) 6. [MVC Interview Questions](https://tutorial.techaltum.com/Interview-Ques-on-MVC-part-1.html) 7. [Angular JS Interview Questions](https://tutorial.techaltum.com/angularjs-interview-questions.html) 8. [Online Quiz](https://tutorial.techaltum.com/Online-Test-for-interview-preparation.html) *** Tech Altum Tutorial is run and maintained by [Tech Altum](https://www.techaltum.com/), IT Training Institute in Noida (An IIT Alumni Institute) established in 2012. For Video Tutorials, Subscribe our Youtube Channel. [Tech Altum Youtube Channel](https://www.youtube.com/c/techaltumtutorial "Tech Altum Youtube Channel"). Our Popular Courses Frontend Development 1. [Frontend Web Development](https://www.techaltum.com/frontend-developer-course.html) 2. [Full Stack Web Development](https://www.techaltum.com/fullstack-web-development.html) 3. [Advance JavaScript with ES6 to ES14](https://www.techaltum.com/javascript-training-in-noida.html) 4. [Web Designing & UI Development](https://www.techaltum.com/webdesigningtraininginnoida.html) 5. [React](https://www.techaltum.com/react-js-training-in-noida.html) 6. [Angular](https://www.techaltum.com/angular-training-in-noida.html) Backend Development 1. [Node JS](https://www.techaltum.com/node-js-training-in-noida.html) 2. [Java](https://www.techaltum.com/javatraininginnoida.html) 3. [Python](https://www.techaltum.com/python-training-in-noida.html) 4. [Php](https://www.techaltum.com/phptraininginnoida.html) 5. [Asp.net](https://www.techaltum.com/asp.nettraininginnoida.html) All Classroom and Online classes are conducted by 12+ Exp and Certified Alumni of IIT or Corporate Trainers having minimum 10+ experience in Teaching and Development.