JS Functions (Java)

Why This Matters

JavaScript functions are crucial in web development, as they enable dynamic behavior on web pages, making them interactive and responsive. Functions allow you to group statements together to perform specific tasks, which is essential for creating efficient and effective code for your web applications. Understanding JavaScript functions will help you write cleaner, more maintainable code and make you a better web developer.

Prerequisites

Before diving into JavaScript functions, it's important to have a solid understanding of the following topics:

1. HTML (Hypertext Markup Language)
2. CSS (Cascading Style Sheets)
3. Basic JavaScript syntax and variables
4. Event handling in JavaScript
5. Document Object Model (DOM) manipulation
6. AJAX requests

If you are not familiar with these topics, we recommend reviewing them before proceeding with this lesson.

Core Concept

Defining a Function

In JavaScript, functions can be defined in several ways: traditional function declarations, anonymous (or function expressions), and arrow functions. Each method has its own use cases and syntax variations.

Traditional Function Declaration

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

Anonymous (Function Expression)

Anonymous functions can be assigned to a variable or used in an expression:

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

Calling a Function

To call a function, simply invoke its name followed by parentheses containing any required arguments:

greet("John"); // Outputs: Hello, John!

Returning a Value

Functions can return a value using the return keyword. The returned value can be assigned to a variable or used in an expression:

function addNumbers(num1, num2) {
return num1 + num2;
}

let sum = addNumbers(5, 3); // sum equals 8

Arrow Functions (ES6 syntax)

Arrow functions are a concise alternative to traditional function declarations and expressions. They use the => symbol instead of the function keyword:

let greet = (name) => {
console.log("Hello, " + name + "!");
};

Function Hoisting

Unlike variables, function declarations are hoisted in JavaScript, meaning they can be called before they are defined:

greet("John"); // Outputs: Hello, John! (even though the greet function is below this line)

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

Function Scope

In JavaScript, functions have their own scope, which means variables declared within a function are only accessible within that function:

function createCounter() {
let count = 0;

return function increment() {
count++;
console.log(count);
};
}

const counter = createCounter();
counter(); // Outputs: 1
counter(); // Outputs: 2

Worked Example

Let's create a simple JavaScript function that validates an email address using both traditional and arrow function syntax:

// Traditional function
function validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}

console.log(validateEmail("john@example.com")); // Outputs: true
console.log(validateEmail("invalid_email")); // Outputs: false

// Arrow function
const validateEmailArrow = (email) => {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
};

console.log(validateEmailArrow("john@example.com")); // Outputs: true
console.log(validateEmailArrow("invalid_email")); // Outputs: false

Common Mistakes

1. Forgetting to include the parentheses when calling a function:

Incorrect: greet "John"

Correct: greet("John")

1. Not returning a value from a function that should return one:

function addNumbers(num1, num2) {
let sum = num1 + num2;
// Forgetting to return the sum
}

1. Using the return keyword in the wrong context (e.g., inside a loop):

function factorial(n) {
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i; // Forgetting to return the result before the loop ends
}
return result;
}

1. Not accounting for edge cases:

A function that calculates the factorial of a number should handle negative numbers and 0 appropriately:

function factorial(n) {
if (n < 0) {
throw new Error("Factorial is not defined for negative numbers.");
} else if (n === 0 || n === 1) {
return 1;
} else {
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}
}

Practice Questions

1. Write a JavaScript function that takes two numbers as arguments and returns their sum.
2. Write a JavaScript function that takes an array of numbers as an argument and returns the product of all its elements.
3. Write a JavaScript function that takes a string as an argument and returns the length of the string.
4. Write a JavaScript function that calculates the factorial of a number using recursion (without a loop).
5. Write a JavaScript function that checks if a given year is a leap year.
6. Write a JavaScript function that sorts an array of numbers in ascending order.
7. Write a JavaScript function that reverses the order of elements in an array.
8. Write a JavaScript function that filters an array of objects based on a specific property value.
9. Write a JavaScript function that merges two arrays by concatenating them and removing duplicate values.
10. Write a JavaScript function that searches for a specific value within an array using the binary search algorithm.

FAQ

1. What happens if I call a function without any arguments, but the function definition includes parameters?

• If you call a function with fewer arguments than its defined parameters, JavaScript will automatically fill in undefined for the missing arguments.

1. Can I define a JavaScript function inside another function?

• Yes, this is known as a nested function or inner function. Nested functions have access to the variables and functions of their parent scope.

1. What is the difference between a named function and an anonymous function?

• A named function has a name (e.g., function greet(name) {...}), while an anonymous function does not (e.g., let greet = function(name) {...}). Anonymous functions can be assigned to variables or used in expressions, making them more flexible.

1. What is the purpose of arrow functions?

• Arrow functions provide a concise syntax for defining functions in ES6 (JavaScript 2015) and later versions. They are particularly useful when the function body consists of a single expression or statement.

1. Why do function declarations get hoisted, but function expressions don't?

• Function declarations are hoisted because they are part of the JavaScript language's syntax, while function expressions are not. Function declarations are treated as if they were declared at the beginning of their containing scope, whereas function expressions are not.

1. What is closure in JavaScript?

• Closure is a concept in JavaScript where an inner function has access to its outer (enclosing) function's variables, even after the outer function has returned. This allows functions to maintain state and keep their data private.

1. What is the difference between let, const, and var when defining a variable within a function?

• let and const are block scoped (i.e., they are only accessible within the block in which they are defined), while var is function scoped (i.e., it is accessible throughout the entire function). Additionally, let and const can be reassigned, but const cannot be redeclared.

1. What is the difference between a method and a function in JavaScript?

• A method is a function that belongs to an object, while a function is a standalone piece of code. Methods have access to the object's properties and can modify them, whereas functions do not have this direct access.

1. What is the difference between a constructor function and a regular function in JavaScript?

• A constructor function is a special type of function used for creating new objects, while a regular function is just a piece of code that performs some task. When called with the new keyword, a constructor function creates a new object, sets its prototype to the constructor's prototype property, and executes the constructor's code with this bound to the newly created object.

1. What is the difference between a class and a constructor function in JavaScript?

• A class is a syntactic sugar for defining objects using an ES6 feature, while a constructor function is a traditional way of creating objects in JavaScript. Classes provide a more concise syntax for defining object properties and methods, but they still rely on constructor functions under the hood.