JavaScript functions are an essential aspect of programming, allowing developers to encapsulate reusable blocks of code and enhance the modularity and readability of their applications.
This cheat sheet aims to provide a comprehensive tabular format to quickly reference and understand the key concepts and syntax related to JavaScript functions.
| No. | Topic | Description and Syntax | Example |
|---|---|---|---|
| 1. | Function Declaration | Declares a named function that can be called later. Syntax: function functionName(parameters) { … }; | function greet(name) { return “Hello, ” + name; } Input: greet(“John”); Output: “Hello, John” |
| 2. | Invoking a Function | Calls a function, passing any required arguments. Syntax: functionName(arguments); | function sayHello() { console.log(“Hello!”); } Input: sayHello(); Output: Prints “Hello!” to the console |
| 3. | Return Statement | Specifies the value to be returned by a function. Syntax: return value; | function sum(a, b) { return a + b; } Input: sum(2, 3); Output: 5 |
| 4. | Anonymous Functions | Functions without a specified name, are commonly used for callback functions or IIFE. | |
| 5. | Function Expression | Assigns an anonymous function to a variable. Syntax: const functionName = function(parameters) { … }; | const multiply = function(a, b) { return a * b; } Input: multiply(2, 3); Output: 6 |
| 6. | Named Function Expressions | Assigns a name to a function expression, useful for self-reference or debugging. Syntax: const functionName = function name() { … }; | const factorial = function fact(n) { … } Input: factorial(5); Output: Calculates the factorial of 5 |
| 7. | Arrow Function | A concise syntax for function expressions using the arrow (=>) notation. Syntax: const functionName = (parameters) => { … }; | const square = (num) => num * num; Input: square(4); Output: 16 |
| 8. | Default Parameters | Assigns default values to parameters if no argument is provided. Syntax: (param1 = defaultValue, param2) => { … }; | const greet = (name = “Stranger”) => “Hello, ” + name; Input: greet(); Output: “Hello, Stranger” |
| 9. | Rest Parameters | Captures multiple arguments into an array-like structure using the rest operator (…). Syntax: (param1, …rest) => { … }; | const sum = (first, …rest) => first + rest.reduce((acc, cur) => acc + cur, 0); Input: sum(1, 2, 3, 4); Output: 10 |
| 10. | Spread Syntax | Expands an array into individual elements, suitable for function calls or array literals. Syntax: functionName(…array); | const numbers = [1, 2, 3]; Input: Math.max(…numbers); Output: 3 |
| 11. | First-Class Functions | Functions are treated as first-class citizens, allowing them to be assigned to variables and passed as arguments or returned from other functions. | |
| 12. | Higher-Order Functions | Functions that can accept other functions as arguments or return them. Syntax: const higherOrder = () => { return () => { … } } | const withLogging = (func) => { … }; Input: const loggedFunc = withLogging(someFunction); Output: Function someFunction wrapped with logging capabilities. |
| 13. | Callback Functions | Passes a function as an argument to another function, allowing it to be called back later. Syntax: functionName(callback); | function fetchData(callback) { … } Input: fetchData(displayData); Output: Invokes the `displayData` function. |
| 14. | Pure Functions | Functions that always produce the same output for the same input, without any side effects. | |
| 15. | Immediately Invoked Function Expressions (IIFE) | Executes a function immediately after its declaration. Syntax: (function() { … })() | (function() { console.log(“Hello!”); })() Output: Prints “Hello!” to the console |
| 16. | Function Scope | Variables declared within a function are only accessible inside that function’s scope. | console.log(carName); // Output: carName is not defined. function myFunction() { let carName = “Volvo”; console.log(carName); // local variable hence can use. } console.log(carName); // Output: carName is not defined. Explanation: carName is declared under the local scope of the function hence can not access it outside of the function. |
| 17. | Lexical Scope | Functions can access variables defined in their outer (enclosing) scope. | |
| 18. | Closures | A combination of a function and its surrounding state (lexical environment). | |
| 19. | Recursion | A function that calls itself, useful for solving problems that can be broken down into smaller sub-problems. | function sum(number) { if ( number === 0 ) { return 0; } return number + sum(number – 1); } sum(10); |
| 20. | Function Chaining | Invoking multiple methods on the return value of a function to achieve a concise and chained syntax. Syntax: functionName().method1().method2()... | array.filter().map().reduce(); Performs a series of operations on an array. |
Conclusion: JavaScript functions are the building blocks of a robust and modular codebase. By understanding the syntax and concepts presented in this tabular cheat sheet, you can leverage the power of JavaScript functions to create efficient and scalable applications. Refer to the examples provided to see how each concept can be applied in practice.
Remember, practice makes perfect, so don’t hesitate to dive into coding exercises and real-world projects to solidify your understanding and master the art of working with JavaScript functions.
Happy coding!
Visit Techtalkbook to find more related topics.