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:
JavaScript1// 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:
JavaScript1sayHello(); // 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:
JavaScript1// 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:
JavaScript1// 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.
JavaScript1// 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!