What we'll cover

• Understanding variable types and their declaration

• Exploring dynamic typing in JavaScript

Types & Variables

• Almost everything in JavaScript is an Object. The object is a collection of key:value pair(s).

    { 
        key: value, 
        key2: value2, 
        key3: value3, 
        keyN: valueN,
        ...,
    }
  
    // this emtpy obj is also valid { // empty}-
  

  • key:value pairs are called properties/fields. Property key is always a string, value can be number, string, boolean or object.

• Variable

  • Variables are the building blocks of code/program/programming language. The variable can change its value i.e. variable reassignment.

    

    Every variable has a type. There are two types* in Javascript and these have subtypes.

    

    Wait a minute... Where is the array type?! Well, this is nothing but a reference type and, under the hood, it is an object with specialised behaviour. We will circle back to this but stick with these 2 types, Primitive and Reference.

  • Primitive types string, boolean, number, null, and undefined are stored directly in memory.

    

    Cells are units of memory and these primitive variables are stored directly in individual cells located in some memory space allocated to our program. These variables can take up a different number of cells depending on the system's architecture and the space in bytes required by the variable type.

  • Reference types are different in how they are stored in memory so the way we access them and how the values are stored changes, we need to be aware of this to use them effectively in our program.

      let varA = {
          a: 10,
          b: true
      }
    

    Here, varA a variable has an object as a value and hence it will be a reference type which is stored in memory differently. Let's see it visually and then discuss the details.

    

    Variable varA holds the pointer/reference as a value and not the object itself.
    This is the difference between how primitive and reference types are stored in memory!

  • In primitive types, each primitive type number, boolean, null, and undefined can hold a range of values.

    

    *NaN is one example of the quirks of javascript language, there are many more that you will become familiar with when you start writing your own scripts and programs.

    

• Primitive values null and undefined are interesting, null specifies nothing or an absence of a value when we assign it to a variable. undefined on the other hand should not be used explicitly by the developer as the javascript engine uses it, don't simply use this if you don't have a good reason.

  

• Reference type holds object as a value, which we briefly discussed earlier, let's go a bit deeper

    let varB = {} // this is called object literal notation
  

  Remember how we said "Everything in Javascript is an object", let's look into it. Open up a browser tab and launch the developer console. You can do this by right-clicking in the tab window > Inspect > Click on the console tab, here we can write and execute javascript code. Now, let's create a variable and assign an object to it as a value, so our variable is of reference type.

  

  1. After creating this varA we use the console.log() function to print to the screen. Then we see {} and we can click on the tiny arrow next to it, to expand and see the contents of this object. In our case, we created an empty object, and we get this funky-looking thing [[Prototype]]: Object. Here we make an important point about Javascript, it is a prototypical language.

  2. JavaScript is considered a prototypical language because it utilizes prototype-based inheritance as its primary mechanism for object creation and inheritance.

  3. In JavaScript, objects are created by cloning existing objects and extending their functionality. Every object in JavaScript has an internal property called the prototype, which serves as a blueprint for creating new objects. Objects can inherit properties and methods from their prototype, and changes made to the prototype are reflected in all objects derived from it.

  4. So the prototype for our varA is Object, this object provides us with a bunch of prebuilt helper functions and properties which are attached to all objects, inherited through its prototype. In other words, our object is created from the blueprint of Object which is defined in Javascript, gives us the ability to add more properties and methods or functions (this is discussed later) to our object which we created by using object literal notation. This passing on of values from the Object defined in Javascript to our created object varA is prototypal inheritance and it forms a prototypal chain which we can trace back all the way to Object. So, "Everything in Javascript is an Object".

We will also see how Numbers, String, Boolean etc, are all created from Object in later parts of the series. For now, just be aware of the above points, even if it doesn't make sense to you.

• Variable Declaration

  • The variable is a container that calls a value, the process of variable creation is called a variable declaration. When we store a value in memory we access it through the variable.

      let a; // declaration
      a = 20; // assignment
    
      var c; // declaration
      b = "abc"; // assignment
    
      const d = true; // declaration+assignment
      /*
      using const we must declare and assign value to variable at the
      same time
      */
    

  • Variable Declaration is a statement.

  • statements in JavaScript perform some action, in this case, we create a new variable a in the memory.

  • Variable Assignment is an expression.

    *statements and expressions will be covered in later parts of the series.

• Dynamic Typing

  • JavaScript is a dynamically typed language.

  • The type of variables is set during code execution, it does not need to be specified in code.

  • Dynamically typed languages can increase the chance of error.

    • Table of pros and cons of dynamically typed languages:

      

      So it has some great pros, and cons which we are now aware of and with practice, we'll be able to handle these issues as required

That's it for this article, we are ready to go explore objects in-depth so head to Javascript Jumpstart - Objects