Intro to JS question

[m_hutley]

Preface: I’m going to try and explain this in… i’m going to call it logical operation terms. Note that this may not be exactly what Javascript does “under the hood”, but the operations should be near enough identical that i’m okay with not being 100% accurate to the engine. None of you JS Engine nerds come at me

So the concept is that the block (the bit inside the {}'s) has its own variable reference table (I’ma shorthand this to VRT now, because typing its a pain).

let b = 2;
In the ‘global’ block, we defined a variable called b. So it’s in the global block’s VRT.

{
Then we enter the block. That block creates a VRT as part of its startup procedure. That VRT is blank.

b = 4
We tell the block’s VRT that we want to change the value of b.

The block looks at its VRT. It has nothing there called b. (or anything there at all, but thats moot)

It calls its parent (the global block, in this case), and asks it to resolve the reference to b.

The global block looks at its VRT, sees an entry for b, and changes its value to 4 by discarding the 2 and replacing it.

The global block then hands the value back to the code (in case we wanted to do something complex like defining a value and using it at the same time).

b;

Repeat the above lines, but at the end, instead of replacing the value, the global block just hands back the value that is currently stored at that memory address.

}
We leave the block. The block’s VRT goes away.

[OBXjuggler]

thanks!

what’s a real world use for scope and VRT

i learn code by doing

how can i practice writing scope and VRT?

[m_hutley]

Well, every time you use a function it uses a scope. That’s probably your biggest “real world” use.

the block/scope level VRT makes sure that you’re not accidentally overwriting some variable out in the global scope - if the function writer writes a function add(a,b) {...}, it wont collide with a or b in the global scope, because the block is defining those locally to itself, and when it resolves those variables, it will always resolve to the local version. You can import or use that function without needing to worry about variable names.

[OBXjuggler]

String Properties and Methods

.length property (other properties i can figure out)

how do acheive my String Properties and Methods in VS Code?

from Novice to Ninja:

const name = 'Alexa'; // declare and assign a variable<< 'Alexa'
name.length; // retrieve the name variable's length property<< 5

how do i retrieve the name variable’s length property of 5 and see it?

i found this example:

<p id="demo"></p>

<script>
let text = "Hello World!";
let length = text.length;

document.getElementById("demo").innerHTML = length;
</script>

is there another way? easier way for a beginner?

many thanks!

[m_hutley]

Well, to get the length of a string, first you need a string.

let text = "Hello World!";

Check.

Then you can get the length of it.

let length = text.length;

Check.

Then you can do things with that length. Like putting it into an HTML element.

document.getElementById("demo").innerHTML = length;

… i mean, you could put it all on one line, but I’m not sure that would be ‘easier’. Certainly not to read…

[OBXjuggler]

ok!

thanks!

solved my own problem

THIS is what i was after:

<script>
    let text = "Hello World!";
    let length = text.length;
    alert(length);
    
    </script>

do i owe you a $0.25 now?

[m_hutley]

hehe.

Alert works, console.log works… the purpose of the lesson was “Strings have this property, length, which is a number.” What you do with said number is up to you

[OBXjuggler]

clarification, please

from Novice to Ninja:

The concat() method can be used to concatenate two or more strings together:

Copy

'JavaScript'.concat('Ninja');<< 'JavaScriptNinja'
'Hello'.concat(' ','World','!');<< 'Hello World!'

A shortcut for string concatenation is to use the + operator to add the two strings together:

full code please

what do i put in the alert()?

thank you!

[m_hutley]

What part precisely needs clarification?

Concatenate means to stick one directly next to (and after) the other.

If i gave you the strings "Dumpty", "Humpty " and a +, how do you intuitively think you would put together a string to output?

What if they were stored as variables str1 and str2? (same + sign is available.)

[OBXjuggler]

i slept on it and its more clear

is this proper?

   <script>
const sentence = 'JavaScript'.concat('Ninja.'); const sentence2 = 'Hello'.concat(' ','World','!');

alert(`does this work? ${sentence} ${sentence2}`);
    </script>

or

 <script>
const sentence = 'JavaScript'.concat('Ninja.'); const sentence2 = 'Hello'.concat(' ','World','!');

alert(`does this work? ${sentence}`);
alert(`does this work? ${sentence2}`);
    </script>

is there another, better way?

or just a preference?

again, thanks!

[m_hutley]

@m_hutley

If i gave you the strings "Dumpty", "Humpty " and a +, how do you intuitively think you would put together a string to output?

Let me try that again…

Using only the components alert(, ), "Dumpty", "Humpty", " ", and two +'s; construct an alert that gives the full name of a nursery rhyme character in the correct order and proper spacing.

[OBXjuggler]

thanks!

i DO get concatenate now

moving on…

again from Novice to Ninja

Symbols are the only primitives that don’t have a literal form. The only way to create them is to use the Symbol() function:

const uniqueID = Symbol();

It is recommended to add a description of the symbol inside the parentheses:

const uniqueID = Symbol('this is a unique ID');

Because symbols are primitive values, the typeof operator should return a type of ‘symbol’:

typeof uniqueID;<< 'symbol'

The description acts as a string representation of the symbol and is used to log the symbol in the console, making it useful for debugging purposes:

console.log(uniqueID);<< Symbol(this is a unique ID)

You can manually access the description using the String() function:

String(uniqueID)<< 'Symbol(this is a unique ID)'

It is possible for two variables to point to the same symbol if the for() method is used when the symbol is created:

const A = Symbol.for('shared symbol');const B = Symbol.for('shared symbol');

The variables A and B now both point to the same symbol in memory. In this case the description ‘shared symbol’ also acts as a shared identifier for the symbol.

The main use-case for symbols is as object property keys, which will be covered in Chapter 5. The uniqueness of symbols, mean that it’s impossible for the names of any properties to clash with each other if they are symbols.

having trouble with this entire concept

please break the concept into easy to understand pieces

start here…

const uniqueID = Symbol();

yes, i will Google, and MDN, JavaScript symbols as well

many thanks!

on a learning curve here

[TechnoBear]

Off Topic:

@OBXjuggler: it would be much easier to make sense of your posts if you would format the quoted sections as such. Highlight the quoted text, and either use the quotation mark button in the editor window, or Ctrl+Shift+9.

[m_hutley]

A Symbol is a thing that stands in place for another thing, while being uniquely its own thing.

“I am a string” = “I am a string” is true.
But two symbols, even if they contain the same string as their ID, are NOT the same thing. They are unique.
The exception to this is if you created the symbols using the .for construction.

The book outlines that their use of Symbols will generally be covered under Chapter 5. It’s probably best not to over-stress yourself on the concept until then.

To be honest, I rarely if ever use Symbols (at least, directly), but i’m not generally writing super-complex javascript that requires manipulating objects i didn’t define myself.

[OBXjuggler]

TechnoBear,

i understand now

thanks!

[OBXjuggler]

@m_hutley

The book outlines that their use of Symbols will generally be covered under Chapter 5. It’s probably best not to over-stress yourself on the concept until then.

thanks for the advice!

wont stress myself… i like that

[OBXjuggler]

10 + null; // null behaves like zero<< 10
10 + undefined; // undefined is not a number<< NaN

null is coerced to be 0, making the sum possible whereas undefined is coerced to NaN, making the sum impossible to perform.

In general, values tend to be set to undefined by JavaScript, whereas values are usually set to null manually by the programmer.

please help me with this concept by providing examples of null and undefined code, starting with the code given

can i use alert() ?

how do i run null and undefined code examples?

[m_hutley]

null and undefined are special entities, that have their own meaning.

As the book states, null is something generally not used by javascript itself, but is manually available, and coerces itself to 0 when added to a number. It would also coerce itself to “null” if you did string concatenation with it.

undefined is something that typically falls out of functions that don’t expressly return a value, or some other “but it hasnt existed yet” scenario. You don’t usually create an undefined, referencing it is usually the result of a mistake. undefined coerces to NaN (another special entity, though this one in the number classes) for mathematical addition, or “undefined” for string concatenation.

Once coerced, either to a string or a number, null and undefined are both that thing, and can be used in any way that a string or a number can be used. alert will inherently further coerce whatever is given to it into a string for display.

[OBXjuggler]

@OBXjuggler

10 + null; // null behaves like zero<< 10
10 + undefined; // undefined is not a number<< NaN

bingo! i get 10 + null; // null behaves like zero<< 10,

what makes undefined return NaN. why?

i ask for clarification here, the concatenation

@m_hutley

It would also coerce itself to “null” if you did string concatenation with it.

and

@m_hutley

undefined coerces to NaN (another special entity, though this one in the number classes) for mathematical addition, or “undefined” for string concatenation.

@m_hutley

Once coerced, either to a string or a number, null and undefined are both that thing, and can be used in any way that a string or a number can be used

maybe re-phase and pass on a few examples

again, i thank you for your time and patience… seriously

[m_hutley]

@OBXjuggler

what makes undefined return NaN. why?

It’s… kind of on the same level as a WARNING as opposed to an ERROR.

null is not something the code is going to generate unexpectedly, it’s something intentionally fed to it; as such, it can be assumed that everything’s okay, and you can coerce it as a truthy 0. The user meant to do that. For some reason.

undefined however can come from many places, including failures of functions further up the chain. To prevent confusion between being given an actual 0 and an undefined result that may or may not have been 0-like, Javascript aborts the math to evaluate as NaN, a special number to indicate “You did something not-mathy with numbers.”

It’s kind of hard to generate examples, because… they’re all the same? like… demonstrations of addition, you can show… 1+1 yields 2. 5+19 yields 24. But… undefined + <any number> will always equal NaN. So will undefined + undefined, because Javascript defaults to + being numerical addition, and not concatenation.

It’s also worth pointing out that undefined is sort of a misnomer in the sense that most new users will think of. If you try and use a variable that hasn’t been declared, it won’t evaluate to undefined, it will throw a flat out exception ( of type ReferenceError) instead. (This is that warning/error distinction)