This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Data Types & Operators" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Alexis Abril: For those that are just joining us, we had a little transition, my name's Alexis Abril. We're gonna talk a little bit about fundamental constructs in the language in JavaScript. Everybody's favorite part, data types, what kind of keywords we're going to use, what they mean. We're gonna go through a little bit of the groundwork as we start to build up our knowledge of the language.
[00:00:27] So first off we have our basic data types. You can think of these as the chemistry of JavaScript. These are divided into two categories, we have our primitive and object, or composite data types. Every language is gonna have this kind of set up. JavaScript is a little unique in a few areas.
[00:00:49] One, everybody is pretty much familiar with a string, what that refers to. In JavaScript we have undefined, and null. This is kinda nice, but they are somewhat confused, and mixed up from time to time, especially if you'er using something double equals null or undefined, a lot of that will trip people up.
[00:01:08] Undefined is actually gonna refer to a pointer that points, that hasn't been set. It's, by the literal definition has not been defined yet, we have not set this variable, var foo;, this will be undefined. Or if you're trying to use any kind of variable in memory that just hasn't been set yet.
[00:01:28] Null is actually referring to the null pointer. I like to think of it as, if you come across null in a piece of code, it's by intent. Something has manually set this to be null, versus undefined which hasn't been declared, maybe it's a mistake. Null is typically that 0x0 in any kind of stack.
[00:01:51] Booleans and strings, we're pretty much familiar with those. Numbers in JavaScript, we have numbers as opposed to like a statically typed integer or floating point, or big ints. Numbers are, in this case it's gonna be an integer, but typically referred to as floats. And then we have our composite types, objects which is our hash.
[00:02:16] It's our key value pairs. We're gonna get deeper into what objects can really be. We have arrays, which is just a slightly more advanced object construct, we're gonna show a little bit what that looks like in memory. Dates, datetimes, everybody has a date construct of some point. Regular expressions, which I'm sure everybody's favorite for using or solving problems, or adding problems depending on how you look at it.
[00:02:44] And functions, functions are kinda unique as we're talking about earlier functions, our first class in JavaScript, we had the literal definition of what that means. We're really gonna get to experiment with how powerful and how expansive functions can be, do we have questions? Yes, go for it.
>> Speaker 2: What about NaN and also the ES6 symbols?
[00:03:07]
>> Alexis Abril: Not a number, we're not gonna talk about any ES6 symbols. I'm assuming you're talking about things like bracket syntax and those types of operands.
>> Speaker 2: Symbol's actually a-
>> Speaker 3: No, we're sticking to the well supported image.
>> Alexis Abril: Yeah.
>> Speaker 3: Symbols isn’t in most browsers yet, a year from now.
[00:03:30]
>> Alexis Abril: That's true, that's true, most of what we're gonna cover is kind of just the cross browser, the most modern acceptance of a standard. If that's a way to phrase that, something that's applicable across all environments.
>> Speaker 3: And then not a number is a number, just returns false, returns true when you put it through is not a number, the function is not a number.
[00:04:01] [CROSSTALK]
>> Alexis Abril: For the mic, the question was, what about the not a number type? It is a number was the response for the people at home.
>> Speaker 4: And if you do interject, can you speak loudly?
>> Speaker 3: Yeah, I'll try to, thanks.
>> Alexis Abril: Cool, any other questions, good so far?
[00:04:23] Right on, so these are our basic types, these are basic constructs. So if you're thinking of this as the chemistry, maybe we have a little bit more of like the physics of what makes things possible, what brings these constructs together. Those are our operators, we are not gonna go through every reserved word in the language, but we're gonna touch a few of the big ones here.
[00:04:46] var, this is how we declare variables, remember JavaScript is a weakly typed language. So we don't care necessarily about the type on the left side instead of saying int foo. We care about the value it's being assigned to. So here we're just declaring a pointer, just undefined. new, this is how we're gonna create new objects, based on some kind of constructing function.
[00:05:07] In this case maybe Foo is a constructor. If we really wanna invoke this it'd be new Foo open close. So Foo and then the calling of the Foo function. Assignment, this is, we're talking about the equals operator, we're taking a pointer and actually assigning an address to that variable in memory.
[00:05:27] So we're gonna tell, in this case, we have some objects, some hash representation in our memory stack, and we're gonna point to the foo its own address. This is weird, when I'm saying addresses, we actually have a visual here in a couple slides. We're gonna take foo's pointer and point it to this object somewhere else in memory.
[00:05:48]
>> Alexis Abril: Same thing if you have foo.bar. foo.bar is its own place in memory, and we're gonna point it to some new, to some other reference which is valid. delete, delete is a special key word. An easy way to describe this from a high level is it does exactly what it sounds.
[00:06:13] What it really does, the delete, the deleting of a pointer or a reference in this case, is really just an observance of behavior. It's not actually what's, there's no real deleting necessarily going on behind the scenes. And we'll show what that means here in a second too. We have our member assignments.
[00:06:36] If you're using the dots or if you've seen the bracket syntax. How many people have never seen this bracket syntax before? We have a bracket and then a string within that. Is everyone familiar with that? These are actually doing the same exact thing, but this is a really, really nice feature.
[00:06:52] We're all probably familiar with seeing this in array notation. You can do this in object notation as well, to look for any property that is on a given object. And then we have our call, call is this first line here, this open closed paren whenever you're invoking a function.
[00:07:09] .call is just invoking a function that's a member of another object. We're gonna get into why that distinction is important as well. And then we have our comparison operators, ==, ===, greater than, not equals to, all kinds of different comparison operators. Double and triple are a very, very important distinction.
[00:07:34] Many of us have probably at least heard along the grapevine, we shouldn't use ==, we should always use ===. One's faster than the other, but we're not really sure why that is. We're gonna show you why exactly that is, and what kind of performance impact something as simple as using one comparison operator or the other will have on your applications, so.
[00:07:55]
>> Speaker 3: I'd like to interject two things. You should be interjecting on me too. You don't have to use the parentheses with the new operator. They're optional and then delete, just to kind of rephrase a little bit, it deletes a property and we'll will see it in a second.
[00:08:15] It doesn't actually delete the data. So if there's a foo bar equals some big object, it doesn't actually delete the object. It deletes a reference to the object, and we'll see what that means in a minute.
>> Alexis Abril: Yes.