• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Liutauras Vilda
Sheriffs:
  • Rob Spoor
  • Junilu Lacar
  • paul wheaton
Saloon Keepers:
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Carey Brown
  • Scott Selikoff
Bartenders:
  • Piet Souris
  • Jj Roberts
  • fred rosenberger

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

 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
whippersnapper
Posts: 1843
5
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:



Over:



or



(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
 
Sheriff
Posts: 67642
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
    whippersnapper
    Posts: 1843
    5
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Sheriff
    Posts: 67642
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    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
    whippersnapper
    Posts: 1843
    5
    • Likes 2
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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.
     
    Author
    Posts: 22
    5
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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).
     
    reply
      Bookmark Topic Watch Topic
    • New Topic