JavaScript 101: ES6 and Beyond
This article is part of the JavaScript 101 series, you can find the previous part on the following link: JavaScript 101: Object Oriented Programming.
What is ECMAScript 6
ECMAScript is a scripting language specification for the JavaScript programming language, the first edition started in 1997, but here we will talk about the 6th edition or ECMAScript 2015 and beyond. In the ES6, short for ECMAScript 6 there were added significant new features, new syntax for writing a more complex and modern application, though web browsers support for ES6 is not yet complete, major browsers support some features. Let's dive into the major features of the ES6.
Constants
Constants or const are values that are defined once per scope, and cannot be redefined again. They are a very good replacement for var in a lot of situations when we don't want to assign new value by mistake.
const value = 5 //we are defining a constant
value = 2 //can not be assigned again!
Let
The let are allowing us to declare a variable with block scope, variables declared retain the value till the end of the current block. The const is block-scoped too.
{
let a = 5
{
let a = 2
console.log('inner value is: '+ a)
}
console.log('outer value is: ' + a)
}
//Results
'inner value is: 2'
'outer value is: 5'
Arrow Functions
The arrow function is a new, shorter syntax for writing functions, the {}, function and the return keywords are not needed. Arrow functions doesn't have this, that's why they are not very good for object methods.
const add = arg => arg + 5
add(5); //Result is 10
Default Function Parameters
Function parameters now can be set with default values, when the undefined argument is passed, the default value will be used.
const add = (arg1, arg2 = 5) => arg1 + arg2
add(5, 5) //Result is 10
add(5) //Result is still 10, becouse we have set a default arg of 5
Rest Parameter
With rest function parameters we can pass in an arbitrary number of arguments in a function. Inside the function, we will get the arguments as an array.
const someFun = function(...args){
console.log(...args)
}
Spread Operator
The spread operator has the same syntax as the rest parameter, but instead, the spread operator takes an array.
const sumUp = function(a, b, c){
console.log(a + b + c)
}
const myArray = [2, 2, 2]
sumUp(...myArray) //And we got 6
Object Destructing
Object destruction makes the assignments of the values from an object much easier than before.
const user = {
firstName: 'Kim',
lastName: 'Kardashian',
age: 38
}
const{firstName, lastName, age}=user
console.log(firstName + ' ' + lastName + ' ' + age)
Class Syntax
With ES6, JavaScript has got syntax for defining a class, under the hood it is still the protytype-based classes but it enhance code clarity. You can read more about the Object Oriented programming in the JavaScript 101: Object Oriented Programming.
class User{
constructor(name){
this.name = name
}
becomeFamous(){
console.log("I'm famous")
}
}
const kimKardashian = new User('Kim Kardashian')
kimKardashian.becomeFamous() //and we got "I'm famous"
Template Literals
Template literals or template strings are useful to concatenate strings.
const someFun = function(arg1, arg2){
return 'Hello from ${arg1}, ${arg2}'
}
someFun('Kim', 'Kardashian')
Import and Export
With import and export in JavaScript, we can create separate and reusable components. We can make a module export it, and in another JavaScript module, we can import it in the previous module.
//First JavaScript module
export default function sum(x, y){
return x + y
}
//Second JavaScript module
import sum from './sumComponent'
console.log(sum(2, 2)) //result is 4
Promises and Async/Await
Promises are a new way to write asynchronous code in JavaScript, they can be used a lot in communication with an API for example, with promises we got much cleaner code than using the old way with callbacks. to learn about the Promises you can check: Async JavaScript Part 2: Promises, and if you are comfortable with them you can go to Async JavaScript Part 3: Async/Await, the ES8 upgrade over promises.
let promise = fetch('api/give-me-json');
promise.then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
Conclusion
ES6 is the cutting edge update for the JavaScript programming language, with it we can write much cleaner and modern looking code, also it is the stepping stone to the modern front-end frameworks like React, Express, etc.
Next part: JavaScript 101: Design Patterns.
Tweet