DEV Community

Harshit Kedia
Harshit Kedia

Posted on

Useful Javascript ES6 nuggets

Useful Javascript ES6 nuggets:

Started learning ES6 from freecodecamp, some useful points I Summarized:

:> Global scope of var vs local scope of let:

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
Enter fullscreen mode Exit fullscreen mode

Here, printNumTwo() prints 3 and not 2. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop. The let keyword does not follow this behavior:

let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
console.log(i);
Enter fullscreen mode Exit fullscreen mode

Here the console will display the value 2, and an error that i is not defined, because let's scope is limited to the block, function or statement in which you declare it.

*I noticed that we need to change javascript to strict mode by writing "use strict" at the beginning of the code for the solution of 'let' keyword to work.

:> Const declaration alone doesn't really protect your data from mutation, like adding/changing elements or properties in arrays or objects respectively. To ensure your data doesn't change, JavaScript provides a freeze function to prevent data mutation. Syntax: Object.freeze(arr)

:> Syntax of inline function without name:

const myFunc = function(argument) {
  const myVar = "value";
  return myVar;
}
Enter fullscreen mode Exit fullscreen mode

OR

const myFunc = (argument) => {
  const myVar = "value";
  return myVar;
}
Enter fullscreen mode Exit fullscreen mode

:> Default parameters in function kick in when the argument is not specified (it is undefined). Ex:

const greeting = (name = "Anonymous") => "Hello " + name;

console.log(greeting("John"));
console.log(greeting()); 
Enter fullscreen mode Exit fullscreen mode

:> Rest parameter (...args) helps create functions that take a variable number of arguments, eg:

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));
Enter fullscreen mode Exit fullscreen mode

:> Spread operator allows us to expand arrays and other expressions, eg:

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);
Enter fullscreen mode Exit fullscreen mode

*can also use Math.max.apply(null,arr)

:> Spread operator only works in-place, like in an argument to a function or in an array literal, i.e. the following code will not work:

const spreaded = ...arr; // use [...arr]
Enter fullscreen mode Exit fullscreen mode

:> Equivalent for

const name = user.name;
const age = user.age;
Enter fullscreen mode Exit fullscreen mode

is
const { name, age } = user;
OR
const { name: userName, age: userAge } = user;
*new variable names are userName and userAge

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay