Introductions to Function in JavaScript

Grokking JavaScript Fundamentals

Ask Author

Back to course home

0% completed

Vote For New Content

Introductions to Function in JavaScript

Table of Contents

Contents are not accessible

Functions are one of the fundamental building blocks in JavaScript, enabling you to encapsulate a block of code and execute it wherever and whenever you want. Functions allow for code reuse, making your programs more modular, maintainable, and scalable. They can take parameters, perform actions based on those parameters, and return a value.

In JavaScript, functions can be defined in several ways, including function declarations, expressions, and ES6 arrow functions. Understanding how to define and invoke functions is crucial for any JavaScript developer.

Function Definition

A function in JavaScript is defined using the function keyword, followed by a name, a list of parameters enclosed in parentheses (), and the function body enclosed in curly braces {}.

Syntax

Javascript

. . . .

function is the keyword that starts the function definition.
functionName is the name of the function.
parameter1, parameter2, ... are the function's parameters (optional).
The code block within {} is executed when the function is called.

Example: Defining a Simple Function

Let's define a simple function that displays a greeting message. This example will demonstrate the basic structure of a function without parameters and return statements.

Javascript

. . . .

function greet() { ... } defines a function named greet.
Inside the function, console.log("Hello, world!"); logs a greeting message to the console. This demonstrates the basic structure and invocation of a function without parameters or a return statement.

Invocation of Function

Functions are called or invoked by using their name followed by parentheses. This process executes the code defined within the function.

Example: Invoking a Function

Here, we will call the function we defined earlier to display the greeting message.

Javascript

. . . .

greet(); invokes the greet function, which causes "Hello, world!" to be printed to the console.

Function Parameters

Parameters are named variables passed into a function. They allow functions to accept input and behave differently based on that input.

Example: A Function with Parameters

In this example, we will define a function that takes a name as a parameter and prints a personalized greeting message.

Javascript

. . . .

function greet(name) { ... } declares a function named greet that accepts one parameter: name.
Within the function, the console.log statement constructs a greeting message that includes the name parameter. This demonstrates how parameters can be used within a function to influence its behavior.
greet("Alice"); calls the greet function with the argument "Alice", resulting in the console output: "Hello, Alice!". This shows how to pass data into a function when calling it.

Return Statement

Functions can return an output value to the caller using the return statement.

Example: Returning a Value

Now, we'll create a function that calculates the square of a number and returns the result.

Javascript

. . . .

function square(number) { ... } sets up a function called square that takes a single parameter: number.
return number * number; calculates the square of number by multiplying it by itself and returns this value to the caller.
var result = square(4); calls the square function with 4 as the argument, and the return value (16) is stored in the variable result.
console.log(result); outputs the value of result to the console, which is 16, showing the function's return value is successfully captured and displayed.

Function Expression

Function expressions allow you to assign a function to a variable.

Example: Function Expression

In this example, we will create a function expression that checks if a number is even and print the result.

Javascript

. . . .

var isEven = function(number) { ... }; defines a function expression named isEven. The function takes one parameter (number) and returns true if the number is even (i.e., divisible by 2 without a remainder) and false otherwise.
The function is then called twice with different arguments (4 and 5), demonstrating how it evaluates each number. console.log(isEven(4)); checks if 4 is even, which it is, so it prints true. Similarly, console.log(isEven(5)); checks if 5 is even, which it isn't, so it prints false.
This example illustrates how function expressions can be used just like function declarations, but they also highlight the flexibility of assigning functions to variables.

.....

Like the course? Get enrolled and start learning!

Table of Contents

Contents are not accessible