You don't know JS: most unknown patterns/features of JS?

[vijay chhuttani]

Most of the new users like me start learning JS from a very basic online course and then hang onto examples and some personal projects.
But in all this we miss many important features that any language provide and stick to structuring our application based on what we know.
So could you please highlight some features/design patterns each early stage JS developer should read about and try before developing his/her ideas.

[Michael Matola]

I've been doing a JavaScript kata series, so I've seen my share of newbie code lately.

(1) Learn to use objects as maps/hashes/dictionaries. Seriously. Don't do
"parallel arrays". (Along those lines, learn about own properties and the
prototype chain, so your code is own-properties safe.)

(2) Learn some of the wonderful stuff available on Array.prototype that leads to more functional-style code.

Array.prototype.slice
Array.prototype.forEach
Array.prototype.filter
Array.prototype.reduce
Array.prototype.some
Array.prototype.every
Array.prototype.find (EcmaScript2015)

(3) Even if you code exclusively with === and !==, at a minimum, understand truthy and falsy (what coerces to Boolean true and false).

(4) This is a style issue, but in my opinion, favor code like this:

return expression;

Over:

if (expression) {
  return true;
} else {
  return false
}

or

return expression ? true : false;

(5) Get a handle on how this works. Don't fear call, apply, and bind.

(6) Experiment with different styles. Prototypes, Crockford classless/revealing module, etc

[Bear Bibeault]

Mike's answer is excellent. I'd add a few important (though by no means complete) items to that list:

Understand how functions get called, what determines the function context (this), amd how function parameters and argument lists work. (Mike touched upon this in his list).

Thoroughly understand scope and closures (a pertinent entry for this weeks book promo!)

Understand what it really means for a function to be a "first class object".

[Michael Matola]

Add Array.prototype.map to the list

How could I forget map?? (I love map.)

But, use map correctly! I've been fascinated in the kata at how many programmers want to use map() as their default array iterator, instead of forEach(). (The callback you pass into map should represents a transformation rule, and it should return a value. If the callback doesn't return a value, you probably should be using forEach() instead of map().)

[Bear Bibeault]

Michael Matola wrote:Add Array.prototype.map to the list

How could I forget map?? (I love map.)

Me too. I also find myself using .reduce() quite a bit to create summary data.

[Michael Matola]

For anyone who's interested, the programming kata website I'm talking about is exercism.io, run by a retired Coderanch staffer, Katrina Owen.

There are two JavaScript tracks: JavaScript and EcmaScript

http://exercism.io/languages/javascript
http://exercism.io/languages/ecmascript

The JavaScript track is intended for learning ES5. But since it uses uses Node.js, you can actually use whatever JavaScript features the version of your local installation of Node.js supports. (Many posters to the JavaScript track do limit themselves to ES5. Others go ahead and use ES6 features.)

The EcmaScript track is intended for learning ES6 (and beyond). It uses Babel to transpile down. Babel is farther along than Node.js in supporting ES6. In this track posters encourage each other to write solutions using ES6 features.

Since you're posting code in public, the feedback can vary. I personally have found it to be very helpful in sharpening up my JavaScript skills.

[Kyle Simpson]

I'd say among the most commonly misunderstood features of JS definitely are things like the `this` keyword. Probably more than 90% of developers that I encounter don't know how it really works, only parts of it. The rest they treat as a black box of magic and unpredictability. It's actually quite simple. There's just 4 rules, and they're based entirely on how the function is called.

1. Is the `new` keyword used in front of the function call (like `new foo()`)? If so, a new empty object will be assigned to `this` inside that function call.
2. Is a `call(..)` or `apply(..)` used at the call site (like `foo.apply( someObj )`)? If so, that `someObj` will be the `this` inside that function call.
3. Is a context object used at the call site (like `obj.foo()`)? If so, that `obj` will be the `this` inside that function call.
4. Otherwise, default the `this` to the global object (in non-strict mode) or `null` (in strict-mode).

See? It's really not that hard. But most just never learn it. So `this` is mysterious for devs even seasoned by 10 or more years of development.

If you're interested in more info on `this`, check out Ch 1 and 2 of "this & Object Prototypes" of the YDKJS series.

----------

How the `==` actually works (and compared to `===`) is probably another of the most misunderstood. Several chapters of "Types & Grammar" are devoted to explaining types and coercion, which are essential to realizing that `==` is not something to avoid in your code, but to embrace as a powerful tool (only if you know how to use it responsibly).