**Course Title:** Modern JavaScript Programming: From Fundamentals to Full-Stack Development **Section Title:** Control Structures and Functions **Topic:** Defining and invoking functions (function expressions, declarations, and arrow functions) ### Introduction to Functions In JavaScript, functions are blocks of code that can be executed multiple times from different parts of your program. They are a fundamental part of any programming language and are used to perform specific tasks, make your code more modular, and reduce repetition. ### Defining Functions There are three ways to define a function in JavaScript: function declarations, function expressions, and arrow functions. #### Function Declarations A function declaration consists of the `function` keyword, followed by the name of the function, a list of parameters in parentheses, and a block of code to be executed. ```javascript function greet(name) { console.log(`Hello, ${name}!`); } ``` Function declarations are "hoisted" by JavaScript, meaning that they can be called before they are defined. ```javascript greet("John"); // Hello, John! function greet(name) { console.log(`Hello, ${name}!`); } ``` #### Function Expressions A function expression is a function that is assigned to a variable. Function expressions are not hoisted, so they must be defined before they are called. ```javascript const sum = function(x, y) { return x + y; } console.log(sum(2, 3)); // 5 ``` Function expressions can also be anonymous, meaning they do not have a name. ```javascript const sum = function(x, y) { return x + y; } console.log(sum(2, 3)); // 5 ``` #### Arrow Functions Arrow functions are a concise way to define small, one-line functions. They were introduced in ECMAScript 2015 (ES6) and have since become a popular way to define functions in modern JavaScript. ```javascript const sum = (x, y) => x + y; console.log(sum(2, 3)); // 5 ``` Arrow functions do not have their own `this` context, so they are often used when you need to preserve the `this` context of the surrounding code. ```javascript const person = { name: "John", age: 30, sayHello: () => console.log(`Hello, my name is ${this.name}.`) }; person.sayHello(); // Hello, my name is undefined. ``` ### Invoking Functions To invoke a function, you simply need to call it by its name, followed by parentheses containing any required arguments. ```javascript function greet(name) { console.log(`Hello, ${name}!`); } greet("Jane"); // Hello, Jane! ``` Functions can also be invoked as methods on objects, in which case the `this` keyword refers to the object the function is invoked on. ```javascript const person = { name: "John", sayHello: function() { console.log(`Hello, my name is ${this.name}.`); } }; person.sayHello(); // Hello, my name is John. ``` ### Practical Takeaways * Use function declarations when you need to define a function that can be called before it is defined. * Use function expressions when you need to define a function that is assigned to a variable or passed as an argument to another function. * Use arrow functions when you need to define a small, one-line function that preserves the `this` context of the surrounding code. * Use the `this` keyword sparingly, as it can lead to confusing code. ### External Resources * [Mozilla Developer Network: Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) * [W3Schools: JavaScript Functions](https://www.w3schools.com/js/js_functions.asp) Do you have any questions or need further clarification on any of the concepts covered in this topic? Leave a comment below and we'll do our best to help. In the next topic, we'll be covering **Understanding scopes (global, function, block) and closures**. Make sure to review the material before moving on to ensure a solid understanding of the fundamentals.