Function Basics

What Are Functions?

Think of a function as a recipe. You write the instructions once, give it a name like "Bake a Cake," and then you can follow that recipe whenever you want a cake. You don't need to rewrite the steps from scratch every time.

In JavaScript, functions are reusable blocks of code that perform a specific task. They help organize your code, prevent repetition, and make your programs easier to manage. Instead of writing the same lines of code over and over, you can wrap them in a function and just call that function's name.

The core purpose of a function is to encapsulate a piece of logic that you can execute on demand.

Function Declarations

The most common way to create a function is with a function declaration. It starts with the function keyword, followed by the name of the function, a set of parentheses (), and a block of code inside curly braces {}.

The parentheses can hold parameters, which are like ingredients for your recipe. The code inside the curly braces is the set of instructions.

// This is a function declaration
function greet(name) {
  console.log("Hello, " + name + "!");
}

// To run the code, you "call" the function
greet("Alice"); // Outputs: Hello, Alice!

A key feature of function declarations is hoisting. This means JavaScript moves them to the top of their scope before the code is executed. So, you can actually call a function before you've declared it in your code.

sayGoodbye(); // This works!

function sayGoodbye() {
  console.log("Goodbye!");
}

Function Expressions

Another way to create a function is with a function expression. This is where you create a function and assign it to a variable. The function itself often doesn't have a name, which is why it's sometimes called an anonymous function.

// This is a function expression
const add = function(a, b) {
  return a + b;
};

// Call the function using the variable name
let sum = add(5, 3);
console.log(sum); // Outputs: 8

Unlike declarations, function expressions are not hoisted. The variable add is hoisted, but its assignment (the function itself) is not. You must define a function expression before you can use it, just like any other variable.

// This will cause an error!
let difference = subtract(10, 4);

const subtract = function(a, b) {
  return a - b;
};

Which One to Use?

So, declaration or expression? For beginners, a function declaration is often clearer and more straightforward. However, as you advance, you'll find that function expressions offer more flexibility. Here's a quick comparison:

Feature	Function Declaration	Function Expression
Syntax	`function name() {}`	`const name = function() {};`
Hoisting	Yes (can be called before defined)	No (must be defined before called)
Use Case	General purpose, standalone functions	When functions are treated like values

Both methods are essential tools in JavaScript. Understanding their differences is key to writing predictable and bug-free code.

Quiz Questions 1/5

What is the primary purpose of a function in JavaScript?

Quiz Questions 2/5

Which of the following correctly defines a function using a function declaration?

JavaScript Functions Explained