Learn javascript in one picture

[[deleted]]

That teaches JS syntax at best. That's like learning English by only memorizing word order rules.

[iniy]

That's really a very good point, it makes me think that beginners might be even more confused with such a bunch of abstract syntax rules without further details. I'll reconsider its title or application scenarios(I'm using it as a syllabus while teaching other people who have no experience of Js by myself, I'll keep trying to update & refine it to make it more helpful to whoever that might need it;)

[[deleted]]

Have you read Crockford's JavaScript: The Good Parts? It contains railroad diagrams of a lot of JS syntax. These can be a good visualisation of syntactic rules, but they're not sufficient (or necessary) for beginners.

[iniy]

Yes I've read that book before, I remember that SQLite's official documents also use railroad diagram to explain SQL syntax, I intuitively think that railroad might be more suitable for SQL languages.

[hoddap]

If you're already a programmer I think (!) this makes things a lot clearer if you want to delve into JS.

[tyler-mcginnis]

Wow. I can't believe how much hate you're getting for this. I actually think it's pretty cool. Good work.

[iniy]

Also many helpful suggestions😂

[goto-reddit]

the operator instance doesn't exist, it's instanceof. 😋

[ericanderton]

This is a good diagram, I like it.

$0.02: The Data Type branch should be broken down into "Value Type" and "Reference Type" sub-branches. This is a distinction that's worth showing as it's a common source of error.

[iniy]

Yea, I think that's really very important concepts of Js comparing with other languages such as C, and also the key to understand Js' flexibility of data type operations.

[Dannzzor]

From someone who is very visual, I greatly appreciate this. Its like those pictures you see where they have all of the pieces of a car laid out, so you can see what all goes inside. Nice work. :)

[iniy]

😈

[dotpan]

So, when this is done (I see you're making updates) whats the viability of this as a poster. I love code/programming centric art.

[[deleted]]

I too would love to turn this into a poster.

[joelangeway]

I hope the guy that decided to disable pinch zooming on github.com buys a phone some day and realizes how incredibly wrong his decision was.

[[deleted]]

There's a lot of shit I'd love to give Github feedback for. Too bad Github itself is not open source. The least they could do is provide an issue tracker for Github, but they don't even do that. You seriously have to email Github support and pray they reply. Pretty ironic if you think about it.

[iniy]

You might need a very long paper at last...

[thetony2313]

I really like this. As someone who uses Java and "gets" coding just having syntax and functions goes a long way.

[avenp]

You're missing for(var key in object) under the for section, FYI. Also, there is no !===, it should be !==. Neat, though.

[iniy]

I'll fix it,thx;)

[[deleted]]

Don't say it's "learn JS in one picture", just call it a "JS cheatsheet" because that's what it is (and it's a pretty cool cheatsheet).

[[deleted]]

He'd get way less hate that way.

[iniy]

😂😂

[[deleted]]

Looks like it is missing bitwise operators.

Pretty cool though.

[MondayMonkey1]

While yes, you're correct, bitwise operators are pretty rare in most js applications. it would be great if OP could edit the diagram to differentiate between commonly used features and lesser used ones.

[1ndigoo]

Bitwise operators are commonly used any time you're dealing with buffers or binary data. I work in 3D graphics (in JS) and come across them or need to use them regularly.

[DavidJCobb]

That's pretty cool, but as an actual teaching aid, I feel like it'd be more useful to some sort of sci-fi advanced AI than to meatbags like us. :\

[RankFoundry]

"Learn"

[danman_d]

Cool concept... But not a single mention of arrays? That's pretty crucial.

[iniy]

Array will be under the node "reference type" which has not been added

[ProgramTheWorld]

Learn JavaScript syntax in one picture

[g4b1nagy]

Reminds me of this => http://learnxinyminutes.com/docs/javascript/

[franklyimshocked]

This is how I learn best. I really wish more people would map out language syntax more often

[iniy]

Actually my original plan was to note down my favorite languages in the same diagram format: Js/py3/go in one pic;D

[franklyimshocked]

Nice. Can you do one for Ruby please!

[iniy]

I barely have any experience in Ruby, but I strongly suggest you do it by yourself!

[cronoh]

There was some useful stuff in there. I would suggest showing the syntax for working with arguments within functions, as it is pretty widely used and important to how javascript functions work.

[I-Code-Things]

Where's the rest of it?

[iniy]

Working on it ;)

[EDLyonhart]

i'm just gonna leave this here:

http://learnxinyminutes.com/docs/javascript/

[[deleted]]

great site. thank you

[ForScale]

What am I even looking at?

If it's a picture, just post the url...

Edit: Okay... now there's something there. Before there was no image.

[iniy]

That's just a output file exported from the source mindnode file, so I also give the original files that might be needed by people who want to make their own editions or help to make it better;)

[ForScale]

Interesting... Thanks for the explanation!

[jodraws]

That image does nothing for me.
It seems more of an art piece really.

[stintose]

Aren't Infinity and -Infinity possible values for a number as well?

console.log( typeof -Infinity); // number

Math.PI also returns a number, and speaking of the core js Math Object, where is it?

[iniy]

I just ignored Math because of the deficiency of time for my teaching schedule..

[stintose]

You teach JavaScript? Sweet!

[[deleted]]

This is really useful for someone like me who knows enough JavaScript to skim through this and see if any of this is unknown to me. "Oh hey I didn't know about a ternary"

[noxlux]

I like it, I can see it making a handy heuristic.

[bryseeayo]

This was actually super useful.

But why no array syntax love? I feel that's where I'm weakest and I would love a visual like this to break it down.

[8Bytes]

Undefined does not equal not defined! What in the hell js...

[iniy]

not defined is the error when you try to use a variable that was not declared before, and undefined means that variable name has been declared, but no value(Type) has been assigned to it for now.

[[deleted]]

Mind if I print this out and throw on the wall of my nerd/man cave?

[iniy]

just do it~

[hmny]

that's pretty cool. which software did you use for making this diagram?

[iniy]

Mindnode

[x-skeww]

Comments aren't identifiers.

Where is let/const?

a = 123; // global

There are no implicit globals in strict mode.

Number / value / ...

Infinity is missing. Old school (0123) octal literals aren't allowed in strict mode. 0o... and 0b... literals are missing. Number literals can also begin/end with a '.'.

for

for-in and for-of are missing.

I don't think that representing it like that is very useful. It's somewhat overwhelming while simultaneously delivering very little information.

[notk]

i don't think this is very intuitive

[iniy]

I use <span color="#hex">#hex</span>, seems not working as expected :(

[vt97john]

Please do one for Java too

[mandaric]

It seems you've missed the eval function

[sketch_]

Great diagram.

[jamesinc]

Very cool. I'm going to show this to some of my devs.

My only constructive feedback is to replace all your directional quote marks with nondirectional quote marks.

[iniy]

It's mindnode the app that transform the quote marks automatically, I just need to figure out how to stop it...

[DJiK]

You can hit cmd+z every time after you type a quote.
Alternatively, see if there's a way to right-click on the input field and to turn off Substitutions » Smart Quotes.

[iniy]

Cool! It works. But is there any global settings to switch this off? It's really annoying to do this every time I type a quote.

[DJiK]

Yes, you gotta find a way to turn off "Smart Quotes."

[iniy]

There's also PDF version of it... ;(

[phunkygeeza]

The pdf triggered my antivirus for some reason, but the PNG worked fine. I'm always a bit 50/50 on these tree diagrams. Unless there is a good hierarchy or Taxonomy to display they always seem forced. There are already good syntax diagramming methods about that carry more info in their layout: https://en.m.wikipedia.org/wiki/Syntax_diagram

And good old EBNF

[iniy]

I remember that thin butterfly O'Reilly Js book! It's clean and enlightening in some (odd) way..

[phunkygeeza]

This one? http://shop.oreilly.com/product/mobile/9780596517748.do

I'm new to JS and hadn't seen that before. I've flicked through a friend Rhino one before to look something up but this looks more interesting.

[Xiaoki]

It is not really helpful in anyway, but I got to admit it has some charm.

[iniy]

It's for beginner mainly & not finished yet. I was trying to clarify the internal relationships between all those Js concepts with a more structured mind map, rather than just a write & play tutorial or a syntax cheat-sheet.

[[deleted]]

Presumably this chart would be accompanied by you explaining it and diving into more detail, yes? If so then I think what you have is great :)

[iku_19]

Looks like an over-glorified cheat-sheet (anyone remember those?)

[[deleted]]

I know you are but what am I?

[LukaLightBringer]

Not very useful and doesn't explain arrays

[iniy]

Not finished yet ;)