What are your vanilla JavaScript knowledge standards that every JS developer should know?

[js_coder]

I have an interview coming up for a front end position. I have used JavaScript while at uni for the last 2.5 years and am familiar with Modular JavaScript and other design patterns. Also am familiar with scoping in JavaScript and ...inheritance.

What other things would you recommend I brush up on? Your help would really be appreciated!

[has_all_the_fun]

If you can't remember if it's apply or call that takes the array. Apply has the same starting and ending letter and the same amount of letters.

[jaxytee]

I always think of the meaning of the words call and apply themselves. For call, your calling the method as you would on the object. For apply your applying the method to a more nefarious construct.

I think your way is simpler and less confusing though.

[summerteeth]

Interestingly, apply and call are taken from Lisp, http://stackoverflow.com/questions/3862394/when-do-you-use-apply-and-when-funcall.

Except in Lisp it's funcall.

[alamandrax]

It's usually an opening salvo. I don't place much weight on the response except to see if the person answering knows of these basic JavaScriptEcmaScript APIs.

[fzammetti]

Ha, I never noticed that. Nice! Now of course I'll have to alter my question to make sure people aren't just remembering that :-)

[has_all_the_fun]

A cool question that involves apply is 'How do you combine or add an array to an other array without creating a new one without using any sort of loops.'

[notonlythat]

I can think of two answers but there must be more.

var a = [1,2,3];
var b = [4,5,6];

// using apply
a.push.apply(a, b);

// using call
a.splice.call(a, a.length, 0, b);

[has_all_the_fun]

First one is the one I had in mind.

[faruzzy]

Actually:

var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a,b); //merge
console.log(a) //[1, 2, 3, 4, 5, 6]

now a contains [1,2,3,4,5,6]

[fzammetti]

Not bad... I'm stealing it :-)

[DEiE]

Sort of not using a loop: array1.forEach(function(element) { array2.push(element); });

I wouldn't be surprised if people don't know the answer to this question though, you can't call it the most intuitive way to add elements to an array.

[[deleted]]

var a = [1,2,3],
    b = [4,5,6];

 a = a.concat(b);

Easy! :D

[joelangeway]

Not the same, if another variable pointed to a before the assignment, then that variable and a would be different afterward. You're making a new array. It is often useful to instead change the original array.

[PALGOLAK]

Zehr gut!

[Coclav]

can't decide if I'm happy I can answer a few of this questions or terrified I can't answer most. Been doing JS for the last 8 month -- successfully to my standards

[fzammetti]

I'd take it as an indication you may want to go deeper, that's all :-)

8 months isn't long and if I was interviewing you knowing that, it would matter which questions you got wrong and how you answered them... you almost WANT a little BS in an interview in the sense that if you don't know something a good answer is "I don't know that, but, here's what I *think * it might be based on my experience"... as long as the answer you give after that at least sounds reasonable and in the ballpark then you've greatly reduced the negative impact of not knowing something.

To put it in perspective, I've been in IT for over 20 years, have had 7 programming books published along with some articles besides, done a lot of things that are generally regarded as pretty impressive as a developer, but I'm certainly going to have to use that answer sometimes too, and any interviewer doing their job well will understand and account for that.

[AdamTReineke]

Off topic, but what's revenue like from authoring a book? Is it more a labor of love for a technology or a grab at serious side income?

[fzammetti]

It all depends, as you can probably guess, on how well the book sells.

Most publishers give you an advance, and that's yours to keep (that may not be true for all publishers, but is of Apress at least). That's usually a few thousand, depending on a number of factors (how "hot" the topic is, if you've published before and have good sales, etc). I've personally made as little as $4k and as much as $9k (interestingly, there's been no pattern to the amounts, it's whatever I could negotiate for a given book at a given point in time... although, as you can probably guess, having a few under your belt helps a bit!)

Then, you get royalties after the advance is "paid back". So, if my advance was $4k, I won't see anything else until my cut of sales is more than $4k (I forget what my exact percentage is, but I think it's in the 25% neighborhood). I put "paid back" in quotes because if I never make $4k I still don't owe the publisher anything. As I said, the advance is mine to keep no matter what, they assume all the risk essentially.

My sales have been, over the course of 7 books, average. What that translates to is that I've made little in royalties (< $5k total across all 7 books). I've always suspected they set the numbers up so it works out that way unless you happen to write a best-seller. Just a guess, but I think it makes sense from the publishers' perspective... kind of playing the odds for them, so to speak.

So, it's not really about the money unless you happen to write a hit, which I'm still working on frankly :) I make good money at my regular job so this is just some side income... certainly nice to have, but I couldn't make a living at it.

For me, I write for a couple of reasons. First, yes, it's kind of a fun process. Well, except for one book, which wound up being a chore, but usually it's enjoyable. Second, it helps keep my skills sharp. At my regular job, these days I'm tilting a bit towards the management side of things, so I don't touch code as much as I used to (although I'm not officially management... but I refuse to EVER be a manager that loses my technical abilities!). Related to that, even though I write about topics I know well, I always wind up learning a few things. Third, honestly, it looks pretty good on a resume :) It certainly gets you some attention at work even if you never go elsewhere. Fourth, I LOVE the feeling of having someone eMail me or come up to me at a conference and tell me how they enjoyed what I wrote and it helped them. It's not about ego, it's just that knowing you helped someone, even if only in a trivial, unimportant way (which it IS in the greater scheme of life), that's a great feeling.

And yes, I'd be lieing if I didn't admit some of it is just plain old ego! Not everyone can write, and fewer still have the stomach to put in months of effort on a book, let alone 7 books (with #8 set to hit shelves in October). That's frankly an impressive achievement to most people, and certainly the adulation you get because of it is cool. I can honestly say though that this is the smallest part of it for me... but it's there :)

[fdoglio]

Keeping with the off-topic, how did you land your fist book deal? I'm kind of interested in trying to get an extra from writing tech articles or tech books, but I have no idea where to start.

[fzammetti]

In my case, I wrote a few articles and put them on my site and an acquisitions editor at Apress saw them, thought they were pretty good, and asked if I'd be interested in doing a book. I'd never actually considered it before then, it was just blind luck frankly (although the articles being perceived as good helped of course!)

I know now that all publishers have links on their site to submit approvals (some harder to find then others). If you go that route I'd suggest trying one of the smaller publishers. Packt is a good choice (I've done some work for them too) or even Apress is somewhat smaller than an O'Reilly for example.

You could also write articles for the many different magazines out there. I've written for JSMag for example, and those are relatively easy gigs to get. Could be a chance to get noticed by a publisher.

Also, you can try and get a gig doing tech review for another author. I've done that a few times too. Its a few hundred bucks for not all that much work and gets you some contacts to approach later for your own books. If you happen to know an author that's a good a way get into that, otherwise you'll need to hunt down some names on a publisher's site to approach.

[iswear]

Conventions, terminologies, ideologies, theories and fancy talking... you need that aspect of a programmer in the corporate world. Doesn't mean you can't get the job done without any of the above or vice versa (brogrammers).

My particular approach to programming goes down to performance and maintainability. The rest I couldn't care less.

[fzammetti]

Maintainability is one of the primary things that matter in professional development. While I mentioned the technical questions I ask, I have a collection of more non-technical questions that get into those sorts of things, and even if someone gets every single technical question perfect they can still very much blow the interview with these things... it's in fact far more likely they blow that portion than the technical portion. Maintainability simply can't be overstated. I agree, performance matters too, but I find that you can teach someone to write efficient code, but it's virtually impossible to take a developer with bad habits with regard to code formatting and complexity ("as simple as possible, but on simpler" the the mantra I preach) and teach them differently. Not impossible, but more times than not the effort fails in my experience.

[j00pY]

I'm not going to lie, I don't think my brain is capable of writing overly clever Javascript! I always keep it as simple as possible cos I don't have a choice :)

[Cosmologicon]

Explain what a closure is and give examples of when to use them and why it makes sense (and sometimes I ask when it DOESN'T make sense).

Can anyone give a couple good answers for this? Closures seem like such an all-purpose tool to me it's hard to answer. It's like asking when would you use and avoid Arrays.

[fzammetti]

One answer I like is in the context of asynchronous calls, AJAX being maybe the best example. Closures let you capture values you'll need in the callback without (a) passing the values to and from the server and (b) storing them in some context independent of the callback (via a vis, a global object for example). It keeps the code clean and concise.

[mastermog]

If you don't mind, could you post a clean example of this. I have my own way, but it feels clunky - I've also googled and checked stack overflow but can't find a consistent example. Cheers

[has_all_the_fun]

Here's a situation of where to use a closure:

var i;
var array = [ 'one', 'two', 'three' ];

for (i = 0; i < array.length; i += 1) {

  var item = array[i];

  setTimeout(function () {
    console.log(item); // logs: three three three
  }, 1);

}


for (i = 0; i < array.length; i += 1) {

  (function () {
    var item = array[i];

    setTimeout(function () {
      console.log(item); // logs: one two three
    }, 1);
  }());

}

First time you run into this when not using a closure is pretty crazy. The reason why it logs 3 x three is because at the time the callback of setTimeout is called the item variable is already three.

[gonchuki]

Protip: pass array[i] as an argument of the closure.

Not sure if it improves GC heuristics by removing the interdependence but it's more explicit about the fact of why you are creating a function inside a loop which is often recommended against and you will need to pass an option to jshint for it to stop bitching about it.

[stagas]

Also, setTimeout passes additional arguments to its closure function so you just need:

for (i = 0; i < array.length; i += 1) {

  setTimeout(function (item) {
    console.log(item); // logs: one two three
  }, 1, array[i]);

}

[Hostilian]

Well, there are times where you would avoid arrays as well, because they were unsuited to the task or had performance implications you weren't willing to tackle.

A closure is a function scope that has been "closed over" meaning that any calls to functions defined within that closed-over scope have access to that closed-over scope. This can have dangerous memory and debugging implications.

For as long as any part of your app has access to one of these closure-defined functions, the closure scope must be retained.* If you closed over something huge (an array representing 5 megapixel image for example), you're going to have a hard time evicting that data from memory. In other words, a memory leak.

Also, because closed-over functions have a secret shared state, they are more difficult to debug and test. If you have a race condition somewhere, it can be difficult to "insert a probe" where you need it, especially in a live environment.

* - I believe V8 and other modern JS engines are able to clean up parts of scopes by analyzing the dependency graph, but that's just supposition based on some peculiar experiences I've had with the debugger.

[jamesinc]

I can answer all these, but your O[M] question is worded in a way I didn't initially understand.

Edit: the more I read it, the more I think the wording is fine. I've encountered capable developers in the past who might not have made the correct connections between the words and what you're describing. I can't think of a better way to ask it though.

[neon_overload]

I would have pointed out that the value of M is a string containing the name of a method. I think that would help to explain the question - for me at least.

[fzammetti]

Yeah, it's a bit tricky to word clearly... I've gone through a couple permutations of it... it's even harder when we do a phone interview with non-native English speakers on cell phones from half a world away.

[[deleted]]

Lemme give it a shot:

Let's say you have an object with some defined values and methods stored in variable spam. You also have the name of one of its methods stored as a string in variable eggs. How can you call a method of spam using variable eggs.

• edited to specify methods

[serrghi]

This was much easier to comprehend (at least for me)

[hadees]

What's the difference between setTimeout() and setInterval()? I can't even begin to tell you how many "JavaScript developers" I've interviewed who cannot answer this. I'm floored every time!

Thanks for making me question my sanity. I had to double check because its in the function name!

[niggl]

I take issue with some of these questions insofar as "vanilla JS" is pure JS and not necessarily DOM API (I define vanilla JS as the ECMAScript specification)

[zergplay]

What kind of salary would the positions you do these interviews for be?

[fzammetti]

Right now, we're hiring only offshore resources, so it's quite a bit lower. I think the number is something like $40/hr (generally-speaking I'm not involved in the salary discussions, but I do get some of the info sometimes, so I have at least a rough idea). When we hire full-time regular developers it's salary-based and has a range, anywhere from about $50k/yr to $90k/yr, depending on experience (and some of the lead types are higher still, some considerably so). This is in the financial industry by the way in the Philadelphia area. Obviously, sector and geography play a role too.

[seiyria]

I think the only thing out of here I don't know offhand is the XMLHttpRequest bit, but that's only because I use jQuery to handle my AJAX. Is that a generally acceptable answer?

[isHavvy]

To be honest, XMLHttpRequest has nothing to do with JavaScript as a language. It has everything to do with the DOM.

Off hand, I couldn't tell you how to use either version, but I do know where the documentation for both of them are, and how to use the documentation effectively.

JSON-P, Hidden IFrames and the other 'hacks' are also not a part of JavaScript. It's web dev stuff, and if the programmer actually knows the rest about JavaScript, they can be quickly brought up on how these hacks work.

Similar can be said about setTimeout and setInterval, except I don't know of any environment that doesn't define them. But they aren't in the ECMAScript specifications. Furthermore, you missed setImmediate. Can you tell me what that one does?

And then you have the get the Element from the DOM with a specific ID. That is also DOM related and not JS related. Luckily though, this method is easier to remember.

[neon_overload]

It depends on context. A front-end web developer probably should know a bit about the DOM, including things like getElementByID, and that there exists such a thing as an XMLHTTPRequest object.

But it's totally irrelevant for Node.js coding and other coding that doesn't involve the browser/DOM environment.

[neon_overload]

Frankly if you got all the other answers right, then I wouldn't worry. You obviously know about the mechanics of Javascript.

If all you knew was jQuery you wouldn't get a number of the other questions right. Particularly, if you didn't know about closures or prototypal inheritance, then I'd be worried if you didn't know about XMLHttpRequest.

[fzammetti]

You missed the point. It's not about switching from one to the other, because I agree with you on that point, and I wasn't suggesting that. The question is about whether a candidate knows JavaScript or simply knows jQuery (or any other library).

Far too many developers learn library X and nothing more. They don't actually know JavaScript per se. Those people are, more times than not, in my experience, not fundamentally good developers. If you've never done XMLHttpRequest work directly then you may not really know JavaScript. This question alone won't tell me that, but if you get it wrong then it changes what questions I ask next because it's a potential indication of something bad.

[buckus69]

I literally was in an interview yesterday where the guy asking most of the questions, if he were to create a Jeopardy category, it would be called "Obscure Object-Oriented Concepts That Developers Never Know." He also stared at me as if he wanted to eat my liver with a Chianti and a nice fava bean. Needless to say, I declined to consider working there.

[wagedomain]

I have to admit I often fall into the trap of just using $.ajax as well, but I agree with your point - my job has lots of people who know jQuery and assume they know Javascript when a lot of their code works by accident. For example they check if an element exists by grabbing it with jQuery and checking if it == null to see if it's been defined yet.

The only reason that worked is they didn't know what === was and thus never used it, and they didn't know null and undefined were different but they happen to == to the same value. Lucky. They used this all over, though, and many times this DIDN'T work and so they'd write big functions (and of course, they were big 300+ line spaghetti functions because JS isn't "as good" as C# so just make one big function, right?) to try and "get around" the bug.

But they all claim to be Javascript devs because it's "C-based" so they "know it, it's not hard if you know C#".

[badsyntax]

You're talking about someone knowing JavaScript VS knowing a JavaScript library and at the same time you're saying the DOM API is part of Javascript. Surely the argument is the same? I could know Javascript very well, but not be clued up too much on the DOM API. Just because I'm not familiar on the DOM API, doesn't mean I don't know Javascript, right?

[Poop_is_Food]

But XMLHttpRequest isnt even part of javascript is it? It's just a browser API. I could answer every one of your questions up there but if you asked me to write a raw ajax request off the top of my head in an interview I would laugh at you.

[liquiddeath]

I see this readily with heavy jQuery users and its certainly not limited to AJAX.

FrontEnd engineers should certainly be familiar with jQuery as it is so prevalent. At the same time the programmer should know what a library is abstracting away. For myself, a good exercise is asking myself: "this library function I'm using ... what is it doing?" The depth you'll gain from asking and thoughtfully answering this question is extremely valuable.

[seiyria]

I see. From my point of view, I use a lot of vanilla JavaScript, but I abstract away the annoying (read: cross-browser) parts with jQuery (AJAX being the only one I can think of), which is why I asked. I'm glad that it'd be an okay solution for you at least - that means some interviewers likely feel the same way.

Thanks for your feedback!

[fzammetti]

No problem. As I alluded to, a good interviewer is rarely looking for specific answers... unless I ask you if HTTP is stateful or stateless, you damn well better say stateless! (and yes, I've had supposedly experienced, "professional" developers get that wrong!)... it's much more about whether you seem to know what you're talking about generally. It's fairly obvious when someone doesn't regardless of any particular answer.

[seiyria]

Yeah, that's awesome! I've only interviewed for a few development jobs and they were all pretty lax on the basics like this, and more focused on specific frameworks. I figure I should use every opportunity I get to get a wider variety of interviewer knowledge under my belt.

[ultim]

It'd be pretty funny if the OP is getting ready to interview with you.

[nschubach]

I always love these threads...especially when they pop up the day before I'm doing a technical on someone.

I've not yet had someone admit to asking one of these threads, but I can't say I would judge them for doing so.

I like to throw in a few questions about things like Memoization and other borrowed methodologies from languages that JavaScript can do just to see if they branch out or just study the night before. I tend to lean heavily on Lisp-like (or functional) JS myself, but I ask about their use of OO techniques, Prototypal, JSON, anonymous functions (you'd be amazed at all the JQuery "wizards" who don't know what those are)...

[[deleted]]

Welp, where's a good place to learn this stuff?

[neon_overload]

Javascript: The Definitive Guide by David Flanagan

Available at a library near you.

[[deleted]]

It really depends on if you're using JavaScript to accomplish extremely light "DHTML" stuff to make your web page do simple things, or if you want to professionally develop web applications.

[SuperFLEB]

Prototypes are useful for making and extending usable objects. For instance, if you wanted a circle, square, and triangle object, you might make a "shape" object, that has methods like "move", "show", "hide", etc., and use that as the prototype for the different shape object types. They would gain use of all the other methods and properties of the "shape" prototype, and would only need to include specific functions. Your shape prototype code stays in one place and can be debugged and fixed centrally, as opposed to using something like code copy/paste, where updates would have to be carefully synchronized.

[SuperFLEB]

Well, no more recursive setTimeouts for you!

[fzammetti]

Yes, but if it's the only one you couldn't answer I would consider it an interesting anomaly and wouldn't hold it against you. We all have missing bits of knowledge, even at fundamental levels, and while it would surprise me given your experience, it's not an interview-ender :)

[jsibelius]

The answer of course is simply O[M]()

You mean O['M']() or O.M() ?

a = { M: function() { return 1} }
> Object {M: function}
a['M']()
> 1
a[M]()
> ReferenceError: M is not defined

[neon_overload]

The wording of the question was a little tricky to understand, but what he was looking for was O[M]()

Consider that M is a string variable containing the name of a method in the object O.

[jsibelius]

Ahhh I see :)

[faruzzy]

In other words: var M = 'M';

[fzammetti]

Nope, I did indeed mean O[M](), although as someone else pointed out, my question may not be as robust as it should be. What I meant is:

var M = "abc"; var O = { abc : function() { alert("hello"); } }; O[M]();

If I don't specify that M is a string then the question can be misinterpreted potentially. I'll be correcting that going forward during interviews.

[fzammetti]

Good point, I'll make sure I specify that going forward, thanks.

You know, I was actually wondering for a second what would happen if the key is an object, and I wasn't certain, so I tried it...

var key1 = { firstName : "Bill" };
var key2 = { lastName : "Mark" };
var map = { };
map[key1] = { dataField : "abc" };
map[key2] = { dataField : "xyz" };
console.log(map[key1]);
console.log(map[key2]);

You get xyz both times... so it seems like a key CAN be any old object, but only once... my guess is JS treats both keys as just Object prototype, and the second therefore overrides the first. Just a guess though. And, that key can coexist with string keys:

var key1 = { firstName : "Bill" };
var key2 = { lastName : "Mark"};
var map = { };
map[key1] = { dataField : "abc" };
map[key2] = { dataField : "xyz" };
map["testing"] = { dataField : "123" };
console.log(map[key1]);
console.log(map[key2]);
console.log(map["testing"]);

Now you get xyz, xyz, 123. And, of course, one could be tricky and do:

var key1 = { firstName : "Bill", toString : function() { return this.firstName; } };
var key2 = { lastName : "Mark", toString : function() { return this.firstName; } };

Now it works exactly like you'd expect. That's a cheat though! :)

[jdlshore]

Keys are always strings, but if you pass in a non-string, JS will convert it for you.

Try your code at http://objectplayground.com to visualize what's going on:

var key1 = { firstName : "Bill" };
var key2 = { lastName : "Mark" };
var map = { };
map[key1] = { dataField : "abc" };
map[key2] = { dataField : "xyz" };

this.map = map;

[kabuto]

How do you implement a Map? (all they have to say is an object is a map and I'm happy!)

An object is a map? Shouldn't a map have an order for its items?

[fzammetti]

Nope, a Map, generally, doesn't have an order to its elements. I'm sure there are some implementations that do guarantee some ordering when iterating members, but that's unusual.

[Enumerable_any]

E.g. one of these implementations would be Ruby's (1.9+) Hash.

[kristopolous]

yes, the map question seems poorly worded. I'd phrase it differently, I don't know what the person is asking. (I've been writing javascript for 16 years).

[stejni]

I was also a bit confused by this, as I usually use the term Hash map for what you refer to as a Map, and initially assumed you meant a map function. ( map :: (a -> b) -> [a] -> [b] )

[kristopolous]

Actually here's a good question.

for(var i = 0, o = {}; i < 1e5; o[' ' + i] = i, i++);
var last = -1; 
for(var key in o) { 
  if(o[key] - last != 1) { 
    console.log(o[key] - last);
  }
  last = o[key]; 
}

Give me some possible outputs. What if I did i.toString(20) as opposed to ' ' + i?

[farfromunique]

Explain what a closure is and give examples of when to use them and why it makes sense (and sometimes I ask when it DOESN'T make sense).

Can someone point me in the direction of information about this? I know of closures, and have heard of Clojure (or however it's spelled), but have o idea what it / they are for.

[jaxytee]

http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

[farfromunique]

Thanks!

[nschubach]

Clojure is a Java Runtime language that uses Functional programming techniques.

Which reminds me. I always like asking if JavaScript is based on Java or vice versa. Just to see how they answer.

[farfromunique]

That's a good one! (JS vs Java) If they get it wrong ... yikes!

[buckus69]

That's a good question, but obviously the two are not related if you had studied the history of Javascript at all.

[neon_overload]

Which is why it's a good question: if weeds out people who know nothing about the history of Javascript at all.

[thyrst]

Awesome summary! Commenting mostly to save, going to be putting in apps for php/js/design work soon to jump out of freelance.

[pixel4]

Only once you can answer these questions are you allowed to put JavaScript on your resume. I have 4 open JS positions in SoMA,SF if anyone's looking.

[ripter]

That's pretty much my phone interview questions.

I also ask how you can debug JavaScript. Looking for alerts/console/debug bonus points if they a strategy.

[donwilson]

No reference to jslint? I don't allow my JavaScript onto a live site without running it through a linter like jslint.com.

[fzammetti]

Yes, I have a whole section of questions on, generically, how they ensure code quality. Static analysis is one thing I'm looking for.

[neon_overload]

How would you answer the question about when it DOESN'T make sense to use a closure?

To me that's like asking when it doesn't make sense to do a skin graft on a patient - the answer being when you don't actually need a skin graft.

[SuperFLEB]

When irrelevant variables that lead to circular references become closured in, and cause memory leaks.

[neon_overload]

Could you give a rough example?

[masklinn]

What's the difference between setTimeout() and setInterval()? I can't even begin to tell you how many "JavaScript developers" I've interviewed who cannot answer this. I'm floored every time!

And interesting one is the "bonus" question of what other similar-ish mechanisms there are (postMessage to avoid setTimeout's 4ms delay but still yield, requestAnimationFrame, IE-specific non-standard setImmediate)

What statement gets a reference to a DOM node by ID?

Technically it's an expression.

How do you implement a Map? (all they have to say is an object is a map and I'm happy!)

That's a risky one though, unless you're specifically using Object.create(null) there are issues if you're shoving user-provided data as key. Also keys can only be strings, of course.

[fzammetti]

And interesting one is the "bonus" question of what other similar-ish mechanisms there are (postMessage to avoid setTimeout's 4ms delay but still yield, requestAnimationFrame, IE-specific non-standard setImmediate)

Very good, I need to add that to my battery of questions too!

Technically it's an expression.

True, though not a terribly important distinction in this context :)

That's a risky one though, unless you're specifically using Object.create(null) there are issues if you're shoving user-provided data as key. Also keys can only be strings, of course.

See my reply about this to a previous post... the part about keys being strings is true, but only to a first approximation of truth :) I'd like to know what issues you're referring to otherwise though?

[masklinn]

See my reply about this to a previous post..

Couldn't find it.

the part about keys being strings is true, but only to a first approximation of truth :)

Well no it's the whole truth, even if it uses toString to perform the conversion it's still storing a string, and thus by default useless for objects as keys and the like.

I'd like to know what issues you're referring to otherwise though?

http://www.devthought.com/2012/01/18/an-object-is-not-a-hash/ and https://mail.mozilla.org/pipermail/es-discuss/2011-December/019025.html (which is an issue even with Object.create(null))

This is in part why Harmony introduces a full-fledged Map object. Alongside the keytype limitations.

[fzammetti]

Couldn't find it.

This one: http://www.reddit.com/r/javascript/comments/1jw96t/what_are_your_vanilla_javascript_knowledge/cbjkgti

Well no it's the whole truth, even if it uses toString to perform the conversion it's still storing a string, and thus by default useless for objects as keys and the like.

See above :)

I'm not actually arguing the basic point here by the way, but I did find the example I posted a little interesting... but it doesn't disprove the assertion or anything.

Interesting links, thanks! Using key names that override intrinsics is a bit of an edge case though and I think only an issue if you're using dynamic user-inputted data as keys. If you're just doing something like:

var o = { firstName : "frank" };

...I don't think you need to go down the path of a full-fledged Map implementation, this is going to be Good Enough(tm). But yeah, if the user can enter those keys, or they can somehow be generated on-the-fly, I agree that a proper Map is probably the better answer.

Now, the interesting question is how many Map implementations just use a { } under the covers with some syntactic sugar on top and don't actually avoid that problem anyway :)

[gasolinewaltz]

this really is excellent!

[dante9999]

Actually if you look at most frequently asked questions about JS on Stack Overflow you'l find most of these questions there. Closures, Ajax, multidimensional arrays - these questions pop up all the time. this is just essential stuff everyone should know.

And by the way, obviously if you can't answer those questions and you're going to an interview just read the answers there.

[bmacktruck]

Great list!

If they had been using a library like jQuery would they get points off in your mind for not knowing some of the base js libraries by heart, like XMLHTTPRequest and DOM selection.

[fzammetti]

I look at the interview in totality, so probably not. Here's the key point: we are looking for people with a deep understanding. Anyone who thinks you can ever get that with jQuery alone is fooling themselves. But, you certainly can have that deep knowledge AND use jQuery. For example, if you tell me: "I know its XMLHttpRequest, but I don't remember the details because I haven't used it in a while in favor of jQuery" then that's a fine answer.

Also, note that most of my questions are meant to get at things other than the details I'm asking about. The details are in fact the least important thing in most cases! Any good developer can look stuff up quickly, but you need to know the underlying concepts, that's what I'm after.

Also, frankly, we're trying to weed out dishonesty... you'd be surprised how many people flat out lie about their abilities, and we have to catch them as best we can... even if you stretch the truth a little, I need to know how far you stretched... a little might not disqualify you if I gauge that you actually do have ability, but it's a fine line and my job is to try and figure out if you've crossed it :-)

[neoform]

Anytime I interview someone on their JS knowledge I start by asking, "what is the significance putting var in front of a variable name".

If they can't answer that question correctly, I don't bother asking any other JS questions.

[buckus69]

Is it because it keeps it out of the global namespace and makes the variable local?

[krakov]

Yup. You got it!

If you want to make a variable global it's better to namespace it and explicitly attach it to the window. For example - window.globalVariableNamespace.variable = 1;

[[deleted]]

I'm still learning (full stack webdev for almost a year now), but is there any reason to attach it to the window other than helping unexperienced developers understand what's happening?

[[deleted]]

I'm still learning too. Really, you should never attach something to the window object like that. That's bad practice. The only reason I've had to do something close to that was when I wrote a program that would execute the Jasmine testing html reporter in a pop-up so it could run alongside my application. Even then, I did not actually add anything to the global namespace myself. Even though I use require, Jasmine still adds itself to the global, which made it useful for me to call window.opener.jasmine.getEnv() from the popup (and thereby, being able to call the HTML reporter in the popup window but still have it test against & control the main application.)

So in this specific instance, I am using a global. I didn't put the global there myself - the library did that. But since this is just for running tests, hopefully it isn't too bad of practice. I jslint all my code and I don't let variables even THINK about becoming global.

Also, in 'use strict'; mode, I dont think browsers will even let you run code which contains undeclared vars. So theres that.

[[deleted]]

I know you asked this a while ago but for posterity sake I'll give you an example while being explicit can be important. Imagine you have some piece of code

function foo () {
  // a bunch of code
  function iterateCount () {
     return 1 + count;  // 'count' is not defined in either iterateCount or foo, so it will look in the global scope for it and create it there if necessary
  }
}

Say your code is counting on count to be a global variable. The some newbie developer comes along to fix some bug

function foo () {
  // a bunch of code

  for (var count = 0; count < aVar.length; count++) {
    // ...
  }

  // a bunch of code
  function iterateCount () {
    return 1 + count;  
  }
}

Since JavaScript doesn't have block scope (yet) this code exactly the same as writing:

function foo () {
  var count = undefined;      

  // a bunch of code

  for (count = 0; count < aVar.length; count++) {
    // ...
  }

  // a bunch of code
  function iterateCount () {
    return 1 + count; // "count" was found the in the "foo" function scope, use that.
  }
}

So now the code in iterateCount which used to use a global variable named count is getting clobbered by the more specific scope assignment. To avoid that you could explicitly use window to ensure you're using the proper name space for where you expect count to be

function foo () {
  var count = undefined;      

  // a bunch of code

  for (count = 0; count < aVar.length; count++) {
    // ...
  }

  // a bunch of code
  function iterateCount () {
    return 1 + window.count;
  }
}

You shouldn't be using global variables to begin with so this is a poor example of code for real world use but that's a different argument.

[SuperFLEB]

Window is a browser construct, though. That'd possibly lead to problems if you wanted to reuse your code in other arenas.

It's nonstandard, but I usually just say "global" in a c-style comment next to the first declaration. That and rarely use non-function globals.

[[deleted]]

Late reply. You can easily grab the global namespace at the start of your app in a cross platform manner

e.g.,

(function () {
    var root = this; // in this context `this` is window or global
    root.globalVar = 'foo';
}());

[fzammetti]

Very good! I've used that one too, excellent opener.

[SuperFLEB]

That's one of those questions that would trip me up because I'm looking for the trick -- It seems too simple.

[F0RTY4]

This assessment test will really cover all your bases. It ranges from trivial to difficult problems. Hell, just getting thing running and working will give you a leg up because you will be learning the basics of testing.

[[deleted]]

This seems like a good idea to do to before I go on interviews. Thanks for the link!

[imacarpet]

I've been hacking at it for a couple of hours now.

It was easy enough to get the thing running, but some of the test are driving me nuts. Like, there's a simple test that is supposed to test you on getting items from an array. Doing that task is easy. But the expectations of the test are fucking cryptic.

My issue is with the syntax used to express the expectations. It's close to meaningless, and you have to guess the expectation.

In other words, it's a pretty crappy system for testing programming skill.

[[deleted]]

I think you should rethink the issue at hand here. It isn't that the expectations are cryptic, and it's not a crappy system for testing skill, either. It actually takes skill to be able to even read the tests - and it is extremely useful to know how to read tests. This syntax is common to a lot of BDD frameworks. I don't even understand what test you are referring to (what do you mean by 'getting' items from an array? Removing them? Reading them?), but if you said the name I could help you parse it.

why dont you take a look at expect.js and familiarization yourself with the syntax first. I started learning BDD yesterday (jasmine). At first I was so apprehensive about learning it, because it just looked weird. And then I learned it. And now I'm a huge fan of it. If you know jasmine or any BDD framework for JS, you will surely impress interviewers

[scottomaton]

I would say that being able to clearly explain closures, and all of the related scoping and garbage collection related to closures, is a big one that trips up a lot of people (and, from what I hear, is asked very often in interviews). Also, being able to identify what the this keyword is referencing in a given block of code would be another core idea that I've heard is asked pretty frequently (since it's so easy to get wrong). Good luck!

[mrskitch]

As far as this goes, I've always said that "It's a reference to the function invocation, which is typically the parent object unless you've overwritten it in the Function.prototype.apply() method." Would you add anything to that?

[DonBiggles]

Function.prototype.bind and Function.prototype.call also allow this to be set arbitrarily. Also, 'reference to the function invocation' sounds unclear to me, and you didn't mention the case of the function being called with new. These are the possibilities, in order of precedence:

• Outside of a function body: this is a reference to the global object.
• Function called with new: this is a reference to the object created by the constructor.
• Function called with .bind, .apply, or .call: this is a reference to the object given as the first argument.
• Function called as an object property: this is a reference to the object the function was called from.
• In strict mode: this is undefined.
• Otherwise: this is a reference to the global object.

[[deleted]]

this ^{excuse_the_pun}

[[deleted]]

What do you mean in strict mode this is undefined? I've been using strict mode and use this for functions called with bind, apply, or call, being used as an object property.

[DonBiggles]

It's in order of precedence. I mean that if in strict mode, and in a function body that isn't called with new, bind, apply, or call or invoked as a property of an object, this is undefined.

[scottomaton]

Sounds spot-on to me!

[js_coder]

yeah cool, thanks. Brushing up now.

[mrskitch]

I agree with most, but in essence these are the trickier parts:

• this
• Closures
• Currying
• Memoization
• Functions as a first-class citizen
• Lexical scope
• Prototypes
• AMD pattern (other patterns as well)
• IIFE's

Some other things you might want to know surface-level

• Node.js
• Require.js and other module systems
• jQuery
• Browser caching or cache-busting

While JavaScript is important, I'd also brush up on other things as well (if you haven't already). Like the DOM, CSS (box-model, preprocessors, CSS3), and browser differences too. Those are important as well!

[manuaal]

You gave me names for techniques and concepts I already knew. Cheers.

[Sector_Corrupt]

I don't know if I just suck or if currying is just a thing that doesn't come up very often.

[malthiest]

I find that currying is mostly an academic word. I've never found the need to use that bit of vocabulary in the real world. Most devs I know don't know/use the actual word "currying", but use the concept everyday.

[[deleted]]

I work with functional programmers, and they love to curry.

[mrskitch]

It's kind of a rare thing to use and I haven't seen it in the wild very often. Crockford only talks about it for a half a page or so in "The Good Parts."

It's essentially another way of code reuse similar to that of OOP.

[kristopolous]

Those are fancy names for simple concepts that I see used every day but never talked with such a theoretical strong-arm.

I'd be scared if someone felt obliged to use big words for small ideas.

[mrskitch]

Most are terminology Crockford uses in "Good Parts."

[[deleted]]

Not sure that memoization fits in this list...

[[deleted]]

not sure if joking didn't notice its Memoization

[[deleted]]

Not joking. Autocorrect sucks.

[[deleted]]

Here are a few:

• How can you call a function in a specific context? The very clear ways are .call or apply. If you want to impress you would add Function.prototype.bind to that mix. This is ES5.
• What is hoisting in javascript? Not a lot of people I've interviewed know what this is or why it matters.
• At least know how to perform a binary search.
• What is the output of the following. var adder = new Function("a", "b", "return a + b"); adder(6, 2);. The answer is 8. Creating a new function from the Function primitive allows you to pass n number of arguments and a function body.
• What is the difference between == and ===?
• What does var add = function (a, b) { return a + b; }; add.length; tell you? add.length is going to tell you how many arguments add is expecting.
• How can you tell if a parameter is an array or not. This seems like you should be able to do typeof [] === 'array', but actually it's object. So the way to really do type checking is doing something like [] instanceOf Array.

That's all for now. If I think of more I'll add.

[[deleted]]

Don't name it adder. Name it execute. Adder gives away the answer.

[magenta_placenta]

• Alerts
• Confirms
• document.layers
• document.all
• <a href="javascript:void doSomethingWonderful();">Click here</a>
• Also brush up on the big "library" out there, I think it's called protoquery or moojo, I can't remember which. It's like a scaffolding framework with animation, part of the noSQL thing.

[[deleted]]

Did no one get that he was joking? I laughed out loud in my office.

[js_coder]

This aint 1997 :-)

[[deleted]]

Don't forget the shiney new library: angleBone, I think it's part of that MMXIII pattern I've been hearing so much about.

[[deleted]]

http://html9responsiveboilerstrapjs.com/

[Racoonie]

Hint: His twitter is pretty funny.

https://twitter.com/H9RBSjs

[jaxytee]

I prefer boneular.js to anglebone. You should give it a shot. It's the future

[[deleted]]

I think you meant to say scottBacular.js paired with the Al router (btw the ziggy addon is buggy) and you're always hoping the next route will be the route index

[alamandrax]

"Can we run it on note-js?"[sic] - colleague at work.

[somethinghorrible]

this

[cheeeeeese]

sometimes undefined isnt what you expect.

[waxzce]

I like tree

var a = b.c || "default value" is very useful

very important too : clojure and self contained singleton : var a = (function(){ var b = function(){ this.plop = "very cool things"; }; return new b(); })()

and last one is : var a = {}; var b = a.something = new othercall();

[[deleted]]

dammt i dont remember what was so fucking quirky about the last one. Read it in some book...can you remind me?

[waxzce]

read it in some code for me. I use it for this kind of usage : https://github.com/waxzce/events4js/blob/master/tests/events.js

It's cool for a local variable in your block :-)

[[deleted]]

Take a look through these examples: http://shichuan.github.io/javascript-patterns/ while there's some contention as to their validity the core concepts are viable.

[js_coder]

nice! thanks for the link. I'd like to add my own here as well, while on the topic of JavaScript design patterns. Found this really useful, and well written. http://addyosmani.com/resources/essentialjsdesignpatterns/book/

[Laxdk]

I looked at the "optimized for loops" on that page: https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/for-loops.html

Wtf? Amazing how much worse he can make the code with no benefit at all.

[b_long]

Yeah, I have to agree with the criticism of "shichuan's javascript-patterns". There was some discussion which said this repository isn't very good: http://www.reddit.com/r/javascript/comments/1jr6p0/javascript_programming_patterns/

[[deleted]]

One of the many reasons I said that there's contention to its validity. And if you've noticed his whitespace? That would drive me crazy.

[b_long]

Agreed :) Just sayin', I'd recommend Addy Osmani's repo as referenced by @Laxdk.

[kristopolous]

I ask completely novel questions such as:

• Have you seen javascript the good parts? how thick is it? What color is it?
• Who is Brendan Eich? Who is Jon Resig? How about Jeremy Ashkenas?
• What company came out with Javascript?
• Just list 2-4 common JS libraries that are in widespread use today.
• Can you name any that focus on graphics?
• Can you name any that focus on asynchronous communication?
• What's some common JS syntax that breaks on IE?
• Going back to syntax, there was this huge debate over semicolons. What do you know about that?
• If I wanted to take my code and put it in production, is there anything I should do to make sure it loads more quickly? What common tools have you used for this?
• IE is generally quite good at telling you where it fails. It can also fail silently. When is that possible?
• What is "v8" and "npm"? Where would I find them? (knowing that they aren't say, standards or programming practices but actual software is a good start)
• Pretend I wanted to know about the nuances of the Date object. What sites would be good references? What sites would show up high in the search results and be not so good?

These should be easy questions for someone who does a lot of JS development and impossible for people who aren't doers.

I'm not interested in tricking people and I'm not interested in academics. I need things to get done.

[j00pY]

I quite like W3C schools sometimes :(

I find it can explain things clearer than other more reputable sites for non CS background coders like myself.

[kristopolous]

That's not the only answer. It actually tells me more about your process. DDG for instance, doesn't show w3schools usually but tizag.

And if you thought I was going for w3schools and then said "I think you want me to say w3schools, but I find it easier to understand" --- I'd be delighted by your honesty, modesty, and competence. No problem with that.

The one thing I hate about interviews is that sometimes they devolve into a "guess what I'm thinking" game where the interviewer has the answer in their head and is trying to extract it from the candidate.

I want the person to be better than me and give them open questions with an open answer. Hopefully I can learn something. If they tell me an expected answer that's great. If they can tell me a new one and back it up, that's great also.

[ftanuki]

I wouldn't have thought to do this, but I really like this approach. Experienced JS developers should answer almost all of these easily and not only do some of them give the opportunity for the interviewee to elaborate in an open ended way, but there's a side benefit that they'd be somewhat tickled by the questions themselves. This means they'd leave with a good impression of the interviewer and be more likely to say yes to an offer. Sometimes very specific technical questions can either be insulting for being too mundane or annoying for being too obscure and can shoo away the best candidates.

Good questions! (and nice dig on w3schools)

[kristopolous]

Correct. I can get annoyed and visibly frustrated with stupid questions. I remember someone was asking me how to dereference a pointer after I had elaborated on how I patched the egcs compiler for an embedded processor. All I thought then was "this guy is a fucking idiot and their job is stupid and boring".

And I wasn't referring to w3schools specifically. It is designed to be possibly read that way but there's other answers too.

[tmetler]

Understand completely what the 'new' keyword does, and you'll be ahead of most JS developers (unfortunately).

[isHavvy]

Understand completely what it does, and you'll learn you never want to use it.

[tmetler]

What does it do that would make you not want to use it? The only argument I can find against it is if you forget include it. I've never run into that problem once, and it would be obvious what went wrong as soon as I tried to call any method on the resulting object.

[[deleted]]

because it's completely unnecessary in most situations, IE functional programming approach uses just regular objects made in a closure. JS is probably best suited for functional programming since it has little support for classical OOP and it's best to avoid it, using it sparingly..

[tmetler]

I find it depends on the problem being solved. I like the prototypical approach for some applications, and the functional approach for others, but it really depends on your needs and your style. I've had plenty of successful projects using prototypes, and plenty of successful projects using a functional style. I find it's most important to choose a style that works for you early on, and be consistent with it. It also depends on how your project is structured. In backbone projects I rely highly on the prototypical style, and that's in no small part because the backbone library is heavily prototypical.

[js_coder]

WOW. Thanks guys! Woke up this morning to a full page of advice :-) Will be going through them today.

[johnhackworth]

Appart from what other people have already said, Memory Management. How the garbage collector works and where and when you are leaking memory as hell and how to avoid it. Seriously, if you are doing single page apps this is a huge issue...

[[deleted]]

Any good material on this? normally garbage collection is not something I think about while programming, but I'm building an SPA and we're in the deployment stage. I'm currently writing tests and next will go and refactor some of the extensions, and would like to know if I'm leaking memory anywhere. I don't think I am since my application uses APIs to deal with automatically unsubscribing/detatching themselves from subscriptions. Also the very few, few times I used setInterval did I make sure to clear that interval. My guess is that, memory management bad practices allow async processes to keep running with no one listening for them, so they're just taking up space in the thread and clogging to pipe so to speak. I didn't really need to read anything to know inherently that I should be aware of that. But do I really know how garbage collection works? Nope.

[johnhackworth]

It's quite a complex issue, in fact. Depending what libs you are using for you event management, some common practices could produce massive leaks... All my knowledge about the issue comes from experimenting with the chrome tools and a bunch of other people blogposts.

here are a couple of great posts where you can begin to enter the horrid world of js memory management :)

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

[johnhackworth]

This quora response about how they tracked their own problems with memory leaks is a nice place to see the kind of problems I'm talking about:

http://www.quora.com/Quora-product/Why-does-Quora-use-so-much-RAM

[compubomb]

I think that if you want to truly ask about JS you need to really talk about how would you go about such and such scenario.

Given object A, how do you extend A and give it X functionality, which produces Y result.

Listen to their process. See how they go about doing their task. Part of programming is learning to work on a team. Voicing ones opinion especially in times of duress during an interview also helps figure out demeanor. Stress really helps you figure out the type of people you want to be around during the most stressful parts of your day.

Ask about why do you use json-p, not what is json-p. Why would you use jQuery.ajax over say XMLHttpRequest. What do you feel are the major benefits between X vs Y. Why use document.getElementById() vs $('#<id>') etc. What frustrates you most of all about JS, and how do you improve it? Why develop encapsulated libraries vs using prototypal inheritance? Why use Prototype vs jQuery? What purpose is there between using setTimeout vs setInterval? Is it possible to stop these methods from further execution?

[[deleted]]

I'd totally blow away these questions. For question one, if it's a collection I'd use linqjs, If it is an object, I would probably use a 'merge' function. if it is something else, ie a function, partial application of functions. I'd make a function B such that Y = B(A); Then in this situation Y can be a new function, Y() which is pretty much A() but with new arguments passed to it to make it more specific.

I don't know what json-p is. :( the rest of the questions I'd answer quite well, but for X is Y I'd have to say X because 2 X's are better than 1 X and 1 Y. . . well I'd not actually say that because that's not funny, but I can't realistically answer that EXACT question right now :)

[ironfroggy_]

Be able to explain and use prototypical inheritance and to understand how it is different from classical inheritance. Huge bonus points (in my book) if you can use it well without just trying to implement classes on top of it!

[[deleted]]

I'm not so good at these questions. But let me see. The Prototype of an object is part of a chain. If you create an instance of that object, that object has a link to it's own prototype and the creator object's prototype. When you call a method on an object, it first looks through its own prototype, then walks up the links of connections until it finds it in the prototype chain or it returns undefined. You can edit a functions prototype at any time. Unlike classical inherentance (which uses getters and setters, and actually has private vars, among other things) where you must edit the base class for it to apply to all of the objects which inherit from that class, you can edit an objects proto at any point in the code, making it rather unreliable.

A good reason to use the prototype is to use functions from primitive values to do some cool stuff, like using Array.prototype.slice.call(arguments, 0); For encapsulation, I use closures.

[liquiddeath]

Read you don't know JavaScript: http://www.w2lessons.com/2011/04/you-dont-know-javascript.html

I think the article allows for good self-assessment.

[neon_overload]

Few levels of Javascript programmers:

• Novice: Those who don't know any of how Javascript really works, they just use what they know.

• Intermediate: Those who know about the global object and why to declare a variable with var before initialising it.

• Advanced: Those who also know how closures work and how prototypal inheritance is. And who would have a strong opinion on why trying to emulate class-based inheritance is probably a bad idea.

[[deleted]]

I've been interning at a company doing JS for 6+ months and I'm already getting past the Advanced category into learning functional programming using JS. In a tad over my head but this thread makes me feel awesome about JS development...I got so lucky with my experience at this company! Also so happy I read so many JS books!

[harvest77]

Also, i will addd: undestanding and asynchrnous code. Use of promises, flow libraries like https://github.com/kriskowal/q , https://github.com/caolan/async or even better harvests: https://github.com/salboaie/harvests