JavaScript ES7 Flashcards For Frontend Developers

JavaScript ES7 allows developers to include trailing commas in function parameters, which can make it easier to add or remove parameters without changing the syntax. Here is an example code for using trailing commas in function parameters:

/* Trailing Commas in Function Parameters */
function myFunction(param1, param2,) {
  console.log(param1, param2);
}
myFunction("hello", "world",);

Array.prototype.includes() is a new method in JavaScript that checks if an array includes a specific value. Here is an example code for using Array.prototype.includes():

/* Array.prototype.includes() */
let myArray = [1, 2, 3];
console.log(myArray.includes(2)); // true
console.log(myArray.includes(4)); // false

String.prototype.padStart() and String.prototype.padEnd() are two new methods in JavaScript that pad a string with a given character or string. Here is an example code for using String.prototype.padStart() and String.prototype.padEnd():

/* String.prototype.padStart() and String.prototype.padEnd() */
let myString = "hello";
console.log(myString.padStart(8, "*")); // "**hello"
console.log(myString.padEnd(8, "*")); // "hello**"

Array.prototype.flat() is a new method in JavaScript that flattens nested arrays. Here is an example code for using Array.prototype.flat():

/* Array.prototype.flat() */
let myArray = [1, [2, 3], [4, [5, 6]]];
let flatArray = myArray.flat();
console.log(flatArray); 
// [1, 2, 3, 4, [5, 6]]

Object.getOwnPropertyDescriptors() is a new method in JavaScript that returns an object containing all property descriptors of a given object. Here is an example code for using Object.getOwnPropertyDescriptors():

/* Object.getOwnPropertyDescriptors() */
let myObject = {
  name: "John",
  age: 30,
  get fullName() {
    return `${this.name} Doe`;
  },
};
let descriptors = Object.getOwnPropertyDescriptors(myObject);
console.log(descriptors);

Await is a new keyword in JavaScript that can only be used inside async functions. It pauses the execution of the async function until the promise is resolved or rejected. Here is an example code for using await:

/* Await */
async function myFunction() {
  let result = await fetch("https://api.example.com/data");
  let data = await result.json();
  console.log(data);
}

Optional chaining (?.) is a new operator in JavaScript that allows developers to safely access nested properties or methods that may not exist without causing an error. Here is an example code for using optional chaining:

/* Optional Chaining */
let myObject = { name: "John", address: { city: "Anytown" } };
console.log(myObject.address?.city); // "Anytown"
console.log(myObject.address?.zip); // undefined

Promise.prototype.finally() is a new method in JavaScript ES7 that allows developers to execute code after a promise is settled, whether it was fulfilled or rejected. Here is an example code for using Promise.prototype.finally():

/* Promise.prototype.finally() */
Promise.resolve("hello")
  .then(result => console.log(result))
  .finally(() => console.log("done"));

Object.values() is a new method in JavaScript that returns an array of values from an object. Here is an example code for using Object.values():

/* Object.values() */
let myObject = { name: "John", age: 30 };
let values = Object.values(myObject);
console.log(values); 
// ["John", 30]

The nullish coalescing operator (??) is a new operator in JavaScript that returns the right operand if the left operand is null or undefined, otherwise it returns the left operand. Here is an example code for using the nullish coalescing operator:

/* Nullish Coalescing Operator */
let myValue = null;
let result = myValue ?? "default";
console.log(result); // "default"

Object.entries() is a new method in JavaScript that returns an array of key-value pairs from an object. Here is an example code for using Object.entries():

/* Object.entries() */
let myObject = { name: "John", age: 30 };
let entries = Object.entries(myObject);
console.log(entries); 

// [["name", "John"], ["age", 30]]

Async functions are a new way of writing asynchronous code in JavaScript. They allow developers to write asynchronous code that looks like synchronous code, which can make it easier to understand and debug. Here is an example code for using async functions:

/* Async Function */
async function myFunction() {
  let result = await fetch("https://api.example.com/data");
  let data = await result.json();
  console.log(data);
}

Array.prototype.flatMap() is a new method in JavaScript that combines map and flat in a single method. It first maps each element using a mapping function, then flattens the result into a new array. Here is an example code for using Array.prototype.flatMap():

/* Array.prototype.flatMap() */
let myArray = [1, 2, 3];
let newArray = myArray.flatMap(x => [x, x * 2]);
console.log(newArray); 
// [1, 2, 2, 4, 3, 6]

BigInt is a new primitive data type in JavaScript ES7 that can represent integers with arbitrary precision. BigInts can be created by appending the letter "n" to an integer literal or by using the BigInt() constructor. Here is an example code for using BigInt:

/* BigInt */
let myBigInt = 12345678901234567890n;
console.log(myBigInt);

The exponentiation operator, also known as the power operator, is a new operator in JavaScript that raises the left operand to the power of the right operand. Here is an example code for using the exponentiation operator:

/* Exponentiation Operator */
let x = 2;
let y = 3;
console.log(x ** y); 
// 8