My two most used ES6 features: const & let, & arrow functions

- 0 views

ES6 brought a whole load of convenient feature to JavaScript. I’m going to talk about the two I use the most.

const and let

Before ES6 variables were declared with the var keyword like

var a = "Hello World!";

With ES6 there are two new ways to declare variables, which are const and let.

const a = 10;
let b = 5;

let is the closest to var as in they both allow the variable to be reassigned. const makes the variable immutable which means a new value cannot be assigned to that variable. When I write code, my default is to always use const, because it makes my code more predictable especially when the file is long. I only use let when I need the variable to hold a new value further along in the code, which is rare for me. If I had to give a ratio to the const vs let declarations I do, I’d say it would be around 20:1. In 3+ years of coding in JavaScript I have never used var.

Arrow functions

Normally in JavaScript we use the function keyword to declare a function

function add(a, b) {
  return a + b;
}
add(1, 2); // 3

With arrow functions the same function would look like

const add = (a, b) => {
  return a + b;
};
add(1, 2); // 3

Note you can assign an arrow function to let or var too but it’s always better to assign it to const. Arrow functions also allows for implicit return, so the same function can be shortened to

const add = (a, b) => a + b;
add(1, 2); // 3

I found the implicit return of arrow functions specially useful when developing in React as it helps cut down the code written by quite a bit.

Wrapping up

ES6 also has lots of other great features like object destructing, but I’m at a point now where I could not imagine coding JavaScript without the two I just talked about. If you don’t use these already, give them a try and check out the rest of ES6 as well. It’ll make coding in JavaScript a whole lot easier and fun. I might talk const & let, & arrow functions in detail in the future (I’m itching to talk about the whole this and bind mess in JavaScript and how arrow functions solve it).

0