If you are learning JavaScript the you will hear about ES6. Many students get confused at first. I also had the same confusion during my B.Tech second year when I started learning JavaScript seriously for web development projects.
Basically, ES6 (ECMAScript 2015) is a major update of JavaScript that introduced many new features which make coding easier, cleaner and more powerful.
Before ES6, JavaScript code used to look long and sometimes confusing. After ES6, developers got better tools like:
- let and const
- Template literals
- Arrow functions
- Destructuring
- Classes
- Modules
In this blog I will explain some of the most important ES6 features that beginners must know. I will explain them in very simple way.
So let’s start.
Let and Const
Why We Needed Let and Const
Before ES6, developers mostly used the var keyword to declare variables.
Example:
var name = "Ankit";
But the problem with var was scope issues. Many times beginners used to create bugs without realizing it.
When I was practicing JavaScript problems on my laptop during my college days, I also faced strange bugs because of var. Sometimes a variable declared inside a block was accessible outside also. That created confusion.
So ES6 introduced two new keywords:
- let
- const
These help us write safer and cleaner code.
Let Keyword
let is used to declare variables whose values can change later.
Example:
let marks = 80;
marks = 90;
Here the value is changing which is allowed.
Example
Suppose you are calculating assignment marks.
let assignmentMarks = 20;
assignmentMarks = 25;
Maybe after rechecking, the teacher updated your marks. So let works perfectly here.
Const Keyword
const is used when the value should not change.
Example:
const collegeName = "ABC Engineering College";
If you try to change it:
collegeName = "XYZ College";
JavaScript will give an error.
Real life Example
Your date of birth or college name usually doesn't change in your program. So we use const.
const dob = "12-08-2001";
Var vs Let vs Const
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function scope | Block scope | Block scope |
| Reassignment | Allowed | Allowed | Not allowed |
| Redeclaration | Allowed | Not allowed | Not allowed |
In simple words:
- Use let when value changes
- Use const when value should stay fixed
In modern JavaScript projects, many developers prefer const by default and use let only when needed.
Template Literals
Another very useful ES6 feature is Template Literals.
Many students get confused here in the beginning, but honestly once you understand it will become very easy.
Template literals help us create strings in a better and cleaner way.
Before ES6 (Old Way)
Earlier we used string concatenation.
Example:
let name = "Ankit";
let message = "Hello " + name + ", welcome to JavaScript";
This works, but when strings become long the code becomes messy.
ES6 Template Literals
Template literals use backticks ( ` ) instead of quotes.
Example:
let name = "Ankit";
let message = `Hello ${name}, welcome to JavaScript`;
Here ${} allows us to insert variables inside strings.
Example
Suppose you are making a student dashboard project.
let studentName = "Rahul";
let marks = 85;
let result = `Student ${studentName} scored ${marks} marks in JavaScript.`;
Output:
Student Rahul scored 85 marks in JavaScript.
See how clean the code looks.
Multiline Strings
Another big advantage is multiline strings.
Old way:
let text = "Hello students\nWelcome to JavaScript class";
New ES6 way:
let text = `Hello students
Welcome to JavaScript class`;
Much easier to read.
Arrow Functions
Arrow functions are one of the most popular ES6 features.
When I started learning React.js, I noticed arrow functions everywhere. At first I felt confused but after practicing a few examples it became very simple.
Basically, arrow functions allow us to write shorter and cleaner functions.
Normal Function (Old Way)
function add(a, b) {
return a + b;
}
Arrow Function (ES6)
const add = (a, b) => {
return a + b;
};
Even shorter:
const add = (a, b) => a + b;
Very simple.
Example from Coding Practice
Suppose you are calculating total marks.
const totalMarks = (math, science) => math + science;
console.log(totalMarks(80, 90));
Output:
170
Why Developers Like Arrow Functions
Arrow functions:
- Make code shorter
- Improve readability
- Commonly used in React
- Useful with array methods
Example:
let numbers = [1,2,3,4];
let squares = numbers.map(num => num * num);
Output:
[1,4,9,16]
During my React learning phase, I realized arrow functions are used everywhere. So it's good to practice them early.
Destructuring
Another powerful ES6 feature is Destructuring.
In simple words, destructuring helps us extract values from objects or arrays easily.
At first this may look strange, but actually it saves a lot of coding time.
Array Destructuring
Example:
let marks = [80, 90, 85];
let [math, science, english] = marks;
console.log(math);
Output:
80
Instead of writing:
let math = marks[0];
let science = marks[1];
Destructuring makes it much easier.
Example from Student Data
Suppose you have student marks.
let marks = [75, 82, 90];
let [physics, chemistry, maths] = marks;
console.log(maths);
Output:
90
Object Destructuring
This is even more useful when working with APIs or projects.
Example:
let student = {
name: "Ankit",
branch: "CSE",
year: 4
};
let {name, branch} = student;
console.log(name);
Output:
Ankit
Real Project Example
Suppose you are building a student management system.
API returns this data:
let student = {
id: 101,
name: "Rahul",
course: "B.Tech",
marks: 88
};
With destructuring:
let {name, marks} = student;
Now you can use name and marks directly.
Very clean and simple.
Why ES6 Features Are Important
Many students ask this question during interview preparation.
Why should we learn ES6?
Here are some reasons:
- Modern JavaScript uses ES6
- Frameworks like React, Angular, Node.js depend on it
- Code becomes cleaner
- Less chance of errors
- Easier to understand in team projects
When I started building small projects, I realized ES6 features save a lot of time and make the code look professional.
FAQs
What is ES6 in JavaScript?
ES6 stands for ECMAScript 2015, which is a major update of JavaScript that introduced new features like let, const, arrow functions, template literals and destructuring.
What is the difference between let and const?
let allows changing values.
const does not allow reassignment.
let marks = 80; marks = 90;
But:
const marks = 80; marks = 90; // error
Why are arrow functions used?
Arrow functions help us write shorter and cleaner code. They are widely used in modern JavaScript frameworks like React.
What are template literals?
Template literals allow us to create strings using backticks ( ) and insert variables using ${}.
let name = "Ankit"; console.log(`Hello ${name}`);
What is destructuring in JavaScript?
Destructuring allows us to extract values from arrays or objects easily.
let [a, b] = [10, 20];
Conclusion
JavaScript ES6 introduced many features that made coding simpler, cleaner and more powerful.
In this blog, we discussed some important ES6 features:
- let and const
- Template literals
- Arrow functions
- Destructuring
In simple words, ES6 helps developers write modern JavaScript code that is easier to understand and maintain.
From my own learning experience once you start using these features in small projects or coding practice they become very natural. At first it may feel confusing, but after writing some code, everything starts making sense.
So my small suggestion for students is:
- Practice ES6 while solving JavaScript problems
- Use these features in mini projects
- Try implementing them in React projects
Slowly you will notice your JavaScript skills improving.
And trust me, when you see clean ES6 code working perfectly in your project it feels really satisfying.
Happy coding! 🚀
