Understanding JavaScript Functions: A Guide for Beginners | TechWithTwin

JavaScript Functions thumbnail with the text “JavaScript Functions” on one side. The other side has Javascript graphic in between curly brackets and the word JavaScript below it

A function is like a box that takes in something and returns something after performing a task on the passed argument. Imagine a box that takes in a soda bottle and then returns the same bottle, but opened. This is similar to the functions used. In this article, we will break down JavaScript functions. Buckle up, let's get started.

Table of Contents

1. Introduction: Why functions matter
2. What is a function in JavaScript?
3. Declaring Functions
4. Arrow Functions (ES6)
5. Parameters vs Arguments
6. Return values and how they work
7. Function Scope and Closures
8. Callback Functions
9. Higher-Order Functions
10. Anonymous Functions
11. Immediately Invoked Function Expressions (IIFE)
12. Common Mistakes to Avoid
13. Conclusion

1. Introduction: Why Functions Matter

Functions allow developers to break down code into reusable blocks. Instead of repeating code, you can write a function once and reuse it as many times as needed. This promotes cleaner, DRY (Don’t Repeat Yourself) code.

2. What is a function in JavaScript?

A function in JavaScript is a block of code that can be reused (called) repeatedly. It can perform a task or a calculation.

Think of it as a machine that you feed some input, it processes it, and returns an output.

3. Declaring Functions

We can declare functions in the following ways:

• Using Function Declaration — This is the most common way to declare functions. We use the function keyword, followed by the function's name, parentheses, and a code block enclosed with curly brackets. Here is the syntax:

<function keyword> <function name> <parenthesis> <codeblock>

function greet(){
console.log('Hello, World!');
}

greet(); // Output: Hello, World!

• Using a Function Expression — These are functions that are stored in variables. This involves creating a variable and assigning it a function declaration.

const greet = function(){
console.log('Hello, World!');
}

greet(); // Output: Hello, World!

4. Arrow Functions (Introduced in ES6)

This is the newer and more concise way to write functions. It uses the function expression syntax, but we change the syntax and remove the function keyword, and add a fat arrow and a code block

const greet = () =>{
  console.log('Hello, World!');
}

greet(); // Output: Hello, World!

These functions are popular because they are brief, and they handle the this keyword differently.

NB: This method has an implicit return. The body is a single expression without curly braces. The value of the expression is automatically returned, and no return keyword is needed.

5. Parameters Vs Arguments

• A parameter refers to the placeholder added to a function for the actual value. For instance, name here is the parameter.

function handleSubmit(name) {
  console.log(name);
}

• An argument is the value passed to a function when it is called. In the following case, “TechWithTwin” is an argument.

function handleSubmit(name) {
  console.log(name);
}

handleSubmit("TechWithTwin"); // TechWithTwin here is the argument.

6. Return values and how they work

A function can return a valid JavaScript data type to the caller.

If a function does not return anything by default, it returns void.

• A function that returns a value:

function greetMe(name) {
  return `Hello, ${name}`;
}

const greetings = greetMe("TechWithTwin"); 
//we assign the value returned to a variable

• A function that does not return a value — It returns void.

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

greetMe("TechWithTwin"); //we assign the value returned to a variable

7. Function Scope and Closures

• Functions have local scope, the environment enclosed by the braces, and variables declared inside are inaccessible outside.

function test() {
  const secret = "hidden";
  console.log(secret); // Works
}
console.log(secret); // Error

• Closures occur when a function remembers variables from its outer scope even after that scope has closed.

function outer() {
  const name = "JavaScript";
  return function inner() {
    console.log("Hello " + name);
  };
}

const greet = outer();
greet(); // Output: Hello JavaScript

8. Callback Functions

These are functions that are passed as arguments to other functions.

function greet(name, callback) {
  console.log("Hello, " + name);
  callback();
}

greet("Alice", function() {
  console.log("This is a callback!");
});

9. Higher-Order Functions

These are functions that either:

• Take other functions as arguments, or
• Return other functions

E.g., Array.map()

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6]

10. Anonymous Functions

These are functions without a name that are often used as arguments.

setTimeout(function () {
  console.log("This runs after 2 seconds!");
}, 2000);

11. Immediately Invoked Function Expressions (IIFE)

These are functions that are run as soon as they are defined:

(function() {
  console.log("I run immediately!");
})();

With arrow functions:

(() => {
  console.log("Instant execution!");
})();

12. Common Mistakes to Avoid

• Forgetting the return keyword when expecting an output.
• Misusing the this keyword, especially with arrow functions.
• Overusing global variables instead of function scope.
• Not handling function arguments properly and in the correct order.

13. Conclusion

Mastering functions is crucial for becoming a proficient JavaScript developer.

Understanding how functions work, from simple declarations to advanced concepts like closures and higher-order functions, will elevate your coding skills.

That’s it from me, guys. Follow TechWithTwin for more content:

[embed]TechWithTwin | Top Software Consultant in Kenya Discover TechWithTwin, Kenya's leading software and digital marketing consultant. I specialize in web development, SEO…techwithtwin.com

https://x.com/techwithtwin

[embed]TechWithTwin Techwithtwinyoutube.com