Excerpt
Calling a function by its name triggers the runtime to look up the definition, pass arguments, execute the function body code, and return any value back to the call site.
Functions are fundamental building blocks in many programming languages. They represent named blocks of code that can be executed on demand. But what exactly happens behind the scenes when a function is called by its name in code? In this post, we’ll demystify the magic of function calls.
Introduction
A function in programming is a reusable section of code that can be “called” by name to perform a specific task. Functions usually accept input data through arguments, execute code with that data, and return an output value.
Calling a function by its name is how we invoke its pre-defined code to run. Understanding what goes on when functions are executed is key to writing and using them effectively.
What Happens When a Function is Called?
When a function is called by name in code, it triggers a sequence of events:
Step 1: Identifying the Function
The JavaScript runtime looks up the function name referenced in the call and points to the function definition.
For example:
1function calculateTotal(items) {
2 //...
3}
Calling calculateTotal() locates this defined function.
We can also demonstrate conversions:
1// Snake case to camelCase
2stringToCamelCase('calculate_total') -> calculateTotal
Step 2: Passing Arguments
Any argument values supplied in the call are passed into the function’s parameters.
1// Function definition
2function greet(name) {
3 // ...
4}
5
6// Function call with argument
7greet("Sarah");
Arguments can be passed in different ways like positional, named, or rest parameters.
Step 3: Executing the Function Code
The body of the function executes line-by-line. Any variables declared in the body are scoped locally to the function.
Step 4: Returning a Value
If the function returns a value, that value gets sent back to the call site.
1// Function returns value
2function transform(string) {
3 return stringToUppercase(string);
4}
5
6// Call function and capture return value
7let myString = transform("Hello");
We converted the string to uppercase using the online tool!
Calling a function triggers this precise sequence - identify, pass arguments, execute code, return value.
Understanding Function Names
A function’s name identifies it uniquely. It can be called from anywhere after it’s declared. By convention, functions have verb or action based names like calculateTotal(), printMessage(), convertToLowerCase() etc.
Unique, descriptive names prevent confusion. Function names should follow the lowerCamelCase convention in JavaScript. Well-named functions make code more readable.
Exploring Function Arguments
Function arguments allow passing data into the function when called. There are different types of arguments in JavaScript:
Positional Arguments
Values matched up with parameters based on order.
1function greet(name, age) {
2 // ...
3}
4
5greet("Sarah", 32);
Default Arguments
Parameters get default values if not passed.
1function increment(num, amount = 1) {
2 return num + amount;
3}
4
5increment(5, 2); // 7
6increment(5); // 6
Rest Parameters
Special syntax for accepting indefinite arguments.
1function formatNames(...names) {
2 // Format names
3 return names.map((name) => stringToCapitalCase(name));
4}
5
6formatNames("john", "sarah");
We used the online capital case tool to format names!
Understanding arguments allows properly passing data into functions.
Execution of Function Code
When a function is called, the JavaScript engine allocates memory for a new execution context. This context stores variables and references needed for the function body code to execute.
The function code runs line-by-line until completion or a return statement. Any variables declared inside the function are only accessible within its local scope.
1function processData(data) {
2 let result = transform(data); // Local variable
3
4 return result;
5}
6
7function transform(data) {
8 return stringToLowercase(data);
9}
We used the online lowercase converter tool here!
The function executes independently, outside of the main program flow.
Conclusion
Calling a function by its name triggers a precise sequence - the runtime looks up the definition, arguments are passed in, the body executes, and any return value is sent back.
Correctly declaring functions with descriptive names and arguments enables cleanly invoking their code on demand. Mastering function calls unlocks the power of reusable, organized code. Though functions appear as black boxes, understanding what happens internally demystifies these essential building blocks of programming.
