sdras / object-explorer

🔥 A resource to help figure out what JavaScript object method would be best to use at any given time

Object Explorer

When I was first learning object methods, I spent a lot of time digging through the docs to find the appropriate one, and I had to search one by one. I made this resource to help people find the correct object method a bit more naturally. You can narrow down what you want to do and explore until you find what's most useful to you.

Check out the site here: https://objectexplorer.netlify.com/

Or if you prefer codepen: https://codepen.io/sdras/pen/rpwjzw/

I realize that there are about a million ways that this resource can be set up, and some of the taxonomy is necessarily opinionated. I tried to focus on what I thought would have helped me learn the best, rather than industry standard delineations. If that style of learning suits you better, that's great! This resource is not set up that way. Please keep in mind that this is not meant to be as comprehensive or a replacement for full documentation, which is why the MDN docs are linked to in each method.

I based most of the longer descriptions off of the MDN documentation, altering it slightly where I felt the description was not as beginner-friendly as it could be. The examples were kept as simple as humanly possible for the purpose of scanning with the least cognitive load, you may need extra details provided in the MDN documentation for every possible usage.

Enjoy!

Other Similar Projects

I have an Array Explorer as well: https://arrayexplorer.netlify.com

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

object-explorer's Issues

Create a copy of an object: use object rest/spread

I like the Object.assign example to create a copy of an object. 👍

Can we show object spread too? In many cases, it’s a more elegant solution than Object.assign. (There are some differences but they don’t matter in common scenarios.)

Syntax highlight with vue-prism

I see that the dep is there already but prism is not fully implemented.
I tried to play with it a few minutes, adding the missing prism.css and changing the markup but it wasn't coming out well. Maybe someone can take a look at it.
I think there's something also with the format of the code coming from the store.

Also, do you think is good to keep strings and code together in the store like that and have the translation files basically duplicating maybe unnecessarily the code?
Could a next iteration maybe address differently the thing? Like having the code in a different format?

Change object.create note

Important note for beginners! It's more common to create an object the way that it's shown at the top of the example, by assigning it to a variable.

Also var obj = Object.create(prototype) is assigned to a variable 😛

Objec.isSealed example is misleading

let obj = {
  a: 1,
  b: 2,
  c: 3
};

Object.defineProperty(obj, 'a', {
  configurable: false
})

console.log(Object.isSealed(obj)); // false
console.log(Object.isSealed(obj.a)); // true

Initially I thoght that Object.isSealed(obj.a) checked if the a property of obj is not configurable, but it returns true just because obj.a is not an object. A good example would actually seal obj.

---

EDIT:
Also the description isn't very clear:

Determines if an object or its properties are sealed.

What does it mean that "its properties are sealed"? WDYT about "Determines if the descriptor of its properties can't be changed and new properties can't be created"?

Error on Portuguese Section

On the Portuguese version, the selected item neither show the results nor the output.

Translations needed!

I'm so excited that the array explorer has been translated into so many languages by helpful people in the community! I think makes it a much better resource. I'd love it if the Object Explorer got the same kind of love.

@AWolf81, @Gonzalo2310, @welll, @JulienMartin, @g-plane, @imbyurhan, @bahe007, @salahaa1, @proYang, @bdimitrovski, @TheElderMindseeker, @glenngijsberts, @galuhsahid, @xgebi
are any of you interested in contributing? No worries if not, and help from anyone is appreciated.

Thank you!

Add JSON.stringify

Additional note for beginners at Object.is

I think it would be good to add a beginners note to tripple equal comparison at Object.is.
Because most of the time === can be used instead of Object.is.

Also mentioned at MDN here.

Just a small improvement but I really like the other beginners notes as they're really helpful.

Object.create example output might be misleading

The Object.create() example shows the creation of a new object using obj as prototype. As output, a copy of obj is shown:

While the properties are of course still accessible through the prototype chain, it might be a good idea to explicitly show the __proto__ property, like chrome does: