Do's and Don'ts for Javascript Newbies

JelenaKalaba on July 27, 2018

Since the day Brendan Eich created it, JS has had many makeovers, changes, additions, and frameworks added to its body. After a lifetime of turbu... [Read Full]
markdown guide
 

I'm a near-intermediate JS developer and was surprised to learn that access by element id is the fastest way. Thanks for posting this! 😄

 

DOM elements are also global when accessed by ID. e.g. window['my_element_id'] or my_element_id #oldschoolweb

 

Here's some more web anecdotes

Because it's seems not standard :/ but you can easely recreate this idea:

document.querySelectorAll("[id]").forEach(el => window[el.id] = el);

 
 

Formatting code: Prettier is something folks should know about; it integrates with ESLint quite nicely, and can be added to most code editors pretty easily.

let, const, and var: In the examples given, doing let container = document.getElementByID('SomeId') is more of a signal to the developers that it will somehow be changing. In fact, the variable itself never changes, it still points to the same DOM element object, which is changing internally. This can be hugely confusing to realize that const container = document.getElementById('SomeId') ; container.innerHTML = "Hello" will work exactly the same way. Kyle Simpson (@getify) has a great discussion on this in YDKJS.

Also, don't completely discard var from your vocabulary as it still has uses; instead understand when and where to apply it.

The adage "use const until you can't" is a good one if everyone understands that.

Great article!

 
 

I come to the comments looking for an explanation about the let/const and why we should use them instead of var.

Can you clarify the difference for me?

 
 
 

I like using snake_case for variables. It improved readability by distinguishing them form camelCasedMethods.

And when it comes to let vs const, use const everywhere until you can't.

 

Consistency is also a Best Practice. When authoring an article and suggesting that Javascript developers use:

const container = document.getElementById("someElementId");

And then later in that same article the author uses:

let container = document.getElementById("someElementId");

It can elicit the pernicious WTF response followed by an emoji :-)

 

Like the article says the let syntax indicates that the value is to be changed which happens in the code snippet.

 

Formatting

Use Prettier. All formatting should be deterministic and fixable automatically.

const vs let

I see a lot of people using let for an object when they plan to mutate it.
Even if they understand it's unnecessary and just use it as a convention it's very confusing to other developers who look for the binding being redefined further on.

 

On formatting code: using linters is a good way to make sure your code is consistent (e.g. in a team or contributions to open-source projects) but maybe more important is to look at recommended and standard configs to see which rules a specific linter enforces.

 

Nice. I only found out about let the other week when chatting with a colleague and seeing let used frequently. I'd been a var user since I originally picked up JavaScript. It's really nice to read best practice articles.

Anyone can learn to code, but coding well, and not picking up bad habits are hugely important.

 

Great guide for javascript, but most thoughts apply to all languages independent of syntax.

Keep up the great work.

 

Just getting into js and coming from Java. Great to know about the linters and Babel!

 
code of conduct - report abuse