Day 11 of 100 Days of Code: Mastering ES6 Modules and Classes in JavaScript
An insightful article exploring ES6 Modules & Classes in JavaScript,complete with code snippets & practical project to enhance…
Day 11 of 100 Days of Code: Mastering ES6 Modules and Classes in JavaScript
On Day 11, we delve into two critical features of ECMAScript 6 (ES6) that have transformed JavaScript development: Modules and Classes. ES6 Modules provide a robust way to manage code across different files, and Classes offer a cleaner, more intuitive syntax for object-oriented programming.
Understanding ES6 Modules
Modules in JavaScript are a way to split code into reusable pieces.
Exporting and Importing Modules
- Export Syntax:
// In file mathFunctions.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;- Import Syntax:
// In a different file
import { add, subtract } from './mathFunctions.js';
console.log(add(5, 3)); // Outputs: 8Default Exports:
- Example:
// In file greet.js
export default function greet(name) {
return `Hello, ${name}!`;
}// In another file
import greet from './greet.js';
console.log(greet('Alice')); // Outputs: Hello, Alice!Classes in ES6
ES6 introduced a **class syntax that simplifies creating constructor functions and handling inheritance**.
Defining Classes
- Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
}
}
const alice = new Person('Alice', 25);
console.log(alice.greet()); // Outputs: Hi, I'm Alice and I'm 25 years old.Inheritance in Classes
- Example:
class Student extends Person {
constructor(name, age, course) {
super(name, age);
this.course = course;
}
introduce() {
return `${this.greet()} I study ${this.course}.`;
}
}
const bob = new Student('Bob', 20, 'Computer Science');
console.log(bob.introduce());Project: Building a Simple Web Application using ES6 Modules and Classes
Let’s create a web application that uses both ES6 modules and classes. For example, a simple “Book Library” app.
Setting Up Modules
- Book Class (book.js):
export default class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
getInfo() {
return `${this.title} by ${this.author}`;
}
}- Library Management (library.js):
import Book from './book.js';
export class Library {
constructor() {
this.books = [];
}
addBook(title, author) {
const book = new Book(title, author);
this.books.push(book);
}
displayBooks() {
return this.books.map(book => book.getInfo()).join('<br>');
}
}HTML Structure
- Include scripts with type
module:
<!DOCTYPE html>
<html>
<head>
<title>Book Library</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="library"></div>
<script type="module" src="app.js"></script>
</body>
</html>App Initialization (app.js):
- Bootstrap the Application:
import { Library } from './library.js';
const myLibrary = new Library();
myLibrary.addBook('1984', 'George Orwell');
myLibrary.addBook('Brave New World', 'Aldous Huxley');
document.getElementById('library').innerHTML = myLibrary.displayBooks();Adding CSS Styling (style.css):
- Basic Styling:
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 20px;
}
#library {
border: 1px solid #ddd;
padding: 20px;
}
App Preview
Day 11 has provided a comprehensive overview of ES6 Modules and Classes, demonstrating their practicality in modern JavaScript development. These features not only streamline code organization but also enhance the readability and maintainability of your code.
메타데이터
- post_id
- 211d59dbc8bd
- slug
- day-11-of-100-days-of-code-mastering-es6-modules-and-classes-in-javascript-211d59dbc8bd
- url
- https://medium.com/@sampath.theekoder/day-11-of-100-days-of-code-mastering-es6-modules-and-classes-in-javascript-211d59dbc8bd
- canonical_url
- https://medium.com/@sampath.theekoder/day-11-of-100-days-of-code-mastering-es6-modules-and-classes-in-javascript-211d59dbc8bd
- author_url
- https://medium.com/@sampath.theekoder
- status
- ok
- fetched_at
- 2026-07-13 06:23:13
