🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:
Response:
Calculated Shard: 17 (from laksa087)

2. Crawled Status Check

Query:
Response:

3. Robots.txt Check

Query:
Response:

4. Spam/Ban Check

Query:
Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

đźš«
NOT INDEXABLE
âś…
CRAWLED
7 months ago
đźš«
ROBOTS BLOCKED

Page Info Filters

FilterStatusConditionDetails
HTTP statusPASSdownload_http_code = 200HTTP 200
Age cutoffFAILdownload_stamp > now() - 6 MONTH7.7 months ago
History dropPASSisNull(history_drop_reason)No drop reason
Spam/banPASSfh_dont_index != 1 AND ml_spam_score = 0ml_spam_score=0
CanonicalPASSmeta_canonical IS NULL OR = '' OR = src_unparsedNot set

Page Details

PropertyValue
URLhttps://www.makeuseof.com/javascript-creating-functions/
Last Crawled2025-08-24 22:25:08 (7 months ago)
First Indexed2023-02-19 19:51:47 (3 years ago)
HTTP Status Code200
Meta TitleCreating Functions in JavaScript
Meta DescriptionJavaScript is an unusual language, with many complexities. Naturally, it gives you more than one way to make a function.
Meta Canonicalnull
Boilerpipe Text
A function is a reusable piece of code that runs when you invoke it. Functions allow you to reuse code, making it more modular and easier to maintain. There are several ways to create functions in JavaScript. Here you will learn the different ways to create functions and how to use them. Function Declarations: The Straightforward Way One way you can create functions in JavaScript is through function declarations. A function declaration is a function in JavaScript that follows the syntax below. function functionName ( parameters ) { return "This is a function declaration" ; } The components of the code block above include: The function keyword: This keyword declares a function. functionName : This is the name of the function. In practice, it should be as descriptive and meaningful as possible, indicating what the function does. parameters : This represents the function parameters. Parameters are an optional list of variables that you can pass to a function when you call it. The function body: This contains the code that the function will run when you call it. It's surrounded by curly braces {} and can contain any valid JavaScript code. The return statement: This statement stops a function’s execution and returns the specified value. In the case above, calling the function would return the string “This is a function declaration”. For example, the function declaration below takes three numbers as parameters and returns their sum. function addThreeNumbers ( a, b, c ) { return a + b + c; } To call a function declaration in JavaScript, write the function name followed by a set of parentheses () . If the function takes any parameters, pass them as arguments within the parentheses. For example: addThreeNumbers( 1 , 2 , 3 ) The code block above calls the addThreeNumber functions and passes 1, 2, and 3 as arguments to the function. If you run this code, it will return the value 6. JavaScript hoists function declarations, meaning you can call them before you define them. For example: isHoisted(); function isHoisted ( ) { console .log( "Function is hoisted" ); return true ; } As shown in the code block above, calling isHoisted before defining it would not throw an error. Function Expressions: Functions as Values In JavaScript, you can define a function as an expression. You can then assign the function value to a variable or use it as an argument to another function. They are also known as anonymous functions since they have no names, and you can only call them from the variable you assigned them to. Below is the syntax for a function expression: const functionName = function ( ) { return "Function expression" ; }; To call a function expression in JavaScript, write the variable name you assigned to the function followed by a set of parentheses () . If the function takes any parameters, pass them as arguments within the parentheses. For example: functionName(); Function expressions are handy when creating functions that run in other functions. Typical examples include event handlers and their callbacks. For example: button.addEventListener( "click" , function ( event ) { console .log( "You clicked a button!" ); }); The example above used a function expression that takes an event argument as a callback to the addEventListener function. You don't have to call the function explicitly when you use a function expression as a callback. It automatically gets called by its parent function. In the case above, when the event listener receives a click event, it calls the callback function and passes the event object as an argument. Unlike function declarations, function expressions are not hoisted, so you can’t call them before you define them. Trying to access a function expression before you define it will result in a ReferenceError . For example: isHoisted(); const isHoisted = function ( ) { console .log( "Function is hoisted" ); }; Arrow Functions: Compact and Limited ES6 introduced a shorthand for writing anonymous functions in JavaScript called arrow functions. They have a concise syntax that can make your code more readable, especially when dealing with short, single-line functions. Unlike other methods of creating functions, arrow functions don't require the function keyword. An arrow function expression consists of three parts: A pair of parentheses ( () ) containing the parameters. You can omit the parentheses if the function only has one parameter. An arrow ( => ), which consists of an equal sign ( = ) and a greater than sign ( > ). A pair of curly braces containing the function body. You can omit the curly braces if the function consists of a single expression. For example: const functionName = parameter => console .log( "Single parameter arrow function" ) const functionName = ( parameter_1, parameter_2 ) => { return "Multiple parameter arrow function" }; When you omit the curly braces, the arrow function implicitly returns the single expression, so there’s no need for the return keyword. On the other hand, if you don't omit the curly braces, you have to explicitly return a value using the return keyword. Arrow functions also have a different this binding compared to regular functions. In regular functions, the value of this depends on how you call the function. In an arrow function, this is always bound to the this value of the surrounding scope. For example: const foo = {   name: "Dave" ,   greet: function ( ) {     setTimeout( () => { console .log( `Hello, my name is ${ this .name} ` );     }, 1000 );   }, }; foo.greet(); In the example above, the arrow function inside the greet method has access to this.name , even though the setTimeout function calls it. A normal function would have its this bound to the global object. Immediately Invoked Function Expressions (IIFEs) As the name implies, an immediately invoked function (IIFE) is a function that runs as soon as its defined. Here’s the structure of an IIFE: ( function ( ) { })(); ( () => { })(); ( function ( param_1, param_2 ) { console .log(param_1 * param_2); })( 2 , 3 ); An IIFE consists of a function expression wrapped inside a pair of parentheses. Follow it with a pair of parentheses outside the enclosure to invoke the function. You can use IIFEs to create scopes, hide implementation details, and share data between multiple scripts. They were once used as a module system in JavaScript . Creating a Function in Many Different Ways Understanding how to create functions in JavaScript is crucial. This is true for a basic function that carries out a simple computation or a sophisticated function that interacts with other parts of your code. You can use the techniques discussed above to build functions in JavaScript and structure and organize your code. Select the approach that best suits your demands, as each has various benefits and applications.
Markdown
Menu [![MUO logo](https://static0.makeuseofimages.com/assets/images/muo-logo-full-colored-light.svg?v=3.0)](https://www.makeuseof.com/) Sign in now Close - - PC & Mobile Submenu - [Windows](https://www.makeuseof.com/category/windows/) - [Android](https://www.makeuseof.com/category/google-android/) - [iPhone](https://www.makeuseof.com/category/ios/) - Technical Submenu - [Tech Explained](https://www.makeuseof.com/category/technology-explained/) - [Security](https://www.makeuseof.com/category/security/) - Lifestyle Submenu - [Productivity](https://www.makeuseof.com/category/productivity/) - [Creative](https://www.makeuseof.com/category/creative/) - [Entertainment](https://www.makeuseof.com/category/entertainment/) Submenu - [Streaming](https://www.makeuseof.com/category/streaming/) - [Internet](https://www.makeuseof.com/category/web-based/) - [Home](https://www.makeuseof.com/category/home/) - [News](https://www.makeuseof.com/category/news/) - [Free Cheat Sheets](https://www.makeuseof.com/tag/cheat-sheet/) - [Sign in](https://www.makeuseof.com/javascript-creating-functions/) - [Newsletter](https://www.makeuseof.com/page/newsletter/) [Windows 11](https://www.makeuseof.com/tag/windows-11/) [ChatGPT](https://www.makeuseof.com/tag/chatgpt/) [iPhone Help](https://www.makeuseof.com/tag/iphone-troubleshooting/) [Facebook Help](https://www.makeuseof.com/tag/facebook/) [Avoiding Scams](https://www.makeuseof.com/tag/scam/) [Emojis Explained](https://www.makeuseof.com/top-emojis-explained-cheat-sheet/) [Free Movie Streaming](https://www.makeuseof.com/free-movie-streaming-sites-no-sign-up/) Close # Creating Functions in JavaScript ![4](https://static1.makeuseofimages.com/wordpress%2Fwp-content%2Fauthors%2F649ec93f1b7b1-david-client-1-colored.jpg?fit=crop&w=90&h=90) By [David Ekete](https://www.makeuseof.com/author/david-ekete/) Published Feb 18, 2023 Follow Followed Like Link copied to clipboard [Sign in to your MUO account]() ![A close-up of some example JavaScript code showing an anonymous function.](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2023/02/example-javascript-code.jpg) No Attribution - \[Unsplash\](https://unsplash.com/photos/g5jpH62pwes) A function is a reusable piece of code that runs when you invoke it. Functions allow you to reuse code, making it more modular and easier to maintain. There are several ways to create functions in JavaScript. Here you will learn the different ways to create functions and how to use them. ## Function Declarations: The Straightforward Way One way you can create functions in JavaScript is through function declarations. A function declaration is a function in JavaScript that follows the syntax below. ``` ``` The components of the code block above include: - The **function** keyword: This keyword declares a function. - **functionName**: This is the name of the function. In practice, it should be as descriptive and meaningful as possible, indicating what the function does. - **parameters**: This represents the function parameters. Parameters are an optional list of variables that you can pass to a function when you call it. - The function body: This contains the code that the function will run when you call it. It's surrounded by curly braces **{}** and can contain any valid JavaScript code. - The **return** statement: This statement stops a function’s execution and returns the specified value. In the case above, calling the function would return the string “This is a function declaration”. For example, the function declaration below takes three numbers as parameters and returns their sum. ``` ``` To call a function declaration in JavaScript, write the function name followed by a set of parentheses **()**. If the function takes any parameters, pass them as arguments within the parentheses. For example: ``` addThreeNumbers(1, 2, 3) // 6 ``` The code block above calls the **addThreeNumber** functions and passes 1, 2, and 3 as arguments to the function. If you run this code, it will return the value 6. [JavaScript hoists](https://www.makeuseof.com/javascript-hoisting/) function declarations, meaning you can call them before you define them. For example: ``` ``` As shown in the code block above, calling **isHoisted** before defining it would not throw an error. ## Function Expressions: Functions as Values In JavaScript, you can define a function as an expression. You can then assign the function value to a variable or use it as an argument to another function. They are also known as anonymous functions since they have no names, and you can only call them from the variable you assigned them to. Below is the syntax for a function expression: ``` ``` To call a function expression in JavaScript, write the variable name you assigned to the function followed by a set of parentheses **()**. If the function takes any parameters, pass them as arguments within the parentheses. For example: ``` functionName(); // Function expression ``` Function expressions are handy when creating functions that run in other functions. Typical examples include event handlers and their callbacks. For example: ``` ``` The example above used a function expression that takes an **event** argument as a callback to the **addEventListener** function. You don't have to call the function explicitly when you use a function expression as a callback. It automatically gets called by its parent function. In the case above, when the event listener receives a **click** event, it calls the callback function and passes the **event** object as an argument. Unlike function declarations, function expressions are not hoisted, so you can’t call them before you define them. Trying to access a function expression before you define it will result in a **ReferenceError**. For example: ``` ``` ## Arrow Functions: Compact and Limited ES6 introduced a shorthand for writing anonymous functions in JavaScript called arrow functions. They have a concise syntax that can make your code more readable, especially when dealing with short, single-line functions. Unlike other methods of creating functions, arrow functions don't require the **function** keyword. An arrow function expression consists of three parts: - A pair of parentheses (**()**) containing the parameters. You can omit the parentheses if the function only has one parameter. - An arrow (**\=\>**), which consists of an equal sign (**\=**) and a greater than sign (**\>**). - A pair of curly braces containing the function body. You can omit the curly braces if the function consists of a single expression. For example: ``` ``` When you omit the curly braces, the arrow function implicitly returns the single expression, so there’s no need for the **return** keyword. On the other hand, if you don't omit the curly braces, you have to explicitly return a value using the **return** keyword. Arrow functions also have a different **this** binding compared to regular functions. In regular functions, the value of **this** depends on how you call the function. In an arrow function, **this** is always bound to the **this** value of the surrounding scope. For example: ``` ``` In the example above, the arrow function inside the **greet** method has access to **this.name**, even though the **setTimeout** function calls it. A normal function would have its **this** bound to the global object. ## Immediately Invoked Function Expressions (IIFEs) As the name implies, an immediately invoked function (IIFE) is a function that runs as soon as its defined. Here’s the structure of an IIFE: ``` ``` An IIFE consists of a function expression wrapped inside a pair of parentheses. Follow it with a pair of parentheses outside the enclosure to invoke the function. You can use IIFEs to create scopes, hide implementation details, and share data between multiple scripts. They were once used as a [module system in JavaScript](https://www.makeuseof.com/javascript-module-systems/). ## Creating a Function in Many Different Ways Understanding how to create functions in JavaScript is crucial. This is true for a basic function that carries out a simple computation or a sophisticated function that interacts with other parts of your code. You can use the techniques discussed above to build functions in JavaScript and structure and organize your code. Select the approach that best suits your demands, as each has various benefits and applications. - [Programming](https://www.makeuseof.com/category/programming/ "Programming") - [JavaScript](https://www.makeuseof.com/tag/javascript/ "JavaScript") - [Programming](https://www.makeuseof.com/tag/programming/ "Programming") Follow Followed Like Share [Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.makeuseof.com%2Fjavascript-creating-functions%2F%2F&src=sdkpreparse) [X](https://twitter.com/intent/tweet?text=Creating%20Functions%20in%20JavaScript&url=https%3A%2F%2Fwww.makeuseof.com%2Fjavascript-creating-functions%2F) [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.makeuseof.com%2Fjavascript-creating-functions%2F&title=Creating%20Functions%20in%20JavaScript&source=www.makeuseof.com&summary=JavaScript%20is%20an%20unusual%20language%2C%20with%20many%20complexities.%20Naturally%2C%20it%20gives%20you%20more%20than%20one%20way%20to%20make%20a%20function.) [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.makeuseof.com%2Fjavascript-creating-functions%2F) [Flipboard](http://share.flipboard.com/bookmarklet/popout?v=2&title=Creating%20Functions%20in%20JavaScript&url=https%3A%2F%2Fwww.makeuseof.com%2Fjavascript-creating-functions%2F&utm_campaign=tools&utm_medium=article-share&utm_source=www.makeuseof.com) [Copy link]() [Email](<mailto:?Subject=Creating Functions in JavaScript&Body=Check%20this%20out%21%0Ahttps://www.makeuseof.com/javascript-creating-functions/>) Close Recommended [![javascript-arrow-functions](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2020/02/javascript-arrow-functions.jpg?q=50&fit=crop&w=420&h=260&dpr=1.5)](https://www.makeuseof.com/tag/javascript-arrow-functions/) ##### [JavaScript Arrow Functions Can Make You a Better Developer](https://www.makeuseof.com/tag/javascript-arrow-functions/ "JavaScript Arrow Functions Can Make You a Better Developer") [JavaScript](https://www.makeuseof.com/tag/javascript/ "JavaScript") Want to be better at web development? Arrow functions, added to JavaScript ES6, give you two ways to create functions for web apps. Posts Feb 10, 2020 [![Boox Palma 2 on top of a book](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/wm/2025/07/boox-palma-2-on-top-of-a-book.jpg?q=50&fit=crop&w=420&h=260&dpr=1.5)](https://www.makeuseof.com/bookmory-reading-list-into-visual-tracker/) ##### [This App Turns Your Reading List Into a Visual Tracker You’ll Actually Want to Use](https://www.makeuseof.com/bookmory-reading-list-into-visual-tracker/ "This App Turns Your Reading List Into a Visual Tracker You’ll Actually Want to Use") [Reading](https://www.makeuseof.com/tag/reading/ "Reading") The one app every bookworm needs to finally finish their TBR. Posts [1](https://www.makeuseof.com/bookmory-reading-list-into-visual-tracker/#threads "Total Posts") 1 day ago [![Free Books Websites Featured-Image](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2025/08/free-books-websites-featured-image.jpg?q=50&fit=crop&w=420&h=260&dpr=1.5)](https://www.makeuseof.com/get-free-books-sites/) ##### [I Get All the Free Books I Want, Thanks to These Sites](https://www.makeuseof.com/get-free-books-sites/ "I Get All the Free Books I Want, Thanks to These Sites") [Reading](https://www.makeuseof.com/tag/reading/ "Reading") Grab free classics, indie gems, and audiobooks from these legal sites. Posts 2 days ago [![Soundbar and TV](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2025/08/soundbar-and-tv.png?q=50&fit=crop&w=420&h=260&dpr=1.5)](https://www.makeuseof.com/soundbar-setting-clear-dialogue/) ##### [I Toggled This One Soundbar Setting and Now I Can Hear Every Word Clearly](https://www.makeuseof.com/soundbar-setting-clear-dialogue/ "I Toggled This One Soundbar Setting and Now I Can Hear Every Word Clearly") [Soundbars](https://www.makeuseof.com/tag/sound-bars/ "Soundbars") The fix was buried in one tiny toggle. Posts 6 hours ago [![gallery labs on samsung gallery app](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/wm/2025/08/gallery-labs-on-samsung-gallery-app.png?q=50&fit=crop&w=420&h=260&dpr=1.5)](https://www.makeuseof.com/secret-menu-unlocks-new-gallery-app-features-samsung-galaxy-phone/) ##### [This Secret Menu Unlocks New Gallery App Features on Your Galaxy Phone](https://www.makeuseof.com/secret-menu-unlocks-new-gallery-app-features-samsung-galaxy-phone/ "This Secret Menu Unlocks New Gallery App Features on Your Galaxy Phone") [Samsung](https://www.makeuseof.com/tag/samsung/ "Samsung") I didn't even know this secret menu existed until recently\! Posts 10 hours ago [![A Windows laptop is playing Black Mirror on Netflix](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/wm/2025/08/a-windows-laptop-is-playing-black-mirror-on-netflix.jpg?q=50&fit=crop&w=420&h=260&dpr=1.5)](https://www.makeuseof.com/iconic-tech-movies-series/) ##### [6 Films and TV Shows That Every Tech Lover Has to Watch Once](https://www.makeuseof.com/iconic-tech-movies-series/ "6 Films and TV Shows That Every Tech Lover Has to Watch Once") [Movie Recommendations](https://www.makeuseof.com/tag/movie-recommendations/ "Movie Recommendations") These picks will reboot how you see technology. Posts 1 day ago - ### Technology Explained - ### PC & Mobile [![USB-C port on the Google Pixel 8a](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/wm/2024/07/usb-c-port-on-the-google-pixel-8a.jpg?q=49&fit=crop&w=200&h=140&dpr=2)](https://www.makeuseof.com/i-plugged-random-usb-c-devices-into-my-phone-heres-what-worked/) ##### [I Plugged 10 Random USB-C Devices Into My Phone—Here's What Actually Worked](https://www.makeuseof.com/i-plugged-random-usb-c-devices-into-my-phone-heres-what-worked/ "I Plugged 10 Random USB-C Devices Into My Phone—Here's What Actually Worked") 3 hours ago [![AI Chatbots open in multiple tabs](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/wm/2025/08/stack-ai-chatbots-featured.JPG?q=49&fit=crop&w=200&h=140&dpr=2)](https://www.makeuseof.com/stack-free-chatbots-never-pay-for-ai/) ##### [I Stack Free Chatbots So I Never Pay a Cent for AI](https://www.makeuseof.com/stack-free-chatbots-never-pay-for-ai/ "I Stack Free Chatbots So I Never Pay a Cent for AI") 4 hours ago [![Pi App onboarding screen on Android](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/wm/2025/08/pi-app-featured.JPG?q=49&fit=crop&w=200&h=140&dpr=2)](https://www.makeuseof.com/chatgpt-voice-mode-dumb-try-this/) ##### [ChatGPT's Voice Mode Feels So Dumb—Try This One Instead](https://www.makeuseof.com/chatgpt-voice-mode-dumb-try-this/ "ChatGPT's Voice Mode Feels So Dumb—Try This One Instead") 1 day ago [See More](https://www.makeuseof.com/category/technology-explained/) [![windows recovery environment on laptop screen.](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/wm/2025/08/windows-recovery-environment-on-laptop-screen.jpg?q=49&fit=crop&w=200&h=140&dpr=2)](https://www.makeuseof.com/knowing-this-one-windows-startup-trick-saved-me-from-dangerous-malware/) ##### [Knowing This One Windows Startup Trick Saved Me From Dangerous Malware](https://www.makeuseof.com/knowing-this-one-windows-startup-trick-saved-me-from-dangerous-malware/ "Knowing This One Windows Startup Trick Saved Me From Dangerous Malware") 16 minutes ago [![iPhone 11 and a feature phone placed on a blue background](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/wm/2025/08/iphone-11-and-a-feature-phone-placed-on-a-blue-background.png?q=49&fit=crop&w=200&h=140&dpr=2)](https://www.makeuseof.com/dumb-phone-vs-smartphone-why-use-both/) ##### [Despite Having a Smartphone, I Always Carry A Dumb Phone—Here’s Why](https://www.makeuseof.com/dumb-phone-vs-smartphone-why-use-both/ "Despite Having a Smartphone, I Always Carry A Dumb Phone—Here’s Why") 2 hours ago [![Dell monitor showing Windows 10 desktop](https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2025/03/dell-monitor-showing-windows-10-desktop.jpg?q=49&fit=crop&w=200&h=140&dpr=2)](https://www.makeuseof.com/sticking-with-windows-10-until-2030-plan/) ##### [I'm Sticking With Windows 10 Until 2030—Here's My Plan](https://www.makeuseof.com/sticking-with-windows-10-until-2030-plan/ "I'm Sticking With Windows 10 Until 2030—Here's My Plan") 4 hours ago [See More](https://www.makeuseof.com/category/pc-mobile/) [![MUO logo](https://static0.makeuseofimages.com/assets/images/muo-logo-symbol-white.svg?v=2.4)](https://www.makeuseof.com/) - [Join Our Team](https://www.makeuseof.com/work-with-us/) - [Our Audience](https://www.makeuseof.com/page/advertise/) - [About Us](https://www.makeuseof.com/page/about/) - [Press & Events](https://www.makeuseof.com/page/press-events/) - [Contact Us](https://www.makeuseof.com/contact/) - Follow Us [![Valnet Logo](https://static0.makeuseofimages.com/assets/images/valnet-logo-icon-white.svg?v=2.4)](https://www.valnetinc.com/en/) - [Advertising](https://www.valnetinc.com/en/advertising) - [Careers](https://www.valnetinc.com/en/careers) - [Terms](https://www.valnetinc.com/en/terms-of-use) - [Privacy](https://www.valnetinc.com/en/privacy-policy) - [Policies](https://www.valnetinc.com/en/editorial-integrity) [MUO](https://www.makeuseof.com/) is part of the [Valnet Publishing Group](https://www.valnetinc.com/en/) Copyright © 2025 Valnet Inc.
Readable Markdownnull
Shard17 (laksa)
Root Hash8015183094204371817
Unparsed URLcom,makeuseof!www,/javascript-creating-functions/ s443