Objects and Arrays - pengmai/javascript-notes GitHub Wiki
For most of the history of JavaScript, there were only two data structures! Compare that to all of the data structures in Python or the enormous Collections library in Java. This has changed somewhat with the introduction of ES6, but the overwhelming majority of JS code I've experienced in the wild still exclusively uses the original two. The reason for this is that these two data structures are so versatile and convenient that they're sufficient to solve most of the real-world problems that you'll encounter.
The two data structures are:
- Arrays: basically the same as
listin Python. - Objects: somewhat like
dictcombined with classes in Python. In fact, JavaScript has classes, but classes in JavaScript are really just syntactic sugar around JS objects.
Aside: admittedly, if you wanted a more complex data structure like a binary tree in JavaScript, you'd either have to implement it yourself or download a third party library that implemented it for you. This can be a bit of a pain.
Objects
This is an excellent resource on learning about Objects in JS. It's quite long, but has a ton of good information.
You should read the following lessons:
- Objects
- It mentions the 8 datatypes in JavaScript:
number,bigint,string,boolean,null,undefined,object, andsymbol. We're currently discussingobject, and we've seen all of the others before with the exception ofbigintandsymbol. Don't worry too much about these last two. - This is where the
for...inloop that we talked about earlier gets explained. - The site also mentions an order of keys as you iterate over objects. While this is true, in general it's better to write your code without assuming that your object keys will follow a given order. Even experienced devs tend to forget the rules around ordering, so don't worry too much about memorizing them.
- It mentions the 8 datatypes in JavaScript:
- Object references and copying
- Garbage collection
- This is a more advanced topic and is entirely optional.
- Object methods, "this"
- The section "'this' is not bound" and onwards is somewhat more complex. The main takeaway should be that in JavaScript, the value of
thiscan be unpredictable. Don't spend too much time on this section; using TypeScript can help prevent many of the issues surroundingthis.
- The section "'this' is not bound" and onwards is somewhat more complex. The main takeaway should be that in JavaScript, the value of
After that, the following sectionals are all optional:
- Constructor, operator "new"
- This section is good to know, but the techniques are not super common when building web applications.
- Optional chaining '?.'
- This is really handy syntax, but not worth spending too much time on.
- Symbol type
- I would consider this an advanced topic. Using symbols is uncommon in everyday web development.
- Object to primitive conversion
- Again, writing code that uses the concepts covered here is rare in web development.
Arrays
The same site has a good resouce on learning arrays.
- This is where the
for...ofloop gets introduced. I'd like to echo the lesson to remind you that we shouldn't usefor...inloops on arrays. - Feel free to skim or skip the section on Internals and Performance. It's good to know, but not required.
You should also read this section on array methods.
- The last section "Most methods support 'thisArg'" is optional.
- Don't worry about memorizing these methods right away! It's more important to understand what the kinds of operations are that you can perform on arrays. You can and should consult references (like that tutorial) when you need to program using them.