DEV Community: Akash Deshpande

Difference between var, let and const - Learn by example - JavaScript Basics

Akash Deshpande — Tue, 10 Aug 2021 13:54:14 +0000

Declaring variables in JavaScript since ES6 can be done in different ways. Most prominent of those are using var, let and const.

1. Basic example on `var`

Consider the examples below:

/* Example 1 */
x = 10;
function updatex() {
  x = 20;
}
updatex();
console.log(x); //20

/* Example 2 */
x = 10;
function updatex() {
  var x = 20;
}
updatex();
console.log(x); //10;

In these examples, we see that declaring variables as var limits their scope to the particular function, in this case the function updatex(). If we do not declare variable as var, it climbs up to global scope, declared and initializes itself there.

2. Example on `var` and `let`

var and let are similar in nature, but are not the same. Let's consider following examples.

console.log(x); //undefined
console.log(y); //ReferenceError

var x = 10;
let y = 15;

In this example, we try to console log variables before they are declared in the program. var variable logs undefined and let variable throws an Uncaught ReferenceError. This happens because of hoisting.

According to W3schools,

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

In this example, var variable is hoisted to the top of the block, declared there, but not initialized, whereas let variable is hoisted to the top of the block (i.e. the block of the code is aware of the variable) but it cannot be used until it has been declared. The time from which the variable is used till the time where the variable is initialized is called temporal dead zone.

3. Example on `let` and `const`

So far we have seen direct declaration of variables, using var and using let. Now let's see const. As you might have guessed, const stands for constant. A constant is a variable which once declared and initialized remains the same and cannot be redeclared or changed through assignment. Does this mean const is immutable? Not really, but we will check that out later. First let's see the behavior of let and const. Let's consider these examples:

/* Example 1 */
// we've seen this before
x = 10; //ReferenceError
let x;

/* Example 2 */
y = 20;
const y; //SyntaxError

/* Example 3 */
y = 20; //ReferenceError
const y = 20;

We've seen example 1. It throws a Reference Error. In example 2, y being a const variable throws a SyntaxError because after declaration, a const variable must be immediately initialized. We cover this case in example 3, but as const variables cannot be redeclared or reassigned, it throws a ReferenceError. So a proper way to declare const variable would be:

const y = 20;

Both let and const have same scope properties. Unlike var variables, let and const variables are hoisted but cannot be used until declared, and in case of const, initialized. Now that you have a good understanding of scope and hoisting of different types of variables in JS, let's talk about immutability of const variables.

4. Immutability of `const`

JS has 2 types of variables:

Primitive types: undefined, null, boolean, number, string, and symbol
Reference types: object, array and function

Declaring a const variable to a primitive makes it immutable. But if it is initialized with a non-primitive or reference type, then it is possible to mutate the const variable. Let's take a few examples:

/* Example 1 */
let arr1 = [10, 20];
arr2 = [30, 40]; // No error

const arr2 = [50, 60];
arr2 = [70, 80]; // SyntaxError, redeclaraion

/* Example 2 */
const arr2 = [50, 60];
arr2[0] = 70;
arr2[1] = 80;
console.log(arr2); // [70, 80]

As you can see, with respect to reference type variables, it's not possible to preserve their immutability.

5. Conclusion

var variables are function scoped, let and const variables are block scoped. var, let and const are hoisted, but let cannot be used until declared and const variables cannot be used until they are declared + initialized.

Outro

Enjoyed the article? Follow me on Dev.

Connect with me:
Twitter | LinkedIn

Thanks for reading!

How to: sticky top nav-bar (HTML + CSS)

Akash Deshpande — Tue, 26 Jan 2021 13:29:08 +0000

A common CSS newbie issue we face is, how to code a sticky top bar. This could be the nav-bar, a quick contact bar, quick access bar, etc. Let's assume we want to build a top nav-bar. So the requirements are:

Nav bar should be on top
It should stick to the top of the page
It should scroll with the page

Before we begin, there are some things you should know, they are:

Basic knowledge of HTML
Basic knowledge of CSS

Excited to learn? Let's jump in!

1. Basic code block

To make a sticky nav-bar, let's build a nav-bar first. We will use header tag for this. For the rest of the content, we will use main tag.

  <header>
  </header>

  <main>
  </main>

2. Let's customize a bit with CSS

/* CSS */
/* imports */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');

body{
  padding: 0;
  margin: 0;
  font-family: "Lato", sans-serif;
}

header {
  height: 80px;
  background-color: #eee;
}

In the code above, we've added styling for body, header and main. We've also imported Lato font (because I love sans-serif fonts 😁).

Body tag

We remove margin and padding on body because when an element takes full width, default padding and margin of body interferes with the full width of the element, in this case, header tag.

Header tag

We add a static height of 80px to the header, and change its color to #eee to differentiate it with rest of the content.

Let's add some content to the header/nav-bar. Generally, nav-bar has a logo and some nav-links. Logo would have an image of some sort, but for ease of the tutorial, we will just replace it with text.

HTML Part:

<header>
  <div class="logo">
    Logo
  </div>
  <ul class="nav-links">
    <li>
      <a href="https://akashdeshpande.hashnode.dev/">Blog</a>
    </li>
    <li>
      <a href="https://www.twitter.com/akashd1995">Contact</a>
    </li>
  </ul>
</header>

<main>
</main>

CSS Part:

/* imports */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');

body{
  padding: 0;
  margin: 0;
  font-family: "Lato", sans-serif;
}

header {
  /* general styling */
  height: 80px;
  background-color: #eee;

  /* display part */
  display: flex;
  align-items: center;
  padding: 0 32px;
  justify-content: space-between;
}

.logo {
  font-size: 32px;
  font-weight: 900;
  color: #333;
}

.nav-links li {
  list-style: none;
  display: inline;
  padding-left: 32px;
}

.nav-links li a {
  color: #333;
  text-decoration: none;
}

.nav-links li a:hover {
  color: #ccc;
}

So far, we've added Logo, nav-links and customized them, so that they are in one line and horizontal.
Important part here is the CSS display part in header. We've used display: flex and justify-content: space-between. This places the logo and nav-links at the start and end of the container (header in this case) respectively. If you have not learned CSS flexbox so far, no worries, but it sure is a good thing to have in your skill set.

If we add more content to the page, the nav-bar will scroll with the page, we want it to stick to the top at all times. We will do this in the next part. The next part is important, it contains the magic ingredient that makes it all work.

3. Add the magic ingredient

/* Add this to header CSS */
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;

Adding position: fixed to header's CSS makes the header stick to the top. We are basically done at this point, but it doesn't look good. The header's width has shrunk, so we will add width: 100%. With this code addition, comes another issue, the width of header goes outside the page. We could technically fix this by adjusting the width %, but we have a better solution. Adding box-sizing: border-box to the CSS limits the width of header to 100% of the viewport, so it spans the whole width of the screen. A precautionary measure we could take here, although it won't be necessary, would be to add top: 0. This is just so that our nav-bar stays at the top of the page.

4. Fix code

We've completed the main step, so what remains? It is the issues we brought with our code. Let's solve those.

Main tag

The main tag contains the rest of the page. When we put position: absolute to header's CSS, the main now takes up the whole page. This means that main will also include the area behind the nav-bar. Since that area won't be visible, we will add padding-top: 80px, the same as the height of the header to main's CSS.

main {
  padding-top: 80px;
}

5. Done!

We have successfully completed our sticky top nav-bar! If you'd like to see it in action, see the codepen here.