JavaScript Functions

You are reading Part 6 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 1]

Introduction

Functions are one of the most fundamental building blocks of JavaScript. They allow for code reuse, modularity, and improved readability. JavaScript supports multiple ways of defining functions, each with unique properties and use cases.

Understanding JavaScript functions, including declarations, expressions, arrow functions, parameters, and return values, is essential for writing clean and efficient code. Mastering these concepts enables better modularity and reusability in JavaScript applications.

Function Declarations

A function declaration defines a named function that can be called anywhere in the script due to hoisting.

Syntax:

function functionName(parameters) {
    // Code to execute
    return result; // Optional
}

Example:

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

Function Expressions

A function expression defines a function inside an expression and does not get hoisted like function declarations.

Syntax:

const functionName = function(parameters) {
    // Code to execute
    return result;
};

Example:

const add = function(a, b) {
    return a + b;
};
console.log(add(5, 3));

Arrow Functions

Arrow functions are a more concise syntax introduced in ES6. They do not have their own this context, making them ideal for callbacks and functional programming.

Syntax:

const functionName = (parameters) => {
    return result;
};

If the function has only one statement, the {} and return can be omitted:

const functionName = (parameters) => result;

Example:

const multiply = (a, b) => a * b;
console.log(multiply(4, 2));

Function Parameters

Functions can take parameters to make them more dynamic.

Default Parameters

Default parameters allow setting default values for function arguments.

function greet(name = "Guest") {
    return "Hello, " + name;
}
console.log(greet()); // "Hello, Guest"

Rest Parameters

Rest parameters allow a function to accept an indefinite number of arguments.

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Return Values

Functions return values using the return statement. If no return statement is provided, the function returns undefined by default.

Example:

function square(num) {
    return num * num;
}
console.log(square(5)); // 25

You are reading Part 6 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 1]