Teminology explained


#1

Wes Bos recently tweeted with an image that helps to explain many common terms that are used when talking about JavaScript code.

Inspired by that tweet, an interactive version of it has been created too.


#2

Could do with a few extra terms, like splitting ‘const myTotal’ into its constituent parts. Also more accurately, the part labelled “variable to capture returned value”, while accurate in the context, is better defined as a “variable declaration”.


#3

Once JavaScript has declared a const value is it possible to change?

PHP raises errors and warnings if a global, defined const is given another value because constants cannot be redefined.


#4

The problem with that statement is the word ‘value’.
const doesnt actually define a value - it defines a reference.
For primitives, that means what you think it means - you can’t change it.
However if you define an object as the reference for a constant variable (an irony in terms), you can still manipulate the values of that object - it doesn’t make the object immutable, it just locks the reference pointer to point at that object.


#5

I took a look at the ECMAScript documentation, but I think the MDN documentation is more digestible
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const


#6

Many thanks for the link because I find examples easier to comprehend when new naming conventions are within the explanations.

I noticed that PHP would throw errors if the following valid JavaScript was used because a defined const is global and applies to included files, functions, class methods, etc.

I will have to remember that a JavaScript const can be redefined within blocks… most confusing :frowning:

const MY_FAV = 7;

// it's important to note the nature of block scoping
if (MY_FAV === 7) { 
    // this is fine and creates a block scoped MY_FAV variable 
    // (works equally well with let to declare a block scoped non const variable)
    let MY_FAV = 20;

    // MY_FAV is now 20
    console.log('my favorite number is ' + MY_FAV);

    // this gets hoisted into the global context and throws an error
    var MY_FAV = 20;
}

// MY_FAV is still 7
console.log('my favorite number is ' + MY_FAV);

#7

…sort of? It’s not really redefining…
I prefer to think of it as starting with a fresh slate when you open a block. (Assuming you use block-level constructors (let/const)). Perhaps it’s because I started working with MySQL, where things are implicit to the scope, IE:

SELECT * FROM users

The scope of users is dependent. You could define users dynamically, or it could refer to mydatabase.users. In the same way, you could think of

const a = 7;
while (i < 3) {
   const a = 13;
   console.log(a);
   i++;
}
console.log(a);

as being implicitly

const a = 7;
while (i < 3) {
   const whileblock_a = 13;
   console.log(whileblock_a);
   i++;
}
console.log(a);

In any case, we’ve wandered from the OP’s topic, and should probably shard this thread off into its own thread starting with post #3?