Heading

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

Function arguments are the real values passed to (and received by) the function.
If a function changes an argument's value, it does not change the parameter's original value.
Syntax:
function functionName(parameter1, parameter2, parameter3) {
// code to be executed
}

JavaScript functions have a built-in object called the arguments object.

The argument object contains an array of the arguments used when the function was called (invoked).

This way you can simply use a function to find (for instance) the highest value in a list of numbers:
Example
x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
let max = -Infinity;
for (let i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}

Example
x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}

If a function is called with too many arguments (more than declared), these arguments can be reached using the arguments object.
Arguments are Passed by Value

The parameters, in a function call, are the function's arguments.

JavaScript arguments are passed by value: The function only gets to know the values, not the argument's locations.
Function parameters are the names listed in the function definition.

Changes to arguments are not visible (reflected) outside the function.
Objects are Passed by Reference

In JavaScript, object references are values.
Because of this, objects will behave like they are passed by reference:
If a function changes an object property, it changes the original value.
Changes to object properties are visible (reflected) outside the function.

The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers.

For example, when a user clicks over the browser, add js code, which will execute the task to be performed on the event.

Closure is one of important concept in JavaScript. It is widely discussed and still confused concept. Let's understand what the closure is.

Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.

You have learned that we can create nested functions in JavaScript. Inner function can access variables and parameters of an outer function (however, cannot access arguments object of outer function). Consider the following example.

function OuterFunction() {

var outerVariable = 1;

function InnerFunction() {
alert(outerVariable);
}

InnerFunction();
}

The window object is supported by all browsers. It represents the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:
window.document.getElementById("header");