Deconstructing and building array from scratch in JavaScript (Data Structures and Algorithms)

hello world and happy hacking this is mark from devmentor live and today we're going to be doing something fun have you ever wondered how arrays are actually structured inside of javascript and have you ever thought about building your own array now it's not going to be as performant as say an array that is natively implemented in javascript because that code is written in c and it's going to be very very fast however you might run into uh in an interview where they say could you build an array from scratch in javascript and after you watch this live stream you'll be able to say sure that's not hard and then you should probably tell them we probably shouldn't be writing our own arrays in javascript because it will definitely be slower than the ones that are built in but yeah i can write it and the way that we're going to be implementing this is um it's going to be done of course in a functional style because i'm doing it um and along with that um what can i say about it we're going to uncover the the underlying uh data structure inside of arrays in javascript which is actually a javascript object and each of the items in the array are actually just a key that has a string with the index but we're not going to be using the built-in arrays at all and uh let's see how many people we got on here looks like we got four people so remember to hit that like button if you're watching and uh consider subscribing my channel and say hello in chat hello joel how you doing um we're gonna give it a couple of minutes to let some people join as soon as that magic number hits eight then uh i'll actually start writing some code and we're gonna take this step by step so it'll be very easy to follow so again if you're watching uh say hello and chat and click on that like button so that i know that you're there and we're gonna be building this in a prototype prototype style so this is the native way of building new types in javascript javascript didn't have classes until very recently and it was only because they were essentially bullied and pressured by microsoft to add classes um you don't need classes to write javascript and honestly i think classes are pretty bloated and are a little bit more confusing because of the lexical context of the keyword this and some other things and just the fact that classes are not really meant to be javascript javascript is not an object-oriented programming language javascript is a prototypical programming language it's also a multi-purpose programming language which means you can write object-oriented code you can write functional programming code you can write imperative code um you can write declarative code so looks like we've hit our number hello everybody hello mir007 hello bush bush 26 thank you guys for joining and um to kick this off the way let me switch back over to obs to make sure that i'm actually broadcasting by the way um let me know how the audio sounds because i was having some audio echoes the other day and i want to make sure that this time the audio is nice and clear and again remember if you're watching hit that like button and if you uh know of any other javascript programmers that might be interested in this sort of thing uh go ahead and you know shout it out on on uh twitter or facebook or whatever platform you use and let's get started so to create a brand new type in javascript it's pretty easy you gotta remember that everything in javascript is just a function which is one of the reasons why it applies itself to functional programming so well so if we were going to be creating a brand new array what would be actually doing is creating a function called array and we'd be giving it say a length because in javascript well almost any programming language when you're creating an array you have the option of initializing it to a certain size so we're going to say that there's a property on our javascript object array which is called length so therefore we do this.length and we're just going to set it to that value this is probably not going to be the final code but it's something to get started with the reason that we have the context of this which is a keyword that confuses a lot of people whenever we're using this inside of this function we're referring to the the function itself because we're going to be instantiating this function with the new keyword like this then the keyword is actually the instance of that object so if we have one here and we have another one here and each of these are initialized to say const a1 and const a2 the keyword this is saying that when we're talking about a1 the keyword is going to be this instance and when we're talking about a2 the keyword this is going to be this instance right so in order to actually like put something on our array we need to implement a function called push and that brings up well if you don't have classes how do you add methods and functions to javascript objects and the answer is with a function so we're going to do array dot prototype which is going to give us access to in other languages it would be considered like the eigen class or the super class and then we can just say that we're going to add a function called push and that's just going to be set to a function and we'll make it an anonymous function because the the function name is actually maintained here um so this actually this style is very similar to where you have something like const f equals function or you can even do an arrow function like so where basically we're saying here's a variable in this case it's a method that's on the prototype of array and it's going to be equal to this function so what is what is push take well push takes an item right and if we're trying to push an item onto our array we also have to place to store it so let's create something called data and we're going to use the javascript object here because internally that's how it is implemented in javascript anyway so it makes sense to do it that way um so what are we going to do we're going to be pushing this onto that object and each value in our array is going to have a key because it's a javascript object so we have to figure out a way to come up with a key for that hash map um and the way to do that or hash table whatever if you want to get pedantic it's not really a hashmap it's more of a hash table the difference between the two by the way is hash maps um the key is actually a hashed function that will give you a value that can be encrypted and decrypted more or less and because of the hashing function it's quick to go to the specific key in your data structure but javascript does all that for us internally so the first thing is we have to figure out how we can get a key and since the keys are just going to be a integer that's formatted as a string the first thing in your array is going to have a key of zero in fact if you've been in your browser and you try to look at your dev tools and you look at an array you'll notice that it always has 0 1 2 3 in front of the value and that's because internally it is an object so we have to figure out a way to come up with that key so we know that we're going to create a key how do we get the value we know that the key is going to be based on the number of items in our array so we know that we're going to do something like object dot keys and we're going to pass in this dot data now remember the keyword this here is the instance of our class or the instance of our prototype hello eric how you doing thanks for joining us again i love it when i get repeat viewers so why are we getting the keys well remember that this array is actually under the table an object and objects have keys and values so we know that we want to get those those keys but we also want to get the uh the the greatest key right so if we have five things in our array we're gonna have a key of 0 key of 1 a key of 2 a key of 3 and a key of 4. our next item would have a key of 5. so how do we get that well we can use math.max which does not take an array and object.keys is returning us an array math.mat math math.max takes arguments and it's essentially however many you need so what we can do is we can just spread out our array that we get back with object.keys onto our math.max and that's going to give us the the the highest key and then we just want to add a one to it but since our key also has to be a string we're going to put a parenthesis around the whole thing and then do a tostring which will now return us a string so how can we prove this well we can do a console.log or dir or debug there's actually quite a few console methods and we can just print out the key okay so how do you load that file into a javascript interpreter the easiest way is just to type node and then we can just say um we want to require our array dot js so it'll load that file inside of javascript and this has replaced the native array because we use the name array so we can say something like const a equals new array and let's just give it a a zero value so essentially we've got an array with no items and a length of zero so if we did now a dot push and we pushed on a new item we get back a one and if we push a two you get back a two and so on and so forth so what this is doing is this is returning us a key that is always greater than the last one now there's a bug here we should have gotten the zero as our first key but instead because we got this plus one on it it doesn't actually start at zero um so to show you how the the bug is if we do this.data which is of course a javascript object and we can spread out that javascript object onto a new javascript object currently there's nothing on it so i guess that's overkill so let's just create a key called zero and let's just give that a value of a string called item we can do two control c's to get out of node we can go back into node we can load our file our array is now loaded and then of course we can create a new array and then we can do a dot push so now we got a zero and the reason that we got a zero is because we forced this zero on there but now we run into a problem if we do this by hand if we do um let's actually exit out let's go back in let's do a regular array that comes from javascript let's say something like const a equals new array which of course you don't have to do in javascript you can just do const a equals square brackets same thing gives you a new instance of array and if we were to um let's actually do this let's say const obj equals a new object the key is zero and the value is the string item so under the table this is essentially what's happening with our array anyway so now let's take a look at what our code returns so if we do obj sorry object dot keys and we pass in obj we'll get back our keys and you can see there's one key in here and it's a string it's a zero um so then if we do a math.max on that i guess i could do ctrl a and then ctrl e to go to the end of the line if we do that we can see that the max value is zero okay so what if we did uh actually i should probably stop using const inside of node because then i can't redefine the value um let's do let's just skip that you don't actually have to say cons to var or let inside of node uh inside of the reple so let's say that we've got two items let's say that zero is item one and then we've got a key of one and this is going to be item two and then we run that through the same thing we can see that we have math.max and we've got a one so what we would want is we would want the next value that we get back to be a tube so we have 0 1 and 2. back to the bug so if we come back to here and we reinitialize this to nothing and we run this we get a negative infinity we don't get a zero and this is that bug i was talking about where it started at one when it really should have started at at uh zero so to fix this bug let's get rid of this line because we don't need it let's say that this is uh const last key camel case it and so we got constant last key we're gonna get the last key so what we should do here is we should do something like um i would probably do a ternary i would say um if it's less than zero because you see we get this negative infinity so if we want to check that we can just do this and we can see that negative infinity is indeed less than zero so if the last key is less than zero we want it to be a zero otherwise we want it to be last key plus one all right so let's exit back out to control c's go back in let's require our file i guess it probably would have been almost faster to type that and let's do skip the cons let's just say a equals new array give it a zero length we got this new array thing and we call a dot push and we're gonna push on item one still got a bug because it's one and it's supposed to be zero so why is that well of course the debugger is our friend in javascript so we're going to say console.log last key and let's see if we do indeed get the infinity that i think we're going to get or negative infinity i should say so we'll go back in require the file create our new array push an item on now here's something interesting when we do that we did not get two console logs we only got one console log maybe it's because we're trying to redefine the built-in array so let's just call this uh capital a i'm worried that if we actually use the word array it's going to collide with what's already in there so this time we're just going to do a new capital a but of course we got to require our file first otherwise it's not defined huh okay so here's the problem there's our array.js that the same file that we're looking at yes we've got two console.logs and it's a dot prototype and function a so let's require the file a it's not defined that's rather disturbing because we had a function a equals something and now we can do it so it's almost like the file is not being loaded which would make sense we only got one console.log even though i added a second one in there okay can't find an array because we have to do a dot forward slash to say it's the current directory a is not defined all right fine i'll just copy and paste that code directly in um so if we do a dot push and we add item one a dot push is not a function well it's clearly a function all right fine what if we call this new array or how about array2 very very creative names let's try this again let's require our file do we have an array 2 array 2 is not defined even though we required the file i shouldn't have to export this but i will uh inside if you're not using babel you got to do module.exports so we'll do module.exports array 2. and let's require a file again array 2 is not defined this is really weird there we go array 2 ray 2 is not defined there's something really weird going on with my node another way to test this is just to go to firefox and open up a browser where's firefox there's firefox so we don't even have to load a page we just go to inspect element go to our console paste our code in we should now have an array too and we do so i don't know what was going on with uh node but instead of using node we'll just use our our console here um so we've got our array to let's do const a let's do a var var a equals new array 2 go and give it a 0 a dot push give it item one there we go now you can see that we get a negative infinity which is this console log and then we get a zero which is this console log so the bug has been fixed we can test that by putting on another one whoops that is strange that should have been a zero here and a one here all right let's do this let's put in another console.log here copy and paste this code back into here get rid of that module exports because we don't need it and the browser is not going to understand that anyway all right so we got a new array we got a.push item one a dot push item two there's our problem it's not actually putting it onto our ah i haven't actually added it to our array yet that's why so let's get rid of these logs now that i fixed that problem so now we've got the key to add it to our our object we could do this which is not a functional programming way of doing it but it works because we're modifying the actual thing now this is the fastest way to do it as far as like code speed is like oh notation this is the fastest way to do it however since i'm doing this as a functional programming style i'm going to show you how i would actually write this functional programming in javascript and pretty much everything else is inherently slower generally than than object-oriented programming or state twiddling um and that's because you're modifying objects directly you're not copying objects in object-oriented programming but that means that your values are constantly changing which makes it very difficult to debug the state of your application because if your state is constantly changing essentially you're adding time as another input in your program because you have to not just say what is this value but you have to say what is this value at this specific millisecond in time and then you get race conditions and other things that make that sort of thing very difficult i've had instances where i was working on a piece of software for a company and the software ran fine for like three days and then it would hit a bug and it was always like three days later that it hit the bug so imagine that you open up a debugging session and you have to wait three days to find the bug and if you well you've done debugging you know that you usually don't find the bug on your first attempt so it literally took like two months to find this stupid bug and crush the bug which is one of the things that turned me on to learning lisp and functional programming so back to what we're doing we're going to actually do this in a functional programming way and how do you do that well we're going to say that we're going to take this data we are going to modify it in the sense that we're going to replace the whole thing we're not just going to replace one key and how do we do that we have a new javascript object and we're just going to say take the old values and you'll see this a lot in react because of the nature of the way that react is built you'll also see this pattern a lot in redux again because redux is essentially a state management library for react then what do you do well then you add in a new key and if you want to add a key in javascript that is a variable you put it in square brackets like this and then what do you do well you say i want to add this item onto it okay so let's just copy that paste it here a equals new array two zero a dot push item one let's get these uh brackets in the right place so what's on a well we got one item on a right let's do a dot push item two what's on a well we can take a look let's open this up so we got this data item and now you can see that we've got a key of zero which is item one or i yeah item one and a key of one which is item two so this is exactly the way that arrays work in javascript natively and we just re-implemented it so push is not the only thing that you have on javascript there's other methods in fact let's go over to chat let's ask you guys what methods belong to array in javascript give me give me a couple and we'll start implementing them as you guys give them to me let's see what you come up with exactly pop which takes us to our next data structure really push and pop are implemented on array in javascript but they actually are from a data structure called a stack the ideas and programming languages are implemented like this when you when you call a function it puts it on the stack you call another function that puts it on the stack you call another function and puts it on the stack you put too many functions on the stack and you get stack overflow which is where the name of that comes from um a stack means that you put something on and you're just literally stacking things on top well what happens when one of those functions gets called is pop gets called which will pull it off of the stack and run that function right so if you take i like i don't think you guys actually see this screen i like looking at documentation so if you look at the documentation for the arrayprototype.pop you'll see that it removes the last element on and what that means is that it's not only a stack but it's a uh first in last out stack right um which means that if you pop something it's coming off the top of the stack okay so we got index of and shift and unshift and those are all things that we are going to implement here so array 2 dot prototype dot pop this is also a function and yes i'm going to write es5 style code here i'm not going to use an arrow function even though i could there's no reason why i shouldn't use it but there's also no reason why i should use it and if somebody can give me an amazing explanation of why i have to use arrow functions i will maybe use them more often but for me an arrow function is an anonymous function and anonymous functions work best when you're passing a function to another function which is why i use arrow functions in things like map and filter and reduce and sum and every and all of those values we're passing you're passing a function into another function you don't care about the name of the function anonymous functions make things hard to debug because in your stack trace it'll say anonymous instead of the actual function name all right so how do you pop something off the stack well first off this one doesn't have any arguments you just call pop so what are we going to be doing here well we're going to be returning the last item on our array well let's say the last item on our data structure because we're building the array so you're going to return the last item on the data structure and you're going to remove that item on the data structure so it's pretty easy to do that in a imperative way where you're actually changing the data structure in place but how do you do that in a functional programming way and the answer is you're going to do it like this first you want to know what is the key that we're talking about right we already know how to get the last key it's right here so we could do that but now we're essentially repeating ourself or we're uh we're we're writing the same code twice and i don't like to do that so what if we did array array2 dot prototype dot last key is a new function now what we can do is we can just return that last key all right so how do we use it well now it's just on this object so we can just say this dot last key make sure to put the parentheses on it because it's no longer a property it is now a uh it's now a method or a function by the way the difference between a function and a method is this functions don't change the outside world so if you're inside of a function that function is not going to change things that are outside of itself if you pass something into it it's not going to change the thing that you passed in it's going to take some data in and it's going to give some data out but it's not going to change the state of your program okay a method can either have side effects meaning it's going to affect something outside of the function or it means that it's going to have a side effect because the thing that you pass into it is passed in by ref so in most programming languages you can pass things in either by reference or by value by reference means you're giving a pointer to the actual thing by value means you're basically making a copy and you're just passing the copy and so if you change the copy it doesn't change the original thing methods are being pat in javascript at least means you're passing something in by reference which means that if you edit that thing you're changing the outside uh state of the of the the program the function is now a method because it's changing the state of your program so we're going to write this in a functional programming way which means that it's a function not a method so how do we do that well first off we know that we're going to be wanting to return the value at the last key so we can do this.data which is our javascript object of course and we can just pass in the last key which is going to give us the last item in our our value but we also need to pop it off of the stack we need to remove it so let's say last item this is the last item this is the thing that we're going to be popping off so the first thing we want to do is we want to say this.data and we want to essentially modify that in a functional programming sense where instead of changing the thing in place we're going to basically create a copy and then we're going to change the copy so we know that we need a structure that's sort of like this we're going to be having a new javascript object we're going to copy the old javascript object items into the new javascript object item and then we're going to be doing something with this last key well what is it that we're going to be doing with the last key well what we're actually going to be doing is we're going to be slicing off that last thing so how can we do that well we could do object dot which is going to return us an array of all the keys for that and then we could do something like dot filter and we can say okay well i want to return all of the keys and their values except for the last thing but the thing is here is we're now using we're using an array function filter and we're trying to create an array from scratch so by calling those methods that are already on array is cheating that's not how it should be done so how can we do this if we're not going to call filter there's also slice and splice and all these other things right um and i would say that this is where you have to reach for a for loop right like in functional programming we don't do a lot of for loops because that's an imperative operation you're mixing the method of what you're doing which is a loop with the the value that you want returned you're putting those two things together which is why we tend to use like map and filter and stuff but in this case we have to pretend that map and filter and all those other things don't even exist so how would we go about doing this well we know we'd have an index of course because it's a for loop and we know that we're going to be going to some element which is going to be essentially this dot data length and we're going to have some stopping place so what's the stopping place well the the stopping place is the while i is less than the data.length and then we're going to increment our i and this is the part where we're doing a pair of code we're changing uh the thing in place and we're mixing the concern of having a loop with the thing that we want to do which is the work or the algorithm so what do we want here well we want a new object why do we want a new object because we're going to be pushing all the old values on to the new object except for the one that we want to remove okay so what does that look like well it looks like this we're going to have our new object and we're going to be taking all of the values on the old one and putting it on there unless unless that thing uh already uh unless it's the one that we want to remove right so we're going to take our new object and we're going to be setting it to our new object which is going to take all the values off of this although all the values off of this and putting them onto it's kind of hard to say take the new object put all the things on the new object because you're not sure do i mean new object this or a new object this so let's just say that this is a new obj and this is the new object we're going to be putting all those values on there plus we're going to be putting on the one that we're on unless of course it's the one that we're trying to remove so we got our new object we're going to get all those values and then all we have to do is we have to say um if we look at this dot data and we're looking at it by key and we want to get the key well we already know that the key is a number so we can just call dot to string on i which is gonna give us that value um just not data what's why is it saying that we need a colon we don't need a colon here and we're going to make sure that we only do that if it's the value that we're actually looking for so const new item equals this and then if the new item is not the same as the last item we're going to be putting it onto the new thing and then we're going to be returning the last item so let's walk through this we're going to be getting the last item which we can get from just getting the last key and then passing it to our data structure which is an object that's going to get us back the last item we're going to create a new obj which is just another object that we're going to be modifying so we're not modifying the original then we're going to have a for loop and we're going to be looping over all of the items in that data structure we're going to be grabbing the new item from each one based on its key in the data structure which has already been incremented because we got i plus plus here then if that new item is not the same as the last item we are going to modify the copy new object to be a new object that has all the values that were previously in new object plus the new item except that what this is going to do is it's not going to ever add the last item back onto it and then we're just going to return that last item so how do we test this out well let's go back to our browser let's clear everything in our console let's paste that in let's say a equals new array and give it a zero value we still haven't fixed the length but that's okay and then we're gonna do a dot push and we are going to push on something let's just call it item one and then let's do a dot push item two and a dot push item three and let's take a look at what's inside of a so a is got a zero a one and a two and a one and a two and a three so that seems to be working and what if we do oh shoot you know what we're not using we're not using my array we're using the regular array there we go a dot push push item two push item three so what's inside of a so a is an object it has some data it has the zero the one and the two so you can see that these things look exactly the same the only difference is it's inside of this thing called data right and this is because in javascript you can't overload operators so we can't redefine square brackets we can't redefine the plus symbol we can't redefine you know colons or whatever we can only define uh our own things we can't redefine the native built-in stuff which is why we've got this extra key here essentially yeah thanks auntie hero um i'm gonna be hitting 10k probably this month or i would say before 2021 based on the current trajectory which seems to be picking up um people seem to like this long form uh content where instead of trying to give you something really brief i actually expand more on it and talk about it in detail all right so we got our data structure we're adding this stuff on let's test our pop so we've got our array and if we call pop on it we get back item three why did we get back item three well we got back item three because it was the last thing on our array what about if we look at our array now what's on it ah something didn't work because we still have item one item two and item three on it and i didn't want that so my guess is when we're comparing these two values we're comparing them by reference and technically they are two different things in memory so what we should be doing is comparing them by their value and what i mean by that if we do a console dialogue of course that's how you debug javascript we put this on here and then we do our operations again where we say a equals new array 2. and we say we're going to do a dot push item 1 get my parentheses in the right place 2 and 3 and then a dot pop why is it doing this again maybe our loop is not working as expected ah look at that i never initialized i alright let's go back to the original code because i think it's going to work a dot pop look at a what's inside of a okay so now that we've done that let's do a equals new array two a dot push item one two three a dot pop take a look at a.data nope still got the bug so i think it is the fact that um well our loop wasn't running but also uh oh you know what it is i never did the final piece this dot data equals our new object there we go so this is no longer a pure function because it's modifying uh well neither one of these are peer functions they're not just data and data out they're actually changing our data structure let me clear the console here paste our code back in a equals new array two a.push item one a dot push item two a dot push item three ada pop a dot data oh look at that now we got nothing on our array so i guess let's go ahead and put our console.log in here and let's take a look at this comparison so what i like to do is i like to do one that's going to look at the comparison one that's going to show me what's actually in that new item so i'm going to give it a string label and then the value and then we'll do the same thing with the last item a equals new array array 2 and then let's say a dot push item 1 2 3 a dot pop we are not even getting into our loop i is zero while i is less than the data.length oh you know what all right let's take a look at that all right so we got undefined why would we get undefined there why would this dot data be undefined well it definitely has our value a.data.length ah look at that that should work but for some reason it is not working but what we could do is we could say object.keys dot length oh that's because of this it's uh it's basically wiping it out all right let's try this again clear console a equals new array 2. a dot push item one two a dot data a dot data.length undefined see that's weird because that is an object and if we did const let's say uh b equals a new object and it's gonna have a zero value which is say zero and a one one value which is a one we should now be able to say b dot length why can't we get length on objects all of a sudden that's very strange well we can do object.keys pass in our b value and then say dot length that works but that's kind of cheating because now we're using the array again okay so we can't do this dot data.length well we know what the last key is we could do the last key dot two and is there a two end on string i think we have to do number yeah we have to do number so if we do uh number and we pass in our zero value that will convert it to the actual number 2i is like a python or ruby function all right so to fix this we can just say number passing in our last key all right and that's how you walk through and debug something which is a good skill to be able to show an employer or a potential employer people somebody's trying to hire you so a equals a new array a dot push push an item on push another item on push another item on a dot pop gives us item three i did it again i didn't use my second array array two push on one two three and then pop okay so now we got new item one new item two that works okay so new object is a constant so we can't change it which is what it's saying here but we don't really need to ah we do because we're iterating over it so this is people ask me why do you always use constants um i mean the the word of it is variable which implies that it's going to change and the reason i always use constants as a functional programmer we don't want to modify state as much as possible when you do want to modify state it should be very clear that this is a special case in your modifying state so an example of this is your in your for loops the value will always be a let because each iteration you're modifying that value so i always use constants and then when i can't figure a way out to do something that is immutable that is the only time that i'll finally turn that into a let statement which means that i can guarantee 99 of all of my my variables are going to be constant and then when i find the one that's not constant where i have to do some debugging it's very clear which one it is because it has the let statement all right so a new array and let's make sure to use the the new version this time and let's push on these values so item one two three a dot pop bam bam bam and so if we do a dot data now we lost the first one we kept the second one if the new item is not the same as the last item then we're going to modify it by getting all the new objects and adding the new item why did it not give us the first one so we get a true we got a true ah look at that an off by one error all right let's try this again also to make things faster i'm gonna do a equals new array here that way i have to keep typing it a dot push item one to three adopt all right paid out data so it's strange it's keeping the uh is there a schedule when my live streams are happening um not really because i do uh mentorship sessions all week with students and i try to fit my oh that reminds me i think i'm late to a session why didn't i get a notification no i'm not late no there's no schedule because i have a busy schedule of students and their times are not set in stone they just book the times as they need them and then what i do is when i know i have a free free space um if it's an ad hoc thing like today by the way i need everybody to vote on a poll on what we're gonna do next time because while i don't have a schedule um i do normally schedule my live streams ahead of time i didn't today because i just had some free time and i wanted to do this exercise with you guys um but normally if you go to my channel you'll see when the next one is coming up and it's usually i give you like two days notice uh actually if you go to my twitter which i'm not logged into i want you guys to vote on uh the next live stream that we're going to do on the topic and let me give you a link to the poll all right so please go to that poll and vote on the thing that you would like to see me cover next on a live stream and i'm going to probably do that tomorrow and i'll schedule it today so you guys can see it early back to this um so the weird thing is is we get we get item two but item one disappears and item one shouldn't be disappearing all right so i guess console.log time let's see what i is and then let's see what well let's start there zero one two so the i is working correctly it's going from zero to one to two so let's see what we get when we do this item one item two item three so that seems to be iterating over our items just fine let's see what new item is and let's see what the last item is so new item is item one last item is item three new item is item two last item is item three new item is item three last item is item three so that part is working too okay so if those parts are working the only part that seems to not be working is this line right here so let's put a console.log here for the new object and let's do that all right so new item item one new item item two new item item two okay so it looks like our destructuring here is not actually working all right um i'll just modify the object in place then let's do that let's get rid of that and if we use splice we're cheating because that's going to be using an internal array so we do want to build up a new object but instead of doing it like this let's just go ahead and say that we're going to grab the key at zero or the key at i should say and we're going to set that to the value of new item and let's copy and paste that code over here new item is not defined new item is right here okay so a dot data there we go item one item two so it popped item three off of the stack and now our data object has this now we could make our array have a very or a function called length which i think is a lot better than the imperative version that's inside of javascript because it would just count the items but since we're trying to implement the actual array inside of javascript the way that it is uh we have to make length the property and right now we're not actually doing anything with that so let's actually get rid of this for now because we're not using it so how do we create a property on our object that has a length well let's initialize it with um this dot length is going to be equal to object.keys desktop data dot length so now we're gonna actually have a length it's gonna start off as a zero it's not gonna update so what we have to do is every time we modify our array we have to do some state twiddling we have to say you know we could do we can create a function on the array called length and then we can just return actually you know what last key is going to be the same as length always so we can just call last key and so what we can do is every time at the that we do one of these functions that are going to modify our state we can just call this.length equals last key so check this out put our value here a dot length that's not correct ah because we're counting from zero the first item is zero so let's do our length function and we're going to return this dot last key plus one just like that so now we're going to set the property of length to the return of the function of length every time we modify our data structure it's not like it's not a function ah you can't have a function and a property that has the same name so i guess we'll just turn that into len do this again all right so a dot length now shows us that we have two a dot data we do have indeed two objects inside of our array so this is the beginning of how you create an array using javascript i have to get to a mentorship session with one of my students but i'm going to post this code on github in fact so i don't forget let's just do that right now all right so let's go to uh github.com devmentor live create a new repository we're going to call this uh array from scratch in js looks like i accidentally made that private so let's set that to public it used to just be public until microsoft bought github and then everything started automatically being private which is kind of weird but okay maybe it's because i pay for my account so array from scratch now what i got to do is i got to open up my terminal here we're going to initialize the current directory as a git repository then we're going to add everything that is in there which is really just one file and we're going to do a git commit i have shortcuts um you can actually find them at github.com slash marktayes that's two l's uh slash dot files and inside of there you'll see all of my aliases and my aliases are uh so i don't have to type all this extra crap so for me git commit dash m is just gc added array push and pop and now i can just push that now when i refresh it the code is here so here's the code what happens if you push the same item with the same name twice nothing because the key of the object is not based off of the name it's not based off the value that's inside of the the uh the data structure it's based off the number of items that are in the data structure and inside of an array you can have as many duplicate items as you want if you want an array that has only unique items you don't want an array you want a set so there is our array implemented or at least the the first bit of it and you'll notice that i didn't use any of the internal array stuff to do it which means that uh basically i didn't cheat so i would suggest if you're looking for work as a javascript programmer you should do these katas where you actually just you try to implement something that is already implemented from scratch using the language itself not because you would ever use it in production data but because it'll give you a lot of insight about how the thing might be implemented and it'll make you work out the algorithm yourself which will make you a better programmer so i'm actually going to be starting a series where we do javascript interview questions this would i would consider a javascript interview question but we'll do other things like um uh well i actually want to create a mailing list for javascript problems or katas that you would encounter in a programming interview when i have that mailing list up i'll give you guys a link in one of my live streams and you can start signing up and essentially every day um i have to build up a library first but every day you'll get a new maybe not every day that's a lot of spam maybe like two or three times a week or i'll let you guys select how many times a week you want a new problem you get a new problem in your email and a day later you'll get the solution to the problem free in your email so that that gives you one day to like try to solve it yourself and then i would show you how i would do it and we'll also link the video if there's a video for the same problem so thank you for hanging out with me on this thursday uh november what is it 12th so far the world hasn't exploded and so everything is good and i will see you soon happy hacking you

Channel: devmentorlive

Views: 581

Keywords: react hooks, learn react hooks, react forms, react hooks tutorial, react tutorial for beginners, react usestate, react hooks useeffect, reactjs hooks, react hooks explained, react hooks project, react login form, reactjs login form, react hooks vs redux, usestate react, usereducer hook, useform react, react uselogin

Id: o3mNj2N5m2U

Length: 66min 7sec (3967 seconds)

Published: Thu Nov 12 2020