TypeScript Basics Quiz

[00:00:00]
>> We're gonna begin the day by going through a quick warm up quiz. We're gonna talk about a couple questions, some of them are easy, some of them are hard, and this will sort of just get the blood moving, get us going. So with that, if you're on the course website here we're gonna start with the second unit the JS/TS warm-up quiz.

[00:00:20]
So I'm gonna ask these questions and I want you to just sort of in your mind or in chat if you're watching live, figure out what you think the answer is and then we'll open up the solution and discuss. So, the first question, so we have this class called Person.

[00:00:37]
And then we have two things here. Within the class we have something that appears to be called name, something that's called age. So compare and contrast name and age fields. There's something similar about them, something different about them Actually this is one that you probably either know or don't know.

[00:00:59]
So hash tag name, this is what is called a JavaScript private field. It's a relatively new language feature. And this is actually a private field, right? If I create an instant of person from outside that instance, I cannot access the name property. It's actually private at runtime. This age field is a typeScript private field.

[00:01:24]
So there's this word private, it's called an Access Modifier Keyword, there's private, public and protected. And you get the benefits of type checking that sort of kinda yell at you if you try to use this from places where you shouldn't have access to it. But at runtime, this field still exists.

[00:01:47]
So if for example, you get yourself in a situation where you throw out all of the tape information, you say TypeScript ignore all the errors here or cast this object and force it to be another type. You can actually write code that would access age. And at runtime, you'll see that you have a value there and that's 1.

[00:02:07]
So they both are similar in that they express this concept of private, 1 is just enforced both at build time and at runtime, whereas this kind of field here is only at build time. So generally, if you're using a sufficiently modern version of JavaScript, which you should be able to do thanks to projects like Babel, which take care of the compiling for you, this is probably the one you want to start using.

[00:02:36]
Question 2, we have a bunch of variables here a, b, c, d, and e. And the question is, of these five variables, which of them holds an immutable value? Immutable, of course, meaning we cannot change that value, the value of the variable holds. If we think about this, a and b, right, they both hold the string.

[00:03:09]
So in JavaScript strings are immutable value types. And the trap that one can fall into here is sort of this this idea of const versus let, const and let they're both are ways we can declare variables, but that has more to do with reassignability, right? We could take this variable b and we could point it at a different string, we could, and that would allow us effectively later in our code to refer to b and get something that looks different.

[00:03:39]
The thing that b points to, this string here we cannot change, strings are immutable in JavaScript. That's why when we split a string into little parts, maybe you have like comma separated values and you split that string, you basically get an array of totally new strings that come back to you.

[00:03:57]
You're not altering that string in place. All right, so it turns out a and b both holds immutable values. These two for similar reasons to what we just described, these are both mutable. These are object types. So for example we could pass this c into a function, and despite not reassigning c to anything, that function could place a new key and value inside this object, right?

[00:04:29]
We can mutate this thing in place. And you do this all the time with arrays and with objects, right? These are our collection types. So these are both immutable. And then finally we have this thing at the bottom. It's similar to what we see in c and d, but we're using object.freeze.

[00:04:46]
And this, it turns out is or it acts as an immutable value. So object.freeze prevents new properties from being added to an object, and it prevents the existing properties on that object from being assigned to new values. And I say that very carefully because what I just described will give you kind of one level of immutability.

[00:05:13]
So if you have deeply nested objects, you can still change the values held in that objects keys. So if this were an object, I would be prevented from pointing learn at to something new, but nothing's stopping me from changing this, except the fact that this is a string.

[00:05:36]
So what I'm showing you here is immutable, but object.freeze does not recursively make things immutable. So it's a, b, and e. And the trick here is to make sure you understand the difference between reassignability and immutability. Okay, so we have a fill in the blank challenge here. So we create a string.

[00:06:00]
We create a new variable called val, and do something with it. And there's a very obvious answer here, like, we do not set it equal to the answer, but it does something that has to do with STR. And we can see the result of the console lock. So it's str.split.

[00:06:27]
I see one answer in chat that has an array and then ...str. I'm not sure whether that works because that only works with iterable types, and I am not sure that strings can be spread that way to get their character list. That's the kind of thing that I'd have to actually check.

[00:06:51]
But this for sure will work. All right, next question. So building on the last question, right? Where we have the string and we turn it into something else that sort of expanded representation of this string. So we have val equals and then fill in the blank. What is the blank in this case?

[00:07:11]
And you can see what we end up with is, I would call this, I mean, some people would call it an associative array, where it's kind of like using numbers to access the properties. But it's not really an ordered collection, right? So there's no sense of like, I mean, happens to be printed out this way, but you could have the key for 0 be like way down here after the number 4.

[00:07:40]
In this case, you kind of have to do what we did in the last example combined with spreading this out into an object. So you need something that has effectively key value pairs in some sense and arrays do have that, right? Your keys are 0,1 and 2, those are positions.

[00:08:03]
So if you spread this out into an object, you're going to be able to get an associative array like this. By the way, I'm asking these questions for a reason. It may seem like JavaScript trivia a little bit here. We're going to be dealing with spread and rest all day when it comes to types because of recent advancements in TypeScript that let us do that.

[00:08:26]
Much more flexibly in the 4.x series of TypeScript releases compared to before. Looks like some people were able to do dot, dot, dot, and then the string spread out into an object directly in their console. That's interesting. This will also work. So any of these I would consider to be right answers