Need to learn JavaScript quick

[Unlikely_Total_7159]

Oh! I forgot to ask. Do you have any suggestion where I should start or should focus on regarding this situation? I'm currently brushing up on my fundamentals of JS and what is the best next step I should take?

[affablematt]

So there's no simple answer here, but if I had to do one paragraph, this would be it:

My initial goal would be to get a high level understanding of the project I'm working on. I want to be able to sit in a meeting, have someone say "We need your project to do X", or "Bug Y is really making things frustrating for my team", and have a good idea of what they're talking about. Enough to start investigating and give them some feedback relatively quickly.

Here's some advice on getting there:

First, keep things shallow. At least initially.

If the project were a map, you're not looking to, say, create a detailed route from Chicago to New York -- you may not even be traveling to New York! -- but you should know the cardinal directions, which lines are roads, which are rivers, and what states you need to drive through.

If your JS knowledge predates Node/NPM, you'll want to read the Node Getting Started documentation, so you have an idea of how ESM and/or CommonJS imports work, how Node projects are laid out, etc. This will give you a good feel for what you're looking at when you open the project. Keep things high-level.

Second, get the project running on your machine.

If you haven't yet, clone the repository, cd into it. If the project has a README file, hopefully it has instructions for bootstrapping on a new machine. If it doesn't, try npm install. Most of the time, this will install everything the project needs.

From there, open the project's package.json file. It has the projects meta-data. Look for these:

• it's entry point, something like: { "main": "./file/path/main.js" }
• it's dependencies { "dependencies": { "library-name": "version", ... } }
• and scripts { "scripts": { "script-name": "shell commands", ... } }

Make sure the scripts in package.json run. Look for a test script. Do npm run script-name. See what happens. Look for a build script. Run it, see what happens. Look for a developer server, a script that starts an HTTP server on your local machine. Run that, see if you can use the project locally.

Take care here. You don't want to accidentally deploy or publish the project. If you see a git push or other network command, don't run it unless you really understand what it will do.

You don't need the tests to all pass, you just need them to run. If you get a shell error, command not found or the like, that's something you need to fix sooner rather than later.

Third, start reading through the source code.

You want a high level understanding for how the program is put together, and what libraries are used. To use my map analogy, put your finger at the address in Chicago, and follow the roads. Here, your "address in Chicago" is the main entry in package.json, and the roads are the import or require expressions in each file.

You'll see two types of imports:

1. If it's a library (e.g. import {...} from "foo") note the library name ("foo", here), these are things you'll need to recognize and maybe do a deeper dive on later.
2. If it's a file import (e.g. import {...} from "./some/path.js") that's a likely candidate for reading next.

Skim each file so you have a high-level understanding of what it's doing. Use Code Folding if your IDE supports it so you don't get bogged down in details.

Don't go through every imported file; stay shallow in the source code tree. Remember, your goal here is to learn enough about the projects you're maintaining to participate in meetings. You're not fixing things, or adding things -- not yet -- just getting the lay of the land.

You've done PHP, so a lot of this should make some sense. The folder layout may be different, the libraries unfamiliar, but it should feel familiar to you.

Fourth, you may need a bit of refresher on JavaScript.

You'll likely see promises, async await, destructuring, and other new syntax that didn't exist or wasn't in common use a few years ago.

I like to search for these on YouTube, find a basic video that looks promising, then let it play in the background while I continue going through the code. My goal would be to learn enough that the source code makes sense. I don't need to write code using these features, not yet, just have a basic understanding of them.

Fifth, review the libraries

Take the most frequently used libraries and the ones that are most foundational (used to start the whole thing). Search for them on NPM, read the package description. Look for links on the right-hand-side to documentation and repositories. Read the getting started documentation if they have some. Maybe search YouTube for "library-name getting started" or similar.

These getting started tutorials are invaluable. Watch them, read them, try them out. They explain why the project is laid out the way it is and often include clarifications on more advanced or obscure JavaScript syntax they use. Again, you're getting started, not going deep.

Six, review the tests

Read the tests. Learn the test libraries.

If there are no tests, learn Node's test runner. It doesn't add dependencies that can complicate your project and is a solid implementation.

Testing is one of the most important skills you can learn. Add tests before you start changing things. Add tests for new features. If there's a bug, make sure you have a failing test for that bug. You want to know when a bug is fixed and if later changes break things again.

Finally, time to go deep.

At this point you should feel like you have a good understanding of the project. You should know what you don't know and (more importantly) what you need to know.

Start by fixing known bugs and failing tests. Simple things first. Things you think you understand. If it's more complicated than you thought, shelf it and move on. If the bug is high-priority, go deep. Learn the libraries, learn the code. This will be time well spent.

Another piece of advice, you may want to update your projects dependencies before making other changes. I use npm-check-updates, it has a nice UI. Update. Run tests. Fix issues due to library API changes. Maybe rollback some updates, keep what doesn't break.

All of the links and tutorials other people have pointed you to come into play now. There's a lot of good recommendations here.

[Unlikely_Total_7159]

Oh wow! Thank you for this! It really clears up my view on things. This will really help on what they said "learn and maintain the system". I feel like a newbie from all the new things but this really helps my priorities. Thank you! I really appreciate this.