11 ms·

Learning Advanced JavaScript (2008)

192 points by kparaju 10y ago

nnoitra 10y ago
VM213:1 Uncaught ReferenceError: assert is not defined(…)
jongar_xyz 10y ago
> #2: Goal: To be able to understand this function: > > // The .bind method from Prototype.js > Function.prototype.bind = function(){ > var fn = this, args = > Array.prototype.slice.call(arguments), object = args.shift(); > return function(){ > return fn.apply(object, > args.concat(Array.prototype.slice.call(arguments))); > }; > } I do not want to understand this absurdness. I want a comment that tells me what it does so I can rewrite it in a sane way.
- ht85 10y ago
  Do you really think it's good practice to use comments to describe how the language itself works? It's not like you can't find comprehensive, quality documentation for every single thing that happens in that function on MDN or equivalent. Is that function that insane? I can understand it at a glance, and performance is high (it matters here). AS a JS programmer, just knowing that it is an implementation of bind() should be enough of a hint that it uses its first argument as context, the rest as a curry and the arguments of the newly generated function as additional arguments.
  - RandomInteger4 10y ago
    To be fair, the syntax of the variable initialization could be separated into 3 lines for better clarity.
- vlunkr 10y ago
  The post is about learning advanced JavaScript, if you don't want to understand that then the post isn't for you, (not that there's anything wrong with that). There may not be a more sane way to write this, (in es5).
- dualogy 10y ago
  > I do not want to understand this absurdness. Then don't read the ejohn? =) (Me neither, fwiw. Would rather write a combined com/transpiler from sane to asm.js/wasm bypassing JS entirely. Not that I do, just that I'd rather.)
- epmatsw 10y ago
  What's a more sane way to write that? It seems fairly straightforward to me, although ES6 might clean up the syntax a bit.
- jayajay 10y ago
  When you start using ES6, a lot of this garbage tends to disappear, if that helps. It infuriates me to see this kind of code, also. ES6 is a real godsend, dude! Fuck, I basically just said what everyone else here said. Well, whatever!
- jholman 10y ago
  This is a perfectly straightforward implementation of a somewhat sophisticated concept. But one wouldn't encounter this code in an application; this is library code. It's so useful and common that it's part of the ES5 standard (yes, ES5, not ES6). It might be the bind method from Prototype.js, but it's also the .bind method that all ES5 JS functions have. Anyway, the question is not whether or not you should/coudl write this. The question is whether or not it's a good goal to be able to read this. IMO, anyone who cannot read this function, albeit slowly and carefully, isn't an intermediate JS programmer, much less an advanced one. Which of the concepts in this chunk of code is foreign to you? Prototypes? this? Using Array.p.s.c() to turn array-like args into an actual Array? shift? returning a function that, when called, invokes another function on the concatenation of one set of args with another set of args? This is all easy-mode stuff, unless you're brand new to JS, or you haven't bothered learning it.
  - houghkikamami 10y ago
    I learned about all of this stuff by doing challenges on codewars.com
- ofir_geller 10y ago
  I would make 3 changes. Separate the declaration to 3 lines because the 2nd and the 3rd declarations depend on each other. Keeping them on the same line makes the reader think this is a simply declarative code but in fact it's the opposite. Avoid using the slice shift combo but use slice with a start of 1 plus direct index access to the arguments[0] to get the first argument. this way i'm not mutating the args array and that makes the code easier to follow. Rename the object variable to '_this'. Giving the reader a hint as to what it is used for. And of course if this is actually to be used in production I assume it will be wrapped inside a check to see if the bind function is already defined.
- Noseshine 10y ago
  Hint: to write code in HN comments indent anything you write by at least two spaces. Result (long lines split - people on mobile may still have to scroll horizontally): // The .bind method from Prototype.js Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function(){ return fn.apply( object, args.concat(Array.prototype.slice.call(arguments)) ); }; }
lancefisher 10y ago
This is fairly old. It goes with John Resig's book "Secrets of the JavaScript Ninja Released" which was released at the beginning of 2013 [1]. I remember seeing this site up well before that. He started the book in 2008. If you can work your way through this tutorial you'll gain a decent grasp of ES5 prototypes and functions. [1]: http://ejohn.org/blog/secrets-of-the-javascript-ninja-released/ http://ejohn.org/blog/secrets-of-the-javascript-ninja-releas...
- jayajay 10y ago
  He's not wrong. Yeah I knew I saw this somewhere before.
- hackerboos 10y ago
  The second edition of that book was released this year. https://www.amazon.ca/Secrets-JavaScript-Ninja-John-Resig/dp/1617292850/ref=dp_ob_title_bk https://www.amazon.ca/Secrets-JavaScript-Ninja-John-Resig/dp...
zappo2938 10y ago
When I started out, this and "Secrets of the JavaScript Ninja" didn't help me understand. For me, after months of trying to understand JavaScript, Dmitry Soshnikov's post, JavaScript. The Core, made understanding closure, prototype, and scope chain crystal clear in about 30 minutes. [0] Also, every time someone shares a basics on JavaScript link on Hacker News I also share my interview guide which despite its popularity has yet to land me a job writing JavaScript. Nonetheless, I love writing JavaScript and understanding it and some of the APIs like Angular, Lodash, Nightmare, and async makes me feel empowered. It doesn't cover any topics in ES6 yet.[1] [0] http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ [1] https://github.com/adam-s/js-interview-review https://github.com/adam-s/js-interview-review
nikki93 10y ago
Haven't gone past the first slide yet, but FWIW with ES6 you could do something like: [nikki ~]$ node > const bind = (fn, obj, ...args1) => (...args2) => fn.call(obj, ...args1, ...args2) undefined > bind(console.log, console, 'a', 'b')('c', 'd') a b c d undefined > // calls `fn` with `obj` as `this` and the remaining arguments prepended with given ones I believe all of the old-style argument stuff with `arguments` is possible with `...`, not sure though, maybe some edge cases.
RobSchley 10y ago
Where's the "Advanced" part? This is just JavaScript fundamentals.
- nathancahill 10y ago
  You underestimate the JS populace
  - mark_edward 10y ago
    Do you mean overestimate?
    - Noseshine 10y ago
      Or underestimate the spread of Javascript over the population, which necessarily includes more and more people less familiar with programming :-)
- whytaka 10y ago
  Could you point to more advanced concepts? As a newb, I'm eager to learn.
- partycoder 10y ago
  I was about to post the same. This wasn't very advanced even in 2008. Also the word "ninja" is overused.
CryoLogic 10y ago
This seems like very beginner level JavaScript. Defining Functions, Functions as Objects, Context? All JS fundamental concepts.
- cocktailpeanuts 10y ago
  I think now it's all considered basic since JS ecosystem has grown a lot and people take it for granted, but probably back then these were all advanced materials you couldn't find easily.
  - minitech 10y ago
    No, they were still basic in 2008. (ES3 was published in 1999.) JavaScript hasn’t changed very much as a language; just the tools around, mostly.
    - Klathmon 10y ago
      Javascript hadn't changed much up until the last few years. Now with ES6 (ES2015), ES2016, ES2017, etc... It's beginning to add a not-insignificant amount of features to the core language which at least to me has completely changed how I write it (for the better)
      - deleted 10y ago
        [deleted]
    - cocktailpeanuts 10y ago
      In 2008 javascript programmers were called "script kiddies" and the language was only starting to get wider adoption. Unless you were already an experienced web programmer back then this was advanced material for most web programmers who only used to use javascript for displaying alerts and cute dynamic features. Speaking from my own experience, I didn't know about all these prototypes and important concepts for a long time and and did fine. I built tons of web apps without knowing these "advanced" features. It was only when I decided to learn the language seriously that I got acquainted with a lot of these features like the prototype concept, object constructors, etc. If you can build pretty advanced production websites without knowing these features I would say these features are advanced. That said, it's a different story now because javascript is an important language. But my point is in 2008 it wasn't. Also this guy created jQuery, if he says it's advanced, it probably was.
andrewvijay 10y ago
I still consider myself to be a noob but I use a lot of these everyday. For example currying instead of binding. Am I just being humble?
- warent 10y ago
  No you're a noob
- dancek 10y ago
  You're obviously humble. If you know good functional programming practices from elsewhere, you might still be a noob when it comes to the JS ecosystem though.
sjnair96 10y ago
Once again I am going to shamelessly plug my favorite course author Anthony Alicea and his JS/NodeJS/Angular1 course[1],[2],[3]. I really really liked Tony's course as it gave quite a deep look into topics, which are usually only attainable from books, while at the same time keeping it very interesting and also contain lots of best practice material and being extremely dense but easy to digest. Do let me know if you guys know any other courses of the same style. For quite a while I have been trying to find similar courses/tutorials of similar caliber when it comes to knowledge gained and being easy to digest. If you haven't watched any of Tony's courses, do give them a shot. Rigorous -- but not boring or too long. [1]https://www.youtube.com/watch?v=Bv_5Zv5c-Ts https://www.youtube.com/watch?v=Bv_5Zv5c-Ts [2]https://www.youtube.com/watch?v=ejBkOjEG6F0 https://www.youtube.com/watch?v=ejBkOjEG6F0 [3]https://www.udemy.com/understand-nodejs/?couponCode=LEARNNOD.. https://www.udemy.com/understand-nodejs/?couponCode=LEARNNOD.... Disclaimer: Because it may sound like it, I'd like to clarify I have absolutely no affiliation with Tony or his courses. I just really really liked them.
- 551199 10y ago
  JS course is fantastic, but the Angular one isn't that great. Alicea has React course called 'React and Flux for Angular Developers'in Pluralsight if anyone is looking more of his courses.
Noseshine 10y ago
Since we are talking about learning Javascript, there is a very interesting approach in this edX course: Teach biology and Javascript! "Nature, in Code: Biology in JavaScript" -- Learn JavaScript programming by implementing key biology concepts in code, including natural selection, genetics and epidemics. Instead of just learning programming principles outside of any context, you will learn JavaScript programming by implementing key biological concepts in code so they can run in your browser. https://www.edx.org/course/nature-code-biology-javascript-epflx-nic1-0x https://www.edx.org/course/nature-code-biology-javascript-ep...
known 10y ago
JS Design Patterns is also good https://addyosmani.com/resources/essentialjsdesignpatterns/book/ https://addyosmani.com/resources/essentialjsdesignpatterns/b...
rodorgas 10y ago
It's amazing to see what was "advanced" JavaScript in 2008 haha.

192 points by kparaju 10y ago

VM213:1 Uncaught ReferenceError: assert is not defined(…)

> #2: Goal: To be able to understand this function: > > // The .bind method from Prototype.js > Function.prototype.bind = function(){ > var fn = this, args = > Array.prototype.slice.call(arguments), object = args.shift(); > return function(){ > return fn.apply(object, > args.concat(Array.prototype.slice.call(arguments))); > }; > } I do not want to understand this absurdness. I want a comment that tells me what it does so I can rewrite it in a sane way.

ht85 10y ago
Do you really think it's good practice to use comments to describe how the language itself works? It's not like you can't find comprehensive, quality documentation for every single thing that happens in that function on MDN or equivalent. Is that function that insane? I can understand it at a glance, and performance is high (it matters here). AS a JS programmer, just knowing that it is an implementation of bind() should be enough of a hint that it uses its first argument as context, the rest as a curry and the arguments of the newly generated function as additional arguments.
- RandomInteger4 10y ago
  To be fair, the syntax of the variable initialization could be separated into 3 lines for better clarity.
vlunkr 10y ago
The post is about learning advanced JavaScript, if you don't want to understand that then the post isn't for you, (not that there's anything wrong with that). There may not be a more sane way to write this, (in es5).
dualogy 10y ago
> I do not want to understand this absurdness. Then don't read the ejohn? =) (Me neither, fwiw. Would rather write a combined com/transpiler from sane to asm.js/wasm bypassing JS entirely. Not that I do, just that I'd rather.)
epmatsw 10y ago
What's a more sane way to write that? It seems fairly straightforward to me, although ES6 might clean up the syntax a bit.
jayajay 10y ago
When you start using ES6, a lot of this garbage tends to disappear, if that helps. It infuriates me to see this kind of code, also. ES6 is a real godsend, dude! Fuck, I basically just said what everyone else here said. Well, whatever!
jholman 10y ago
This is a perfectly straightforward implementation of a somewhat sophisticated concept. But one wouldn't encounter this code in an application; this is library code. It's so useful and common that it's part of the ES5 standard (yes, ES5, not ES6). It might be the bind method from Prototype.js, but it's also the .bind method that all ES5 JS functions have. Anyway, the question is not whether or not you should/coudl write this. The question is whether or not it's a good goal to be able to read this. IMO, anyone who cannot read this function, albeit slowly and carefully, isn't an intermediate JS programmer, much less an advanced one. Which of the concepts in this chunk of code is foreign to you? Prototypes? this? Using Array.p.s.c() to turn array-like args into an actual Array? shift? returning a function that, when called, invokes another function on the concatenation of one set of args with another set of args? This is all easy-mode stuff, unless you're brand new to JS, or you haven't bothered learning it.
- houghkikamami 10y ago
  I learned about all of this stuff by doing challenges on codewars.com
ofir_geller 10y ago
I would make 3 changes. Separate the declaration to 3 lines because the 2nd and the 3rd declarations depend on each other. Keeping them on the same line makes the reader think this is a simply declarative code but in fact it's the opposite. Avoid using the slice shift combo but use slice with a start of 1 plus direct index access to the arguments[0] to get the first argument. this way i'm not mutating the args array and that makes the code easier to follow. Rename the object variable to '_this'. Giving the reader a hint as to what it is used for. And of course if this is actually to be used in production I assume it will be wrapped inside a check to see if the bind function is already defined.
Noseshine 10y ago
Hint: to write code in HN comments indent anything you write by at least two spaces. Result (long lines split - people on mobile may still have to scroll horizontally): // The .bind method from Prototype.js Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function(){ return fn.apply( object, args.concat(Array.prototype.slice.call(arguments)) ); }; }

lancefisher 10y ago

This is fairly old. It goes with John Resig's book "Secrets of the JavaScript Ninja Released" which was released at the beginning of 2013 [1]. I remember seeing this site up well before that. He started the book in 2008. If you can work your way through this tutorial you'll gain a decent grasp of ES5 prototypes and functions. [1]: http://ejohn.org/blog/secrets-of-the-javascript-ninja-released/ http://ejohn.org/blog/secrets-of-the-javascript-ninja-releas...

jayajay 10y ago
He's not wrong. Yeah I knew I saw this somewhere before.
hackerboos 10y ago
The second edition of that book was released this year. https://www.amazon.ca/Secrets-JavaScript-Ninja-John-Resig/dp/1617292850/ref=dp_ob_title_bk https://www.amazon.ca/Secrets-JavaScript-Ninja-John-Resig/dp...

zappo2938 10y ago

When I started out, this and "Secrets of the JavaScript Ninja" didn't help me understand. For me, after months of trying to understand JavaScript, Dmitry Soshnikov's post, JavaScript. The Core, made understanding closure, prototype, and scope chain crystal clear in about 30 minutes. [0] Also, every time someone shares a basics on JavaScript link on Hacker News I also share my interview guide which despite its popularity has yet to land me a job writing JavaScript. Nonetheless, I love writing JavaScript and understanding it and some of the APIs like Angular, Lodash, Nightmare, and async makes me feel empowered. It doesn't cover any topics in ES6 yet.[1] [0] http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ [1] https://github.com/adam-s/js-interview-review https://github.com/adam-s/js-interview-review

nikki93 10y ago

Haven't gone past the first slide yet, but FWIW with ES6 you could do something like: [nikki ~]$ node > const bind = (fn, obj, ...args1) => (...args2) => fn.call(obj, ...args1, ...args2) undefined > bind(console.log, console, 'a', 'b')('c', 'd') a b c d undefined > // calls `fn` with `obj` as `this` and the remaining arguments prepended with given ones I believe all of the old-style argument stuff with `arguments` is possible with `...`, not sure though, maybe some edge cases.

RobSchley 10y ago

Where's the "Advanced" part? This is just JavaScript fundamentals.

nathancahill 10y ago
You underestimate the JS populace
- mark_edward 10y ago
  Do you mean overestimate?
  - Noseshine 10y ago
    Or underestimate the spread of Javascript over the population, which necessarily includes more and more people less familiar with programming :-)
whytaka 10y ago
Could you point to more advanced concepts? As a newb, I'm eager to learn.
partycoder 10y ago
I was about to post the same. This wasn't very advanced even in 2008. Also the word "ninja" is overused.

CryoLogic 10y ago

This seems like very beginner level JavaScript. Defining Functions, Functions as Objects, Context? All JS fundamental concepts.

cocktailpeanuts 10y ago
I think now it's all considered basic since JS ecosystem has grown a lot and people take it for granted, but probably back then these were all advanced materials you couldn't find easily.
- minitech 10y ago
  No, they were still basic in 2008. (ES3 was published in 1999.) JavaScript hasn’t changed very much as a language; just the tools around, mostly.
  - Klathmon 10y ago
    Javascript hadn't changed much up until the last few years. Now with ES6 (ES2015), ES2016, ES2017, etc... It's beginning to add a not-insignificant amount of features to the core language which at least to me has completely changed how I write it (for the better)
    - deleted 10y ago
      [deleted]
  - cocktailpeanuts 10y ago
    In 2008 javascript programmers were called "script kiddies" and the language was only starting to get wider adoption. Unless you were already an experienced web programmer back then this was advanced material for most web programmers who only used to use javascript for displaying alerts and cute dynamic features. Speaking from my own experience, I didn't know about all these prototypes and important concepts for a long time and and did fine. I built tons of web apps without knowing these "advanced" features. It was only when I decided to learn the language seriously that I got acquainted with a lot of these features like the prototype concept, object constructors, etc. If you can build pretty advanced production websites without knowing these features I would say these features are advanced. That said, it's a different story now because javascript is an important language. But my point is in 2008 it wasn't. Also this guy created jQuery, if he says it's advanced, it probably was.

andrewvijay 10y ago

I still consider myself to be a noob but I use a lot of these everyday. For example currying instead of binding. Am I just being humble?

warent 10y ago
No you're a noob
dancek 10y ago
You're obviously humble. If you know good functional programming practices from elsewhere, you might still be a noob when it comes to the JS ecosystem though.

sjnair96 10y ago

Once again I am going to shamelessly plug my favorite course author Anthony Alicea and his JS/NodeJS/Angular1 course[1],[2],[3]. I really really liked Tony's course as it gave quite a deep look into topics, which are usually only attainable from books, while at the same time keeping it very interesting and also contain lots of best practice material and being extremely dense but easy to digest. Do let me know if you guys know any other courses of the same style. For quite a while I have been trying to find similar courses/tutorials of similar caliber when it comes to knowledge gained and being easy to digest. If you haven't watched any of Tony's courses, do give them a shot. Rigorous -- but not boring or too long. [1]https://www.youtube.com/watch?v=Bv_5Zv5c-Ts https://www.youtube.com/watch?v=Bv_5Zv5c-Ts [2]https://www.youtube.com/watch?v=ejBkOjEG6F0 https://www.youtube.com/watch?v=ejBkOjEG6F0 [3]https://www.udemy.com/understand-nodejs/?couponCode=LEARNNOD.. https://www.udemy.com/understand-nodejs/?couponCode=LEARNNOD.... Disclaimer: Because it may sound like it, I'd like to clarify I have absolutely no affiliation with Tony or his courses. I just really really liked them.

551199 10y ago
JS course is fantastic, but the Angular one isn't that great. Alicea has React course called 'React and Flux for Angular Developers'in Pluralsight if anyone is looking more of his courses.

Noseshine 10y ago

Since we are talking about learning Javascript, there is a very interesting approach in this edX course: Teach biology and Javascript! "Nature, in Code: Biology in JavaScript" -- Learn JavaScript programming by implementing key biology concepts in code, including natural selection, genetics and epidemics. Instead of just learning programming principles outside of any context, you will learn JavaScript programming by implementing key biological concepts in code so they can run in your browser. https://www.edx.org/course/nature-code-biology-javascript-epflx-nic1-0x https://www.edx.org/course/nature-code-biology-javascript-ep...

known 10y ago

JS Design Patterns is also good https://addyosmani.com/resources/essentialjsdesignpatterns/book/ https://addyosmani.com/resources/essentialjsdesignpatterns/b...

rodorgas 10y ago

It's amazing to see what was "advanced" JavaScript in 2008 haha.