Writing this guide for by father who is building alis4ops.com.
We have the following functions:
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:
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
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?
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
For example, we are not defining it like so:
const draggedElement = event.target;
In Javascript, when we do not use the variable declarations (also called keywords), javascript considers that variable a global variable.
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
In the console, call add(1,1)
add(1,1) => 2
Then call printStatus
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:
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") } }
Let's define the functions in the console log again.
We need to redefine it because we are started a new dev console.
Now in the console, call add(2, 2)
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
When a variable is defined without a variable declaration within a function, that variable's scope is global.
Hope this helps Baba (and anyone else reading this.)
The above is the detailed content of Intro to JS Variable Declarations. For more information, please follow other related articles on the PHP Chinese website!