Mastering JavaScript ES6: A Guide to Its New Features

Part 3

I will now delve into Part 3 of the recent ES6 features in this story. For the rest of the ES6 features, kindly refer to Part 1 and Part 2.

ES6 — Part-3

8. Classes: Classes in JavaScript ES6 are a way of creating objects that are organized into prototypes and can be used to create similar objects. In ES6, classes provide a syntax that makes it easier to create these objects and manage the relationships between them.

Classes are defined using the class keyword followed by the class name, and the class body is defined within curly braces. The class body contains the constructor, which is used to define the properties and methods of the class.

Here is an example of a class in ES6:

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }
  
  startEngine() {
    console.log("The engine has started.");
  }
}

In the example, a class named Car is defined with a constructor that takes three arguments (make, model, and year). The class also has a method named startEngine that logs a message to the console.

To create an instance of the class, you can use the new operator followed by the class name:

let myCar = new Car("Toyota", "Camry", 2020);
myCar.startEngine(); // logs "The engine has started."

Classes in ES6 can also extend other classes and inherit properties and methods from them. This allows you to create more specialized classes that inherit the properties and methods of a base class.

class ElectricCar extends Car {
  constructor(make, model, year) {
    super(make, model, year);
    this.batteryLevel = 100;
  }
  
  startEngine() {
    console.log("The electric engine has started silently.");
  }
}

In the example, a class named ElectricCar is defined that extends the Car class. The ElectricCar class has a constructor that calls the super method to invoke the constructor of the base class and then sets a batteryLevel property. The ElectricCar class also overrides the startEngine method to log a different message.

Classes in ES6 provide a more organized and readable way to create objects and manage their relationships, compared to traditional prototypes in JavaScript. With prototypes, you have to define the properties and methods directly on the object, which can make the code difficult to maintain. Classes provide a clear syntax and structure for defining objects, making it easier to understand the relationships between them.

9. Modules: Modules in JavaScript ES6 are a way to organize and share code between different files and components. A module is a self-contained unit of code that can be exported and imported in other parts of the application.

In ES6, modules are defined in separate files and use the export keyword to make properties and functions available to other parts of the application. Here's an example of a module that exports a function:

// greet.js
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

To use the exported function from another file, you can use the import keyword and specify the path to the module:

// main.js
import { greet } from './greet';
greet('John'); // logs "Hello, John!"

In the example, the greet function is exported from the greet.js file and then imported into the main.js file. The import statement specifies the greet function that should be imported, and the path to the greet.js file.

You can also use the export default syntax to export a default value from a module. For example:

// math.js
export default function add(a, b) {
  return a + b;
}

To import the default value from the math.js file, you can use the following code:

// main.js
import add from './math';
console.log(add(2, 3)); // logs 5

In the example, the add the function is exported as the default value from the math.js file, and then imported into the main.js file.

Modules in JavaScript ES6 provide a way to organize and share code between different parts of an application, making it easier to maintain and manage large projects. The syntax and usage of modules make it clear which code is exported and imported, providing better organization and structure to your code.

I have now completed Part 1, and Part 2 and Part 3 will move forward with Part 4 in the next story.

If you’re interested in learning more about coding in Javascript, be sure to follow me for more code snippets and examples. I’ll be sharing valuable information and tips on how to master the language and improve your skills as a developer. So, stay tuned for more updates, and let’s continue learning together.