Getting Started with Functions

Intro

Functions in JavaScript are reusable blocks of code that you define once and can execute whenever needed. Think of them as mini-programs within your main program—they take input (called arguments), perform a task, and can return a result. Functions help you organize your code, avoid repetition, and make your programs more manageable.

Defining Functions

When it comes to defining functions in JavaScript, the most basic approach is using the function keyword. You can use it to create a function either as a declaration or an expression, and it’s the classic, go-to method for setting up reusable blocks of code.

But JavaScript doesn’t stop there. ES6 introduced a sleeker way to define functions—arrow functions. These functions ditch the function keyword altogether, offering a more compact and modern syntax. They’re particularly handy when you’re passing one function as an argument to another, a concept we’ll dive into more as you level up in your JavaScript journey.

For those who like to explore all options, JavaScript also allows you to create functions using the Function() constructor, though this is less common in everyday coding. And if you’re venturing into more advanced territory, there’s function*, which defines generator functions, and async function, which are used for creating asynchronous functions—both of which we’ll explore in greater depth later on.

In short, JavaScript gives you several tools to define functions, from the classic function keyword to more advanced and specialized forms, each serving different needs as you become more proficient in the language.

// Function definition using a function declaration
function multiply(a, b) {
  return a * b;
}

// Calling the function and logging the result
console.log(multiply(4, 5)); // Output: 20

Function Declarations

When you declare a function in JavaScript, it’s important to know that the function's name becomes a variable that points to the function itself. This means you can refer to the function by its name anywhere within its scope, just like you would with any other variable.

One of the weird things about function declarations is that they’re “hoisted” to the top of their containing script, function, or block. This means you can call a function even before you’ve actually defined it in your code—JavaScript moves those declarations to the top during the compilation phase.

When your function does its job and needs to send something back to the code that called it, that’s where the return statement comes in. It stops the function in its tracks and hands over whatever value (if any) you specify to the caller.

Before ES6, you could only declare functions at the top level of a file or inside another function—nowhere else. While some JavaScript engines bent this rule a bit, it wasn’t technically correct to define functions inside loops, conditionals, or other blocks. However, with ES6 and strict mode, you can now declare functions within blocks like loops or conditionals, but there’s a catch: the function only exists within that block. Once you step outside, it’s out of scope and no longer accessible.

Function Expressions

Function expressions in JavaScript might look similar to function declarations at first glance, but there’s a key difference: they pop up within a larger expression or statement, and naming them is totally optional.

For example:

let greet = function () {
  console.log("Hello!");
};
greet(); // "Hello!"

When you declare a function, you’re actually creating a variable and assigning a function object to it. If you choose to name a function within an expression, that name is only visible within the function itself—like a secret identity that only the function knows about.

There’s also an important distinction between declaring a function and assigning a function expression to a variable. When you use a function declaration, the function object is created before any of your code starts running, thanks to something called hoisting. This means you can call the function even if it’s defined later in the code.

Invoking Functions

When you write a function in JavaScript, the code inside that function doesn’t run right away. Instead, it just sits there, waiting for you to tell it when to spring into action. This happens when you invoke the function.

Invoking a function is like pressing the "start" button. To do this, you use an invocation expression, which is a fancy term for calling the function. You write the function’s name (or a reference to it), followed by a pair of parentheses. If the function needs any information to do its job, you put that info inside the parentheses as arguments, separated by commas.

For example:

function sayHello(name) {
  console.log("Hello, " + name + "!");
}

sayHello("Alice"); // "Hello, Alice!"

In this example, sayHello("Alice") is the invocation expression. We’re telling the sayHello function to run, and we’re giving it the argument "Alice" to work with. When the function is invoked, the code inside it executes, and you get the output: "Hello, Alice!"

Function Arguments and Parameters

In JavaScript, function definitions are pretty flexible. They don't require you to specify the type of parameters, and when you invoke a function, JavaScript won’t even check if you’ve passed the right number of arguments! This gives you a lot of freedom but also puts the responsibility on you to make sure your function behaves as expected.

Optional Parameters and Defaults

When you call a function with fewer arguments than it expects, JavaScript doesn't complain. Instead, it quietly sets the missing parameters to undefined. This is where optional parameters come in handy. You can design your functions to work even when some arguments are left out.

For instance:

function greet(name, greeting = "Hello") {
  console.log(greeting + ", " + name + "!");
}

greet("Alice"); // "Hello, Alice!"
greet("Bob", "Hi"); // "Hi, Bob!"

In this example, greeting is optional. If you don’t pass it, the function uses the default value "Hello". Just remember, when you’re setting up optional parameters, always place them at the end of the parameter list. If you don't, the caller would need to pass undefined for any skipped arguments, which can get messy.

With ES6 and later, you can define default values directly in your function parameters. You can even get creative by using variables or other function calls to compute default values, and you can use the value of one parameter to define the default for another:

function createUser(username, role = "guest", isAdmin = role === "admin") {
  console.log(username + " is a " + role + ". Admin status: " + isAdmin);
}

createUser("Charlie"); // "Charlie is a guest. Admin status: false"
createUser("Dave", "admin"); // "Dave is a admin. Admin status: true"

Rest Parameters and Variable-Length Argument Lists

While default parameters help when you have fewer arguments, rest parameters are there for when you have more. A rest parameter allows your function to accept any number of additional arguments, which get packed into an array.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5)); // 9

In this example, sum can handle any number of arguments. The rest parameter ...numbers captures them all in an array, letting you work with them as needed.

Functions that can take any number of arguments, like sum, are known as variadic functions. They’re powerful tools when you don’t know in advance how many arguments you’ll need to handle. Just keep in mind that the rest parameter must always be the last one in your function’s parameter list.

Functions as Values

In JavaScript, functions aren’t just blocks of code—they’re also values, just like numbers or strings. This means you can do all sorts of cool things with them. You can assign a function to a variable, store it in an object’s property, tuck it inside an array, or even pass it as an argument to another function.

For example:

function sayHello() {
  console.log("Hello!");
}

let greet = sayHello; // Assigning the function to a variable
greet(); // "Hello!"

let obj = {
  speak: sayHello, // Storing the function in an object property
};
obj.speak(); // "Hello!"

let arr = [
  sayHello,
  function () {
    console.log("Hi there!");
  },
];
arr[0](); // "Hello!"
arr[1](); // "Hi there!"

function callFunction(fn) {
  fn(); // Invoking the function passed as an argument
}
callFunction(sayHello); // "Hello!"

This flexibility is one of JavaScript's superpowers. By treating functions as values, you can write code that’s more modular, reusable, and expressive. Whether you're passing a function around like a hot potato, storing it for later use, or using it as a building block for more complex behavior, JavaScript's ability to treat functions as values opens up a world of possibilities.

Defining Your Own Function Properties

In JavaScript, functions are more than just tools for executing code—they're a unique type of object, which means they can have their own properties, just like any other object. This might sound surprising, but it opens up some really interesting possibilities.

For example, if you need a variable that sticks around between function calls (a "static" variable), you can use a property of the function itself to hold that value.

Here’s a quick example:

function greet() {
  greet.counter = (greet.counter || 0) + 1; // Increment counter each time the function is called
  console.log(`Hello! You've greeted ${greet.counter} times.`);
}

greet(); // "Hello! You've greeted 1 times."
greet(); // "Hello! You've greeted 2 times."
greet(); // "Hello! You've greeted 3 times."

In this example, greet.counter is a property of the greet function. Each time the function is called, it updates this property, keeping track of how many times the function has been invoked.

This technique is super handy when you need to keep track of information across multiple calls to the same function, without cluttering up the global scope with extra variables.

Study Style Notes

Introduction to Functions

• Definition: Functions are reusable blocks of code that perform specific tasks. They can take input, execute code, and return a result.
• Purpose: They help organize code, avoid repetition, and make programs more manageable by encapsulating logic that can be executed on demand.

Defining Functions

• Function Declarations: The traditional method to define a function using the function keyword. These functions are named and can be invoked anywhere within their scope.
  • Hoisting: Function declarations are "hoisted" to the top of their scope, allowing them to be called before their actual definition in the code.
• Function Expressions: Functions defined as part of an expression. These can be named or anonymous and are only available after the point of definition.
  • Scope: Unlike declarations, function expressions are not hoisted and are defined only when execution reaches them.
• Function Constructor: An alternative way to define functions using the Function constructor. This method is rarely used due to performance and readability concerns.
• Async Functions (async function): Functions designed to work with asynchronous code using the await keyword to handle promises more elegantly.

Invoking Functions

• Invocation: Functions do not execute when defined; they must be invoked or called. This is done by using the function’s name followed by parentheses. Arguments, if any, are provided within the parentheses.

Function Arguments and Parameters

• Flexibility: JavaScript functions do not require type specification for parameters, and the number of arguments passed is not strictly enforced.
• Optional Parameters: If a function is called with fewer arguments than defined, the missing parameters default to undefined.
• Default Parameters: Functions can have default parameter values, allowing them to operate even when some arguments are missing.

Rest Parameters and Variadic Functions

• Rest Parameters: Allow functions to accept an indefinite number of arguments as an array, providing flexibility in handling multiple inputs.
• Variadic Functions: These functions can accept a variable number of arguments, useful when the exact number of inputs is unknown beforehand.

Functions as Values

• First-Class Functions: In JavaScript, functions are first-class citizens, meaning they can be assigned to variables, stored in objects or arrays, and passed as arguments to other functions. This feature allows for more dynamic and modular code.

Defining Function Properties

• Functions as Objects: Functions in JavaScript are also objects, meaning they can have properties and methods.
• Static Variables Using Function Properties: By attaching properties to a function, you can maintain state or store information that persists across multiple function calls.

Summary

• Functions as Fundamentals: Functions are a fundamental part of JavaScript that enable reusable, organized, and efficient code. They come in various forms, each suited to different programming needs and scenarios.
• Advanced Topics: As you continue to learn, you'll encounter more advanced concepts like asynchronous programming, generators, and functional programming techniques, which expand the capabilities and applications of functions in JavaScript.