Functions & Function Expressions

Functions in JavaScript are reusable blocks of code that perform a specific task. They allow you to group code into logical units, making your code more organized and easier to manage.

🥑 Function Declaration

🥑 Local variables

🥑 Outer variables

🥑 Parameters

🥑 Default values

🥑 Returning a value

🥑 Naming a function

🥑 Functions == Comments

Functions expressions allow you to define a function as part of an expression, rather than as a standalone statement.

🥑 Function is a value

🥑 Callback functions

🥑 Function Declaration and Function Expression

It includes the function keyword, followed by the function's name, optional parameters within parentheses, and the function's body enclosed in curly braces.

Syntax:

function functionName(parameter1, parameter2, ...) {
  // function body
}

For example:

// Function declaration
function greet(name) {
  console.log('Hello, ' + name + '!');
}

// Calling the function
greet('John'); // Output: Hello, John!

Variables declared within a function are local to that function and can only be accessed within its scope.

For example:

function greet(name) {
  let message = 'Hello, ' + name + '!';
  console.log(message);
}

greet('John'); // Output: Hello, John!
console.log(message); // Error: message is not defined

Functions can access variables declared outside of them. These variables are called outer variables.

For example:

let greeting = 'Hello';

function greet(name) {
  console.log(greeting + ', ' + name + '!');
}

greet('John'); // Output: Hello, John!

Parameters are placeholders for values that are passed into a function when it is called. They allow functions to accept input and perform operations on it.

For example:

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

let sum = add(3, 5); // sum is 8

You can assign default values to function parameters. If a parameter is not provided when the function is called, it will use the default value.

For example:

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

greet(); // Output: Hello, Guest!
greet('John'); // Output: Hello, John!

Functions can return a value using the return statement. This allows the function to produce output that can be used elsewhere in your code.

For example:

function multiply(a, b) {
  return a * b;
}

let result = multiply(3, 5); // result is 15

Function names should be descriptive and indicative of their purpose. This makes your code more readable and easier to understand.

For example:

function calculateArea(radius) {
  return Math.PI * radius ** 2;
}

Well-named functions can often replace comments, providing clear and self-documenting code.

For example:

// Function to calculate the area of a circle
function calculateArea(radius) {
  return Math.PI * radius ** 2;
}

In the above example, the function name calculateArea conveys the purpose of the code better than the comment. Functions with descriptive names make the code more readable and maintainable.

In JavaScript, functions are treated as values. This means they can be assigned to variables, passed as arguments, and returned from other functions just like any other data type.

For example:

function sayHi() {
  alert("Hello");
}

let func = sayHi; // Assigning the function to a variable

func(); // Outputs: Hello
sayHi(); // Outputs: Hello

In the above example;

1. The function sayHi is declared and defined.
2. The function is assigned to the variable func.
3. Both func and sayHi can be called to execute the function and output "Hello".

This behavior illustrates that functions are indeed values in JavaScript. They can be stored in variables, passed around, and called just like any other value.

Callback functions are functions that are passed as arguments to other functions and are expected to be called back later if necessary.

For example:

function ask(question, yes, no) {
  if (confirm(question)) {
    yes();
  } else {
    no();
  }
}

function showOk() {
  alert("You agreed.");
}

function showCancel() {
  alert("You canceled the execution.");
}

ask("Do you agree?", showOk, showCancel);

In the above example, The function ask asks the question and depending on the user's response, yes() or no().

showOk and showCancel are callback functions. They are passed as arguments to the ask function and will be called back depending on the user's response.

We can also use function expressions to define callback functions inline:

For example:

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

Anonymous function expressions are used directly inside the ask function call. They serve the same purpose as named functions but are declared inline and are not accessible outside of the ask function.

Function Declaration and Function Expression are two ways to define functions in JavaScript, each with its own syntax and behavior.

Function Declaration:

Syntax: Declared as a separate statement in the main code flow using the function keyword.

Hoisted: Function declarations are hoisted, meaning they are moved to the top of their scope during compilation and can be called before they are defined.

For example:

function greet() {
  console.log('Hello!');
}
greet(); // Output: Hello!

Function Expression:

Syntax: Created inside an expression or another syntax construct by assigning it to a variable.

Not Hoisted: Function expressions are not hoisted, meaning they cannot be called before they are defined in the code.

For example:

let greet = function() {
  console.log('Hello!');
};
greet(); // Output: Hello!

Let's talk about differences!

Hoisting: Function declarations are hoisted, function expressions are not.

Accessibility: Function declarations are accessible throughout their scope, while function expressions are only accessible through the variable they are assigned to.

For example:

greet(); // Works fine with function declaration
function greet() {
  console.log('Hello!');
}

greet(); // Throws an error with function expression
let greet = function() {
  console.log('Hello!');
};

Use Cases:

Function declarations are useful for creating named functions that are accessible throughout the scope. Function expressions are useful for creating functions dynamically or passing them as arguments to other functions.

Keep coding and stay curious! 🌸 🎯 💁🏻‍♀️