Welcome to the exciting world of ES14 (ES2015) features in JavaScript! These additions have made our beloved language more powerful and user-friendly. In this lesson, we'll dive deep into several ES14 features, perfect for both beginners and intermediate developers. 🎯
<a name="let-and-const"></a>
Let's start with the basics: let and const. They were introduced to provide better scoping and help avoid variable hoisting issues.
let: Used to declare variables that can be reassigned values during runtime.const: Used to declare constants, which cannot be changed after they are initialized.💡 Pro Tip: Use const for variables that will not change during runtime and let for those that may.
// let example
let x = 10;
x = 20;
console.log(x); // Output: 20
// const example
const PI = 3.14;
// PI = 3; // This will result in an error
console.log(PI); // Output: 3.14<a name="template-literals"></a>
Template literals are a simpler, more readable way to create and format strings in JavaScript. They allow you to embed expressions and multiline strings using backticks ( ).
const name = 'John';
const age = 30;
const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // Output: Hello, John! You are 30 years old.<a name="arrow-functions"></a>
Arrow functions are a more concise and easier-to-read syntax for defining functions. They are ideal for small, single-purpose functions.
// Function expression
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b;
console.log(add(5, 3)); // Output: 8<a name="default-parameters"></a>
With default parameters, you can provide default values for function parameters. If no argument is passed for that parameter during the function call, the default value will be used.
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet('John'); // Output: Hello, John!
greet(); // Output: Hello, Guest!<a name="destructuring-assignment"></a>
Destructuring assignment allows you to extract values from arrays and objects easily.
// Array destructuring
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // Output: 1 2 3
// Object destructuring
const obj = { x: 10, y: 20 };
const { x, y } = obj;
console.log(x, y); // Output: 10 20<a name="spread-operator"></a>
The spread operator (...) allows you to easily combine arrays or copy array elements.
// Combining arrays
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4]
// Copying an array
const arr3 = [...arr];
console.log(arr3); // Output: [1, 2, 3]<a name="promises"></a>
Promises are used to handle asynchronous operations in a more structured way. They allow you to handle the result (resolved) or error (rejected) of an asynchronous operation.
const promise = new Promise((resolve, reject) => {
// Simulate an asynchronous operation
setTimeout(() => {
resolve('Result');
}, 1000);
});
promise
.then((result) => console.log(result))
.catch((error) => console.error(error));<a name="quiz-es14-features-recap"></a>
What is the purpose of the `let` keyword in ES14?
What is the difference between `let` and `const`?
What is the purpose of template literals in JavaScript?
Congratulations on learning the essential ES14 features! Keep practicing to master them and enjoy leveling up your JavaScript game. 🎉 Happy coding! 💻💼📊