javascript brainteasers

[Walton]

I'm wondering if anyone knows or knows where to find a collection of
javascript "brain teasers" for lack of a better description.
Companies use these types of tests for programmers all the time when
hiring. I've managed to find a few questions here and there.. for
example (i'll leave the following unanswered for your amusement):

*****NOTE -- i'm not interested in answers to these, just curious as
to where I can find some more.

-- When does div.setAttribute('attr', val) not equal div.attr = val?

-- What's the difference between these two statements:
1. var x = 3;
2. x = 3;

-- What's the difference between:
1. !!(obj1 && obj2)
2. (obj1 && obj2)

-- Write a one-line piece of JavaScript code that concatenates all
strings passed into a function:
function concatenate(/* any number of strings */) {
var string = /* your one line here */
return string;
}


-- What do these two examples have in common?

1. var obj = document.getElementById('adiv');
document.getElementById('adiv').ptr = obj;

2. function assignClick() {
var el = document.createElement('div');
function handleClick() { el.innerHTML = 'clicked!'; }
el.attachEvent('onclick', handleClick);
}



I love these things. If anyone can point me to some more, many thanks.

 

[Walton]

Funny, I would be asking the programmers to show me some documentation
they have written, how they code defensively, how they code for edge
cases, how they do testing, how they design extensibility and generality
into what they do.

why would i care how you would hire people? that's not what the post
is about.

You can always get IQ-200 smartie-pants geeks to write clever,
impenetrable, unmaintainable code (the "it was hard to write, it should
be hard to understand" school of coding). I wouldn't employ them.

-- tim

so in other words, no, you don't know where to find any brain
teasers.
thanks

 

[Tim Streater]

I'm wondering if anyone knows or knows where to find a collection of
javascript "brain teasers" for lack of a better description.
Companies use these types of tests for programmers all the time when
hiring. I've managed to find a few questions here and there.. for
example (i'll leave the following unanswered for your amusement):

*****NOTE -- i'm not interested in answers to these, just curious as
to where I can find some more.

-- When does div.setAttribute('attr', val) not equal div.attr = val?

-- What's the difference between these two statements:
1. var x = 3;
2. x = 3;

-- What's the difference between:
1. !!(obj1 && obj2)
2. (obj1 && obj2)

-- Write a one-line piece of JavaScript code that concatenates all
strings passed into a function:
function concatenate(/* any number of strings */) {
var string = /* your one line here */
return string;
}


-- What do these two examples have in common?

1. var obj = document.getElementById('adiv');
document.getElementById('adiv').ptr = obj;

2. function assignClick() {
var el = document.createElement('div');
function handleClick() { el.innerHTML = 'clicked!'; }
el.attachEvent('onclick', handleClick);
}



I love these things. If anyone can point me to some more, many thanks.

Funny, I would be asking the programmers to show me some documentation
they have written, how they code defensively, how they code for edge
cases, how they do testing, how they design extensibility and generality
into what they do.

You can always get IQ-200 smartie-pants geeks to write clever,
impenetrable, unmaintainable code (the "it was hard to write, it should
be hard to understand" school of coding). I wouldn't employ them.

-- tim

 

[Walton]

Then don't tout it as if it's quite normal, - nay, laudable - for
companies to use this as a selection technique.

i don't care if it's laudable or not- it happens, several people i
know, myself included have had to take these tests when going through
a hiring process. these tests aren't designed to test coding ability,
they're designed to test one's ability to think creatively, on their
toes, and outside-of-the-box. obviously, it's not the only part of
the selection criteria for hiring.

Any time. Try the local bookstore - you know, the shelves that have the
collections of Sod-Yokos and other useful items.

no idea what a sod-yoko is.

i guess i should have known better than to post a genuine question to
this forum without expecting a snide remark from some moron looking to
stroke their ego or start an argument because they're bored at work.

for tim's benefit and people like tim who can't seem to focus on the
important subject material in a dialog, allow me to re-post the first
portion of my original post:
--

I'm wondering if anyone knows or knows where to find a collection of
javascript "brain teasers" on the internet. I've managed to find a
few questions here and there..
....
-- see above for the rest of the post --

 

[Tim Streater]

why would i care how you would hire people? that's not what the post
is about.

Then don't tout it as if it's quite normal, - nay, laudable - for
companies to use this as a selection technique.

so in other words, no, you don't know where to find any brain
teasers.
thanks

Any time. Try the local bookstore - you know, the shelves that have the
collections of Sod-Yokos and other useful items.

-- tim

 

[VK]

I'm wondering if anyone knows or knows where to find a collection of
javascript "brain teasers" for lack of a better description.
Companies use these types of tests for programmers all the time when
hiring. I've managed to find a few questions here and there.. for
example (i'll leave the following unanswered for your amusement):

I did not meet such question yet in any test, but that would be a good
sh** check:

Given this first level function - thus not nested in any other
function - running on HTML page:

function demo() {
var MyDIV = document.getElementById('MyDIV');
with (MyDIV.style) {
height = '200px';
foobar = 'foobar';
}
}

1) What style rule will be assigned?
2) What style rule assignment will fail and why? Tip: if you answer
"because it's illegal style rule" then you fail the test.
3) What object will get the "foobar" property?

 

[VK]

I did not meet such question yet in any test, but that would be a good
sh** check:

Given this first level function - thus not nested in any other
function - running on HTML page:

function demo() {
var MyDIV = document.getElementById('MyDIV');
with (MyDIV.style) {
height = '200px';
foobar = 'foobar';
}

}

1) What style rule will be assigned?
2) What style rule assignment will fail and why? Tip: if you answer
"because it's illegal style rule" then you fail the test.
3) What object will get the "foobar" property?

To be sincere: I once failed miserably on all of these questions and
not in some test but in real and rather important coding. That's of
course the most painful but also the most effective way to memorize
things. :-(

 

[Walton]

VK-
thanks for the puzzle. These answers seem obvious at first glance,
but I doubt myself. Especially looking at #2, I would have failed the
test
Embarrassingly, I will attempt to answer (I haven't cheated and tried
any of this in a browser):

1) MyDIV's width will be set to 200 pixels.

2) foobar will fail... for the reason you said I will fail.. the
property MyDIV.style.foobar will equal "foobar", but it's not valid
css and the browser will not know how to render it.

3) MyDIV.style object will get the property foobar.


now, what are the correct answers?

To be sincere: I once failed miserably on all of these questions and
not in some test but in real and rather important coding. That's of
course the most painful but also the most effective way to memorize
things. :-(

very much agreed.

 

[-Lost]

I realize this is just for the sake of providing a "brainteaser", but:

http://www.javascripttoolbox.com/bestpractices/#with

VK-
thanks for the puzzle. These answers seem obvious at first glance,
but I doubt myself. Especially looking at #2, I would have failed the
test
Embarrassingly, I will attempt to answer (I haven't cheated and tried
any of this in a browser):

1) MyDIV's width will be set to 200 pixels.

2) foobar will fail... for the reason you said I will fail.. the
property MyDIV.style.foobar will equal "foobar", but it's not valid
css and the browser will not know how to render it.

3) MyDIV.style object will get the property foobar.

*IF* the style object gets the foobar property/attribute, I imagine it will be undefined.
Which also makes me think the style object does not get that property. I was under the
impression it effectively ignores attributes or properties it has no "recollection" of.

now, what are the correct answers?


very much agreed.

Walton, how about a quick rundown of all your initial "brainteasers?" I am sure there are
a couple I do not understand the finer points of. If you require that I first look like
an idiot before you provide the correct responses, I will gladly post my idea of each.

-Lost

 

[Yorick]

Walton, how about a quick rundown of all your initial "brainteasers?" I
am sure there are a couple I do not understand the finer points of. If
you require that I first look like an idiot before you provide the correct
responses, I will gladly post my idea of each.

True idiots first.

-- When does div.setAttribute('attr', val) not equal div.attr = val?

When the setAttribute method is not supported. Always use the latter.

-- What's the difference between these two statements:
1. var x = 3;
2. x = 3;

Using var, x will be locally scoped, while the assignment sic will set the
value for x at the global level.

-- What's the difference between:
1. !!(obj1 && obj2)
2. (obj1 && obj2)

The first will always return a boolean, the second may return all sorts of
things, like an objx, or null.

-- Write a one-line piece of JavaScript code that concatenates all
strings passed into a function:
function concatenate(/* any number of strings */) {
var string = /* your one line here */
return string;
}

var string = arguments.join( '' );

-- What do these two examples have in common?

1. var obj = document.getElementById('adiv');
document.getElementById('adiv').ptr = obj;

2. function assignClick() {
var el = document.createElement('div');
function handleClick() { el.innerHTML = 'clicked!'; }
el.attachEvent('onclick', handleClick);
}

Lots of bad coding practices. They don't check the existence of the advanced
DOM methods before using them. The first will create a black hole of a
memory leak in IE by making a Javascript variable refer to an HTML element,
and having an (expando) attribute of the element refer to it. The second
piece of code is shouting IE! all over with its shameless innerHTML and its
attachEvent.
I tested none of this, teased my brain and typed this in under five minutes.
Now how do I score, Walt?
Yorick
http://www.yorick.onlyfools.com/

 

[RobG]

True idiots first.



When the setAttribute method is not supported. Always use the latter.


Using var, x will be locally scoped, while the assignment sic will set the
value for x at the global level.

Given that no context is provided for the two lines of code, they
appear to both be in global scope. They both result in the global
object being assigned an 'x' property with a value of the number 3.

However, there are some significant differences:

1. The first will create a global property x before *any* execution
begins, however the value 3 won't be assigned until execution occurs
and the line is reached. The second will not create a property x
until execution occurs, immediately before it is assigned the value 3.

2. Variables declared with var are marked DontDelete, so the delete
operator doesn't work on them. Variables that aren't declared with
var can be removed.

3. The previously mentioned scope restriction for variables declared
inside a function or other execution context (e.g. eval'd code).

Depending on the intent of the question, it might be better to ask
what will be shown in the following alerts:

var x = 3;
delete(x);
alert(x); // 1 Shows?

y = 3;
delete(y);
alert(y); // 2 Shows?

z = 3;
delete(z);
alert(z); // 3 Shows?
var z;


Richard Cornford's response to " var declarations" is significantly
more detailed:

<URL:
http://groups.google.com.au/group/c...d+cornford+var+global&rnum=3#820299f64bb512a0

The first will always return a boolean, the second may return all sorts of
things, like an objx, or null.

No, it wont. The expression will never return an objx, it will only
ever return obj1, obj2 or an error. It will return obj1 if it
resolves to false, otherwise it will return obj2. If obj1 has not be
defined, or if it resolves to true and obj2 has not been defined, an
error will result.

var string = arguments.join( '' );

In Opera and other browsers (Firfox 3?) where the arguments object is
an array, fine. But the ECMAScript Language spec says the arguments
object is a list, not an array, and that's how the vast majority of
browsers implement it. So about 98% of browsers out there will simply
error on the above code.

Using standard javascript, a loop must be used and while it is
possible to do it in "one line", it is impossible to do in one
statement unless a helper function is used (wrapping expected):

var string = (function(a){var x=[]; for(var i=0; i<a.length; i++)
x.push(a); return x.join('');})(arguments);

slower (in some browsers) but shorter (what are the critical
factors?):

var string = (function(a){var x=''; for(var i=0; i<a.length; i++) x
+=a; return x;})(arguments);


if order is unimportant:

var string = (function(a){var x=[],i=a.length;
while(i--)x.push(a); return x.join('');})(arguments);

or

var string = (function(a){var x='',i=a.length; while(i--)x+=(a);
return x;})(arguments);


Now it works in ECMAScript Ed 3 compliant browsers.

Lots of bad coding practices. They don't check the existence of the advanced
DOM methods before using them.

Which is rather ironic considering the above.

I think the author wants you to say that they both create a circular
reference involving a DOM element and yes, probably both exercise IE's
memory leak.

 

[ron.h.hall]

In Opera and other browsers (Firfox 3?) where the arguments object is
an array, fine. But the ECMAScript Language spec says the arguments
object is a list, not an array, and that's how the vast majority of
browsers implement it. So about 98% of browsers out there will simply
error on the above code.

Using standard javascript, a loop must be used and while it is
possible to do it in "one line", it is impossible to do in one
statement unless a helper function is used (wrapping expected):

There's a chance describing it as "impossible" could be a bit too
strong. Try

var string = Array.prototype.join.call(arguments,'');

since under ECMA 262/3 Array.prototype.join is generic.

 

[RobG]

There's a chance describing it as "impossible" could be a bit too
strong. Try

var string = Array.prototype.join.call(arguments,'');

since under ECMA 262/3 Array.prototype.join is generic.

Touché.

 

[VK]

Given this first level function - thus not nested in any other

VK-
thanks for the puzzle. These answers seem obvious at first glance,
but I doubt myself. Especially looking at #2, I would have failed the
test
Embarrassingly, I will attempt to answer (I haven't cheated and tried
any of this in a browser):

OK, and now the right answers:

1) MyDIV's width will be set to 200 pixels.

Right. That's a "warm up" question, normally asked in tests to give to
testees an impression that the whole block is a piece of cake.

2) foobar will fail... for the reason you said I will fail.. the
property MyDIV.style.foobar will equal "foobar", but it's not valid
css and the browser will not know how to render it.

As I said - it is wrong, the block is failed :-(
I don't remember how is it called in the school, but I'm referring it
as the "key knowledge reflex". Everyone remembers that illegal _style
rules_ will fail or be ignored, so
MyDIV.style.height = 'foobar'; // would indeed fail
but it is not the case here. Instead here we are dealing with very
fancy with() implementation mechanics in JavaScript. On attempt to
assign inside with() block the system will search first for
(MyDIV.style)foobar property to assign "foobar" value to it: just as
it was with (MyDIV.style)height
But by by default such property doesn't exist - so the system goes
down by the scope chain in search of an object with foobar property.
This way the right answer is:
foobar = 'foobar'; will fail because the default object within with()
block doesn't have foobar property.

3) MyDIV.style object will get the property foobar.

Now you know that is wrong as well. In search of an object with foobar
property the system will go down by the scope chain. If the last
object in the chain is reached and still no luck then the system will
try to create new property in that last object in the chain. In our
case window host object is the next and the last in the chain, so it
will get the new property foobar. So the right answer is:
New property will be added to the window host object.

In comparison to say VB languages all of above is a hard to believe
non-sense, so here the full demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Test</title>
<script>
var foobar = 'default';

function init() {
var MyDIV = document.getElementById('MyDIV');

with (MyDIV.style) {
height = '200px';
foobar = 'foobar';
}

window.alert(MyDIV.style.height); // "200px"
window.alert(MyDIV.style.foobar); // undefined
window.alert(window.foobar); // "foobar"

try {
MyDIV.style.width = 'foobar';
alert(MyDIV.style.width);
}
catch(e) {
alert(e.message);
}
}

window.onload = init;
</script>
</head>
<body>
<div id="MyDIV">MyDIV</div>
</body>
</html>