(Re)Learning Javascript the Right Way

PREFACE

Back when I first learned coding, I consumed knowledge in what can best be described as a haphazard way. My education in javascript typifies this experience. I would mostly copy and paste code and change a variable name here or a DOM element there to get what I wanted. The rest of the code may as well have been written in Phoenician.

Now that I am coding professionally, I find that these shortcuts are catching up to me. When I was in school, the best way for me to learn a subject was to take copious notes. Right now, I am taking a reddit course on how to learn Javascript Properly. The test I am using for the course is Professional Javascript for Web Developers and Eloquent Javascript. As an addendum, I am adding things that made me go hmm and things that I find interesting, magical, and mysterious. It makes me feel like a big kid, learning all over again.

Week 1

<script type=”text/javascript”>
//<![CDATA[
function compare(a, b) {
if (a < b) {
alert(“A is less than B”);
} else if (a > b) {
alert(“A is greater than B”);
} else {
alert(“A is equal to B”);
}
}
//]]>
</script>

Aahh, so that's what the CDATA section meant. If you have inline javascript and want your page to be a valid XHTML document, you must enclose it as below. Some browsers weren't fully XHTML compliant, so further measures had to be taken and that's why you see the js comment tag. Making websites used to be such a painful affair!

function doSomething(){
“use strict”;
//function body
}

Semicolons help performance because parsers try to correct syntax errors by inserting semicolons. Also, minifying js code is nigh impossible without them. This may be why we had so many hard to track javascript problems on our production site when everything worked fine on our local. D'oh!

Always use code blocks even for one line if statements. If you are minifying code, the extra space does not matter

function test(){
var message = “hi”; //local variable
}
test();
alert(message); //error!

VS

function test(){
message = “hi”; //global variable
}
test();
alert(message); //”hi”

Very subtle, yet powerful difference. This is important for closures as recall. Javascript variable scope is weird. However, global variables really shouldn't be defined in a function if you can help it.

var message = “hi”,
    found = false,
    age = 29;

Even though uninitialized variables are automatically assigned a value of
undefined, it is advisable to always initialize variables. That way, when typeof
returns "undefined", you’ll know that it’s because a given variable hasn’t been
declared rather than was simply not initialized.

When defi ning a variable that is meant to later hold an object, it is advisable to initialize the variable to null as opposed to anything else.

Wise Words

var num3 = parseInt(“10”, 10); //10 - parsed as decimal

Always include 10 as the second argument to parse as a decimal

label: statement
Here’s an example:
start: for (var i=0; i < count; i++) {
alert(i);
}

*In this example, the label start can be referenced later by using the break or continue statement.* 

var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;
Here, the location object is used on every line. This code can be rewritten using the with
statement as follows:
with(location){
var qs = search.substring(1);
var hostName = hostname;
var url = href;
}

function doAdd() {
if(arguments.length == 1) {
alert(arguments[0] + 10);
} else if (arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
doAdd(10); //20
doAdd(30, 20); //50