JavaScript is a constantly evolving programming language, with new features and updates being released regularly. One such feature that is sure to blow developers’ minds in ES2022 is the introduction of the JavaScript private fields.

JavaScript has always had a somewhat weak support for encapsulation and data hiding, which is a fundamental principle of object-oriented programming. In the past, developers have used various techniques such as closures and WeakMap to emulate private fields, but they are often complex and hard to understand. With the introduction of private fields in ES2022, developers can now create truly private fields in JavaScript classes, making it easier to write robust, maintainable and secure code.

To create a private field, developers simply need to prefix the field name with a “#” symbol. For example, the following code creates a private field called “_secret” in a class called “MyClass”:

class MyClass {
  #_secret;

  constructor(secret) {
    this.#_secret = secret;
  }
}

Once a private field has been defined, it can only be accessed within the class or its subclasses, making it truly private and inaccessible from the outside world. This can help to prevent accidental or intentional data leaks and improve the overall security of the application.

In addition, private fields can also be used in conjunction with getters and setters to provide controlled access to the data. For example, the following code creates a private field called “_name” and a getter called “name” that allows the value of the field to be read but not modified.

class MyClass {
  #_name;

  constructor(name) {
    this.#_name = name;
  }

  get name() {
    return this.#_name;
  }
}

One of the most interesting aspect of private fields is that they are also fully supported by the JavaScript reflection API. This means that, unlike closures and WeakMap, private fields are fully inspectable and debuggable. For example, the following code uses the Object.getOwnPropertyDescriptor method to inspect a private field:

console.log(Object.getOwnPropertyDescriptor(MyClass.prototype, "#_secret"));

Another great feature of private fields is that they can also be used in combination with other ES2022 features like decorators. Decorators are a new way of adding metadata to class members, which can be used for things like type checking, performance optimization, and more. For example, the following code uses a decorator to add a type check to a private field:

class MyClass {
  @type("string")
  #_name;

  constructor(name) {
    this.#_name = name;
  }
}

In conclusion, the introduction of private fields in ES2022 is a game-changer for JavaScript developers. It allows for true encapsulation and data hiding in JavaScript classes, making it easier to write robust, maintainable and secure code. Private fields are also fully supported by the JavaScript reflection API, making them fully inspectable and debuggable. And they can be used in combination with other ES2022 features like decorators, making them even more powerful. With the growing popularity of JavaScript, it’s the perfect time for developers to start learning and incorporating these new features into their projects.

ES6 brought a lot of new and exciting features to JavaScript. These features are making the lives of developers easier than ever before by allowing them to code in a more elegant and concise way. 

Among other features, ES6 also included multiple upgrades in parameter handling and that’s what we will be reviewing today. 

In this article, we’ll be discussing the three most-awaited parameter handling features introduced in ES6:

• Default parameters handling 
• Spread operator
• Rest parameter

Parameter and Arguments

There are two basic concepts you must be familiar with before diving deeper into parameter handling:

Parameters: the variable names declared at the time of the function definition.

Arguments: the actual values passed down to a function when it’s called.

Default Parameter Handling 

In any well-coded program, the developer must account for all scenarios. How the function will work if the value is not passed, or if the value is invalid, etc. 

In JavaScript, the default value for function parameters is ‘undefined’.

The default parameter handling feature enables the default values for named parameters if no value or ‘undefined’ is passed. This way, even if an invalid value or no value is passed, the function still works using the default parameter.

The use of modules in JavaScript prompted the need for default values. As default modules must be smart enough to handle a condition where a value is not provided. 

Before ES6

Before default parameters in ES6, the default values were typically assigned using the OR (||) operator. 

What’s Wrong with this approach?

The logic can fail if you explicitly needed the values to be false. It’s of course an edge case, but it shows that there is a gap in the logic. 

Important: In the example above (and nearly all other examples in the article), we’ll be using the arrow functions. It’s another excellent ES6 feature. If you’re unfamiliar with the arrow functions, then it’s a good time to check our article on block scope and arrow functions.

After ES6

ES6 introduced default parameters in JavaScript. It enabled developers to assign a value to the parameters at the time of function definition. The default value will take over if no value or ‘undefined’ is passed. 

In ES6, even if the value of the parameter was explicitly set to ‘undefined’, the function will still use the default value. 

Each time a function is called, the default parameter is re-evaluated and a new object is created. This applies to functions and variables too. 

The parameter values are assigned left-to-right. If you set one default parameter and pass only one value with the function call, then the value passed at the time of function call will overwrite the default value, and the second parameter will still be undefined.

Spread Operators 

Spread operator denoted by three dots (…) takes an iterable such as an array or a string and as the name suggests, spreads its elements onto another array, object, or even as arguments of a function. 

In a nutshell, the spread operator expands an array into its elements.

With the spread operator, we can perform the following operations:

• Concatenate (combine) arrays
• Copy one array to another
• Pass an arbitrary number of arguments to the function

It’s the exact opposite of the REST syntax.

In ES6, the Spread operator worked only with an array. Rest/Spread Properties for ECMAScript proposal added spread properties to the object literals in ES2018. 

Before ES6

The spread operator offered a more concise way to:

• Combine or copy arrays 
• Passing array as an argument

In Function Calls

The apply () function was used to pass array elements as arguments to a function.

In the following example, we’ll pass an array as a function argument using the apply method.

The apply() method gets the job done but it’s quite complicated. 

In Array Literals

Before the spread operator, copying or combining arrays used to require a combination of array functions such as push(), concat(), and splice(). This would make the code messy and difficult to read. 

There was also an issue of copying the ‘array elements’ vs. copying ‘reference to the arrays’. For example, if we copy one array ‘arr’ to another ‘arr2’ using the assignment operator, it will assign arr to arr2. Now, if we make changes in arr2, then arr will be mutated as well. 

After ES6

Compared to the apply function, the spread operator offers a more precise way to pass array elements as arguments. See the example below:

The spread operator is (kind of) an all-in-one solution for copying, combining, or mutating arrays in different ways. 

In the following example, we’ll copy an existing array to another using the spread operator. 

You can also concatenate two arrays easily using the spread operator.

Rest Parameters

Many built-in JavaScript functions (such as Math.max) support an arbitrary number of arguments. The question here is:

How does it work?

How can we create a function that accepts an arbitrary number of arguments?

Rest parameters! 

The Rest parameter enables us to represent an indefinite (or arbitrary) number of arguments as an array. 

The syntax for the Rest parameter (…) is identical to the spread syntax but the concept is different or opposite (to be exact). A few important things about the Rest parameters are:

• In the case of more than one parameter, only the last parameter can be the Rest parameter. 
• Rest parameters can only be used once in the function definition
• Array methods can be used on the Rest parameter, but not on the arguments object

Before ES6

An array-like object ‘argument’ was available to the function definition, in the previous versions of ECMAScript. It contained the values of arguments and could be accessed through the index (like an array). 

The problem with the argument object is that array functions cannot be directly applied to the arguments. Also, argument objects are not available in the arrow functions. 

After ES6

Rest parameters were introduced in ES6 to represent function arguments as an array. The arrow functions cannot use the argument object. Also, The rest operator is much easier to use as compared to the argument object.

Array functions can be applied directly to the Rest parameters. 

In this example, we’ll use the array of the same number from the previous example and apply the array function sort() on it. The function will return a sorted array of numbers. 

Do not confuse Rest parameters with REST (Representational State Transfer) web services. They’re two totally different concepts. 

Reading through the article, you must’ve realized how ES6 solved many previous issues regarding parameter handling in JavaScript. Make sure to practice them in your code. 

We’ll discuss more cool ES6 features in the upcoming article until then, don’t forget to try default parameters, and spread and rest syntax in your code!