Explaining JavaScript and this to people.
-
In all fairness, I think I know why JavaScript can be such a pain to learn. It seems mainly due to piss-poor over complicated explanations online using different terminology than the rest of the world. I just came across another site doing just that. Since someone needs to stand up for JavaScript on CP and right some wrongs I submit to y'all a proper explanation of what was trying to be explained on this site that shall remain nameless. One of the age old confusions with JavaScript has been dealing with the
thiskeyword. It's actually pretty simple to understand, provided you find someone who isn't trying to act smart by over complicating crap. If you've ever found yourself wondering why things aren't working the way you'd expect from a different language, well here's the real explanation of it without the hype. Given this code...// in C++, C#, Java, PHP, etc. "this" is seen as an instance of the current object
// same thing in JavaScript, except not everything is an object with itvar fruit = 'Orange';
window.fruit = 'Apple';// unlike other languages, in JavaScript we can invoke this in more ways than one
function explainThis () {
alert(fruit + ' ' + this.fruit);
}// the window object is global by default, so calling explainThis as a function in global scope
// means that when "this" is used in it, it will point to the current object, which is windowexplainThis(); // shows Orange Apple
// if we treat explainThis like an object instead, then the current object in scope of the alert
// becomes the function itself since it's now an object calling the alert instead of a functionvar stuff = new explainThis(); // shows Orange undefined
In JavaScript
thisis simply the context of the current object. Calling something as a function doesn't create a new object in scope, butnewing that sucker up does. That's all there is to it. Forget about the kiddies online trying to make this sound more complicated than it is. If this was bugging you, then I hope it helps. I just felt the need to show JavaScript some love since it really is a nifty language. You may now return back to your normal lounging.Jeremy Falcon
I think you missed the point that it's fashionable to rip on JS because you "should" be using TypeScript.
#hipstercode
"There are three kinds of lies: lies, damned lies and statistics." - Benjamin Disraeli
-
Marc, that's a lot of stuff to go over man. At lot of these points are mainly due to design concerns and just being old and resistant to change. ;P Forgive me, but I'll have to skim over some of this stuff, but will address some points
Marc Clifton wrote:
- my bias to what I expect. I experience this with Python as well. Anything from differently named functions for string manipulation to the whole abortion called the DOM.
It's an object representation of what's displayed. I'm not sure how it's an abortion. About the only thing I can see with that is old skool compatiblity issues. You can blame Microsoft and Mozilla for that. They didn't give two flips about each other. But those days are gone for the most part. Life is better.
Marc Clifton wrote:
- too many strings.
$("#foo")
Marc, we're professionals man. Come on.
Marc Clifton wrote:
- Standards hell: For example, single quote or double quote:
$("#menu").jqxMenu('close');
Most web languages support both. Can't blame JavaScript for that.
Marc Clifton wrote:
var parentItemText = $($($("#projectTree1").jqxTree('getSelectedItem').parentElement).children("div")[1]).text();
Clearly, you're looking at code written by a 5 year old that doesn't know anything about CSS selectors or jQuery.
Marc Clifton wrote:
Should I do that or not? Performance penalty vs. readability? Is it more readable? Will it confuse someone who has to maintain the code.
Unless you're willing to refactor everything, then yeah that's nifty. The problem here is the design. Back in the olden days, JavaScript was tightly coupled with the DOM. Those days have changed man. I'm not saying it doesn't exist, but it's not nearly has bad as the olden days. Dealing with JScript or VBScript as no different though. It's just the way web dev was for years, and it's not really that much different in concept than XAML and people using ViewModels poorly.
Marc Clifton wrote:
Why do I do this? So I can have a nice function named "getProjectId" that tells me exactly what is going on, without passing in a string and without writing the abortion that looks like this:
Oh Marc, you're having fun with this aren't you? :rolleyes:
Personally, I find having two acceptable string delimiters useful. If you're building a string that needs to contain double-quotes, you can use single-quotes to delimit it, and vice versa - avoiding having to use an escape sequence in many cases, and improving readability. My gripes with JavaScript are many - but this isn't one of them. Douglas Crockford enumerated them well: Bad Parts: Appendix B - JavaScript: The Good Parts - O'Reilly Media[^] Some of these are remedied in ES6, as detailed here (5 JavaScript “Bad” Parts That Are Fixed In ES6 – freeCodeCamp[^]), but not all mainstream browsers support all of these yet.
"If you don't fail at least 90 percent of the time, you're not aiming high enough." Alan Kay.
-
Chris Maunder wrote:
Now explain closures and you'll have everyone halfway there.
You'll hear 40 million different definitions online about that. And most of them try to sound smart, but put simply it's a function within a function. People will try to tack on crap with scoping etc. to that definition when "explaining" it, but that's irrelevant to the core concept of it IMO.
Chris Maunder wrote:
And of course the obligatory WAT video whenever Javascript weirdness is raised.
Ok, that dude is hilarious. I have no idea why the object stuff in JavaScript turned out the way it did, but I can at least explain the
'wat' + 1thing. The plus sign is used for string concatenation and arithmetic. The minus sign isn't. So in the former example, the interpreter assumes you're trying to concatenate using the most compatible types between the two operands, which is usually a string. The minus sign only only used for arithmetic and so it's NaN.Jeremy Falcon
Jeremy Falcon wrote:
I have no idea why the object stuff in JavaScript turned out the way it did
. Because Mozilla were insane enough to give a dev just 2 weeks to write a language. It's amazing it works at all.
"If you don't fail at least 90 percent of the time, you're not aiming high enough." Alan Kay.
-
I think Javascript is such a PITA to learn because: 1) my bias to what I expect. I experience this with Python as well. Anything from differently named functions for string manipulation to the whole abortion called the DOM. 2) too many strings.
$("#foo")3) too many things hard to type. Shift-$. Shift paren. Shift quote. Shift pound. Unshift. The rest of the identifier. Shift quote. Shift close parent. Unshift. Dot. etc... 4) string function name or function or property?$("#foo").val();vs.event.args.innerTextvs. (jqxWidgets example)$("#menu").jqxMenu("close");5) Standards hell: For example, single quote or double quote:$("#menu").jqxMenu('close');6) Insane (or is that inane) document traversal:var parentItemText = $($($("#projectTree1").jqxTree('getSelectedItem').parentElement).children("div")[1]).text();7) Closure madness (ok, once you get familiar with the syntax, yeah, it makes sense):myLayout.registerComponent('Output', function (container, componentState) {
container.getElement().html($("#buildOutputContainer").html().replace("buildOutput", "buildOutput1"));
container.on("resize", (function (c) {
var ct = c;
return function () {
$("#buildOutput1").jqxTextArea({ width: ct.width + "px", height: ct.height + "px" });
};
})(container));
});- div hell. OK, not related to Javascript 9) framework hell. Too many, too complicated, too annoying, too idiocentric. 10) Untestable. Except by trying it manually. Yeah, I've tried a variety of test frameworks, even tried writing my own. They all suck. Should I go on? These are all barriers to: 1) Really grocking Javascript. For example, I just discovered this cool way to eliminate the stupidity of all these strings for acquiring elements by ID or "class" name:
id = new Proxy({},
{
get: function (target, prop) {
return function () { return $("#" + prop); };
}
});Usage:
id.menubar().jqxMenu({ width: 600, height: 30 });instead of this crap:$("#menubar").jqxMenu({ width: 600, height: 30 });Should I do that or not? Performance penalty vs. readability? Is it more readable? Will it confuse someone who has to maintain the code. Versus, say, a server-side replacement like!menubar.jqxMenu...Yet again another kludge that requires that you know something totally outside of pure Javascript to underI think you're conflating JS with web programming. Lets not forget NodeJS baby! 1. While the DOM technically is part of JS, it's only in the context of web programming. 2-7. These were all JQuery, which is not the same as Javascript. I know I speak on behalf of many a JS purist when I say JQuery can die in a hole. 8. Well you already answerd this one. 9. Agreed, frameworks are dumb. But blaming JS for frameworks is like blaming Tim Berners Lee for 4Chan. 10. I don't really have an argument for this one. Obviously I use JS but I've been doing it for so long that *humble brag* I generally don't write code that doesn't work. My IDE tells me when I make a typo though... TBH it seems to me that you have more of a problem with Jquery. And if this is the case, I think we are in furious agreement.
-
In all fairness, I think I know why JavaScript can be such a pain to learn. It seems mainly due to piss-poor over complicated explanations online using different terminology than the rest of the world. I just came across another site doing just that. Since someone needs to stand up for JavaScript on CP and right some wrongs I submit to y'all a proper explanation of what was trying to be explained on this site that shall remain nameless. One of the age old confusions with JavaScript has been dealing with the
thiskeyword. It's actually pretty simple to understand, provided you find someone who isn't trying to act smart by over complicating crap. If you've ever found yourself wondering why things aren't working the way you'd expect from a different language, well here's the real explanation of it without the hype. Given this code...// in C++, C#, Java, PHP, etc. "this" is seen as an instance of the current object
// same thing in JavaScript, except not everything is an object with itvar fruit = 'Orange';
window.fruit = 'Apple';// unlike other languages, in JavaScript we can invoke this in more ways than one
function explainThis () {
alert(fruit + ' ' + this.fruit);
}// the window object is global by default, so calling explainThis as a function in global scope
// means that when "this" is used in it, it will point to the current object, which is windowexplainThis(); // shows Orange Apple
// if we treat explainThis like an object instead, then the current object in scope of the alert
// becomes the function itself since it's now an object calling the alert instead of a functionvar stuff = new explainThis(); // shows Orange undefined
In JavaScript
thisis simply the context of the current object. Calling something as a function doesn't create a new object in scope, butnewing that sucker up does. That's all there is to it. Forget about the kiddies online trying to make this sound more complicated than it is. If this was bugging you, then I hope it helps. I just felt the need to show JavaScript some love since it really is a nifty language. You may now return back to your normal lounging.Jeremy Falcon
-
I am currently writing a road traffic simulator in javascript and both at work and in this project the one thing that makes javascript difficult is scope. Basically the manner in which scope is implemented javascript makes it that much more difficult than it needs to be. That said I have found that programming in javascritpt has made me a better developer because there are so many ways you can do things badly in javascript.
“That which can be asserted without evidence, can be dismissed without evidence.”
― Christopher Hitchens
:laugh: I know what you mean. I do find the more I use JavaScript though the more I like it. It's just where the web is at, so getting can only help ya know.
Jeremy Falcon
-
Thanks man. I totally agree. It's just different is all.
Jeremy Falcon
-
I think you missed the point that it's fashionable to rip on JS because you "should" be using TypeScript.
#hipstercode
"There are three kinds of lies: lies, damned lies and statistics." - Benjamin Disraeli
Probably, but can't go and be a rebel and all and start using that now can we? :laugh:
Jeremy Falcon
-
In all fairness, I think I know why JavaScript can be such a pain to learn. It seems mainly due to piss-poor over complicated explanations online using different terminology than the rest of the world. I just came across another site doing just that. Since someone needs to stand up for JavaScript on CP and right some wrongs I submit to y'all a proper explanation of what was trying to be explained on this site that shall remain nameless. One of the age old confusions with JavaScript has been dealing with the
thiskeyword. It's actually pretty simple to understand, provided you find someone who isn't trying to act smart by over complicating crap. If you've ever found yourself wondering why things aren't working the way you'd expect from a different language, well here's the real explanation of it without the hype. Given this code...// in C++, C#, Java, PHP, etc. "this" is seen as an instance of the current object
// same thing in JavaScript, except not everything is an object with itvar fruit = 'Orange';
window.fruit = 'Apple';// unlike other languages, in JavaScript we can invoke this in more ways than one
function explainThis () {
alert(fruit + ' ' + this.fruit);
}// the window object is global by default, so calling explainThis as a function in global scope
// means that when "this" is used in it, it will point to the current object, which is windowexplainThis(); // shows Orange Apple
// if we treat explainThis like an object instead, then the current object in scope of the alert
// becomes the function itself since it's now an object calling the alert instead of a functionvar stuff = new explainThis(); // shows Orange undefined
In JavaScript
thisis simply the context of the current object. Calling something as a function doesn't create a new object in scope, butnewing that sucker up does. That's all there is to it. Forget about the kiddies online trying to make this sound more complicated than it is. If this was bugging you, then I hope it helps. I just felt the need to show JavaScript some love since it really is a nifty language. You may now return back to your normal lounging.Jeremy Falcon
And then the MORON who declares a variable like var window; which in one browser HIDES the window object, in the other it is ignored (a few years back). And your code works in once place, and not the other! OMFG... Otherwise, I actually LIKE javaScript as a teachable language. Just not the environment it lives!
-
Tried the code in a new HTML page using Visual Studio 2017 and Google Chrome. The first alert showed "Apple Apple" and the second "Apple undefined". "Orange" did not show up.
TOMZ_KV
-
Personally, I find having two acceptable string delimiters useful. If you're building a string that needs to contain double-quotes, you can use single-quotes to delimit it, and vice versa - avoiding having to use an escape sequence in many cases, and improving readability. My gripes with JavaScript are many - but this isn't one of them. Douglas Crockford enumerated them well: Bad Parts: Appendix B - JavaScript: The Good Parts - O'Reilly Media[^] Some of these are remedied in ES6, as detailed here (5 JavaScript “Bad” Parts That Are Fixed In ES6 – freeCodeCamp[^]), but not all mainstream browsers support all of these yet.
"If you don't fail at least 90 percent of the time, you're not aiming high enough." Alan Kay.
I totally agree with you there man.
Jeremy Falcon
-
Jeremy Falcon wrote:
I have no idea why the object stuff in JavaScript turned out the way it did
. Because Mozilla were insane enough to give a dev just 2 weeks to write a language. It's amazing it works at all.
"If you don't fail at least 90 percent of the time, you're not aiming high enough." Alan Kay.
:-D You have a good point.
Jeremy Falcon
-
Thanks man. I totally agree. It's just different is all.
Jeremy Falcon
-
And then the MORON who declares a variable like var window; which in one browser HIDES the window object, in the other it is ignored (a few years back). And your code works in once place, and not the other! OMFG... Otherwise, I actually LIKE javaScript as a teachable language. Just not the environment it lives!
Kirk 10389821 wrote:
Otherwise, I actually LIKE javaScript as a teachable language. Just not the environment it lives!
I can see that. I would think that's my biggest qualm with it too, although I extend its environment to also mean the amount of people using it and everyone wanting to put their hand in the pie and make 40 million frameworks that aren't always designed well.
Jeremy Falcon
-
Tried the code in a new HTML page using Visual Studio 2017 and Google Chrome. The first alert showed "Apple Apple" and the second "Apple undefined". "Orange" did not show up.
TOMZ_KV
What browser are you running out of curiosity?
Jeremy Falcon
-
Yup. Don't get me wrong, C is still a favorite language of mine. Always will be, but it's harder to take down the entire OS in JavaScript. :laugh:
Jeremy Falcon
-
Marc's just old. Don't listen to him. :)
Jeremy Falcon
Jeremy Falcon wrote:
Marc's just old. Don't listen to him.
That's actually what I tell my gf. :)
Latest Article - Class-less Coding - Minimalist C# and Why F# and Function Programming Has Some Advantages Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
-
Marc, that's a lot of stuff to go over man. At lot of these points are mainly due to design concerns and just being old and resistant to change. ;P Forgive me, but I'll have to skim over some of this stuff, but will address some points
Marc Clifton wrote:
- my bias to what I expect. I experience this with Python as well. Anything from differently named functions for string manipulation to the whole abortion called the DOM.
It's an object representation of what's displayed. I'm not sure how it's an abortion. About the only thing I can see with that is old skool compatiblity issues. You can blame Microsoft and Mozilla for that. They didn't give two flips about each other. But those days are gone for the most part. Life is better.
Marc Clifton wrote:
- too many strings.
$("#foo")
Marc, we're professionals man. Come on.
Marc Clifton wrote:
- Standards hell: For example, single quote or double quote:
$("#menu").jqxMenu('close');
Most web languages support both. Can't blame JavaScript for that.
Marc Clifton wrote:
var parentItemText = $($($("#projectTree1").jqxTree('getSelectedItem').parentElement).children("div")[1]).text();
Clearly, you're looking at code written by a 5 year old that doesn't know anything about CSS selectors or jQuery.
Marc Clifton wrote:
Should I do that or not? Performance penalty vs. readability? Is it more readable? Will it confuse someone who has to maintain the code.
Unless you're willing to refactor everything, then yeah that's nifty. The problem here is the design. Back in the olden days, JavaScript was tightly coupled with the DOM. Those days have changed man. I'm not saying it doesn't exist, but it's not nearly has bad as the olden days. Dealing with JScript or VBScript as no different though. It's just the way web dev was for years, and it's not really that much different in concept than XAML and people using ViewModels poorly.
Marc Clifton wrote:
Why do I do this? So I can have a nice function named "getProjectId" that tells me exactly what is going on, without passing in a string and without writing the abortion that looks like this:
Oh Marc, you're having fun with this aren't you? :rolleyes:
Jeremy Falcon wrote:
Clearly, you're looking at code written by a 5 year old that doesn't know anything about CSS selectors or jQuery.
You're off by 50 years. :) And this is exactly why Javascript is so hard to learn. There are no (and no good) resources for how to do things other than SO, CP, and dubious forums by 3rd party vendors. Why? Because who the heck is going to write a book on how to do X when, given the multi-dimensional landscape of web development, describing where X is in this trans-dimensional space is pretty much impossible. Granted, all my examples are related to using jQuery and 3rd party frameworks, but it's impossible to disentangle Javascript from those things when doing web development.
Jeremy Falcon wrote:
but the whole $($($($($('#omg'))))) thing can be avoided.
Beats me how to do it. The content of the tree (a jqxwidget) is programatically generated and I haven't figured out a simpler way of getting the text (not to mention the freaking ID) of the parent for a selected node. One option is to represent the tree as a Javascript structure, this would be simple enough to map ID's in the structure to the DOM that jqwidgets creates. And heaven help me if I have to learn one of the Angular/React/etc/ frameworks that jqwidgets claims to support. More obfuscation on top of nebulous indirection. Yup -- I'm an old fart. ;)
Latest Article - Class-less Coding - Minimalist C# and Why F# and Function Programming Has Some Advantages Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
-
Just to give you an idea of where the web is headed, here is some ES2015 code...
import React from 'react';
import {Link} from 'react-router';class Layout extends React.Component {
// this requires that the class fields and static properties plug-in is enabled
static propTypes = {
children: PropTypes.object.isRequired
};render() {
// returned JSX must be within parenthesis
return (
// class is a reserved word in JavaScript so we use className insteadheader here and all
{this.props.children} );}
};export default Layout;
Btw, that's not HTML inside the render method. It's just syntactic sugar to look like it. It gets transpiled down to JavaScript. But the only strings you'll see here are in the imports (which isn't much different than C/C++ includes) and the properties that will be spit out to the browser such as "container-fluid". Well, there is the literal there too, but none of the
$($($($('omg'))))stuff. :laugh: Now, I'm not saying everything is perfect with the web. But new-skool web development (especially as WASM gets more popular) is nothing like old-skool web development.Jeremy Falcon
Jeremy Falcon wrote:
ust to give you an idea of where the web is headed,
Could you provide a translation? That is all but unintelligible. ;) I have two reactions. I'm sure I can learn this, and maybe even like it. On the other hand, I really don't want to.
Latest Article - Class-less Coding - Minimalist C# and Why F# and Function Programming Has Some Advantages Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
-
I think you're conflating JS with web programming. Lets not forget NodeJS baby! 1. While the DOM technically is part of JS, it's only in the context of web programming. 2-7. These were all JQuery, which is not the same as Javascript. I know I speak on behalf of many a JS purist when I say JQuery can die in a hole. 8. Well you already answerd this one. 9. Agreed, frameworks are dumb. But blaming JS for frameworks is like blaming Tim Berners Lee for 4Chan. 10. I don't really have an argument for this one. Obviously I use JS but I've been doing it for so long that *humble brag* I generally don't write code that doesn't work. My IDE tells me when I make a typo though... TBH it seems to me that you have more of a problem with Jquery. And if this is the case, I think we are in furious agreement.
grolarbear wrote:
I think you're conflating JS with web programming.
How can Javascript be separated from web development?
grolarbear wrote:
Lets not forget NodeJS baby!
Yeah. Right. I will never write anything in NodeJS. It's absurd to me to even consider using Javascript for back-end development. Actually it's absurd to me to even consider using Javascript for anything, but there's little choice in that for web development. I do have a choice in server-side stuff. ;)
grolarbear wrote:
These were all JQuery
True. I was realizing that when writing the post. But even if you want jQuery to die in a hole, it's seems so standard (it's pretty hard to find examples that don't use jQuery, particularly examples of 3rd party libs by those very same 3rd parties) and so is again, for web development, entangled.
Latest Article - Class-less Coding - Minimalist C# and Why F# and Function Programming Has Some Advantages Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802