JS Advanced Functions 🎯

Welcome back to CodeYourCraft! Today, we're diving into the world of advanced JavaScript functions. If you're new to functions, don't worry! We'll start from the basics and work our way up. Let's get started!

What are Functions? 📝

A function is a reusable block of code that performs a specific task. Functions help to keep our code organized, readable, and maintainable.

javascript

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

In the example above, we've created a function called greet that takes a parameter name and logs a greeting message.

Function Declarations and Expressions 💡

There are two ways to create functions in JavaScript:

Declaration: This is the traditional way of defining a function.

javascript

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

Expression: A function expression is assigned to a variable, constant, or property.

javascript

const greet = function(name) {
  console.log(`Hello, ${name}!`);
}

Arrow Functions 💡

Introduced in ES6, arrow functions offer a more concise syntax for function expressions.

javascript

const greet = (name) => {
  console.log(`Hello, ${name}!`);
}

Function Parameters 📝

Functions can take any number of arguments, which we define within the parentheses. However, you should always be mindful of the number and types of parameters you're using.

javascript

function greet(name, greeting) {
  console.log(`${greeting}, ${name}!`);
}

greet('John', 'Good Morning');

Default Parameter Values 💡

If a function call omits a parameter, we can provide a default value using the assignment operator (=).

javascript

function greet(name = 'Guest', greeting = 'Hello') {
  console.log(`${greeting}, ${name}!`);
}

greet(); // "Hello, Guest!"
greet('Alice'); // "Hello, Alice!"

Rest Parameters 💡

Using the ... (spread operator) syntax, we can collect an indefinite number of arguments as an array.

javascript

function greetAll(...names) {
  names.forEach(name => console.log(`Hello, ${name}!`));
}

greetAll('John', 'Alice', 'Bob');
// "Hello, John!"
// "Hello, Alice!"
// "Hello, Bob!"

Function Return Values 💡

A function can return a value using the return keyword. The returned value can be used in our code.

javascript

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

const sum = addNumbers(3, 5);
console.log(sum); // 8

Early Return 💡

By returning early, we can make our functions more efficient and easier to read.

javascript

function findMin(numbers) {
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] < numbers[0]) {
      [numbers[0], numbers[i]] = [numbers[i], numbers[0]];
    }
    if (numbers[i] === numbers[0]) {
      return `There are multiple minimum values: ${numbers[i]}`;
    }
  }
  return numbers[0];
}

console.log(findMin([3, 5, 2, 1, 7])); // 1

Recursive Functions 💡

A recursive function is a function that calls itself. They are useful for solving problems involving repeated subproblems.

javascript

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120