Apa itu function di javascript?

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.

See also the exhaustive reference chapter about JavaScript functions to get to know the details.

A function definition (also called a function declaration, or function statement) consists of the

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
9 keyword, followed by:

  • The name of the function.
  • A list of parameters to the function, enclosed in parentheses and separated by commas.
  • The JavaScript statements that define the function, enclosed in curly brackets,
    const square = function (number) {
      return number * number;
    }
    const x = square(4); // x gets the value 16
    
    0.

For example, the following code defines a simple function named

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
1:

function square(number) {
  return number * number;
}

The function

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
1 takes one parameter, called
const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
3. The function consists of one statement that says to return the parameter of the function (that is,
const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
3) multiplied by itself. The statement
const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
5 specifies the value returned by the function:

return number * number;

Parameters are essentially passed to functions by value — so if the code within the body of a function assigns a completely new value to a parameter that was passed to the function, the change is not reflected globally or in the code which called that function.

When you pass an object as a parameter, if the function changes the object's properties, that change is visible outside the function, as shown in the following example:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

When you pass an array as a parameter, if the function changes any of the array's values, that change is visible outside the function, as shown in the following example:

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

While the function declaration above is syntactically a statement, functions can also be created by a function expression.

Such a function can be anonymous; it does not have to have a name. For example, the function

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
1 could have been defined as:

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16

However, a name can be provided with a function expression. Providing a name allows the function to refer to itself, and also makes it easier to identify the function in a debugger's stack traces:

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))

Function expressions are convenient when passing a function as an argument to another function. The following example shows a

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
7 function that should receive a function as first argument and an array as second argument:

function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

In the following code, the function receives a function defined by a function expression and executes it for every element of the array received as a second argument:

function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);

Function returns:

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
8.

In JavaScript, a function can be defined based on a condition. For example, the following function definition defines

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
9 only if
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
0 equals
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
1:

let myFunc;
if (num === 0) {
  myFunc = function (theObject) {
    theObject.make = 'Toyota';
  }
}

In addition to defining functions as described here, you can also use the

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
2 constructor to create functions from a string at runtime, much like
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
3.

A method is a function that is a property of an object. Read more about objects and methods in Working with objects.

Defining a function does not execute it. Defining it names the function and specifies what to do when the function is called.

Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16
1, you could call it as follows:

square(5);

The preceding statement calls the function with an argument of

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
5. The function executes its statements and returns the value
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
6.

Functions must be in scope when they are called, but the function declaration can be (appear below the call in the code). The scope of a function declaration is the function in which it is declared (or the entire program, if it is declared at the top level).

The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function. The

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
7 function (defined in ) is an example of a function that takes an object as an argument.

A function can call itself. For example, here is a function that computes factorials recursively:

return number * number;
0

You could then compute the factorials of

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
8 through
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
5 as follows:

return number * number;
1

There are other ways to call functions. There are often cases where a function needs to be called dynamically, or the number of arguments to a function vary, or in which the context of the function call needs to be set to a specific object determined at runtime.

It turns out that functions are themselves objects — and in turn, these objects have methods. (See the

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
2 object.) The
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
1 and
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
2 methods can be used to achieve this goal.

Consider the example below:

return number * number;
2

This code runs without any error, despite the

function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
3 function being called before it's declared. This is because the JavaScript interpreter hoists the entire function declaration to the top of the current scope, so the code above is equivalent to:

return number * number;
3

Function hoisting only works with function declarations — not with function expressions. The code below will not work.

return number * number;
4

Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined.

In other words, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function, and any other variables to which the parent function has access.

return number * number;
5

A function can refer to and call itself. There are three ways for a function to refer to itself:

  1. The function's name
  2. function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    4
  3. An in-scope variable that refers to the function

For example, consider the following function definition:

return number * number;
6

Within the function body, the following are all equivalent:

  1. function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    5
  2. function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    6
  3. function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    7

A function that calls itself is called a recursive function. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case).

For example, consider the following loop:

return number * number;
7

It can be converted into a recursive function declaration, followed by a call to that function:

return number * number;
8

However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (such as the DOM) is easier via recursion:

return number * number;
9

Compared to the function

function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
8, each recursive call itself makes many recursive calls here.

It is possible to convert any recursive algorithm to a non-recursive one, but the logic is often much more complex, and doing so requires the use of a stack.

In fact, recursion itself uses a stack: the function stack. The stack-like behavior can be seen in the following example:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
0

You may nest a function within another function. The nested (inner) function is private to its containing (outer) function.

It also forms a closure. A closure is an expression (most commonly, a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).

Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.

To summarize:

  • The inner function can be accessed only from statements in the outer function.
  • The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.

The following example shows nested functions:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
1

Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
2

Notice how

function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
9 is preserved when
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
0 is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
1. The memory can be freed only when the returned
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
0 is no longer accessible.

This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.

Functions can be multiply-nested. For example:

  • A function (
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3) contains a function (
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4), which itself contains a function (
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5).
  • Both functions
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4 and
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5 form closures here. So,
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4 can access
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3, and
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5 can access
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4.
  • In addition, since
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5 can access
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4 which can access
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3,
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5 can also access
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3.

Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called scope chaining. (The reason it is called "chaining" is explained later.)

Consider the following example:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
3

In this example,

function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
5 accesses
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
4's
let myFunc;
if (num === 0) {
  myFunc = function (theObject) {
    theObject.make = 'Toyota';
  }
}
9 and
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
3's
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
9.

This can be done because:

  1. function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4 forms a closure including
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3 (i.e.,
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4 can access
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3's arguments and variables).
  2. function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5 forms a closure including
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4.
  3. Because
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5's closure includes
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4 and
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4's closure includes
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3, then
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5's closure also includes
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3. This means
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5 can access both
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4 and
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3's arguments and variables. In other words,
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    5 chains the scopes of
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    4 and
    function map(f, a) {
      const result = new Array(a.length);
      for (let i = 0; i < a.length; i++) {
        result[i] = f(a[i]);
      }
      return result;
    }
    
    const f = function (x) {
      return x * x * x;
    }
    
    const numbers = [0, 1, 2, 5, 10];
    const cube = map(f, numbers);
    console.log(cube);
    
    3, in that order.

The reverse, however, is not true.

function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
3 cannot access
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
5, because
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
3 cannot access any argument or variable of
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
4, which
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
5 is a variable of. Thus,
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
5 remains private to only
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
4.

When two arguments or variables in the scopes of a closure have the same name, there is a name conflict. More nested scopes take precedence. So, the innermost scope takes the highest precedence, while the outermost scope takes the lowest. This is the scope chain. The first on the chain is the innermost scope, and the last is the outermost scope. Consider the following:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
4

The name conflict happens at the statement

return number * number;
17 and is between
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
0's parameter
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
9 and
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
1's variable
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
9. The scope chain here is {
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
0,
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
1, global object}. Therefore,
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
0's
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
9 takes precedences over
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
1's
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
9, and
return number * number;
28 (
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
0's
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
9) is returned instead of
return number * number;
31 (
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);
1's
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}
9).

Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to).

However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function.

Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the outer function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
5

It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
6

In the code above, the

return number * number;
34 variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent" and "encapsulated" data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
7

Note: There are a number of pitfalls to watch out for when using closures!

If an enclosed function defines a variable with the same name as a variable in the outer scope, then there is no way to refer to the variable in the outer scope again. (The inner scope variable "overrides" the outer one, until the program exits the inner scope. It can be thought of as a .)

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
8

The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
9

where

return number * number;
35 is the ordinal number of the argument, starting at
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
1. So, the first argument passed to a function would be
return number * number;
37. The total number of arguments is indicated by
return number * number;
38.

Using the

return number * number;
39 object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use
return number * number;
38 to determine the number of arguments actually passed to the function, and then access each argument using the
return number * number;
39 object.

For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
0

You can pass any number of arguments to this function, and it concatenates each argument into a string "list":

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
1

Note: The

return number * number;
39 variable is "array-like", but not an array. It is array-like in that it has a numbered index and a
return number * number;
43 property. However, it does not possess all of the array-manipulation methods.

See the

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
2 object in the JavaScript reference for more information.

There are two special kinds of parameter syntax: default parameters and rest parameters.

In JavaScript, parameters of functions default to

return number * number;
45. However, in some situations it might be useful to set a different default value. This is exactly what default parameters do.

In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are

return number * number;
45.

In the following example, if no value is provided for

return number * number;
47, its value would be
return number * number;
45 when evaluating
return number * number;
49, and a call to
return number * number;
50 would normally have returned
return number * number;
51. However, this is prevented by the second line in this example:

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
2

With default parameters, a manual check in the function body is no longer necessary. You can put

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
8 as the default value for
return number * number;
47 in the function head:

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
3

For more details, see default parameters in the reference.

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

In the following example, the function

return number * number;
50 uses rest parameters to collect arguments from the second one to the end. The function then multiplies these by the first argument.

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
4

An arrow function expression (also called a fat arrow to distinguish from a hypothetical

return number * number;
55 syntax in future JavaScript) has a shorter syntax compared to function expressions and does not have its own
return number * number;
56,
return number * number;
39,
return number * number;
58, or
return number * number;
59. Arrow functions are always anonymous.

Two factors influenced the introduction of arrow functions: shorter functions and non-binding of

return number * number;
56.

In some functional patterns, shorter functions are welcome. Compare:

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
5

Until arrow functions, every new function defined its own

return number * number;
56 value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). This proved to be less than ideal with an object-oriented style of programming.

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
6

In ECMAScript 3/5, this issue was fixed by assigning the value in

return number * number;
56 to a variable that could be closed over.

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
7

Alternatively, a bound function could be created so that the proper

return number * number;
56 value would be passed to the
return number * number;
64 function.

An arrow function does not have its own

return number * number;
56; the
return number * number;
56 value of the enclosing execution context is used. Thus, in the following code, the
return number * number;
56 within the function that is passed to
return number * number;
68 has the same value as
return number * number;
56 in the enclosing function:

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30
8

JavaScript has several top-level, built-in functions:

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
3

The

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))
3 method evaluates JavaScript code represented as a string.

return number * number;
72

The global

return number * number;
72 function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.

return number * number;
74

The

return number * number;
74 function determines whether a value is
return number * number;
51 or not. Note: coercion inside the
return number * number;
77 function has rules; you may alternatively want to use
return number * number;
78 to determine if the value is Not-A-Number.

return number * number;
79

The

return number * number;
79 function parses a string argument and returns a floating point number.

return number * number;
81

The

return number * number;
81 function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

return number * number;
83

The

return number * number;
83 function decodes a Uniform Resource Identifier (URI) previously created by
return number * number;
85 or by a similar routine.

return number * number;
86

The

return number * number;
86 method decodes a Uniform Resource Identifier (URI) component previously created by
return number * number;
88 or by a similar routine.

return number * number;
89

The

return number * number;
89 method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

return number * number;
91

The

return number * number;
91 method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

return number * number;
93

The deprecated

return number * number;
93 method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use
return number * number;
85 or
return number * number;
88 instead.

return number * number;
97

The deprecated

return number * number;
97 method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like
return number * number;
99. Because
return number * number;
97 is deprecated, use
return number * number;
83 or
function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;
02 instead.

Apa itu function JavaScript?

Fungsi Javascript kira-kira meliputi pembuatan aplikasi mobile, desktop, web, game, sampai membuat slide presentasi. Meskipun fungsi Javascript cukup banyak, biasanya bahasa pemrograman ini digunakan untuk aplikasi web. Hal ini karena website bisa terlihat lebih menarik dengan Javascript.

Apa fungsi this pada JavaScript?

this digunakan di dalam sebuah fungsi dan mengandung nilai dari objek yang memanggil fungsi tersebut. Kita perlu menggunakan this untuk mengakses metode dan properti dari objek yang memanggil fungsi tersebut, terlebih lagi jika kita tidak selalu tahu nama yang digunakan oleh objek tersebut.

Apa itu parameter di JavaScript?

Parameter adalah data-data yang sifatnya tidak tetap (bisa berubah-ubah) yang dimasukkan dan diolah dalam sebuah fungsi Javascript.

Aturan apa saja dalam pembuatan function?

Aturan-aturan dalam pembuatan function adalah : 1. Aturan penamaan function mirip dengan penamaan variable. Terdiri dari huruf, angka dan underscore ( _ ). Nama function hanya boleh dimulai dengan huruf atau dengan underscore. 2. Parameter sifatnya tambahan.