JS FunctionsLesson #41

JavaScript Functions

Functions are reusable code blocks designed to perform a particular task.

Functions are Code Blocks

Functions are reusable code blocks designed to perform a particular task.

Functions are executed when they are called or invoked.

Functions are fundamental in all programming languages.

Why Use Functions?

Functions help you to:

  • Reuse code (write once, run many times)
  • Organize code into smaller parts
  • Make code easier to read and maintain

What Does a Function Look Like?

A function can be created with the function keyword, a name, and parentheses.

The code to run is written inside curly brackets.

Example

Example Code

javascript
Try it Yourself
function sayHello() { return "Hello World"; }
The function above does not do anything. > It has to be called first.

Functions Run When You Call Them

To run a function, you call it by using its name followed by parentheses like sayHello():

Example

Example Code

javascript
Try it Yourself
function sayHello() {

  return "Hello World";

}

let message = sayHello();
() means execute now.

JavaScript Function Syntax

Example

Example Code

javascript
Try it Yourself
function
name( p1, p2, ... ) {

  // code to be executed

}

Functions are defined with the function keyword:

  • followed by the function name
  • followed by parentheses ( )
  • followed by brackets { }

The function name follows the naming rules for variables.

Optional parameters are listed inside parentheses: ( p1, p2, ... )

Code to be executed is listed inside curly brackets: { }

Functions can return an optional value back to the caller.

Example

Example Code

javascript
Try it Yourself
function multiply(a, b) {

    return a * b;

}
A function definition is not an executable statement. > It is not common to end a function definition with a semicolon. > Semicolons are used to separate executable JavaScript statements.

A Function Can Be Used Many Times

A big benefit is that you can call the same function whenever you need it.

Example

Example Code

javascript
Try it Yourself
function add(a, b) {

    return a + b;

}

let sum1 = add(5, 5);

let sum2 = add(50, 50);
Note that values returned from functions can be stored in variables.

Local Variables

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function.

Example

Example Code

javascript
Try it Yourself
// code here can NOT use carName

function myFunction() {

  let carName = "Volvo";

  // code here CAN use carName

}

// code here can NOT use carName

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.

Functions Used as Variables

Functions can be used as variables, in all types of formulas, assignments, and calculations.

Example

Example Code

javascript
Try it Yourself
let x = toCelsius(77);

let text = "The temperature is " + x + " Celsius";

Why Functions? > Functions enable better code organization and efficiency. > With functions you can reuse the same code many times. > The same code, with different input, can produce different results.

Function Input and Output

The most useful functions work like this:

  • Parameters - The names listed in the function definition
  • Arguments - The values sent to the function when it is called
  • Function Code - The work done inside the function
  • Return Output - The value returned from the function

Example

Example Code

javascript
Try it Yourself
function greet(name) {

  return "Hello " + name;

}

greet("Riya");

In the example above:

Parametername
Argument"Riya"
Function codereturn "Hello " + name;
Return value"Hello Riya"

Next Chapter > Calling JavaScript Functions > Functions are executed when they are called or invoked > You call a function by adding parentheses to its name like: name()


Interactive Code Examples

JS Example 1

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
function sayHello() { return "Hello World"; }

JS Example 2

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
function sayHello() {

  return "Hello World";

}


let message = sayHello();

Example 3

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
function
name( p1, p2, ... ) {

  // code to be executed

}

JS Example 4

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
function multiply(a, b) {

    return a * b;

}

JS Example 5

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
function add(a, b) {

    return a + b;

}


let sum1 = add(5, 5);

let sum2 = add(50, 50);

JS Example 6

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
// code here can NOT use carName


function myFunction() {

  let carName = "Volvo";

  // code here CAN use carName

}


// code here can NOT use carName