How to learn the different patterns of Javascript syntax
So I'm a junior web developer and my first job I was basically writing simple javascript/(mostly jquery) snippets that changed something on the page for our clients. Like make that button have a pop up, or, insert a message if those parameters are marked by the user.
For the most part - these all followed an appearance of jquery where it starts with
$(document).ready(function(){ //etc });
However now coming out and trying to polish off my resume with some more buzzwords, I'm coming across a lot more object oriented code and completely different patterns that I'm getting overwhelmed with.
Any ideas on what I should do to kinda 'get it' with this syntax? I.e explain to me why it's written the way it is?
Because I can read up more and more on OOC and it's great, but it's all kinda theoretical rather than an explanation about specifically the syntax and organisation of the code so it's not helping me the way I thought it would.
Cheers!
Why a given piece of JavaScript is written the way it is tends to be driven partially by what it's doing and partially by whatever idioms the person writing it is using. Like C++ and unlike languages like Python, Haskell, or Go, the dialect (set of idioms) that someone writing JavaScript may use varies wildly.
The only real way to get it is to read codebases that use it and then try to use the idioms you are seeing in little snippets you write to test yourself. If you have specific patterns where you can't understand why it's being written one way and not another, that's a good time to post to StackOverflow.
There's really a lot that goes into "modern" JavaScript.
It's a completely different world from the jQuery snippets we used to put on pages, to do one little job. Those still have their place, but JavaScript allows us to do way more.
The new ES6 - ES7 - ES8 syntax is a lot to digest, but that will level you up, but first there are the basics. I have a free tutorials collection on this whole topic at https://flaviocopes.com/javascript/, I hope you find that useful.
You can easily spend one month just reading up things and experimenting before you "get" some of the more advanced concepts, but that's the only way to make those resume buzzwords get real 😄
P.S. drop in some code snippets if you need specific advice, although maybe a place like https://www.reddit.com/r/javascript/ is more suited to that kind of discussion (not trying to move you away from IH, just pointing out a useful place with lots of people interested in that topic)
I guess for a bit more context - I've applied for a new job and they use react.js in their stack. I'm only a junior and built like javascript/jquery snippets without any code structuring or anything like that. So i've started looking at some docs and it's all very overwhelming. I'm worried I'm not gonna be qualified for their interview even though they said it's no probablem I haven't used it before
I don't think there's really way to "know it all". Surely the more you have under your toolbelt, the better, but most of the things you figure out while working on the code. Many times the bigger problem is more figuring out what to do/how, rather than how to implement it.
Yesterday I was reading http://bradfrost.com/blog/post/my-struggle-to-learn-react/ and the reactions on Twitter https://mobile.twitter.com/brad_frost/status/994244953852272641
I think everyone can relate to this.
If you're likely going to use React at work, one suggestion is to jump into learning about that, follow the examples until things click - and research things as you go.
Yeah exactly, it's just picking a tutorial to start with at this point - there are soo many out there
Then start with fb's official one.
Thanks Fla - that does make sense. I need to remind myself I'm only really a junior given the limited scope of my first junior position. I'll get to all the es6+ stuff eventually I'm sure.
Wow - what a mighty sized book you have there!
I took Wes Bos' es6 course and definitely recommend it for learning modern Javascript.
Can you provide a snippet of code that you’d like clarification on? That would help most of us give better, more direct advice.
You Don't Know JS is a great and free series of books that I've really enjoyed reading through. They will give you a good solid grasp of most common patterns. Thoroughly recommended!
http://javascriptissexy.com/how-to-learn-javascript-properly/
its a little older, but this guide helped me a lot.
at the time, it was basically read 1 of 2 books
The Definitive Guide or Professional Javascript for Web Developers.
They cover basically all of ES5, which some may feel is dated, but there are still valid reasons to learn it. I made the decision to learn ES5 before diving into 6.
There's also Eloquent javascript, which i've heard good things about. I didn't read that in its entirety. But it's free.
I read both. Both I believe cover "vanilla" (plain) javascript, as in the core language. As well as some jquery. and a lot more.
The site has a lot of other good articles as well, but it's a little dated now. I'd stick to the plain javascript stuff. There are articles on there about Backbone (which is dead) and other things that are out of fashion.
And for more practice, i recommend Treehouse. I credit them with getting me job ready.
keep in mind that JS is multi-paradigm. So some people use it in a more OOP pattern, and some use a more Functional approach. but it's worth learning both, so you can mix and match.
fwiw, i'm working on course materials, and would love to hear feedback on your learnings. i'm looking to start a beginners course, as well as more advanced stuff.
like moving from jQuery to modern javascript DOM APIs. and building a site vs building an app, and theyre similarities and differences.
Read and write more code. As you do so, see if you can start "chunking" your knowledge into pieces you know so well you no longer have to think about. Going concept by concept and making sure you not only get them but are really comfortable with them will actually get you further than trying to rapidly go through a list of allthethings!