Javascript ES6 tutorial

 

Array find()

Array findIndex()

Array keys()

Array.from()

Arrow Functions

Classes

const const keyword

Default Parameters

For/of

Function Rest Parameter

JavaScript Modules

let keyword

Map Objects

New Global Methods

New Math Methods

New Number Methods

New Number Properties

Object entries

Promises

Set Objects

String.endsWith()

String.includes()

String.startsWith()

Symbol

The ... Operator

ES6 Features Topic	Explanation	Code Example
Array find()	The find() method returns the value of the first element in the array that satisfies the provided testing function. If no elements satisfy the testing function, undefined is returned.	const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); // expected output: 12
Array findIndex()	Similar to find(), findIndex() returns the index of the first element in the array that satisfies the provided testing function. If no elements satisfy the function, it returns -1.	const array2 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.log(array2.findIndex(isLargeNumber)); // expected output: 3
Array keys()	The keys() method returns a new Array Iterator object that contains the keys for each index in the array.	const array3 = ['a', 'b', 'c']; const iterator = array3.keys(); for (const key of iterator) { console.log(key); } // expected output: 0 1 2
Array.from()	Array.from() creates a new, shallow-copied Array instance from an array-like or iterable object.	console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"]
Arrow Functions	Arrow functions provide a concise syntax for writing function expressions. They utilize a new token, =>, that looks like an arrow. Arrow functions are anonymous and change the way this binds in functions.	const elements = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium']; console.log(elements.map(element => element.length)); // expected output: Array [8, 6, 7, 9]

ES6 Features Topic	Explanation	Code Example
Classes	Classes are a template for creating objects. They encapsulate data with code. ES6 classes are syntactical sugar over JavaScript's existing prototype-based inheritance.	class Rectangle { constructor(height, width) { this.height = height; this.width = width; } }
const keyword	The const keyword allows you to declare variables whose values are never intended to change. The variable is read-only after its initial value is set.	const PI = 3.14159;
Default Parameters	Functions can be initialized with default parameters, which will be used only if an argument is not provided by the caller.	function multiply(a, b = 1) { return a * b; } console.log(multiply(5)); // expected output: 5
For/of	The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set.	let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // expected output: 10 20 30
Function Rest Parameter	The rest parameter syntax allows us to represent an indefinite number of arguments as an array.	function sum(...args) { return args.reduce((previous, current) => previous + current); } console.log(sum(1, 2, 3)); // expected output: 6
JavaScript Modules	ES6 introduced a way to easily share code across files through the use of imports and exports.	// file square.js export function square(x) { return x * x; } // file main.js import { square } from './square.js'; console.log(square(5)); // expected output: 25
let keyword	The let keyword is used to declare variables that are limited to the scope of a block statement, or expression on which it is used, unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.	let x = 10; if (true) { let x = 20; // only inside this block console.log(x); // expected output: 20 } console.log(x); //

ES6 Features Topic	Explanation	Code Example
Map Objects	Map objects are simple key/value maps. Any value (both objects and primitive values) may be used as either a key or a value.	let map = new Map(); map.set('k1', 'v1'); console.log(map.get('k1')); // Output: 'v1'
New Global Methods	ES6 introduced new methods to the ECMAScript standard library, such as methods to work with arrays and objects.	console.log(Number.isNaN(42)); // Output: false
New Math Methods	New methods were added to the Math object, including mathematical operations like trigonometric and logarithmic functions.	console.log(Math.trunc(4.9)); // Output: 4
New Number Methods	ES6 introduced methods for safe integer checks, parsing integers and more on the Number object.	console.log(Number.isSafeInteger(123)); // Output: true
New Number Properties	ES6 defined new properties on the Number object to represent numeric limits.	console.log(Number.MAX_SAFE_INTEGER); // Output: 9007199254740991
Object entries	Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs.	const object = { a: 'somestring', b: 42 }; for (let [key, value] of Object.entries(object)) { console.log(\${key}: ${value}`); }`
Promises	Promises are a pattern that greatly simplifies asynchronous programming by making the code look synchronous.	let myPromise = new Promise((resolve, reject) => { resolve('Success!'); }); myPromise.then((successMessage) => { console.log(successMessage); });
Set Objects	Set objects are collections of values; you can iterate through the elements of a set in insertion order.	let set = new Set(); set.add(1); console.log(set.has(1)); // Output: true
String.endsWith()	Determines whether a string ends with the characters of a specified string.	console.log('Cats are great pets.'.endsWith('pets.')); // Output: true
String.includes()	Determines whether one string may be found within another string.	console.log('Hello, world!'.includes('world')); // Output: true
String.startsWith()	Determines whether a string begins with the characters of a specified string.	console.log('Hello, world!'.startsWith('Hello')); // Output: true
Symbol	A symbol is a unique and immutable primitive value and may be used as the key of an Object property.	let sym1 = Symbol('sym'); let sym2 = Symbol('sym'); console.log(sym1 === sym2); // Output: false
The ... Operator	The spread operator allows an iterable such as an array expression or string to be expanded in places where zero or more arguments or elements are expected. The rest parameter syntax looks exactly like it but is used for destructuring arrays and objects.	let parts = ['shoulders', 'knees']; let lyrics = ['head', ...parts, 'and', 'toes']; // Output: ["head", "shoulders", "knees", "and", "toes"]