Categories
JavaScript

Good Parts of JavaScript — Function

Spread the love

JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages.

In this article, we’ll look at some good parts of JavaScript functions.

Function Objects

In JavaScript, functions are objects. And like any other object, it has key-value pairs and has prototypes of its own.

Functions are linked to Function.prototype , which is linked to Object.prototype .

All functions have 2 additional properties, which are the function’s context and the code that implements its behavior, which is the function’s body.

Each function is created with a prototype property, which is an object with the constructor property whose value is a function.

This is distinct from Function.prototype .

Function.prototype is the parent object of function, and the prototype property is a property of the function itself.

Since functions are just objects, they can be stored in variables, objects, and arrays.

Functions can be passed as arguments to functions and functions can be returned from another function.

Since functions are objects, they can have methods of their own.

Function Literal

We can create JavaScript functions as function literals.

For instance, we can write the following:

const add = function(a, b) {  
  return a + b;  
};

or we can write:

const add = (a, b) => {  
  return a + b;  
};

Functions can have up to 4 parts.

For traditional functions, we have the function keyword, the name of the function, parameters, and the body.

For arrow functions, we have the function keyword, parameters, and the body.

Parameters of a function are wrapped in parentheses.

It has a set of zero or more parameter names, separated by commas.

The names will be defined as variables in a function.

Parameters are set to the argument that’s passed in as the value. They’re set depending on the position.

So the first parameter’s value will be the first argument, the second parameter’s value will be the 2nd argument, and so on.

Functions parameters can also have default values set to them.

If we assign it a default value, then when we omit the parameter or pass in undefined , then the parameter’s value will be set to the default value when we call it.

This way, we don’t have to worry about parameters not having a value.

We can also have rest parameters, where all the arguments that aren’t set to a parameter are put into an array.

A function created by a function literal that contains a link to the outer function’s context is called a closure.

To add default parameters, we can write:

const add = (a, b = 1) => {  
  return a + b;  
};

Now if we don’t pass in a value for b when we call add, b will be set to 1.

To add a rest parameter, we can write the following:

const add = (a, b, ...rest) => {  
  //...  
};

The rest will be an array that has arguments that are after the 2nd argument.

We can create a closure by writing:

const foo = (() => {  
  //...  
  return () => {  
    //...  
  }  
})();

The returned function can have access to the outer function’s variable.

These are useful because we can put private variables in the outer function that isn’t accessible to the outside.

However, we can use those variables in the returned function.

This is a good way to hold private variables since there’re no way to hold them in classes.

The only alternative to hold private variables is in modules.

Invocation

Invoking a function ends the execution of the current function, and pass control to parameters of the new function.

Every function have this and arguments as the variables in addition to the parameters.

this is very important since it holds the object that it’s in or the instance of a constructor.

The invocation operator is a pair of parentheses that surround arguments.

For instance, we can write:

add(1, 2);

to call the add function with 1 and 2 as arguments.

Conclusion

In JavaScript, functions are objects. There’re a few parts to a function. It includes the function keyword, parameters, the body, and the name.

Not all functions will have all the parts.

There are 2 kinds of functions. They include arrow functions and traditional functions.

Functions can have default and rest parameters.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *