Different between const and let

I would like to aware you about the different and avoid the situation of looking for debugging the code for a few hours when the solution was at changing the const for let!

First I would like to give you advice to NEVER use var. Behind it is a long history. You can read more about it here. As you know JS was not such popular language in the past like is now. Having now const and let absolutely make our developers’ lives easier! :)

Const variable needs to be always declared at the same line:

const mustToBeDeclaredAt = "the same line"

when let does not need to

let canBeDeclared;
canBeDeclared = "Separetly"

I will show you on the example at the code that is helpful.

I would recommend to first use const to declare the variable. When the variable is declared by const, you are sure that this variable wouldn’t be reassigned and mess up your application. Sometimes you will notice that your code is not working but all looks fine, so I would suggest you look up how you declared the variable by let or by const, and what you would like to achieve. If you would like to change the value of the variable, during the updating process (PATCH request) you need to use let. Const does not let you do it. But it is not mean that you cannot reassign the value of the const variable. More about it you will find here.

Another aspect what I would like to aware you is the fact that the let and const are working with different scope. We can agree when const and let have been declared at global scope, all function will have access to them. But what about local scope…

Let look at the examples below:

EXAMPLE 1

Link to download app from my github: file:///Users/ewelinaszoda/Development/code/mod3/jsdom-dom-challenge-lon01-seng-ft-042020/index.html

When you open the web app the counter should start count, when you click the button pause, the counter would stop counting. After re-click on the button, the counter should keep counting.

// declare DOM element where is our counter
const counter = document.querySelector('#counter');
setInterval(secondsUp, 1000);

function secondsUp() {
counter.innerText++;
}

With this code out counter starts to count when we visit the web app. All good!

Now I need to write the event when our counter will stop counting. To do it I will use clearInterval() function. But wait! I need to put a parameter to the function, so I need to back to my code and assign my setInterval function to the variable.

const timeUp = setInterval(secondsUp, 1000);

Now I need to add the event to pause counter and after re-clinking to continue counting

pause.addEventListener('click', function () {
if (pause.innerText === 'pause') {
pause.innerText = 'resume';
//stop the time
clearInterval(timeUp);

} else {
pause.innerText = 'pause';
// continue the time
timeUp = setInterval(secondsUp,1000)
}
});

Stop the count is working but hey, the continue counting, it is counting quicker than before why?

The problem is when the timeUp has been declared with const and I don’t provide let or const, the value of timeUp wasn’t locally scoped - and it was creating a local binding. It’s a default browser behaviour what here is hmm kinda… unhelpful

And I do not want to use const to timeUp in the else block, because I do not want to create a new one counter and start from the beginning. I would like to continue the current counter.

So if I would like to reassign the variable, I should look up how I declared the variable and check if for sure I have access for it! Here, as well, the function does not see the variable timeUp because else is at another deeper block.

The core of the problem is that when I’m trying to reassign timeUp, if it was previously declared as a const, the function is not going to be able to access it and reassign, whereas if I just use the reassignment with timeUp being declared using let , the function reaches out of its scope to find it and successfully reassigns!

So let’s change the way to declare variable for

let timeUp = setInterval(secondsUp, 1000);

Now, ALL is working perfectly!

EXAMPLE NO 2

Let lets us having access to variable who has been declared in the local scope function.

Function scope

let productsNameValue;
function renderProduct(productsName) {
// set variable
productsNameValue = productName
showProducts(productsName);
}

Different scope, when we have access to the variable declared at the different local scope, using let when the variable has been initialized.

const select = document.querySelector("#name-dropdown")
select.addEventListener('change', function(event) {
showProducts(productsNameValue)

The last thing… when you start using the arrow function ES6, you are going to declare the function as a variable…..THAT WILL BE FUN!