JavaScript: From Fundamentals to Functional JS, v2 Non-Valid Characters

Transcript from the "Non-Valid Characters" Lesson

[00:00:00]
>> Here is what I was saying about Non-Valid Characters. Well, I think just something to keep in mind is just try not to use invalid characters as property names. You know if you really have to do it fine, but this is not a very good naming here on this line try to avoid that, but anything like this right if you put puts on it its fine.

[00:00:27] Similarly in the object literal notation you need to put around bolt member or save before we had to but if you using non valid characters then you have to. And then for the zero here there's another thing that makes it seem like an array a special but it's not you can set zero property on an object right.

[00:01:00] Oops. That shouldn't be too surprising but it makes it seem unusual because we don't put the quotes around the brackets and in this context, with the bracket you can put anything that can be evaluated actually. And so you can say like two plus two. Stuff like that. So that's why it's seeing this as something that needs to be evaluated rather than something that needs to be coarsed directly into a string kind of like a variable name.

[00:01:45] Not that a variable name is a string, Okay, awesome, any questions, No?
>> Questions in the chat.
>> There's a question in the chat?
>> Yeah this person quote or in brackets Oct zero evaluate to an array method or an index position of that array.
>> So the question is if.

[00:02:20]
>> The answer is the value of the Zero index of that array.
>> Yeah, I just wanted to write it out.
>> Yeah, for it.
>> So the question was, What does this evaluate to? And the answer is that it doesn't call so when we say an array method, what I'm talking about are functions that are on your array, such as .push Right?

[00:02:56] .pop, things like that. That's an array method and we know it's a method because look we need to put parentheses next to it versus a property such as the length property which we do not need to call because it is not a function Yeah, cool. And if you're interested in like deep diving in this kinda thing, the first version of this course, has a lot of exercises on like implementing this kinda stuff like an array with a dot length property without using an array, right we use an objects and things like that.

[00:03:43] So that's kinda fun. So, if this is cool to you, then I recommend doing that awesome.
>> In one of the examples you put up there, you had a an array then you had a type of equals array. Is there ever an example that is true?
>> No.

[00:04:08] Yeah, but if you do want to check if something is an array, which you will later on when we start implementing each map, you can use array.isarray, then you can pass the array. That's a traditional one. Yep.
>> Can you pass in a function as the index of that array?

[00:04:32]
>> So when you say index that implies as.
>> A key
>> As a key.
>> Like a brackets function.
>> I mean, you could. So the question is, can you do this, right?
>> Yeah.
>> And it's just gonna like string of phi that function. So we can look at the key.

[00:05:10] So this is going to return all of the keys of the object. I just wanna get the very first one and hopefully this works and I'm gonna do the type of and it's a string. So just to clarify, that's what it's returning. So you're putting it in the brackets, it's just string a fIying it.

[00:05:32] So you can't call this function later, right? And because of this weird functionality Have it string of fIying. And it could string a file in different ways. I don't recommend doing this but for like fancies. Yeah, you can,
>> As long as it returns the string, you could wrap it in a function expression and then

[00:05:55]
>> Yeah, if you call the function, then yeah, that's different. So we can Wrap it. And then call it. Yeah, you guys following. So I wrote out a function. I defined it. I wrapped it in parentheses, cuz we're gonna immediately invoke it and it's an anonymous function. And this function is gonna return 3, so these brackets are gonna evaluate this line.

[00:06:32] And so you can see Now it's 3. Not the most useful thing in the world but, maybe I've never had idea
>> Sometimes you have to call out to a function to grab the idea of something, right?
>> Yeah, I guess if you're like yeah
>> Maybe
>> Maybe Yeah, I've never had to do anything like that, but I could, maybe, there are probably better ways to write that, so that's more readable.

[00:07:04]
>> Probably.
>> Yeah, cuz a lot of people just like maybe you guys didn't know this before I told you this, a lot of people don't know this. And you don't wanna just throw craziness at people when they're reading your code, just as a rule of thumb. I try to keep it, to the point and don't get too fancy, if you're the kind of person who likes to take it to the edge and you'll really like functional programming cuz there's like a whole cult of people who are just like always pushing it to the edge and seeing how many less lines of code.

[00:07:36] They can care less characters, they can do the same thing only people in the cool kids club can understand what they're doing. And I'm not part of that club and I'm not trying to join but maybe you are. Maybe you wanna go through like the hazing of it and have that experience.

[00:07:55] Maybe. Awesome. These are great questions, one more question. What's my next slide? Okay, one more question and we're gonna jump to exercise.
>> One question I have, earlier you said something about, we'll throw out a you've been talking about just the similarities between like arrays and objects. So then what is the difference?

[00:08:21]
>> Yeah, it's a good question. So, an array is a special kind of object and they have really the most special thing about an array is the dot length property, which a property that is computed as you add numerical indices. Numerical indices are different than properties on an array, because an array captures that and will increment the length.

[00:08:54] Right? So if you say, do we still have our y in here? Yeah so if you say y, y.length it's one but if we say Y.Hello equals goodbye, can you guys see that at the bottom? Y.length is still one. So there's a special behavior here for arrays around it's numerical indices.

[00:09:23] So any numbering
>> Y is numerical indices and having the length change.
>> What's that?
>> Can we see a demo of adding numerical indices and seeing the length change?
>> Yeah, so we can add, for example, an interesting thing that happens as if we have y, so length 1, right?

[00:09:46] We have one value in there, true. Let's set the tenth one to false. And then we have a bunch of empty ones and let's see what the length is. Yeah, so there's special behavior around those numerical indices, and there are methods that you can use to take advantage of this.

[00:10:12] So some cool ones are like reverse. So the cool thing about having numerical indices is that they're ordered. And when things are ordered, you can reverse them with an object, we don't really have any such order. So for things like sorting and the order and what else is interesting about an array that we can't do with an object?

[00:10:39] It's a lot easier to loop through an array isn't an object as well. Yeah.
>> Can you open up that object to see-
>> This one?
>> Yeah, whether its just
>> Yeah. So also be careful when you expect the chrome developer tools to print out, this is just a representation of the array, right?

[00:11:13] It probably looks very different in memory or it definitely looks very different in memory and some different developer tools, and different versions of chrome developer, tools will actually print out different things. So just be careful if you see variance in what a console dot log is showing you.

[00:11:31] It's not because there's no necessarily because it's a different behavior. Sometimes, some developer tools will hide these properties. The only sort of show the numerical indices. So you'd have to check that explicitly. Like y.hello and it will still return something but for whatever reason, when it's representing it in the console, it just throws it out.

[00:12:04] So I think even when I first taught this course that I had to prove that it was there. I couldn't just print it out and show it was there. So that was just a few years ago.
>> Is [COUGH] Giving an array object to property Is that uncommon to do.

[00:12:30]
>> To give an array.
>> Yeah so for instance when you gave assign the property goodbye is that uncommon to attach that to an array?
>> In application level code You typically don't do stuff like this, but in libraries and stuff, it happens a lot. But it's important to know this just so you understand that the rules are consistent, that arrays are objects, right?

[00:13:05] So that's why I use it as an example.