In JavaScript, a function is a block of reusable code designed to perform a specific task when invoked or 'called'. Consider a scenario in which we need to compute something or create a pop-up notification every time a user clicks on a button. In such situations, we would enclose the necessary code within a function and invoke it whenever the button is clicked.

Here is an example of defining a function named sayHello:

JavaScript
Copy to clipboard
1// a function to say hello
2function sayHello() {
3  // code inside here runs when the function is called
4  console.log("Hello, world!");
5}

In this function, named sayHello, we print "Hello, world!" to the console when the function is invoked or called.

You have learned to define or declare a straightforward function in JavaScript. This is the initial building block in creating reusable code blocks.

To utilize a function, we have to invoke or 'call' it by appending parentheses () to the function's name. This process resembles joining a teleconference using a unique meeting link. Just as you join the meeting only when you click the link, the code inside the function is executed only when the function is called.

Let's invoke our sayHello function:

JavaScript
Copy to clipboard
1sayHello();  // Invokes the function, outputting: "Hello, world!"

Here, sayHello(); is a function call informing JavaScript to execute the code block within the sayHello function.

Parameters provide a function with its inputs, significantly enhancing the function's reusability. It's akin to injecting some intelligence into a function, creating a lightbulb moment. Consider a function that calculates the area of a circle. Such a function would only be useful if it could compute the area for any circle, regardless of its radius, and not just for a circle with a fixed radius.

Observe the following function that greets a person using their name:

JavaScript
Copy to clipboard
1// a function that greets a person by name
2function greetPerson(name) {
3  console.log("Hello, " + name + "!");
4}
5
6// invoking the function with "Alice" as an argument
7greetPerson("Alice");  // Outputs: "Hello, Alice!"

In this function, name is a parameter. When we invoked greetPerson("Alice");, the value "Alice" was passed as an argument to the function.

You've learned about bestowing a function with intelligence through parameters, making the function versatile and broadly applicable.

The return keyword acts like the conveyor belt in a factory line, which delivers the final product after all the operations are performed on the assembly line.

Here's an example where we return the square of a number:

JavaScript
Copy to clipboard
1// function that returns the square of a number
2function square(number) {
3  return number * number; // number is the function parameter
4}
5
6const squaredNumber = square(5);
7console.log(squaredNumber);  // Outputs: 25

In this function, the square of 5 is returned, yielding 25 as the output.

Through the return keyword, you've just learned how to make a function execute a calculation and deliver the result in JavaScript.

When a variable is declared within a function, it's only known within that function and cannot be accessed from outside. This concept is similar to your home WiFi network; it can only be accessed when you are within its range.

JavaScript
Copy to clipboard
1// global variable
2let globalVariable = "I'm global!";  // This is like a cellular network available everywhere
3
4// function to check scope
5function checkScope() {
6  // local variable
7  let localVariable = "I'm local!";  // This is like your home WiFi network
8  console.log(globalVariable);  // Outputs: "I'm global!"
9  console.log(localVariable);  // Outputs: "I'm local!"
10}
11
12checkScope();
13
14console.log(globalVariable);  // Outputs: "I'm global!"
15console.log(localVariable);  // Returns an error as localVariable is not defined outside the function

In this code, localVariable is only accessible within checkScope(), while globalVariable can be accessed from anywhere in the code.

We learned about variable scopes in JavaScript. Their concept is quite similar to the coverage of your home WiFi network versus a cellular network that is available everywhere.

Kudos to you for navigating through the intricacies of JavaScript functions! We examined function declarations, observed how to invoke functions, learned the use of parameters to provide flexibility, understood return statements to produce results, and differentiated between local and global scope in JavaScript.

Just as persuasive writing requires practice, honing your coding skills also necessitates practice. Next, we'll introduce some exercises where you can apply what you've learned. Remember, practice is the key to mastering programming, so keep coding!