DEV Community: Tony Nguyen

ES6: destructuring

Tony Nguyen — Wed, 18 Sep 2019 13:01:02 +0000

Destructuring is a JavaScript syntax that allows us to assign to variables, data from arrays and iterables, like objects. Let’s first look at using the destructuring syntax on objects.

Destructuring Objects

In ES5, you would assign properties to variable by individually assigning the value of your object property to the variable.

ES5

var band = {
  name: 'Silent Planet',
  genre: 'Metalcore',
  albums: ['The Night God Slept', 'Everything Was Sound', 'When the End Began']
}

var name = band.name;
var genre = band.genre;
var albums = band.albums;

With ES6 destructuring you can reduce that those assignments as long as the variable name that you are assigning a value matches the property name like below.

let band = {
  name: 'Silent Planet',
  genre: 'Metalcore',
  albums: ['The Night God Slept', 'Everything Was Sound', 'When the End Began']
}

const { name } = band;
const { genre } = band;
const { albums } = band;

You can shorten up the syntax by combining all the variable assignments into one:

const { name, genre, albums} = band;

Tthe above syntax will only work if the variable names match the names of the properties you are trying to destructure. If the variable names do not match you can still perform the destructuring assignment with this syntax:

const {name:var1, genre:var2, albums:var3} = band;

console.log(var1); // Silent Planet

Notice that the property name on the left and the variable name on the right. You can think of this as you are taking the property value -> variable. Left to right assignment.

Destructuring Arrays

In ES5 in order to extract data from an array you would need to access the array in by getting the value of the item at a certain position in the array:

var exampleArray = [1, 2, 3];

var val1 = exampleArray[0];
var val2 = exampleArray[1];
var val3 = exampleArray[2];

With the destructuring assignment syntax you can now just write one line to get all values you need the above array;

let [val1, val2, val3] = exampleArray;

console.log(va1, val2, val3); // 1 2 3

Destructuring an array looks a lot like when you are destructuring an object but you just replace the curly braces with brackets.

You can also skip values while using the destructuring syntax if needed:

const someArray = [4, 8, 15];

const [first,,last] = someArray;

console.log(first, last);// 4 15

If you need to you could use the rest syntax, which we learned about in my prior blog post, to extract all the items remaining in the array into a new array.

const someOtherArray = [4, 8, 15, 16, 23, 42];

const [first, second, ...third] = someOtherArray;

console.log(first); // 4
console.log(second); // 8
console.log(third); // [15, 16, 23, 42];

Functions Arguments

One last common use case for destructuring is passing in an object as a functions arguments. Below we have a function that takes in an object with the attributes of a vehicle.

const someFunction = car => {
  const { make, model, yearBuilt } = car;
  return make;
} 

let car = {make: 'Ford', mode: 'Escort', yearBuilt: 1993};

someFunction(car); //Ford

You can use destructuring on your object that was passed into the function. the syntax inside the function body is the same pattern as we have been using throughout this post. However, there is a slightly different, and shorter way to do this below:

const someFunction = ({ make, model, yearBuilt }) = {
  return make;
}

You can destructure the object properties out into individual variables right inside your function parameters.

Thank you for reading and I hope this post helps you use destructuring inside your own code.

ES6: default, rest, and spread.

Tony Nguyen — Thu, 12 Sep 2019 13:01:01 +0000

ES6 added syntactic sugar to help us write code that is both cleaner and more concise. Today I am going to talk about the feature: default parameters, rest parameters and the spread operator.

default

In JavaScript, if not value is passed into a function the the parameter(s) will default to undefined. The default behavior of setting function parameters to undefined can cause error in your functions and this is where default parameters comes in play.

Default function parameters are used when you need named parameters to be initialized with a value when no value will be passed or when the value of the parameter is undefined. Let's take a look at an example of when you might want to use default function parameters.

Below is an example of a generic increment function. The function takes in two values and adds them together. The first parameter is the initial number and the second is how much we need to increment or add to that initial number.

function increment(number, increment){
  number + increment;
}

increment(2, 5); // 7

Let’s make our function a little more flexible with default function parameters. Suppose you want that if the user does not input a second parameter for increment parameter, that the function would still run and increment the initial number by one. Let’s try that out with ES5 syntax:

function increment(number, increment){
  if (typeof increment == 'undefined' ) increment = 1;
  return number + increment;
} 

increment(1, 2) // 3
increment(1) // 2

We wrote a conditional to check if the increment parameter was undefined, and if it was undefined we assigned the value of 1 to the increment parameter.

With ES6 syntax you can check for undefined named parameters without using conditionals you needed with ES5. Here it is below:

function increment(number, increment = 1){
  return number + increment;
} 

increment(5,5); // 10
increment(5); // 6

Instead of writing a conditional in the body of your function, you can just add an equals sign after the parameter you wish to reassign in the case that it is not provided a value. Now not only will your code be more flexible, but you have a more concise function that is easier to read and less prone to error.

rest and spread

The rest and spread operators look identical but perform different operations. Both use the three dots ... syntax but rest is used for condensing and spread is used for expanding.

rest

The rest operator is used to condense a group of elements down into a single array.

Let’s create a function that adds three numbers together using the reduce array helper function.

If you need a refresher on how Array.reduce works check out my last blog post on Array Helper Methods.

function add(x, y, z){
  let numbers = [x, y, z];

  return numbers.reduce((acc, number) => {
    return acc + number;
  }, 0);
}

add(1, 2, 3); // 6

The above function works fine when there is a limited number of arguments, in this case only three number can ever be added together. What happens if you were to pass in a fourth or a fifth argument?

add(1, 2, 3, 4, 5); // 6

The function, written as it was above, will only accept the first three arguments passed into the function, and will just ignore the rest. So the result is still 6 even though there were additional parameters were passed in.

Using ES6 rest, we can make the function much more flexible. Now, with rest, the add function can take in an indefinite amount of parameters and return a single result.

function add(...numbers){
  return numbers.reduce((acc, number) => {
    return acc + number;
  }, 0);
}

add(1, 2, 3, 4, 5); // 15

add(2, 4, 6, 8, 10); // 30

Now you can run the add function with as many parameters as you need.

When you use ...numbers a new array named numbers is created and all the arguments passed into the add() function will be pushed into this array. After all the parameters have been read into the numbers array, the function will continue now running .reduce on the numbers array.

spread

Where the rest operator is used to condense elements into a single array, the spread operator is used to do reverse. Spread is used to turn an iterable, like a String or an array, into its individual elements.

Let’s see how it works by using spread for concatenating arrays. First we’ll look at how it’s done in ES5 before we rewrite it using the ES6 spread syntax.

// ES5 array concatenation

const array1 = ['Cersie', 'Jaime'];
const array2 = ['Tyrion'];

const combinedArray = array1.concat(array2);

console.log(combinedArray); // ['Cersie' 'Jaime', 'Tyrion']

In ES5 we had to create a new array and run the Array.prototype.concat()method on one array and passing in another as an argument.

With ES6 spread you can just use the spread operator by placing ... in front of both arrays inside the [] brackets to concatenate the arrays.

// Array concatenation with spread
const array1 = ['Cersie', 'Jamie'];
const array2 = ['Tyrion'];

const lannisters = [...array1, ...array2];

console.log(lannisters); // ['Cersie' 'Jaime', 'Tyrion']

When you see ... in JavaScript code you can tell the difference between rest and spread by these general rules.

If the syntax is used in function arguments of a function declaration or expression then it is the Rest parameter syntax.
Otherwise it is the Spread operator.

JavaScript Array Helper Methods

Tony Nguyen — Wed, 05 Jun 2019 13:01:01 +0000

JavaScript provides a great deal of array methods to help with the manipulation of data. Below I will go over the array helper methods, and why you should use them over the traditional for loop.

forEach

The forEach helper function iterates through every item in an array, and runs a provided callback function once on each of those items. forEach essentially replaces the for loop. Let's look at how to use the forEach array helper.

// using a for loop
const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++){
  console.log(numbers[i])
}

// Output
// 1
// 2
// 3
// 4
// 5

Let’s refactor this using a classic function declaration.

numbers.forEach(function(number){
  console.log(number);
});

// 1
// 2
// 3
// 4
// 5

What’s happening above is we are using forEach to iterate over the numbersarray. Each time forEach reads a value from the numbers array it will run the callBack function on the current value. The callback function will then run console.log() on the current value. It looks something like this.

// Iteration 1: console.log(number[0]) => 1
// Iteration 2: console.log(number[1]) => 2
// Iteration 3: console.log(number[2]) => 3
// Iteration 4: console.log(number[3]) => 4
// Iteration 5: console.log(number[4]) => 5

The exact same thing that the for loop does just with much less code.

Quick note. I, and many others prefer using array helpers with arrow functions and the following examples in this post will be using ES6 arrow function syntax with the array helpers. If you would like a refresher on arrow functions check out my blog post here.

// using forEach with arrow
numbers.forEach( number => console.log(number));

Using the forEach, above we console.log() each value inside the numbers array. As you can see, the function is much shorter and performs the same operation.

Remember — the forEach callback is that it can also take in a second parameter, index. This will keep track of the current index of the number.

numbers.forEach((number, index) => console.log(`Number: ${number} is at index: ${index}`));

// Number: 1 is at index: 0
// Number: 2 is at index: 1
// Number: 3 is at index: 2
// Number: 4 is at index: 3
// Number: 5 is at index: 4

You might be wondering what the syntax is inside the console.log above. I am using template literals, another awesome feature in ES6. If you don't know what they are, check out this post about the topic here

map

The map helper is one of the most useful array helpers there is. Like forEach, the map helper iterates over an array running the callback function on each element as it iterates through the array. Map differs in that it will return a new array where the value of each element is the returned value of the callback function that was provided to the map helper. Map is used when you want to perform data manipulation without mutating the original data set.

The map helper below returns a new array that contains the square of each value in the numbers array.

const numbers = [1, 2, 3, 4, 5];

// using a for loop
const squared = [];

for (let i = 0; i < numbers.length; i++){
  squared.push(numbers[i] * numbers[i])
}

console.log(squared) // [1, 4, 9, 16, 25]

// using map
const squared = numbers.map(number => number * number);
console.log(squared)// [1, 4, 9, 16, 25]

filter

The filter helper iterates over the array and returns a new array that will contain the values that are returned true when passed through the callback function. The callback function in the filter helper can be thought of as a testing function.

Let’s use the filter helper to return an array containing all of the even values from inside the numbers array.

const numbers = [1, 2, 3, 4, 5, 13, 14, 21, 20];

// using a for loop
const filtered = [];

for (let i = 0; i < numbers.length; i++){
  if (numbers[i] % 2 === 0) {
    filtered.push(numbers[i])
  }
}

console.log(filtered); // [2, 4, 14, 20]

// using filter 
const filtered = numbers.filter( number => {
  if (number % 2 === 0){
    return true;
  }
});

console.log(filtered); // [2, 4, 14, 20]

find

The find helper returns the value of the first element in the array to pass the test in the provided callback function. Below, we will use find to get the first value in the numbers array that is greater than 10.

const numbers = [1, 2, 3, 4, 5, 10, 13, 14];

// using a for loop
let answer;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10){
    answer = numbers[i];
    break;
  }
}

console.log(answer); // 13

// using find
const answer = numbers.find( number => number > 10);

console.log(answer); //13

some

The some array helper will return true if at least one element in the array passes the test in the callback function.

const numbers = [1, 3, 4, 5];

// using a for loop
let evenNumber = false;

for (let i = 0; i < numbers.length; i++){
  if(numbers[i] % 2 === 0) {
    evenNumber= true;
    break;
  }
}

console.log(evenNumber); // true

// using some
const evenNumber = numbers.some( number => {
  if(number % 2 === 0) {
    return true;
  }
});

console.log(evenNumber) // true

every

The everyarray helper will return true only if all of the elements in the array pass the testing function. We will use this function to check if all of the values inside the numbers array are less than 10.

const numbers = [1, 2, 3, 4, 5];

let isLessThanTen = true;

for (let i = 0; i < numbers.length; i++){
  if(numbers[i] >= 10) {
    isLessThanTen = false;
    break;
  }
}

console.log(isLessThanTen); // true

let lessThanTen = number => number < 10;

// every helper
let isLessthan10 = numbers.every(lessThanTen); 

console.log(isLessthan10); // true

reduce

To oversimplify the reduce function, you can use the reduce helper to transform an array of values into a single value. Some would say that the reduce helper can be used to get the essence of a set of data. We will use reduce to sum up all of the values in the numbers array.

const numbers = [1, 2, 3, 4, 5];

// using a for loop
let sum = 0;

for (let i = 0; i < numbers.length; i++){
  sum += numbers[i];
}

console.log(sum) // 15

// reduce helper
numbers.reduce((sum, number) => sum + number, 0); // 15

So, the reduce helper is executing the callback function on each iteration and produces a single result at the end. In the example above that value is sum.

The reduce helper method can take in 5 arguments:

accumlator
currentValue
currentIndex
array
initialValue

array.reduce(function(accumlator, currentValue, currentIndex, array), initialValue)

The accumulator and currentValue are required, while the other three arguments are optional. On each iteration, the reduce helper first checks to see if an initial value has been passed into the function. If an initial value has been passed in, then the accumulator's value is set to equal the initial value. If no initial value has been passed in, then the accumulator will be set to the value of the element in the provided array.

In the code above, we use the accumulator, currentValue, and initialValuearguments to sum up the values inside the numbers array. To better understand how reduce works, let's walk through each iteration.

If the initial value argument has been passed in, then the function will set the accumulator sum to be equal to the initial value. We pass in an initial value so the sum will be set to 0 on the first iteration. The currentIndex or number is set to the next value in the array. At the beginning of the reducehelper function, that will be 1 or the first value inside the numbers array.

We will add a console.log to the reduce function to show the value of sum on each iteration.

const numbers = [1, 2, 3, 4, 5]
numbers.reduce( (sum, number) => return sum + number, 0);

// Iteration 1: sum = 0, number = 1; return sum = 1;
// Iteration 2: sum = 1, number = 2; return sum = 3;
// Iteration 3: sum = 3, number = 3; return sum = 6;
// Iteration 4: sum = 6, number = 4; return sum = 10;
// Iteration 5: sum = 10, number = 5; return sum = 15;

So there you have it, you can use reduce to produce a single value from an array of values. However, reduce is really powerful and can do a lot more than sum up values. Take the example below, we have an array that contains a list of people and pets, and their some attributes.

let occupants = [
  {name: 'Tony', age: 26, species: 'human'},
  {name: 'Katey', age: 26, species: 'human'},
  {name: 'Marley', age: 5, species: 'canine'},
  {name: 'Harlow', age: 2, species: 'feline'},
  {name: 'Diana', age: 1, species: 'feline'}
];

Say you need a list of names of the occupants in your home for your landlord to keep track of. You can use reduce on the occupants array to produce a new array that contains each occupant's name as a string.

const occupantNames = occupants.reduce((acc, occupant) => {
  acc.push(occupant.name);

  return acc;
}, []);

console.log(occupantNames) // ["Tony", "Katey", "Marley", "Harlow", "Diana"]

Conclusion

JavaScript array helper methods can help you write cleaner, more legible code in less time. Try these helper methods the next time you think about using a for loop.

ES6: Template Strings

Tony Nguyen — Wed, 22 May 2019 13:01:01 +0000

ES6 introduced a new syntax for strings called “template string”s or “template literals.” Template strings are not just a cool new way to write strings. They come with new features as well.

Let’s take a look at the ES5 string and refactor it using a template literal.

// ES5 string
let myName = 'Tony Nguyen'

To create a template literal, just use the backtick(`) character instead of the single or double quotes. The backtick the same key as the ~ key usually below the escape key.

// ES6 template string
let myName = Tony Nguyen

It really is that simple. Now that you know how to write a template string let’s take a look at some of the things you can do with template strings.

String Concatenation

In ES5, in order to concatenate a string you would have to write code that would look like this:

`
// ES5
function printName(fName, lName) {
return 'Hi '+ fName + ' ' + lName + '!';
}

printName('Arnold','Schwarzenegger'); // "Hi Arnold Schwarzenegger!"
`

The printName function above is long and prone to error. I will often times have to write out the return more than once because I forgot to add a space or the plus sign.

With template strings you can easily concatenate a string in one line. This is because template strings can take in any valid JavaScript expression.

function printName(fName, lName){ returnHi ${fName} ${lName}!`
}

printName('Arnold','Schwarzenegger'); // "Hi Arnold Schwarzenegger!"
`

Since template strings can take in any valid JavaScript expression, you can do in-line math with template strings.

`
let bench = 440;
let squat = 545;
let deadlift = 710;

console.log(Arnold has a combined ${bench + squat + deadlift} lbs with his big three lifts.);

// Arnold has a combined 1695 lbs with his big three lifts.
`

Multi-line Strings

Multi-line strings are also easily made with template strings. In ES5, there were a number of workarounds that would help create multi-line strings but, with template strings, you can just add a new line into the string.

`
// ES5
let greeting = "Hello \nWorld!"

// ES6
let greeting = Hello World!
`

Voila, you have created a string with a new line in it.

This has been a very basic overview of template strings. As you can see, they are a great new syntax that will save you time and frustration when you are working with strings. However, you can do a lot more with them than the examples I have shown above, such as tagged templates. You can learn more about template strings here.

ES6: Arrow Functions

Tony Nguyen — Wed, 08 May 2019 13:01:00 +0000

Arrow functions are a newer syntax for writing JavaScript functions. The arrow function syntax was introduced into JavaScript with the ES6 declaration. They are certainly one of the most popular, if not the most popular, features of ES6 and will only continue to grow in usage as time goes on. Even if you do not plan on using arrow functions you should still learn about what they are and how to read them.

Syntax

An arrow function can be summed down to this syntax:

// ES5

function nameOfFunction(parameters) {
  statements
}

// ES6

(parameters) => { statements }

To create an arrow function you first need to write an ES5 style function. We’ll use a function that doubles a number as an example.

const double = function(num){
  return num * 2;
}

double(5); // 10

Next, you will remove the function keyword.

const double = (num){
  return num * 2;
}

Finally you will place a fat arrow => after the arguments list before the curly braces.

const double = (num) => {
  return num * 2;
}

Just like that, you have created your first arrow function. Now we can begin to clean it up. When arrow functions have just a single JavaScript expression you can remove the curly braces {} from around the body of the function, remove the return keyword and place the function all on one line.

const double = (num) => num * 2;

We can leave out the return, and the curly braces, because arrow functions have an implicit return. This means that the result of the of right side of the function will be returned.

That’s not all. We can simplify the arrow function even more. If your function has exactly one parameter then you can omit the parenthesis around the parameters and the semicolon that follows the function body.

const double = num => num * 2

double(6); // 12

If you have no arguments to your function you would just have a pair of empty parentheses.

const helloWorld = () => {
  console.log('Hello World!');
}

helloWorld() // Hello World!

Lexical this

The ES6 arrow function syntax simplifies your code by allowing you to omit the function, return, and curly braces from the function declaration. This is awesome, but the main benefit of using arrow function is how the keyword this is handled.

For more information on this check out this post on Stack Overflow.

With classic function expressions, the keyword this, when inside an object method, refers to the object itself. With arrow functions the this keyword is not defined on its own, but rather it is inherited from the enclosing scope.

The example below will show what I mean.

let person = {
  firstName: 'Donald',
  lastName: 'Glover',
  titles: ['actor', 'comedian', 'writer', 'producer', 'director', 'rapper', 'singer, 'DJ'],
  fullName: function(){
    return `${this.firstName} ${this.lastName}`
  }
}

person.fullName(); // Donald Glover

In the fullName function, this.firstName and this.lastName refer to the person object. Let's try the same thing but with an arrow function to see what happens.

let person = {
  firstName: 'Donald',
  lastName: 'Glover',
  titles: ['actor', 'comedian', 'writer', 'producer', 'director', 'rapper', 'singer, 'DJ'],
  fullName: () => `${this.firstName} ${this.lastName}`
}

person.fullName(); // undefined undefined

When using an arrow function inside of object methods, this is not bound. So, in this case, this's value is looked up in the call stack which will then look for it in the window object. Arrow functions should not be used as object methods. Which leads into my next point.

When to avoid arrow functions?

As you saw in the example above, arrow functions are not suitable for object methods. Another use case where arrow functions are not suitable is in callback functions with a dynamic context, or onclick listeners.

const button = document.getElementById('myButton');

button.addEventListener('click', ()=> {
  this.classList.toggle('active');
});

We’re going to toggle a class when the button is clicked. The eventListener, is not bound to the button but will be bound to the window object.

Other use cases where arrow functions should be avoided are constructors, generators and with arguments objects. Which are topics I will go over in a later blog post.

When to use arrow functions?

Many people, including myself, love to use arrow functions with array helper methods like reduce and map, because it makes the code shorter and more readable. This general rule is laid out in this post.

Use function in the global scope and for Object.prototype properties.

Use class for object constructors.

Use => everywhere else.

Conclusion

While arrow functions do not completely replace classic functions, one should still learn and use arrow functions. They provide us with a shorter and more readable syntax; and most importantly, they solve issues with the binding of this.

ES6 Variable Declarations: const, let

Tony Nguyen — Wed, 24 Apr 2019 13:01:01 +0000

TLDR

Use const when you can. Otherwise, use let, but never use var.

What is ES6, and what features does it have?

ECMAScript 6, commonly known as ES6 or ES2015, was the JavaScript specification that was released in 2015.

The release of ES6 brought many new powerful concepts like classes, template tags, arrow functions and much more. All of the features of ES6 are standard on the big frameworks such as React and Angular, and all of the modern browsers have adopted the features as well. For the other browsers, there are popular tools like Babel, which will transpile the ES6 code into ES5 to be used on legacy browsers.

ES6 is quickly becoming standard, and now is the perfect time to learn.

Variable Declarations

var

If you’ve ever used JavaScript then you’ve probably used var. var has been used to declare variables since the language was first created.

Here are some things to know about var, including that variables defined using the var keyword can be reassigned:

var x = 10;
console.log(x); // 10
x = 50;
console.log(x) // 50

Variables declared using var are scoped to the current execution context, which means that the variable is either function scoped or only available within the function in which they are initialized. If the variable is not defined inside a function, then the it is globally scoped, and added to the window object.

// Function scoped
function counter(){
 for (var i = 0; i \< 5; i++) {
 console.log('Hello World');
 }
 console.log(i)
}
counter() 
// Prints 'Hello World' five times
// 5

console.log(i) // Uncaught ReferenceError: i is not defined

This occurs because i is scoped to the function.

var age = 10;
function getOlder(){
 for(var i = 0; i \< 5; i++){
 age+=i
 }
 console.log(age)
}

getOlder() // 20

console.log(age) // 20
age = 15;
console.log(age) // 15

In general, globally scoped variables that can be reassigned as pleased are considered to be bad practice and can lead to a lot of headaches down the road.

let

The keyword let, like var, is used to declare variables whose value is expected to change over time. Like var, let does not need a value when initialized and can be reassigned. For the most part, the keyword let works the same as the keyword var, but there are two big differences. First, you cannot re-declare variables that have been initialized with let, but you can with var.

var dog = "Marley"
console.log(dog) // Marley

var dog = "Spot"
console.log(dog) // Spot

let cat = "Harlow"
let cat = "Diana" // Uncaught SyntaxError: Identifier 'cat' has already been declared

Trying to re-declare a variable that has already been declared returns a syntax error. Re-declaring variables should be avoided, as it reduces the legibility code and may lead to unwanted side effects.

The other difference between let and var is that the let keyword is block-scoped, and var is function-scoped.

Below is a repeat of the counter function from above, but this time the forloop uses let to declare the i variable.

// Block-scoped
function counter(){
 for (let i = 0; i \< 5; i++) {
 console.log('Hello World'); 
 }
 console.log(i)
}
counter() 
// Prints 'Hello World' five times
// undefined

The console.log(i) after the for loop returns undefined instead of the number five. This is because the variable i is now scoped to the block of the for loop instead of the entire counter function.

const

Unlike let, const should be used to declare variables where we expect the value to never change or remain constant. Like let, const is block-scoped. Variables declared with const cannot be reassigned, but this does not mean they are immutable.

const pets = ['Marley']

pets = ['Marley', 'Harlow'] // Uncaught TypeError: Assignment to constant variable.

pets.push('Harlow')
pets // ["Marley", "Harlow"]

const person = {};
person.firstName = 'Tony';

console.log(person); // {firstName: 'Tony'}

Refactoring

// ES5
var make = 'Honda'
var model = 'Civic'
var owner = 'Tony'
var mileage = '50000'

Above, we have four attributes of a car — make, model, owner, and mileage. Let’s refactor this to use the ES6 variable declarations.

How I like to approach it is first changing all uses of var to const. I do this because const has stronger binding rules that will help you write better code, and it can prevent hours of debugging in the future.

const make = 'Honda'
const model = 'Civic'
const owner = 'Tony'
const mileage = '50000'

Now I look at it and think, “Which of these will likely change in the future?” The make and model of the car will never change, but it is likely that the owner and mileage will change. So we will change those declares to use let.

// ES6
const make = 'Honda'
const model = 'Civic'
let owner = 'Tony'
let mileage = '50000'

Variable Hoisting

JavaScript declarations using var are hoisted. Hoisting is a behavior in JavaScript where declarations are hoisted or brought to the top of the current scope. This means is that you can use variables and functions before they are declared. An example below will explain this better.

age = 26;
console.log(age);
var age;

// 26

This correctly logs 26 even though age was not declared until after console.log() was called. What this actually looks like in practice is this.

var age = 26;
console.log(age)

The above code, show’s what JavaScript is doing behind the scenes.

However, this does not occur when using ES6 variable declarations let and const;

age = 26;
console.log(age)
let age;

// Uncaught ReferenceError: age is not defined

While JavaScript will still hoist all declarations including let and const, what JavaScript does when a using var for declaration is also initializing it with undefined. let and const will throw an error if you try to call them before they have been assigned a value. You should always declare your variables at the top of their respective scopes and should initialize variables when they are declared. The behavior of let and const will help you write cleaner code.

Why?

So are you still not convinced as to why you should switch from using varto const and let? The most compelling reason is code readability in the future. In a large program with many variable declarations, it might not be obvious which variables are expected to change and which are not. Using the ES6 variable declarations will improve the legibility of your code, and help you write code that is less error-prone.

I’m Tony

Tony Nguyen — Wed, 10 Apr 2019 16:01:00 +0000

Who am I

I’m a front-end developer and have been programming for a few years but I have been programming in web for just about 1.5 years now.

I live in Sioux Falls, SD with my wife Katey, and 3 pets Marley (dog), Harlow and Diana (cats).

I work for Epicosity, an award winning agency based in downtown Sioux Falls. At work I mostly write HTML, CSS, and JavaScript, and am working toward becoming a better at leveraging everything that the Hubspot, CraftCMS, and Expression Engine platforms have to offer.

Outside of work I am currently dabbling in React, learning more advanced JavaScript, NodeJS, and writing better CSS/SASS.

Why I started

I attended the University of South Dakota for a few years before dropping out briefly. I worked full time for a year before returning and changing my major to computer science. The computer science major was pretty difficult at times but I stuck with it and eventually graduated in 2018.

Funnily enough, while in school I told myself and everyone around me that I would never become a front-end developer. I hated working with HTML, CSS and anything having to do with the web. My goal was to graduate and move into a software or back-end type of job. A year after graduating and now I’m in love with the technologies that are used to build the web.

Goals for 2019

Being more organized, planning more before doing
Writing at least one blog post a month
Coding an hour a day outside of work
Learning as much as I can
Deploying a Gatsby side to display side projects and blog posts.
Deploying a React app.