When REALLY to use var, const, let, and arrow functions.

A couple of days ago, I had a chance to attend the Dropbox coding challenge. The challenge itself was interesting, but one of the requirements was to optimize your code. What is mean, that not only your code should be correct (obviously :), but also need to be fast enough to pass all of the 10 tests. I can’t say that I did a great job on the challenge, but like every good programmer, I dive deeper into the topic, to make sure I won’t repeat mistakes.

It isn’t a secret that optimized code will come with experience, so my advice, practice, practice, practice! Where? HERE!

But what I can do now is to refresh some basics, which can improve the speed of code! Why we are doing it? Well, code optimization is any method of code modification to improve code quality and efficiency. A program may be optimized so that it becomes a smaller size, consumes less memory, executes more rapidly, or performs fewer input/output operations.

So, let's talk about the basics. Do you know when to use var, const, let, and arrow functions?

  • let: “Variables declared by let have their scope in the block for which they are declared, as well as in any contained sub-blocks. In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function.” Let me show you on example:
let n = 2;

if (n > 1) {
let message = "I am inside block";
console.log(message);//"I am inside block"
}
console.log(message) // message is not defined

Updating a variable declared with let can be done within its scope:

let message = "Good day";
message = "Good night";// works fine!

can’t be re-declared:

let message = "Good day";
let message = "Good night";//error: Identifier 'message' has already been declared
  • const: “This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables. An initializer for a constant is required. You must specify its value in the same statement in which it’s declared. The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.” Example:
const message = 'Good day'; 

message = 'Good night'; // SyntaxError
message + '!'; // again a SyntaxError
but for constant object
const Anna = {age:"27", hair:"brown", eye:"green"};

// We can change a property:
Anna.eye = "blue";

// We can add a property:
Anna.lastname = "Smith";
But we cannot reassign a constant object!

const variables must be assigned a value when they are declared:

const message
message = 'Good day'// SyntaxError
  • var: “var declarations, wherever they occur, are processed before any code is executed. This is called hoisting and is discussed further below. The scope of a variable declared with var is its current execution context and closures thereof, which is either the enclosing function and functions declared within it or, for variables declared outside any function, global. Duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value unless another assignment is performed.”

Well base on this article: “Most Javascript experts agree var shouldn’t be used. Douglas Crockford, the man who popularized JSON, is against the use of var. He indicates that var might possibly still be useful in an extreme case like machine-generated code, but I’m stretching hard there.”

Let’s leave it then.

  • arrow function: “An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations.”

Limitations :
- Does not have its own bindings to this or super, and should not be used as methods.
- Does not have arguments, or new.target keywords.
- Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
- Can not be used as constructors.
- Can not use yield, within its body.

Arrow functions return value by default. They don’t have to return anything but when the function is not supposed to be void (i.e return value is expected), it’s a good practice to return some kind of default value.

// Traditional Function
function (a){
return a + 100;
}

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
return a + 100;
}

// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

For named functions, we treat arrow expressions like variables:

// Traditional Function
function bob (a){
return a + 100;
}

// Arrow Function
let bob = a => a + 100;

Any incorrect use of JavaScript tools may slower your code. Often happen that coding challenges require knowledge and a clear understanding of syntax and fast clean code. Remember to practice and consolidate the foundations! Good luck!

SOFTWARE ENGINEER — WEB DEVELOPER WITH HEART FOR FRONT-END, MINIMALISM AND RASMENTALISM.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store