DEV Community

Cover image for Do's and Don'ts for Javascript Newbies

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 turbule...
Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
nektro profile image
Meghan (she/her)

this is a big DON'T

Thread Thread
 
nickytonline profile image
Nick Taylor

For sure a bad idea. Just a little anecdote.

Thread Thread
 
nickytonline profile image
Nick Taylor • Edited

Here's some more web anecdotes

Collapse
 
tamouse profile image
Tamara Temple

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!

Collapse
 
jelenakalaba profile image
JelenaKalaba

Thank you.

Collapse
 
juliavii profile image
juliavii

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?

Collapse
 
tamouse profile image
Tamara Temple

No where near as well as Kyle does: github.com/getify/You-Dont-Know-JS...

Collapse
 
qm3ster profile image
Mihail Malo

Came here to make literally these two comments!

Collapse
 
mudlabs profile image
Sam

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.

Collapse
 
reisclef profile image
Richard C • Edited

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.

Collapse
 
dandevri profile image
Danny de Vries • Edited

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.

Collapse
 
qm3ster profile image
Mihail Malo

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.

Collapse
 
clintongallagher profile image
Clinton Gallagher

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 :-)

Collapse
 
enscripter profile image
Isaiah Griego

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

Collapse
 
duduindo profile image
Eduardo Paixão

Nice :D

 
mr21 profile image
Thomas Tortorini

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

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

Thread Thread
 
qm3ster profile image
Mihail Malo

It's totally standard.

Collapse
 
ddaypunk profile image
Andy Delso

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

Collapse
 
kalaspuffar profile image
Daniel Persson

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

Keep up the great work.

Collapse
 
jelenakalaba profile image
JelenaKalaba

You are welcome 💪😉