Introduction to Functions in JavaScript : #100Days0fCode

Greetings, coding enthusiasts! 🚀 Welcome to Day 3 of my exhilarating "100 Days of Code" journey. Today, I diving deep into the realm of functions.

Functions: The Building Blocks of Code

Functions are reusable blocks of code that perform a specific task, making your code more modular and maintainable.

Function Declaration

Syntax:

function functionName(parameters) {
  // code to execute
}

Example:

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

Function Expression

A function expression involves assigning a function to a variable.

Here the function is also known as the anonymous function as it doesn't have a function name.

Syntax:

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

Function Parameters and Arguments

Parameters act as placeholders within a function, while arguments are the actual values passed when calling the function.

Example:

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

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

Return Statement: Handing Back Values

The return statement lets a function hand back a value after execution.

Example:

function add(x, y) {
  return x + y;
}

let result = add(5, 3); // 8

Arrow Function: Concise Function Syntax

Arrow functions provide a more concise syntax for writing functions.

Syntax:

const multiply = (x, y) => x * y;

Higher Order Function: Callbacks

Higher-order functions can accept other functions as parameters. These functions are often referred to as "callback functions."

Syntax:

function doSomething(callback) {
  // perform some operation
  callback();
}

doSomething(() => {
  console.log("Callback function executed!");
});

Higher Order Function: Returning Functions

Higher-order functions can also return functions, creating powerful abstractions.

Syntax:

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

Immediately Invoked Function Expression (IIFE)

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that is defined and executed immediately after its creation. IIFE is particularly common in scenarios where you want to execute a function just once or where you need to create isolated environments for code.

An IIFE is defined by wrapping a function expression within parentheses and then immediately invoking it by adding another pair of parentheses at the end.

Syntax:

(function() {
  console.log("I am an IIFE!");
})();

setTimeout and setInterval:

setTimeout executes a function after a specified delay, while setInterval executes a function repeatedly with a given interval.

Syntax:

setTimeout(() => {
  console.log("Delayed execution!");
}, 2000); // Executes after 2 seconds

setInterval(() => {
  console.log("Repeated execution!");
}, 1000); // Executes every 1 second

Hoisting:

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during compilation.

Syntax:

console.log(myVar); // undefined
var myVar = 10;

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

Wrapping Up

Day 3 has been an exhilarating journey through the heart of JavaScript functions.

Also, solved some questions on the JsChallenger website.

Stay tuned for more coding insights on my 100 Days of Code journey! As I delve deeper into JavaScript's intricacies, remember that every line of code you write is a step toward becoming a coding maestro. Keep coding and embracing the beauty of this digital realm! 💻🎉

Connect with me on Twitter

---