DEV Community

Tej
Tej

Posted on • Updated on

ES6

#javascript

Course Credits

  • FreeCodeCamp
  • Dylan Israel
  • Course Link: View.

TOC

  • Template Literals
  • Destructuring
  • Object Literal
  • For of loop
  • Spread operator
  • Rest operator
  • Arrow Functions
  • Default Params
  • Array.includes
  • Let & const
  • Export & import
  • String.padStart(), String.padEnd()
  • Classes
  • Trailing commas
  • Async/Await
  • Sets

Template Literals 

const fruit = "🍌";
const milk = "🥛";
const bananaShake = (fruit, milk) => `(${fruit}) Banana (${milk}) Milk shake is ready.`;
console.log(`${bananaShake(fruit, milk)}`);
Enter fullscreen mode Exit fullscreen mode

Destructuring

Objects 

const purchasedItems = {
  fruit: "🍇",
  vegetable: "🥕",
  bakery: "🍪"
};
const { bakery } = purchasedItems;
console.log(`Hungry? How about try a ${bakery}?`);
Enter fullscreen mode Exit fullscreen mode

Arrays 

const cart = ["🍇", "🥕", "🍪", "🥩"];
const [item] = cart;
console.log(`Cashier scanned ${item} first.`);
Enter fullscreen mode Exit fullscreen mode

Object Literal 

const boilEgg = (egg, water, salt) => {
  const recipe = {
    egg,
    water,
    salt
  };
  console.log(`Get a saucepan, Add 3 cups ${recipe.water} and a pinch of ${recipe.salt}. Throw ${recipe.egg} and boil for 10 minutes.`);
}
boilEgg("🥚", "🚰", "🧂");
Enter fullscreen mode Exit fullscreen mode

For of loop 

let bill = 0;
const receipt = [1.99, 13.67, 14.21, 5.27];
for(const item of receipt) {
  bill += item
};
console.log(`Your total bill is $${bill}.`);
Enter fullscreen mode Exit fullscreen mode

Spread operator 

const purchasedItems = {
  fruit: "🍇",
  vegetable: "🥕",
  bakery: "🍪"
};
const juiceRecipe = {
  ...purchasedItems,
  kitchen: "sugar",
  device: "blender"
};
console.log(`Trying a ${juiceRecipe.vegetable} juice.`);
Enter fullscreen mode Exit fullscreen mode

Rest operator 

const cart = [];
const addItem = (...items) => console.log(`${items} added in the card. Total items in the cart: ${items.length}.`);
addItem("🍎","🥭","🍍","🍌");
Enter fullscreen mode Exit fullscreen mode

Arrow Functions 

const shoppingBag = [
  {id: 1, name: "🥭", type: "fruit"},
  {id: 2, name: "🍎", type: "fruit"},
  {id: 3, name: "🍌", type: "fruit"},
  {id: 4, name: "🥕", type: "vegetable"}
];
const findVegetable = shoppingBag.filter(item => item.type === "vegetable");
findVegetable ? console.log(`${findVegetable.length} vegetable found in the bag.`) : console.log("Forgot to buy vegetables.");
Enter fullscreen mode Exit fullscreen mode

Default Params 

const readyToCheckout = (limit = 10) => limit <= 10 ? console.log(`Today, shopping was in budget.`) : console.log(`Today, lot of items were bought.`)
readyToCheckout(23);
Enter fullscreen mode Exit fullscreen mode

Array.includes 

const receipt = ["🍎","🥭","🍍","🍌"];
receipt.includes("🍌") ? console.log(`You bought bananas?`) : console.log(`How come there are no bananas?`);
Enter fullscreen mode Exit fullscreen mode

Let & const 

let apple;
apple = "🍏";
console.log(`Green Apple: ${apple}`);
apple = "🍎";
console.log(`Red Apple: ${apple}`);
const banana = "🍌";
console.log(`Banana: ${banana}`);
banana = "🌯"; // WRONG
Enter fullscreen mode Exit fullscreen mode

Export & import

String.padStart(), String.padEnd() 

let apple = "🍏";
let banana = "🍌";
const dozenApples = apple.padStart(12, apple);
const dozenBananas = banana.padEnd(12, banana);
console.log(`Buy dozen apples: ${dozenApples}. Total apples: ${dozenApples.length}`);
console.log(`Buy dozen bananas: ${dozenBananas}. Total bananas: ${dozenApples.length}`);
Enter fullscreen mode Exit fullscreen mode

Classes

Trailing commas

Trailing commas after function arguments, object declaration works, is not recommended.

Async/Await

Sets 

let cart = new Set(["🍇", "🥕", "🍪", "🍪", "🍪", "🍪", "🥩"]);
console.log(`Total unique items in the cart: ${cart.size}`);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

magi-magificient profile image

what is Playwright ? Why?

Mangai Ram -

dhodvogner profile image

Earth Day Celebration Landing Page submission

Daniel Hodvogner -

the_greatbonnie profile image

Build an AI-powered blogging platform (Next.js, Langchain & CopilotKit)

Bonnie -

steeve profile image

Search Component with RiotJS (Material Design)

Steeve -