JavaScript – Primitives Vs Objects

Notes about primitives and objects data types in JavaScript

I’ve got a bit fed up of the Udemy course I’m doing on JavaScript and the videos, so I’m taking notes from different websites and I’ll do a summary at the end.

Primitive Data Types

Primitive data types are number, string, boolean, NULL, Infinity and symbol. Non-primitive data types is the object. The JavaScript arrays and functions are also objects. For more check out this web developer course online.


Follow Flavio on Twitter

What is the main difference between primitive types and objects in JavaScript?

First, let’s define what are primitive types.

Primitive types in JavaScript are

  • strings
  • numbers (Number and BigInt)
  • booleans (true or false)
  • undefined
  • Symbol values

null is a special primitive type. If you run typeof null you’ll get 'object' back, but it’s actually a primitive type.

Everything that is not a primitive type is an object.

Functions are objects, too. We can set properties and method on functions. typeof will return 'function' but the Function constructor derives from the Object constructor.

The big differences between primitive types and objects are

  • primitive types are immutable, objects only have an immutable reference, but their value can change over time
  • primitive types are passed by value. Objects are passed by reference
  • primitive types are copied by value. Objects are copied by reference
  • primitive types are compared by value. Objects are compared by reference

Javascript Types

There are eight data types in Javascript:

  1. string
  2. number
  3. bigint
  4. boolean
  5. undefined
  6. null
  7. symbol
  8. Object

The first 7 of them are commonly called Primitive Types and everything else are Object Types.

Primitive Types

They can only store a single data, have no methods and are immutable. (An immutable value is one whose content cannot be changed without creating an entirely new value. In JavaScript, primitive values are immutable — once a primitive value is created, it cannot be changed, although the variable that holds it may be reassigned another value).

That’s another interesting point! Primitive Types have no methods but, except for null and undefined, they all have object equivalents that wrap the primitive values then we’re able to use methods.

For string primitive there is String object, for number primitive there is Number, and so there are BooleanBigInt and Symbol.

Javascript automatically converts the primitives to their corresponding objects when a method is to be invoked. Javascript wraps the primitive and call the method.

Object Types

Differently from the primitives, Objects can store collections of data, their properties, and are mutable.

Differences between types

1. Assigning to a variable and copying value

The difference in the way the values are stored in variables is what makes people usually call Object Types as Reference Types.

Primitive Types

When we assign a primitive type to a variable, we can think of that variable as containing that primitive value.

let car = "tesla"
let year = 2021

// Variable - Value
// car      - "tesla"
// year     - 2021

So when we assign this variable to another variable, we are copying that value to the new variable. Thus, primitive types are “copied by value”.

let car = "tesla"
let newCar = car

// Variable - Value
// car      - "tesla"
// newCar   - "tesla"

Since we copied the primitive values directly, both variables are separate and if we change one we don’t affect the other.

let car = "tesla"
let newCar = car

car = "audi"

// Variable - Value
// car      - "audi"
// newCar   - "tesla"

Object Types

With Object Types things are different. When we assign an object to a variable, the variable is given a reference to that value. This reference stores the address to the location of that value in memory(techically more than that but let’s simplify). So the variable doesn’t has the value itself.

Let’s imagine the variable, the value it stores, the address in memory and the object in the coming snippets:

let cars = ["tesla"]

// Variable - Value                 - Address - Object
// cars      - <#001> (The reference) - #001    - ["tesla"]

This way, when we assign this variable to another one we are giving it the reference for the object and not copying the object itself like it happens with the primitive value. Thus, objects types are “copied by reference”.

let cars = ["tesla"]
let newCars = cars

// Variable  - Value                 - Address - Object
// cars      - <#001> (The reference) - #001    - ["tesla"]
// newCars   - <#001> (The reference stores the same address)

cars = ["tesla", "audi"]

// Variable  - Value                 - Address - Object
// cars      - <#001> (The reference) - #001    - ["tesla", "audi"]
// newCars   - <#001> (The reference stores the same address)

console.log(cars) // ["tesla", "audi"]
console.log(newCars) // ["tesla", "audi"]

Both of them have references to the same array object. So when we modify the object from one of the variables the other will also have this change.

  • Primitives are ummutable
  • You can’t alter the original primitive, instead it will return a new primitive value
  • Primitives, also have an object counterpart
  • When used with some methods, primitive values get wrapped into an object – once it’s finished, it turns back to a primitive value
  • It does this, because objects can have properties

  • The new keyword creates a blank object, it links the blank object to the parent

Using Get Stat to Monitor Rankings

Home – click on a website to view their rankings

Dashboard Tab

Graph at the bottom is arguably the most helpful.

  • Ranking Averages vs. Distribution Graph
  • If you use the date-picker to a date range of less than 2 weeks, you see daily fluctuations
  • It can be easier to click the # on the bottom left and view the number of KWs in the top 3

Keywords Tab

Click “show/Hide” on top right

Click “google base rank” and “ranking change” and “ranking URL”

Click on the “change” column. Those keywords with a positive change number, have gone down in rankings

Click on each Keyword to see ranking changes over a set date-range (use date-picker on top right)

Competitive Landscape

Compare latest column, to what the share of voice was 7 days ago, 30 days ago, up to 180 days ago.

Click the “site” menu on the top left column of the whole GUI – and pick a category of keywords to see specific changes

Scope and the Scope Chain in JavaScript

Scoping – where do variables live? – Where can we access a certain variable?

Notes from JS Udemy Course

JS is a high level, object oriented multi paradigm programming language

Lexical scoping – scoping is controlled by placement of functions and blocks in the code

Scope is the space or environment in which a certain variable is declared.

There are 3 main types of scope for variables:

Global scope

Function scope

Block scope

The Scope of a variable, is the region of our code where a certain variable can be accessed.

Scope Chain in JavaScript

I asked Chat GPT “what is scope chain in JavaScript?”

A scope chain in JavaScript refers to the hierarchical order of scopes, with each scope having access to its own variables and those of its parent scopes.

This hierarchy is established based on where functions and blocks are physically located within the code (lexical scoping).

When a variable is referenced in JavaScript, the engine looks for the variable in the current scope.

If it doesn’t find it there, it moves up the chain to the parent scope. This process continues all the way up to the global scope if necessary. If the variable isn’t found in the global scope, a ReferenceError is thrown.

Here’s a simple example to demonstrate the concept:

let globalVar = "global"; // global scope

function outer() {
    let outerVar = "outer"; // outer function scope

    function inner() {
        let innerVar = "inner"; // inner function scope

        console.log(innerVar); // "inner", found in inner scope
        console.log(outerVar); // "outer", not found in inner scope but found in outer scope
        console.log(globalVar); // "global", not found in inner or outer scopes but found in global scope



In the above example, the inner function’s scope chain includes the inner scope, the outer scope, and the global scope. The outer function’s scope chain includes the outer scope and the global scope. The global scope is at the top of every scope chain.

The scope chain is fundamental to understanding variable lookup and closure behavior in JavaScript.

Hoisting in JavaScript

I asked chatgpt to explain hoisting to me:

In JavaScript, hoisting is a behavior in which variable and function declarations are moved to the top of their containing scope during the compile phase, before the code has been executed. This means you can use a variable or function before it’s been declared in the code.

However, it’s crucial to note that while the declarations (not initializations) are hoisted, the assignments are not. This is why a variable declared and initialized after it’s used will return undefined.

Here’s an example of hoisting with variables:

javascriptCopy codeconsole.log(myVar); // Output: undefined

var myVar = 5;

console.log(myVar); // Output: 5

In this example, the declaration (var myVar) is hoisted to the top of the scope, but the assignment (myVar = 5) is not. That’s why the first console.log outputs undefined, and the second outputs 5.

Now, let’s see an example with functions:

console.log(myFunction()); // Output: This is hoisted!

function myFunction() {
  return "This is hoisted!";

Here, the entire function declaration (including the body) is hoisted, so you can call the function before it's declared in the code.

However, if we use function expressions and try to call it before it's defined, it will return undefined because only declarations are hoisted, not initializations:

console.log(myFunction); // Output: undefined

var myFunction = function() {
  return "This is not hoisted!";

In JavaScript ES6, let and const were introduced, which have different scoping rules from var. While var is function-scoped, let and const are block-scoped. However, they too are hoisted, but due to a mechanism known as the Temporal Dead Zone (TDZ), you cannot access them before declaration.

console.log(myVar); // Output: undefined
console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization

var myVar = 5;
let myLet = 10;

In this code, trying to log myLet before it's declared results in a ReferenceError, while myVar is undefined due to the hoisting and the difference in behavior between var and let/const.

Then I asked Bard:

JavaScript hoisting is a concept that refers to the fact that variable declarations are moved to the top of their scope before the code is executed. This means that you can access a variable even if it is declared after the line of code where you first try to use it.

For example, the following code will print “Hello World!” even though the message variable is declared after the line where it is first used:


console.log("Hello World!");
var message = "Hello World!";

This is because the JavaScript engine will hoist the variable declaration to the top of the scope, before the code is executed. This means that the variable will be defined and accessible even though it is declared after the line where it is first used.

It is important to note that hoisting does not affect the value of the variable. In the example above, the value of the message variable will still be “Hello World!” even though it is declared after the line where it is first used.

Hoisting can be a useful concept to understand, but it can also lead to errors if you are not careful. For example, the following code will throw an error because the message variable is not defined when it is first used:


var message = "Hello World!";

This is because the message variable is not defined until after the line where it is first used. To avoid this error, you should always declare variables before you use them.

Here are some tips for avoiding errors when using hoisting:

  • Always declare variables before you use them.
  • Use the const keyword to declare constant variables.
  • Use the let keyword to declare local variables.
  • Use the strict mode to prevent errors from being thrown when variables are not declared.

I hope this explanation of JavaScript hoisting was helpful. Please let me know if you have any other questions.

Source HTML vs Rendered HTML


For an SEO Audit

You want to check that href links and H1s etc are in the source and the rendered HTML

Rendered HTML, is basically HTML after all the JS has run.

You also want to check that the rendered HTML is not too different to the source HTML.

View the site with JS turned off. Ideally images should still be there and href links should definitely still work with JS turned off.

Rendering process – start with the source HTML and CSS.

The browser parses the source html and CSS which creates the DOM and CSSOM.

The DOM is more important for SEO

The browser creates a DOM tree to identify elements on the website and where everything belongs and relates

The browsers takes the DOM and CSSOM and creates a render tree to lay everything out.

The tree is then used to create the actual pixels and layout of what you see.

JS may then be added to manipulate the DOM

You can turn the final DOM Tree, back into HTML – this is Rendered HTML

When you click View Source in your browser

This shows the SOURCE HTML

Developer Tools – Sources – SOURCE HTML

Network Tab in developer tools – SOURCE HTML

In the elements tab in Chrome in Dev Tools – you get the current DOM Content


When you visit a page, the website sends HTML code to your browser. Often this source code includes additional resources such as scripts, which must be loaded, and which may alter the page code.

How to view Source HTML

Right-clicking “show source” typically shows only the original page code returned to the browser, before scripts and other resources have been loaded and run. But there are many instances, particularly when troubleshooting your page, when you need to see the code of the final, rendered page on the browser, after all resources have been loaded, and any scripts run. For example:

  • To search for Google Analytics or Google Tag Manager tags used in verification.
  • To debug page loading and display (that is, to check that all libraries and other resources that you want to be loaded are).
  • To look at structured data on the served page.

How to view the rendered source

Here are a few methods to view the rendered source code for a web page:

  • In the Chrome browser: Right-click any part of the page and select Inspect to see all the HTML from the rendered page. Search for items in the rendered HTML with Control + F (Windows) or Command + F (Mac).
  • For a page on your own site:
    1. Inspect the URL, either by entering the URL directly in the URL Inspection tool, or by clicking an inspection link next to a URL shown in most Search Console reports.
    2. Click Test live URL > View tested page.
    3. The HTML tab shows the rendered HTML for the page.
  • For a page on any site, not just a site that you own:
    1. Open the Mobile-friendly Test.
    2. Enter the URL of the page. The page must be available to Google without a login, and not blocked by robots.txt.
    3. Click View tested page.
    4. The HTML tab shows the rendered HTML for the page.

Creating an Actionable 404 Report from Screaming Frog

Follow this protocol, to produce a sheet you can send to devs etc, to remove 404s

  • This will get rid of the site-wide 404s and some individual 404s

Run a crawl with Screaming Frog

Export the report –> Screaming Frog – Bulk Export  – Response Codes – Internal – Internal Client Error (4xxs)  (check 500s too)

In Excel – Copy and paste the “destination” URLs into a new sheet – into column A

Remove duplicates from the destination URLs that you’ve just copied into a new sheet

rename the colum – 404s Destination

Copy and paste the Source URLs and the Anchor Text into a new sheet.

Paste Source URLs in column A, and Anchor Text into column C

In cell B1 type – ” | “

In cell D1 – give the column the heading “Source | Anchor”

In cell D2 concatenate – =CONCATENATE(A2,$B$1,C2)

Drag the formula down.

You’ll now have the anchor text and the source URL together, so you can vlookup the destination (404) URL

Copy and paste all of the source URLs | Anchor Text and Destination URLs from the original sheet into columns B and C in the new sheet you just made.

You need “destination” in column B and “Source | Anchor Text” in column C, as vlookup has to go left to right

  • So you’ll have – Destination – Destination – Source | Anchor Text

Name column D in the new sheet “Example Source URL & Anchor Text” and in cell D2 enter the lookup – VLOOKUP(A2,B:C,2,0) (put “equals sign” before the V. Drag the formula down

Copy column A and paste into a new sheet. Name the sheet “Final”.

Copy column D with the vlookup and paste values into column B in the “Final Spreadsheet”

In “final”, you should now have all the unique 404s and an example of a page that links to those 404s with the anchor text.

  • If you’re sending the spreadsheet onto a dev or someone to fix the 404s, you are probably best sending the full sheet with all the inlinks to the 404s, plus the one you’ve just made. It depends how they go about fixing the 404s.

    Once 404s have been fixed, rerun a crawl and recheck them.

look out for 404s that are classed as  HTTP Redirects in the “type” column – these don’t seem to have a unique source URL. You may have to search for the URL in the search box in Screaming Frog and click the “inlinks” tab to see original link to the non-secure http page

If you like, before you send off the report to someone, you can double check the “destination” URLs definitely are 404s, by pasting them into screaming frog in “list” mode

Deleting a webpage – 404s and that

Had to do this today, would have helped to have a bit of a process written down…

  • Check if page ranks for anything
  • if it does, then consider redirecting (301ing) to most relevant/related page (in regards to what it ranks for)
  • 410 is better than 404 according to Yoast – for a deleted page
  • Remove internal links from page copy etc and menus (crawl site if poss)