1. javascript
  2. /basics
  3. /functions

A Beginner's Guide to Functions in JavaScript

General Introduction

JavaScript functions are a fundamental building block of the language. They allow you to write reusable code that can be called upon multiple times, making your code more organized and efficient.

We'll explore the basics of functions in JavaScript, and hopefully provide you with a strong enough foundation to enrich your knowledge base and encourage you to try some of the concepts in a test environment.

Function Syntax

The basic syntax for a function in JavaScript is as follows:

function functionName(parameters) {
  // code to be executed
}

The function keyword is used to declare a function, followed by the function name, which is used to call the function later. Next, we see the parameters which are placed within the parentheses and are used to pass data into the function. The code to be executed is placed within the curly braces.

Function Scope

JavaScript uses lexical scoping, which means that variables are only accessible within the scope in which they were defined. Functions also have their own scope, which is the area of the code where the function's variables are accessible. It's important to understand scope as it can affect how variables are accessed and manipulated within a function. For example, if a variable is declared within a function, it will not be accessible outside of that function's scope.

Function Declaring and Naming

Declaring a function is the process of creating a function and giving it a name. Once a function is declared, it can be called upon multiple times by using its function name. Giving the function a clear and descriptive name will make it easier to understand what it does. Best practices for naming functions include using camelCase, starting the function name with a verb, and being specific about what the function does.

function calculateSum(a, b) {
  return a + b;
}

Function Expressions

A function expression is a way to create a function and assign it to a variable. The function can be anonymous, or it can have a name. The main difference between a function expression and a function declaration is that a function expression is defined inside an expression, while a function declaration is defined as a standalone statement.

Function expressions can be defined uses the function keyword, or using arrow functions (=>).

let sayHello = function() {
  console.log("Hello, World!");
}

let sayGoodbye = () => {
  console.log("Goodbye!");
}

In the example above, we have two function expressions; the first one is defined using the function keyword, and the second one uses an arrow function. Both functions have been assigned to a variable and can be invoked by calling the variable name.

You can also give a name for the function expression, for example:

let add = function addTwoNumbers(a, b) {
  return a + b;
}
console.log(add(2,3)) // Output: 5

In this example, the function expression is given a name addTwoNumbers, but it's only accessible within the function body, and the variable add is used to call the function.

Function expressions can also be anonymous like so:

let multiply = function(a, b) {
  return a * b;
}
console.log(multiply(3,4)) // Output: 12

In this example, the function doesn't have a name, and the variable multiply is used to call the function.

Function expressions provide a lot of flexibility in terms of how functions can be defined and used in JavaScript, and are a powerful tool for organizing and structuring your code.

Parameters

Functions can take in parameters, which are values passed into the function when it is called. These parameters can be used within the function to perform various operations.

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

sayHello("John"); // Output: "Hello, John!"

Callbacks are a special type of functions that are passed as a parameter to another function. They are typically used to execute a specific action after some kind of event or operation has occurred.

function doSomething(callback) {
  console.log("Doing something...");
  callback();
}

function sayFinished() {
  console.log("Finished!");
}

doSomething(sayFinished); 
// Output: "Doing something..."
// Output: "Finished!"

Returning a Value

Functions can also return a value, which can be used later in the code. The return keyword is used to return a value from a function.

function addNumbers(a, b) {
  return a + b;
}

let result = addNumbers(2, 3);
console.log(result); 
// Output: 5

Hoisting

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the beginning of their scope. In turn, the variable and function declarations can be used before they are defined in the code. However, it is important to note that variable initializations are not hoisted, only the declaration.

In the case of function declarations, they are fully hoisted, which means that the function can be called before it is defined in the code. On the other hand, function expressions are not hoisted, and the variable that the function is assigned to will be hoisted, but the function itself will not be accessible until the expression is executed.

Summary

  • Functions are a fundamental building block in JavaScript and are used to write reusable code
  • The basic syntax for a function includes the function keyword, the function name, and the code to be executed
  • JavaScript uses lexical scoping, and functions have their own scope in which their variables are accessible
  • Functions can be declared, expressed, called, and returned
  • Parameters can be passed into a function and used to perform operations
  • Functions can return a value that can be used later in the code
  • Hoisting is a behavior in JavaScript where variable and function declarations are moved to the beginning of their scope, but it is important to note that the initialization of variables is not hoisted.