Miscellaneous

[00:00:00]
>> Lydia: And this is kind of just the last section. I didn't know how to categorize some of these questions, so this is just miscellaneous JavaScript stuff. Which method will return the value "Hello World" and we have a map, and we set a key in that map equal to the myFfunc function "Hello World",
>> Lydia: On the right-hand side here is B, it is myMap.get function.

[00:00:25]
Because a map, the key is just to get a reference to that object, so whenever we set it, we're setting it equal to that reference to that object. So because it is strongly referenced, I'm just going to do this. So we can do myMap.get myFunc, but of course we can also say const anotherVariable = myFunc.

[00:00:49]
So what we're saying here is we're just setting the reference equal. So of course here, we can also just do, myMap.get(anotherVariable). And then we'll also just get it, cuz it's about the reference, right? But we cannot just get it with a new function, even if it's the same function, cuz that would just be a new reference and that's not equal to this key.

[00:01:11]
We just need to get this reference.
>> Lydia: Cool.
>> Lydia: Keep doing this, anyway, what does the person object look like after executing the script? So we have a person,
>> Lydia: Yeah, we have a person then we have Object.freeze(person), a personProxy, resetting it, and then we change the personProxy.name = "Sarah".

[00:01:39]
PersonProxy.address.city = "Paris", and then we're logging the person.
>> Lydia: The right answer here is C, it is Jane and the address is Paris. So what we have here is we have a regular person object, and then we're freezing that person object. But when we do object.freeze, we're only freezing the direct properties, or it's a shallow freeze, right?

[00:02:08]
So we're freezing name.Jane, so we cannot modify or add any values to person, but any references to other objects, so like city Amsterdam,
>> Lydia: Will get modified.
>> Lydia: One second, let me just check with something real quick.
>> Lydia: I'm wondering if Jane Perez, yeah, okay, never mind. So when we're creating the new Proxy with reflect, it's essentially pointing it to a new object and not to the frozen object that we just used.

[00:02:46]
So whenever we set person proxy name to Sarah and we can use proxies to interact with an object through a proxy. So whenever we modify a value, whenever we wanna get a value, it goes through the proxy, in this case, we just have set. So whenever we modify a value, it goes through that proxy.

[00:03:02]
So we're setting name to Sarah, that's fine. We're using a new object here, because we froze it, and it is shallow, we cannot change the name, so I was right anyway. And because we're using the proxy, we're not spreading person. We are using the same frozen object or we're pointing to the same frozen object.

[00:03:20]
Even though we're saying name is Sarah, it won't change anything, cuz we just froze that shallow property, so it'll keep pointing to Jane. But because the deeper object, so address city, it doesn't get frozen, cuz it's just a shallow freeze. So whenever we change that to Paris, it's fine.

[00:03:35]
Now, something that's also important to remember, so if we used use strict here, it would have thrown that error. So let's see if we have anything, that's fine here. If we use, use strict, This is actually different, but anyway, so if you're trying to change a property on a frozen object and you're using use strict, so I'm just gonna use strict.

[00:04:01]
Yeah, so when we're using use strict, it will actually say, cannot add property B, because the object is not extensible. But if we omit the use strict or we use it outside of a module, it won't add anything, but it also won't show you any errors. So you may not be aware that it was frozen, that it was not modifiable.

[00:04:19]
We actually probably see that here, cuz what will the output be if this code is executed in a module? So we are freezing named John, we're changing it to Jane, so what will the name? Or what will get logged if we log name?
>> Lydia: Yeah, so the answer is TypeError, because it's executed in a module and so it's implicitly using use strict, so we're trying to modify a frozen object, it won't work, TypeError.

[00:04:45]
If it wasn't in a module, it would have been fine. Question 41, we're almost there, which method should we use so it logs name Lydia and age 25? Is it entries, values, fromEntries, forEach, or keys?
>> Lydia: And the right answer here is fromEntries. Let's see if I have that open in VS code, just to show you what the other methods do.

[00:05:09]
So we have missed, I forgot which, 41, actually, let's open this in integrated terminal. No index.js, yeah, so entries is like a double array. So first we have the index, and then name Lydia, that's not what we wanted. We wanted this fromEntries, which is the right one, and the forEach won't even work, I had to comment it out, because we cannot use forEach on an object.

[00:05:40]
So that's just completely wrong, otherwise, I'll throw an error. Yeah, here we have the keys, yeah, keys in the an object that we create with a map that we want it fromEntries. All right, question 42, what gets logged? So we have an array at 1, 2, 3, 4, 5.

[00:05:58]
We splice it, we concatenate 6, then we slice it, 1, 0, and then we delete array or the first element in the array. So what is the length of the array after,
>> Lydia: Invoking all these methods on the arrays, 1, 2, 3, 4, 5, 6.
>> Lydia: All right, the right answer here is 2.

[00:06:19]
So what happens is we first array.splice, so that modifies the existing array. So in that case after invoking splice, the array is now 1 and 2, that we concatenate 6, but that doesn't modify the original array. And always remember splice the P for permanent, it permanently changes the array, but for concat, it doesn't do anything.

[00:06:40]
I mean, it creates like a new array with that concatenated to it, but array doesn't get modified. Then we have slice, the same thing, it creates a new array based on how we slice it, but it doesn't modify the original array, so it's still length two. And then we delete the first element in the array.

[00:06:59]
And we can use it, it's fine, it'll return true, but it'll leave an empty slot, because doing that, it won't actually change the length of the array. If we wanna remove an element from the array, we have to use splice, or filter, stuff like that, but it'll create an empty slot.

[00:07:15]
And arrays with a lot of empty slots are also called sparse arrays, that's why the length is still 2, because it just has that empty slot, cuz we use delete instead of splice to get rid of that first element. So, yeah, don't remove array elements with the delete keyword, if you don't want empty slots.

[00:07:39]
>> Lydia: All right, question 43, what gets logged? We have a config, we have languages, and then we'll use a set language that returns this.language.push(lang) that we set out with. So we wanna console.log(config.language), what gets returned? Is it an array with "Dutch"? Is it an empty array? Is it 0, undefined, or ReferenceError?

[00:08:02]
>> Lydia: The right answer is D it's undefined and that is because of the set keyword that we're using here. And we can use a like sets or get, setters or getters to add additional functionality if we're like adding a property or like changing it. So whenever we log this, you can see that we just have languages and then set is like grayed out.

[00:08:29]
But we can use this to be like that languages is or that language is Dutch. So this essentially say like okay the language will be passed here is what we are setting it to. And that's fine, but we don't have a getter. So whenever we do config.language and we don't do anything with it, it is undefined.

[00:08:45]
And this would be different if we had, if we change this to get. Sorry, I know the indentation is really bad here. Let me just fix it a bit.
>> Lydia: Sorry, get language. Well, anyway, if we change the set to get, then it wouldn't have been undefined. But we're only using it as set, so we can only use the language function here to change the property that we just did with Dutch.

[00:09:11]
What I'm trying to go back here. This is setting it, this is getting it. And we didn't have a getter, we had a setter so yeah. I mean, you don't see this too often anymore, like using getters and setters in JavaScript.
>> Speaker 2: Shouldn't it be this string, Dutch question 42.

[00:09:25]
>> Lydia: No, because this is only a setter and here we're logging config.language. So this is like we're trying to access the property and not modify it by setting it to something else. So we can, I know it's for like gets, get language and then like you get language without like invoking it and then we can just say like return this languages off first or whatever.

[00:09:49]
Or like find languages Dutch, whatever. This will work like this will be fine but then this one wouldn't work. But then we can get up but that's a getter not setter. I think what he means, yeah, cuz like if we didn't have this sets and then we have config.language is Dutch and then we load config.language that would have worked.

[00:10:07]
But because we have the setter here with the same name of that property it will invoke like the setter function. And not just create a new property called language that we set equal to Dutch. So yeah, It's only if you have a setter with the same name as that property that you're trying to access.

[00:10:23]
Question 44, what gets logged? So we have an object with team and it has a members property with an array of a couple members. And we map over them and then we invoke the getInfo function on each of the member. And we have info, nullish coalescing with city and otherwise it logs unknown.

[00:10:41]
So in this case, what gets logged? A, B, C, D, or E.
>> Lydia: All right, so the right answer here is answer D, Boston, unknown, Boston, unknown. So we have the nullish coalescing operator, the double question mark, and this one returns its right-hand operand when the left-hand operand is null or undefined.

[00:11:04]
Logical AND, which returns the value of the first operand if its falsy and OR if the first operand of its truthy. Here we're using the nullish coalescing. So here we're essentially saying undefined or Boston because Info.street is undefined or Boston. So this returns the right-hand operand if it's undefined because we're using a nullish coalesce or coalescing.

[00:11:24]
So this is Boston or undefined, so it'll return the first truthy value, which is Boston. The next one, we're seeing an empty string cuz string is empty or Boston. Well, in that case, it's just the empty string because the right hand value isn't null or undefined so it'll just return the first operand, the left hand operand.

[00:11:43]
And then we have the logical OR and this will return the first truthy value, but an empty string is a falsy value so this returns unknown. Next one, we have null or Boston. Well the first one is null but this returns Boston and then we have Boston or unknown while Boston is truthy so it will return Boston.

[00:12:07]
And this one is all null so this will be undefined or undefined. Well, that's both undefined. Undefined does falsy or unknown so this returns unknown. So we have Boston, unknown, Boston, unknown
>> Lydia: All right, question 45. Match the code to the correct error it would throw. So we have a new array -1, 25.toString, reduce, const a and then b equals c and a so undefined c is 12 or const a, b is 1.

[00:12:35]
And then we're console logging a with another nullish coalescing 1 or b. And I have a type or a ReferenceError, TypeError, SyntaxError, RangeError or no error gets thrown.
>> Lydia: All right, so the right answer here is that new array -1 is a RangeError because we're creating a new array and the argument that we pass is the length of the array but we cannot have a negative length.

[00:12:59]
So this would throw a RangeError. Then we have 25.toString SyntaxError because we're using a single dot and we just saw that we have to use a double dot if we're using two-string on a number. Reduce throws a TypeError because we're trying to add the accumulator and the current value but we're not initializing it with the initial value.

[00:13:18]
So maybe I can just, question 45, you can also see that VScode will tell you like, this isn't great. But if we wanted this to work, we should have added the initial value with the empty array. Cuz otherwise we're trying to add stuff that doesn't exist. Four is a ReferenceError because we're setting b equal to c but what is c?

[00:13:45]
We haven't defined c, c doesn't exist. So that throws the ReferenceError. And five is perfectly fine. We have you know, const a as an object and then we're logging with the nullish coalescing a if it exists and otherwise 1 or b but like we were not using that b.

[00:14:01]
46, match the date methods with the correct values when invoked on new Date (). So we have toDateString, toISOString, tolocaleDateString, toUTCString or just toString. To be honest, every time I use dates in JavaScript, I always have to look it up because I always forget.
>> Lydia: All right, so for this one it is A, B, E, D.

[00:14:23]
So toDateString() converts the date portion of date object into a readable string but ignores the time part. Then we have toISOString() that just uses that ISO format. The long one that you'll see quite often. Then we have toLocaleDateString() converts that date into a string using the look how specific formatting.

[00:14:46]
UTC is just UTC time zone, so the British time zone, without daylight savings, and then toString() is just into a string, typically default format, yeah. Yeah, you just gotta try it out until you get what you want or use the international API to work with times. All right, almost there.

[00:15:09]
Question 47, what gets logged? So we have A, B, C, D and we have some default parameters here as well. A is null, B is undefined, C is False and D is 0. Is it null, undefined, false, 0? Null, default, false, 0? Only default or default, default, false, 0?

[00:15:30]
>> Lydia: All right, so the right answer is null, default, false, 0. So default parameters are used if null value or undefined is passed but the first one where you're passing null. So it is a value it's not null value and it's not undefined so we're using null. And for b, it is undefined so in that case it uses default.

[00:15:46]
But for everything else, if we have false and 0 it will just use false and 0. So it's only if null value or undefined.
>> Lydia: Cool. Next question, symbols, what gets logged? We have symbolOne, Two, and Three. Then we're just strictly comparing them, so which ones are strictly equal and which ones aren't.

[00:16:08]
Note that for symbolTwo we're not using symbol.for, we're creating a new symbol.
>> Lydia: All right, the right answer here is D, it's false, false, true, and false. So something to remember is that we're using symbol.for it checks if the symbol with that key already exists in the global symbol registry.

[00:16:31]
And if it does, then it just returns that existing symbol, and otherwise, it creates a new symbol. And that is different from just using symbol, cuz that always creates a new unique symbol. Also something to keep in mind is that a global registry works across modules. So even if we export symbol.for key, and we use that in another module, it will still reuse that same symbol.

[00:16:50]
It's like another thing in the JavaScript engine that just keeps all these symbols there. So yeah, when comparing them, symbol.for, equal symbol.for. That is true cuz it just reuses that existing symbol, but when it's using symbol without for, it creates a new one every time. So that's false.

[00:17:07]
And we can use symbols to make sure that, if we have multiple values in the same namespace that it doesn't clash, stuff like that, properties on objects.
>> Lydia: Yeah, when comparing one to two, well, that is false cuz we're creating a new symbol for symbolTwo. Same goes for the second one.

[00:17:30]
SymbolTwo is a new symbol. SymbolOne and symbolThree are the same, because we're using symbol.for. So symbolThree is just reusing that same symbol, cuz it was already in the global registry, and symbolThree equals the new symbol key is also false cuz that creates a new, unique symbol. Yeah, question 49, what gets logged?

[00:17:47]
So we have to compare users function that receives both user1 and user2. And we have a default argument that goes back for user2. And then we have a user object, and then we're comparing users three times. So what gets logged?
>> Lydia: The right answer here is B, it is false, true, false.

[00:18:10]
So what we have here for the first one is we have compareUsers that points to the function objects. And we have the user object, that's a new object in memory. And then the compare user's lexical environment has both the user1 and user2 arguments that we passed. And user1 points the error should go to the user object.

[00:18:30]
But user2, cuz we're spreading it, we're creating a new object. So this is new object in memory. So when we compare them strictly, it is false. They both are references to different points of memory.
>> Lydia: The next one is true. Again, the user1 arrow should go to the user object because it defaults back to user and we didn't pass a value for user2.

[00:18:54]
So the default parameter was user, so that both point to the same object in memory. So when comparing them equally, it is true cuz they have the same reference.
>> Lydia: And then, comparing users again. So here, we're just creating two entirely new objects. We're not even using that user object that we created in that declarative environment record.

[00:19:15]
So these are, again, two separate objects in memory. So when comparing them it's false, cuz they both have different references to different spaces in memory.
>> Lydia: Cool, very last question. We have a tagged literal, so what gets logged, when we invoked the thankYouTag? Well, this is the last question and the greeting.

[00:19:43]
>> Lydia: All right, the right answer is A. So when using tagged template literals like this, the very first argument that we get is an array of all the strings without the expressions. So in this example, we have an array of this is a less question, then there's an expression that doesn't get added to that first parameter, and then there's another part of the array.

[00:20:05]
And then all the other parameters or arguments that the function receives are just the expression, so in this case greeting, but also just a string. Yeah, so in this case, for this question, when we have are greeting like this, and this is a last question, the very first one, strings, is this is the last question.

[00:20:23]
And then there's another empty string just because we have an expression as the last part of the tagged template. But then greeting is the value of the first expression, and that is, thank you for coming to my workshop. So that is just equal to that string non-numerate.