new function(){} vs new Function();
javascript
Solution
In the first case, you create a new object and you apply the `Function` constructor.
Return value is a function.
In the second example, you create a new object and you apply an anonymous function as constructor.
Return value is an object.
Problem
I picked up some code and I am just getting to understand the `new Function();`. Going through jslint the `new Function();` was highlighted as unexpected. I started to experiment with it doing the following. ``` var func = new Function(); func.property = "some property"; return func; ``` A replacement. ``` var func = new function(){ this.property = "some property"; } return func; ``` Both work and the second one is neglected by js-lint. Am I doing anything spectacular here, or is this exactly the same? Is it syntactical correct to use `new Function();` like this? Original code excerpt is attached. ``` var $ = (function() { function doCSS(prop, val) { var isSet = Boolean(val), action = CSSStyleDeclaration.prototype.setProperty, args = arguments; if (isSet) { this.each(function(node, i) { action.apply(node.style, args); }); return this; } else if (typeof(prop) === 'object') { this.each(function(node, i) { Object.keys(prop).forEach(function(property) { node.style[property] = prop[property]; }); }); return this; } else { return this.nodes[0].style[prop]; } } // chaining of methods return (function(selector, context) { var q = new Function(); q.selector = selector; q.context = context || document; q.nodeList = q.context.querySelectorAll(selector); q.each = function(action) { [].forEach.call(q.nodeList, function(item, i) { action(item, i); }); return this; }; q.click = function(action) { [].forEach.call(q.nodeList, function(item, i) { item.addEventListener("click", action, false); }); return this; }; q.toString = function() { return q.selector; }; q.css = function(prop, val) { return doCSS.call(this, prop, val); }; return q; }); }) ``` Is any of these two wrong in syntax? EDIT After getting some of the great advice I adapted the code to the following: ``` var $ = (function($) { function doCSS(prop, val) { var isSet = Boolean(val), action = CSSStyleDeclaration.prototype.setProperty, args = arguments; if (isSet) { this.each(function(node, i) { action.apply(node.style, args); }); return this; } else if (typeof(prop) === 'object') { this.each(function(node, i) { Object.keys(prop).forEach(function(property) { node.style[property] = prop[property]; }); }); return this; } else { return this.nodes[0].style[prop]; } } // chaining of methods return (function(selector, context) { var element = context || document; var q = { selector: selector, nodeList: element.querySelectorAll(selector), each: function(action) { [].forEach.call(this.nodeList, function(item, i) { action(item, i); }); return this; }, click: function(action) { [].forEach.call(this.nodeList, function(item, i) { item.addEventListener("click", action, false); }); return this; }, toString: function() { return selector; }, css: function(prop, val) { return doCSS.call(this, prop, val); }, } return q; }); })($); $("#myElement").css({ background: "blue", color: "#fff" }); ``` ``` <div id="myElement">Say Hi</div> ``` It works just fine and looks a lot cleaner. JS Lint is nice to me and I can tackle the next issue.