Javascript let keyword

ECMAScript 6 (ES2015) added the ‘let’ keyword. let works a lot like the legacy ‘var’ keyword, but adds scoping capabilities.

Unfortunately, support cannot be retrofitted to older browsers with a polyfill, supported by IE11(with limitations), Edge 12+, Firefox 44+, Chrome 49+, Safari 10+. If you still need to support older browsers or devices you may want to stick with var.

REFERENCES:

Javascript const

Formally introduced in ES6, const was introduced in JavaScript 1.5 and was a Mozilla-specific extension and not part of ECMAScript 5.

Unfortunately, support cannot be retrofitted to older browsers with a polyfill, supported by IE11+, Edge 12+, Firefox 36+, Chrome 21+, Safari 5.1+. If you still need to support older browsers or devices you may want to stick with var.

NOTE: some initial implementations may have thrown different exceptions on reassignment, were not limited in scope, or treated const like ‘var‘.

Name may start with letter, underscore or $ character.

REFERENCES:

JavaScript “use strict”

ECMAScript 5 added Strict Mode to JavaScript. Many of you may have first seen mention of this if you’ve used JSLint. It helps to remember that JavaScript still behaves much like an interpreted vs. compiled language as each browser/parser makes assumptions to execute code faster in different manners.

There are four primary features/goals of strict mode:

  • Throws errors for some common coding issues, that are sometimes obscure but previously didn’t throw an error.
  • Prevents or throws errors for potentially “unsafe” actions (such as gaining access to the global object).
  • Disables functions that are confusing or poorly thought out
  • Potentially code in strict mode could run faster by eliminating mistakes that would make it difficult for JavaScript engines to perform optimizations

Initial support added in FireFox 4 and MSIE10:

WARNING: if you chose to do this at a ‘file’ level, be sure to never concatenate several files together that are not ALL strict.

JS File Example:
"use strict";
function testFunction(){
var testvar = 1;
return testvar;
}

// This causes a syntax error.
testvar = 2;

JS Function Example:
function testFunction(){
"use strict";
// This causes a syntax error.
testvar = 1;
return testvar;
}
testvar = 2;

REFERENCES:

JavaScript radix

The optional radix parameter for JavaScript parseInt(string,radix) function is often overlooked and can lead to some difficult problems when not specified. If you are in doubt, and only use/expect decimal numbers, you SHOULD set it to 10.

This might go undetected for a very long time, until someone decides to prefix their value with a zero or zero and an ‘x’ and your code interprets it with something completely different. This behavior can be different based on the browser used due to changes in the EcmaScript definition and support of ‘octal’.

Here’s why…

Radix can be any number from 2-36 to define the number system.

  • 2 = binary (0-1)
  • 8 = octal (0-7)
  • 10 = decimal (0-9)
  • 16 = hexadecimal (0-F, where… 0-9,A=10,B=11,C=12,D=13,E=14,F=15)

If the radix parameter is omitted, JavaScript assumes the following:

  • If the string begins with “0x” or “0X”, the radix is 16 (hexadecimal)
  • If the string begins with “0”, the radix is 8 (octal). This feature is deprecated
  • If the string begins with any other value, the radix is 10 (decimal)

In all cases, the following is observed:

  • Leading and trailing spaces are allowed,
  • If the first character cannot be converted to a number, parseInt() returns NaN.
  • Only the first number in the string is returned.

REFERENCES:

JavaScript language attribute

Occasionally I’ve stumbled upon legacy javascript code that is used to determine javascript support by the visiting users. This often proves comical, because they are many times wasting time making checks for some “VERY OLD” browsers indeed! Here’s a rundown of the versions of javascript as well as their release dates and some common browser versions that implemented them.

  • JavaScript 1.0 (March 1996) = Navigator 2.0 / MSIE 3.0
  • JavaScript 1.1 (August 1996) = Navigator 3.0
  • JavaScript 1.2 (June 1997) = Navigator 4.0-4.05
  • JavaScript 1.3 (October 1998) = Navigator 4.06-4.7x / MSIE 4.0
  • JavaScript 1.4 = Netscape Server
  • JavaScript 1.5 (November 2000) = Navigator 6.0 / Firefox 1.0 / MSIE 5.5 – 8.0 / Safari 3.0-5 / Chrome 1.0-10.x / Opera 6.0
  • JavaScript 1.6 (November 2005) = Firefox 1.5
  • JavaScript 1.7 (October 2006) = Firefox 2.0
  • JavaScript 1.8 (June 2008) = Firefox 3.0 / Opera 11.50
  • JavaScript 1.8.1 = Firefox 3.5
  • JavaScript 1.8.2 (June 2009) = Firefox 3.6
  • JavaScript 1.8.5 (July 2010) = Firefox 4.0 / MSIE 9.0 / Opera 11.60

The language attribute has long been deprecated and should generally be avoided, it’s original purpose was to support other scripting languages, notably VBScript, or particular JavaScript versions. Modern conventions rely on specifying the MIME type instead via the ‘type’ attribute.

<SCRIPT LANGUAGE="JavaScript"> is now <script type="text/javascript">

<SCRIPT LANGUAGE="JavaScript1.1"> is now <script type="text/javascript1.1">

<SCRIPT LANGUAGE="VBScript"> is now <script type="text/vbscript">

<SCRIPT LANGUAGE="TCL"> is now <script type="text/tcl">

REFERENCES:

JavaScript function overloading

JavaScript, while mostly object-oriented, does not support function overloading like Java and other common OO languages. To my less knowledgeable audience, overloading is use of the same function name with a different number of arguments or types.

NOTE: there are various ways to implement this sort of functionality using various frameworks, but legacy code can be full of these issues!

In the following code, they share the same name, the second function will always be executed as it is defined last!


<script type="text/javascript">
function doSomething(arg1, arg2){
alert('2 args');
}
function doSomething(arg1){
alert('1 arg');
}
</script>