Intro to JS Variable Declarations

Writing this guide for by father who is building alis4ops.com

• I refer to him as "Baba".
• He is learning to build web applications, formerly an Electrical Engineer who ran his own engineering business.
• Will leave some notes around the article referring to him, so anyone on the interwebz reading this can ignore those lines. Hope you guys don't mind!

About alis4ops.com

A web app for children to practice their maths operations and for older people to keep the minds sharp.

It's a recreation of a Lotus 1-2-3 program my father wrote for my younger brother and me. This was more than 24 years ago. He was looking for an easier way for me to practice my multiplications without him having to manually generate the questions and mark my questions. He would be writing the tens of hundreds of questions on paper.

Context

We have the following functions:

• handleStartTouch
• handleMoveTouch

Baba defined in DragDrop.js

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

function handleMoveTouch(event) {
    event.preventDefault()
    if (draggedElement) {
        const touch = event.touches[0];
        // ..more code
    }
}

Notice that we are accessing draggedElement on line:

• if (draggedElement) {

hanldeMoveTouch does not raise an error when it called.

Placing a breakpoint on if (draggedElement) in Chrome DevTools will show that draggedElement resolves to the same html element provided by event.target in handleStartTouch

Issue

Why can we can access draggedElement in handleMoveTouch even through it is defined in handleStartTouch

More generically, why can we access a variable which was defined in a function in another function in javascript?

Explanation

Look at handleStartTouch function:

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

Specifically the line:

    draggedElement = event.target;

It does not declare the variable name draggedElement using either one of the keywords

• const
• let
• var

For example, we are not defining it like so:

    const draggedElement = event.target;

Variable Declaration (a.k.a Keywords)

In Javascript, when we do not use the variable declarations (also called keywords), javascript considers that variable a global variable.

Exercise

Consider the following example where we define two functions:

// Takes in two arguments and returns the sum
function add(x, y) {
  sum = x + y
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

Open up DevTools in Chrome

• navigate to "Console"
• Copy and paste the code above
• Press enter
• It will return undefined, thats fine.

In the console, call add(1,1)

• you will see the console return 2

add(1,1)
=> 2

Then call printStatus

• You will see the output Sum: 2

We can see that printStatus() can access the variable sum defined in add(x, y)

This is because the variable sum is being declared without this following keywords:

• sum = x + y

Now lets change add(x, y) add to use a variable declaration for sum

// Takes in two arguments and returns the sum
function add(x, y) {
  const sum = x + y // use the variable declartion const
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

• Go to Chrome
• Refresh the page with Ctrl + R
  • you can also open a new tab and open up devtools console again.

Let's define the functions in the console log again.

• Copy and paste the code snippet above into the console and press enter.

We need to redefine it because we are started a new dev console.

Now in the console, call add(2, 2)

• you will see the console return 4

Call printStatus to see if can access the variable sum defined in add(x, y)

printStatus()
> Uncaught ReferenceError: sum is not defined
    at printStatus (<anonymous>:9:3)
    at <anonymous>:1:1

The error says sum is not defined.

This confirms that when a variable is defined with a variable declaration (const, let, var) within a function, that variable's scope is only within the function.

Summary

function add(x, y) {
  // Globally scoped "sum"
  sum = x + y
  return sum
}

function add(x, y) {
  // Scoped only within this function
  const sum = x + y
  return sum
}

Hope this helps Baba! (and anyone else reading this.)