Overview of JavaScript ES6
Get an overview of JavaScript ES6, including new features like arrow functions, promises, let & const, and more. Enhance your coding skills with modern JScript. ES6 introduced many useful features, including:
- Arrow functions: A shorter syntax for writing functions.
javascript
Copy code
const greet = (name) => `Hello, ${name}`;
- Let and Const: Block-scoped variables and constants, unlike var which is function-scoped.
javascript
Copy code
let count = 1;
const PI = 3.14159;
- Template literals: String interpolation and multi-line strings using backticks (“).
javascript
Copy code
const name = ‘John’;
console.log(`Hello, ${name}!`);
- Destructuring: Extracting values from arrays or properties from objects into distinct variables.
javascript
Copy code
const person = { name: ‘John’, age: 25 };
const { name, age } = person;
- Modules: ES6 introduced import and export for modular code structure.
javascript
Copy code
// In a module file (say `math.js`)
export const add = (x, y) => x + y;
// In another file
import { add } from ‘./math’;
console.log(add(2, 3)); // 5
2. Closures
A closure in JavaScript is a function that remembers and has access to its outer lexical environment (scope) even after the outer function has finished executing. Closures are often used for encapsulation and data privacy.
Example:
javascript
Copy code
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
In the above example, inner function forms a closure over the count variable, retaining its state even after outer has finished executing.
For Free Demo classes Call: 8237077325
Registration Link: React JS Classes in Pune!
3. Optional Chaining (?.)
Optional chaining is a feature that allows you to safely access deeply nested properties of an object without having to explicitly check if each reference in the chain is valid or not. If any value in the chain is null or undefined, it safely returns undefined instead of throwing an error.
Example:
javascript
Copy code
const user = { profile: { name: ‘John’ } };
console.log(user.profile?.name); // ‘John’
console.log(user.profile?.age); // undefined (no error thrown)
console.log(user.address?.city); // undefined (no error thrown)
In the second and third console.log, JavaScript does not throw an error if a property does not exist—it returns undefined instead.
4. Spread Syntax (…)
The spread syntax (…) allows you to expand elements of an array or object in places where multiple values are expected. It’s useful for copying, merging, and spreading values.
Spread with Arrays:
javascript
Copy code
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = […arr1, …arr2]; // [1, 2, 3, 4, 5, 6]
const copyArr = […arr1]; // creates a shallow copy
Spread with Objects:
javascript
Copy code
const obj1 = { name: ‘John’, age: 25 };
const obj2 = { job: ‘Developer’ };
const combinedObj = { …obj1, …obj2 }; // { name: ‘John’, age: 25, job: ‘Developer’ }
const copyObj = { …obj1 }; // shallow copy of obj1
5. Property Accessors (Getters and Setters)
Property accessors allow you to define getter and setter methods in an object to get and set properties dynamically. They allow encapsulation and control over how properties are accessed and modified.
Getters:
The get keyword is used to bind an object property to a function that will be called when that property is accessed.
javascript
Copy code
const person = {
firstName: ‘John’,
lastName: ‘Doe’,
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(person.fullName); // John Doe
Setters:
The set keyword binds a property to a function that is called when that property is assigned a value.
javascript
Copy code
const person = {
firstName: ‘John’,
lastName: ‘Doe’,
set fullName(name) {
const parts = name.split(‘ ‘);
this.firstName = parts[0];
this.lastName = parts[1];
}
};
person.fullName = ‘Jane Smith’;
console.log(person.firstName); // Jane
console.log(person.lastName); // Smith
6. Object Initializer
The object initializer syntax allows you to create objects with property-value pairs, typically within curly braces {}. ES6 introduced several enhancements, such as shorthand property names and computed property names.
Shorthand Property Names:
If the variable name and the property name are the same, you can use the shorthand syntax.
javascript
Copy code
const name = ‘John’;
const age = 25;
const person = { name, age }; // same as { name: name, age: age }
console.log(person); // { name: ‘John’, age: 25 }
Computed Property Names:
ES6 allows you to compute property names dynamically using square brackets ([]).
javascript
Copy code
const propName = ‘age’;
const person = {
name: ‘John’,
[propName]: 25 // computed property name
};
console.log(person); // { name: ‘John’, age: 25 }
Method Definition Shorthand:
In ES6, you can define methods in an object literal without the function keyword.
javascript
Copy code
const person = {
name: ‘John’,
greet() {
console.log(‘Hello’);
}
};
Summary of Concepts:
- Closure: Functions remember the environment in which they were created.
- Optional Chaining: Safely access deeply nested properties without worrying about null or undefined.
- Spread Syntax: Spread elements of arrays or objects into other arrays or objects.
- Property Accessors: Use get and set to define dynamic property behavior in objects.
- Object Initializer: Use shorthand syntax for defining objects, computed property names, and method definitions.
Must watch our video on Demand For Full Stack Developers in Future
Author:-
Sonal Vanarse
Call the Trainer and Book your free demo Class for JavaScript Call now!!!
| SevenMentor Pvt Ltd.
© Copyright 2021 | SevenMentor Pvt Ltd