ES6 - What changes did it bring?

roadpilot

roadpilot

Posted on September 20, 2021

ES6 - What changes did it bring?

In 2015, ECMA International, the organization that prescribes the standards for client-side scripting for web browsers introduced ES6 or ECMAScript 6. The changes that ES6 brought were related to Arrow Functions, defining variables, Object Manipulation, "For" loops and the introduction of a new primitive data type 'symbol'.

Arrow Functions:
Before ES6, a function was declared using the "function" keyword. A function would use the "return" keyword to produce the output of the function.

function timesThree(num){
  return (num * 3)
}
Enter fullscreen mode Exit fullscreen mode

With arrow functions, you are not required to use the "function" keyword and return can be implicit (unstated)

const timesThree = (num) => num * 3
Enter fullscreen mode Exit fullscreen mode

Defining Variables:
Did you see that "const" above there? That's also something new. Two new ways of defining variables was added. "const" is a constant value and can not be changed once declared and "let" is the other way that allows a variable to be defined but can allow changes to the variables value after being declared. Previous to "const" and "let", "var" was the method to define a variable but would allow both mutable and immutable variables to be defined.

Object Manipulation:
ES6 introduced destructuring of arrays. This could be a blog of it's own (maybe it will ...) in the meantime, you can learn more about destructuring (and the spread operator) here from Mozilla: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

"For" loops:
ES6 introduced "for ... of" and "for ... in" loops.

let primes = [2, 3, 5, 7];

for(value of primes) {
  console.log(value);
}
//iterates through the array and assigns the VALUE of each element to the "value" variable
Enter fullscreen mode Exit fullscreen mode
let primes = [2, 3, 5, 7];

for(index in primes) {
  console.log(index);
}
//iterates through the array and assigns the INDEX of each element to the index variable (this is returned as a string, and not an integer)
Enter fullscreen mode Exit fullscreen mode

Symbol Data Type:
A symbol is a unique and immutable data type and may be used as an identifier for object properties. The symbol object is an implicit object wrapper for the symbol primitive data type. This primitive type is useful for so-called "private" and/or "unique" keys. It's value is kept private and only for internal use. No user can overwrite it's value. This prevents name clashing between object properties because no symbol is equal to another. You create a symbol calling the "Symbol()" reserved function.

const userID = Symbol()
Enter fullscreen mode Exit fullscreen mode

All of these changes result in an increase in performance but there is no browser that fully supports the ES6 features. Community support is growing but not as prolific as the pre-ES6 community.

💖 💪 🙅 🚩
roadpilot
roadpilot

Posted on September 20, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024