How to learn JavaScript if you are already programmer?

You could check out Eloquent Javascript. It's probably the best book I've read on the subject.

https://eloquentjavascript.net/

Shameless recommendation for my own project [1], which is a mix of coding challenges, text and video. For example, writing a group-by function:

https://app.pairwise.tech/workspace/2GGJQvNjr/group-by

If textbooks are your preference I second the recommendation for Eloquent JS—read it many years ago and it taught me much about the language.

Since you're already aware that most people aren't writing vanilla JS I'll just briefly touch on why: Built-in APIs leave a lot to be desired, so eventually everyone either adopts a framework or writes their own. Two examples you've likely heard of:

• Front-end: React, because creating dynamic UI with standard DOM interfaces is a real pain.
• Back-end: Express, because writing routing logic—while not inherently difficult—is tedious and gets repetitive between projects.

I'm in the same position like you. Python/Django backend developper and now I'm trying to learn Js.
I found this site very helpful.
https://jsbootcamp.io

It's not too late! Turn back now! 😂
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

You mention you already have programming skills, this overlaps nicely and should make the learning easier for you.

A fast way to learn vanilla JS, create an index.html file and add a reference to an index.js file. Open the index.html in your browser and just edit the js file + refresh the page and keep the console open.

Build things, hack your way since your skills will overlap and allow you to move faster. Build simple things, add to the dom, remove from the dom, modify the dom. Move on to more complex user interaction, mouse events + keyboard events.

You can easily do the above while following MDN: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents.

As your code grows, learn to use functions and organize the code + don't repeat yourself.
This for me is the only way I can learn, by trying to do something.

Good luck!

I found this list of resources squite useful, there's some overlap with what was discussed here as well:

https://github.com/snipcart/learn-vanilla-js

Hey,

I'm quite biased but that's exactly what I've developed a year ago :D
LearnJavaScript.online

It's an interactive course with flashcards that assumes you already know the basic programming concepts

move to TypeScript by default, it's much much better

Depends what is your goal but if you just want to do programming for web and want to leverage some real power, I recommend checking Clojurescript instead. The ecosystem is really amazing (https://www.youtube.com/watch?v=KZjFVdU8VLI) and it is a lot of fun. And it will grow your programming skills much more.

As a Python dev, I found this training perfectly adapted: https://www.udemy.com/course/react-the-complete-guide-incl-redux/?LSNPUBID=jU79Zysihs4&ranEAID=jU79Zysihs4&ranMID=39197&ranSiteID=jU79Zysihs4-JQXj40xL.Xe8BjP_LesdmA

40 hours of this, then a bit of work on a side project and I feel good enough with React and ES6.

Honestly, JS isn't the hard part anymore. There are tons of great resources, which have been linked in other comments. Learning all the tooling is what has become hard. Here is a list of things I would expect an expert to at least have some knowledge about, so have some more advanced things to lookup:

Topics to learn about actual JavaScript language:

1. the event loop
2. this
3. the history of es5 -> es2020
4. Event propagation
5. Prototypical inheritance
6. streams
7. Functions as a first class, which allows for things like lodash memoize, etc...

Topics to understand about tooling:

1. node vs browser
2. webpack
3. babel/typescript
4. file systems
5. process forking
6. networking basics

Other topics which contribute to being an expert:

1. IE/Safari/Firefox/chrome common pitfalls
2. Webgl
3. Virtual Dom
4. Cookies and sessions
5. Webrtc
6. Solid understanding of https://owasp.org/www-project-top-ten/
7. Basics of cryptography: hashing, Asymetrical, symmetric etc...
8. Local storage
9. Running JS on Mobile: Cordova/React native/native script.
10. web sockets

If you're a learning by doing type, I think adding StimulusJS (https://stimulusjs.org) to a project and getting it to work is a really good way to learn modern JS.

Or removing jQuery from an existing project and replacing it with Stimulus is also another good exercise.

I began learning it coming from C++ by just making a static website from scratch. Maybe not the best way for you if you just care about vanilla js but you don't have to focus much on the html/css side.

Just add some buttons/tables and learn javascript by doing basic crud operations to the page with button clicks.

It depends on your preferred method of learning, books or online courses. The issue with recommending a particular book or course is that it is entirely subjective , depending on who you ask. The advantage you have is that you already a developer so you are in a good position to learn javascript quite fast. In addition to javascript a knowledge of HTML 5 and CSS is helpful as well for front end work

Before hopping into any SPAs or ES6 with webpack, gulp, etc

I would recommend getting familiar with Vanilla Javascript as it is a weakly typed language programmatically that has its advantages and disadvantages, and additionally getting familiar with the DOM.

I would recommend looking into a Udemy course with an instructor whom you resonate / like their teaching style.

Cheers!

What I usually do when picking up a programming subject is just go through the book previews for 3-4 mins, get an idea of the writing style/whether I understand it fully. Within 1-2 hours, I have at least 2 books that I REALLY like.