JavaScript language Tips & Tricks

Append an array to another array

``` var a = [4,5,6]; var b = [7,8,9]; a.concat(b);

Milliseconds since epoch

+new Date() // 1259359833574

Simulate threads using yield operator

JavaScript 1.7

}

//// thread management var threads = [];

// thread creation threads.push( new Thread('foo') ); threads.push( new Thread('bar') );

// scheduler while (threads.length) {

}

prints:

prefix an integer with zeros

``` function PrefixInteger(num, length) {

} ```

And more efficient: ``` function PrefixInteger(num, length) {

return ( "0000000000000000" + num ).substr( -length ); } ``` Thanks to fritzthe...

And even better: ``` function PrefixInteger(num, length) {

return (Array(length).join('0') + num).slice(-length); } ``` Thanks to tobeytai...

shuffle the Array

JavaScript 1.?

list = list.sort(function() Math.random() - 0.5);

Print(list); // prints something like: 4,3,1,2,9,5,6,7,8 ```

multi-line text

JavaScript 1.6

var text = <>
this
is
my
multi-line
text
</>.toString();
Print(text);

this is my multi-line text

```

If you want to support special XML chars, you can use a CDATA section: ``` <>

hello

]]>.toString(); ```

Escape and unescape HTML entities

``` const entityToCode = { proto: null, apos:0x0027,quot:0x0022,amp:0x0026,lt:0x003C,gt:0x003E,nbsp:0x00A0,iexcl:0x00A1,cent:0x00A2,pound:0x00A3, curren:0x00A4,yen:0x00A5,brvbar:0x00A6,sect:0x00A7,uml:0x00A8,copy:0x00A9,ordf:0x00AA,laquo:0x00AB, not:0x00AC,shy:0x00AD,reg:0x00AE,macr:0x00AF,deg:0x00B0,plusmn:0x00B1,sup2:0x00B2,sup3:0x00B3, acute:0x00B4,micro:0x00B5,para:0x00B6,middot:0x00B7,cedil:0x00B8,sup1:0x00B9,ordm:0x00BA,raquo:0x00BB, frac14:0x00BC,frac12:0x00BD,frac34:0x00BE,iquest:0x00BF,Agrave:0x00C0,Aacute:0x00C1,Acirc:0x00C2,Atilde:0x00C3, Auml:0x00C4,Aring:0x00C5,AElig:0x00C6,Ccedil:0x00C7,Egrave:0x00C8,Eacute:0x00C9,Ecirc:0x00CA,Euml:0x00CB, Igrave:0x00CC,Iacute:0x00CD,Icirc:0x00CE,Iuml:0x00CF,ETH:0x00D0,Ntilde:0x00D1,Ograve:0x00D2,Oacute:0x00D3, Ocirc:0x00D4,Otilde:0x00D5,Ouml:0x00D6,times:0x00D7,Oslash:0x00D8,Ugrave:0x00D9,Uacute:0x00DA,Ucirc:0x00DB, Uuml:0x00DC,Yacute:0x00DD,THORN:0x00DE,szlig:0x00DF,agrave:0x00E0,aacute:0x00E1,acirc:0x00E2,atilde:0x00E3, auml:0x00E4,aring:0x00E5,aelig:0x00E6,ccedil:0x00E7,egrave:0x00E8,eacute:0x00E9,ecirc:0x00EA,euml:0x00EB, igrave:0x00EC,iacute:0x00ED,icirc:0x00EE,iuml:0x00EF,eth:0x00F0,ntilde:0x00F1,ograve:0x00F2,oacute:0x00F3, ocirc:0x00F4,otilde:0x00F5,ouml:0x00F6,divide:0x00F7,oslash:0x00F8,ugrave:0x00F9,uacute:0x00FA,ucirc:0x00FB, uuml:0x00FC,yacute:0x00FD,thorn:0x00FE,yuml:0x00FF,OElig:0x0152,oelig:0x0153,Scaron:0x0160,scaron:0x0161, Yuml:0x0178,fnof:0x0192,circ:0x02C6,tilde:0x02DC,Alpha:0x0391,Beta:0x0392,Gamma:0x0393,Delta:0x0394, Epsilon:0x0395,Zeta:0x0396,Eta:0x0397,Theta:0x0398,Iota:0x0399,Kappa:0x039A,Lambda:0x039B,Mu:0x039C, Nu:0x039D,Xi:0x039E,Omicron:0x039F,Pi:0x03A0,Rho:0x03A1,Sigma:0x03A3,Tau:0x03A4,Upsilon:0x03A5, Phi:0x03A6,Chi:0x03A7,Psi:0x03A8,Omega:0x03A9,alpha:0x03B1,beta:0x03B2,gamma:0x03B3,delta:0x03B4, epsilon:0x03B5,zeta:0x03B6,eta:0x03B7,theta:0x03B8,iota:0x03B9,kappa:0x03BA,lambda:0x03BB,mu:0x03BC, nu:0x03BD,xi:0x03BE,omicron:0x03BF,pi:0x03C0,rho:0x03C1,sigmaf:0x03C2,sigma:0x03C3,tau:0x03C4, upsilon:0x03C5,phi:0x03C6,chi:0x03C7,psi:0x03C8,omega:0x03C9,thetasym:0x03D1,upsih:0x03D2,piv:0x03D6, ensp:0x2002,emsp:0x2003,thinsp:0x2009,zwnj:0x200C,zwj:0x200D,lrm:0x200E,rlm:0x200F,ndash:0x2013, mdash:0x2014,lsquo:0x2018,rsquo:0x2019,sbquo:0x201A,ldquo:0x201C,rdquo:0x201D,bdquo:0x201E,dagger:0x2020, Dagger:0x2021,bull:0x2022,hellip:0x2026,permil:0x2030,prime:0x2032,Prime:0x2033,lsaquo:0x2039,rsaquo:0x203A, oline:0x203E,frasl:0x2044,euro:0x20AC,image:0x2111,weierp:0x2118,real:0x211C,trade:0x2122,alefsym:0x2135, larr:0x2190,uarr:0x2191,rarr:0x2192,darr:0x2193,harr:0x2194,crarr:0x21B5,lArr:0x21D0,uArr:0x21D1, rArr:0x21D2,dArr:0x21D3,hArr:0x21D4,forall:0x2200,part:0x2202,exist:0x2203,empty:0x2205,nabla:0x2207, isin:0x2208,notin:0x2209,ni:0x220B,prod:0x220F,sum:0x2211,minus:0x2212,lowast:0x2217,radic:0x221A, prop:0x221D,infin:0x221E,ang:0x2220,and:0x2227,or:0x2228,cap:0x2229,cup:0x222A,int:0x222B, there4:0x2234,sim:0x223C,cong:0x2245,asymp:0x2248,ne:0x2260,equiv:0x2261,le:0x2264,ge:0x2265, sub:0x2282,sup:0x2283,nsub:0x2284,sube:0x2286,supe:0x2287,oplus:0x2295,otimes:0x2297,perp:0x22A5, sdot:0x22C5,lceil:0x2308,rceil:0x2309,lfloor:0x230A,rfloor:0x230B,lang:0x2329,rang:0x232A,loz:0x25CA, spades:0x2660,clubs:0x2663,hearts:0x2665,diams:0x2666 };

var charToEntity = {}; for ( var entityName in entityToCode ) charToEntity[String.fromCharCode(entityToCode[entityName])] = entityName;

function UnescapeEntities(str) str.replace(/&(.+?);/g, function(str, ent) String.fromCharCode( ent[0]!='#' ? entityToCode[ent] : ent[1]=='x' ? parseInt(ent.substr(2),16): parseInt(ent.substr(1)) ) );

function EscapeEntities(str) str.replace(/[^\x20-\x7E]/g, function(str) charToEntity[str] ? '&'+charToEntity[str]+';' : str ); ```

Remove an object from an array

JavaScript 1.8

function RemoveArrayElement( array, element ) !!let (pos=array.lastIndexOf(element)) pos != -1 && array.splice(pos, 1);

Creates a random alphabetic string

``` function RandomString(length) {

} ```

Brainfuck interpreter

```

var code = '++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.'; var inp = '23\n'; var out = '';

var codeSize = code.length; var i = 0, ip = 0, cp = 0, dp = 0, m = {};

var loopIn = {}, loopOut = {}; var tmp = []; for ( var cp = 0; cp < codeSize ; cp++ ) if ( code[cp] == '[' ) tmp.push(cp); else if ( code[cp] == ']' ) loopOut[loopIn[cp] = tmp.pop()] = cp;

for (var cp = 0; cp < codeSize && i < 100000; cp++, i++) {

} Print(out); ```

This Brainfuck program just prints 'Hello World!'

Optional named function arguments

``` function foo({ name:name, project:project}) {

}

foo({ name:'soubok', project:'jslibs' }) foo({ project:'jslibs', name:'soubok'}) ```

String converter

JavaScript 1.8

function CreateTranslator(translationTable)
function(s)
	s.replace(new RegExp([k for (k in translationTable)].join('|'), 'g'), function(str) translationTable[str]);

var translationTable = { a:1, bb:2, b:3, c:4 };
var MyTranslater = CreateTranslator( translationTable );
MyTranslater('aabbbc'); // returns: 11234

Display the current call stack

``` function Stack() { try { throw Error() } catch(ex) { return ex.stack } }

print( Stack() );

prints:

Change the primitive value of an object with valueOf

``` function foo() {

this.valueOf = function() {

} }

var bar = new foo();

Print( bar ); // prints: this is my value

Print( bar == 'this is my value' ) // prints: true

Print( bar === 'this is my value' ) // prints: false

```

Transform the arguments object into an array

JavaScript 1.6

var argArray = Array.slice(arguments); // is ['aa',11] }

foo('aa',11); ```

use also

var argArray = Array.prototype.slice.call(arguments);

Convert a string into a charcode list

Method 1:

JavaScript 1.6

Array.map('foo', function(x) { return String.charCodeAt(x) }) // is [112,111,111]

Method 2:

JavaScript 1.7

[ String.charCodeAt(x) for each ( x in 'foo' ) ] // is [112,111,111]

Array iteration pitfall

``` var foo = [3,4,5];

for ( var i in foo ) {

} Print( 'array: '+foo.toSource() )

output:

exceptions for non-fatal errors

JavaScript 1.7

try {

var data1 = 'a/b/c'; var arr1 = CHK(data1).split('/');

var data2 = ''; var arr2 = CHK(data2).split('/'); // the exception is throw here

} catch(ex if ex == ERR) {

Print('non fatal error while decoding the data') }

prints:

A Switch function

JavaScript 1.8

function Switch(i) arguments[++i];

Print( Switch(2,'aa','bb','cc','dd') ); // prints: cc
Print( Switch(100,'aa','bb','cc','dd') ); // prints: undefined

A Match function

JavaScript 1.8

function Match(v) Array.indexOf(arguments,v,1)-1;

Print( Match('aa', '0', 'b', 123, 'aa', 8.999 ) ); // prints: 3
Print( Match('Z', 'b', 123, 'aa', 8.999 ) ); // prints: -2 (< 0 is not found)

new object override

JavaScript 1.5

return new Array(5,6,7); }

var bar = new foo(); bar.length // is 3 ```

Kind of destructuring assignments

JavaScript 1.7

 var { a:x, b:y } = { a:7, b:8 };
 Print(x); // prints: 7
 Print(y); // prints: 8

Generator Expressions

JavaScript 1.7

[ y for ( y in [5,6,7,8,9] ) ] // is [0,1,2,3,4]

and

[ y for each ( y in [5,6,7,8,9] ) ] // is [5,6,7,8,9]

Because in for extracts index names, and for each extracts the values.

Advanced use of iterators

JavaScript 1.7

for ( let i = 0; i < this; i++ ) yield i; };

for ( let i in 5 ) print(i);

prints:

This make Number object to act as a generator.

Expression Closures

JavaScript 1.8

function(x) x * x;

Function declaration and expression

Function declaration: ``` bar(); // prints: bar function bar() {

Print('bar'); }

function foo() {

Print('foo'); } foo(); // prints: foo

```

Function expression: ``` (function foo() { Print( foo.name ); })(); // prints: foo foo(); // rise a ReferenceError

!function foo() { } foo(); // rise a ReferenceError

var bar = function foo() { } foo(); // rise a ReferenceError ```

Factory method pattern

``` Complex = new function() {

}

var c = Complex.fromPolar(1, Math.pi); // Same as fromCartesian(-1, 0); ```

<sub>see factory pattern on</sub> wikipedia

Closures by example

JavaScript 1.5

``` function CreateAdder( add ) {

return function( value ) {

} } ```

usage: ``` var myAdder5 = CreateAdder( 5 ); var myAdder6 = CreateAdder( 6 );

Print( myAdder5( 2 ) ); // prints 7 Print( myAdder6( 4 ) ); // prints 10 ```

<sub>Further information about</sub> Nested functions and closures

SyntaxError

JavaScript 1.5

raised when a syntax error occurs while parsing code in eval() ``` try {

eval('1 + * 5'); // will rise a SyntaxError exception

} catch( ex ) {

} ```

JavaScript 1.7

eval('1 + * 5');

} catch( ex if ex instanceof SyntaxError ) {

Print( 'SyntaxError !' ); // prints: SyntaxError ! } ```

ReferenceError

raised when de-referencing an invalid reference. ``` try {

fooBar(); // will rise a ReferenceError exception

} catch( ex ) {

Print( ex.constructor == ReferenceError ); // Prints true } ```

JavaScript 1.7

fooBar();

} catch( ex if ex instanceof ReferenceError ) {

Print( 'ReferenceError !' ); // prints: ReferenceError ! } ```

JavaScript Minifier / comment remover

jslibs

var script = new Script('var a; /* this is a variable */ var b; // another variable');
Print( script.toString() );

var a;
var b;

javascript

var a; // a variable var b = [1, 2, 3]; // an array var c = {x: {y: 1}};

function bar() { // my function

return 1 /* 2 */; } }

Print( foo.toSource() ); ```

JavaScript code beautifier (un-minifier)

function foo() {var a;var b=[1,2,3];var c={x:{y:1}};function bar(){return 1}}
Print( foo.toSource(1) );

function bar() { return 1; } } ```

Auto indent JavaScript code / unobfuscator

Spidermonkey JavaScript engine only

function foo() { function bar(){};var i=0;for(;i<10;++i) bar(i) }
Print(foo.toSource(2));

} ```

Objects, constructor and instanceof

JavaScript 1.5

var a = new Foo();

Bar.prototype = new Foo(); function Bar() { // Bar class }

var b = new Bar();

Print( a.constructor == Foo ); // true Print( a instanceof Foo ); // true

Print( b.constructor == Foo ); // true Print( b instanceof Foo ); // true

Print( b.constructor == Bar ); // false ! Print( b instanceof Bar ); // true ```

Objects private and public members

``` function MyConstructor( pub, priv ) {

var privateVariable = priv; this.publicVariable = pub;

this.SetThePrivateVariable = function( value ) {

}

this.GetThePrivateVariable = function() {

}

this.PrintAllVariables = function() {

} }

var myObject = new MyConstructor( 123, 456 );

Print( myObject.privateVariable ); // prints: undefined Print( myObject.publicVariable ); // prints: 123 myObject.PrintAllVariables(); // prints 456,123 myObject.SetThePrivateVariable( 789 ); myObject.PrintAllVariables(); // prints 789,123

```

Stack data structure

JavaScript 1.5

Print( stack ); // prints: 111,2.22,ccc

Print( stack.pop() ); // prints: ccc Print( stack.pop() ); // prints: 2.22 ```

Singleton pattern

JavaScript 1.5

if ( arguments.callee._singletonInstance ) return arguments.callee._singletonInstance; arguments.callee._singletonInstance = this;

this.Foo = function() { // ... } }

var a = new MySingletonClass() var b = MySingletonClass() Print( a === b ); // prints: true ```

Use Functions as an Object

JavaScript 1.5

if ( !arguments.callee.count ) {

} Print( Counter() ); // prints: 0 Print( Counter() ); // prints: 1 Print( Counter() ); // prints: 2 ```

E4X add nodes

JavaScript 1.6

var x = <store/>;
x.* += <item price="10" />;
x.* += <item price="15" />;
Print( x.toXMLString() );

<store>
  <item price="10"/>
  <item price="15"/>
</store>

E4X dynamic document creation

JavaScript 1.6

var html = <html/>;
html.head.title = "My Page Title";
html.body.@bgcolor = "#e4e4e4";
html.body.form.@name = "myform";
html.body.form.@action = "someurl.jss";
html.body.form.@method = "post";
html.body.form.@onclick = "return somejs();";
html.body.form.input[0] = "";
html.body.form.input[0].@name = "test";
Print(html.toXMLString());

<html>
  <head>
    <title>My Page Title</title>
  </head>
  <body bgcolor="#e4e4e4">
    <form name="myform" action="someurl.jss" method="post" onclick="return somejs();">
      <input name="test"></input>
    </form>
  </body>
</html>

E4X dynamic tag name

JavaScript 1.6

var nodeName = 'FOO';
if ( isXMLName(nodeName) ) { // assert that nodeName can be used as a node name
  var x = <{nodeName}>test</{nodeName}>
  Print( x.toXMLString() ); // prints: <FOO>test</FOO>
}

E4X dynamic content

JavaScript 1.6

var content = 'FOO';
var x = <item>{content}</item>
Print( x.toXMLString() ); // prints: <item>FOO</item>

E4X iteration

JavaScript 1.6

for each( var price in sales..@price ) { Print( price + '\n' ); }

prints:

Listen a property for changes

``` function onFooChange( id, oldval, newval ) {

Print( id + " property changed from " + oldval + " to " + newval ); return newval; }

var o = { foo:5 }; o.watch( 'foo', onFooChange );

o.foo = 6;

delete o.foo;

o.foo = 7;

o.unwatch('foo'); o.foo = 8;

prints:

Logical operators tricks

var a = 5;
a == 5 && Print( 'a is 5 \n' );
a == 7 || Print( 'a is not 7 \n' );

a is 5 
a is not 7

Functions argument default value

``` function foo( a, b ) {

a = a || '123'; b = b || 55; Print( a + ',' + b ); }

foo(); // prints: 123,55 foo('bar'); // prints: bar,55 foo('x', 'y'); // prints x,y

![http://jslibs.googlecode.com/svn/wiki/warning.png](http://jslibs.googlecode.com/svn/wiki/warning.png) but:

Remove an item by value in an Array object

var arr = ['a', 'b', 'c', 'd'];
var pos = arr.indexOf( 'c' );
pos > -1 && arr.splice( pos, 1 );
Print( arr ); // prints: a,b,d

Multiple-value returns

JavaScript 1.7

return [1, 2]; }

var [a, b] = f();

Print( a + ' ' + b ); // prints: 1 2 ```

Operator [ ] and strings ( like charAt() )

JavaScript 1.6

var str = 'foobar';
Print( str[4] );

a

indexOf() and lastIndexOf() Works on Array

JavaScript 1.6

var obj = {};
var arr = [ 'foo', 567, obj, 12.34 ];
Print( arr.indexOf(obj) ); // prints: 2

Using Array functions on a non-Array object

JavaScript 1.7

var obj = {};
Array.push(obj, 'foo');
Array.push(obj, 123);
Array.push(obj, 5.55);
Print( obj.toSource() ); // prints: ({0:"foo", length:3, 1:123, 2:5.55})

Change current object (this) of a function call

``` function test(arg) {

Print( this[0]+' '+this[1]+' '+arg ); }

var arr = ['foo', 'bar']; test.call(arr, 'toto'); // prints: foo bar toto ```

Filter / intercept a function call

``` function bar(a, b, c, d, e, f) {

Print(a, b, c, d, e, f) }

function foo() {

bar.apply(this, arguments); }

foo(1, 2, 3, 4, 5, 6); // prints: 123456 ```

E4X Query ( like XPath )

JavaScript 1.6

Print( xml.data.(@id==1).@text ); var myid = 2; Print( xml.data.(@id==myid).@text );

prints:

swap two variables

JavaScript 1.7

var a = 1;
var b = 2;
[a,b] = [b,a];

Destructuring assignment with function arguments

JavaScript 1.7

}

foo( [12,34] );

Prints:

JavaScript scope is not C/C++ scope

``` if ( false ) { // never reach the next line

}

Print(foo); // prints: undefined ( but is defined ) Print(bar); // failed: ReferenceError: bar is not defined ```

JavaScript scope and LET instruction

JavaScript 1.7

var x = 5;
var y = 0;
let (x = x+10, y = 12) {
  Print(x+y);
}
Print(x+y);

27
5

or,

for ( let i=0 ; i < 10 ; i++ ) {
  Print(i + ' ');
}
Print(i);

0 1 2 3 4 5 6 7 8 9 test.js:4: ReferenceError: i is not defined

Defer function calls

``` var opList = []; function deferCall( text, value ) { opList.push(arguments) } function doCall(func) { while (opList.length) func.apply(this,opList.shift()); }

deferCall( 'one', 1 ); deferCall( 'titi', 'toto' ); deferCall( 5, 'foo' );

function callLater(a,b) {

Print(a+', '+b); }

doCall( callLater )

Prints:

Insert an array in another array

``` var a = [1,2,3,7,8,9]

var b = [4,5,6] var insertIndex = 3;

a.splice.apply(a, Array.concat(insertIndex, 0, b)); Print(a); // prints: 1,2,3,4,5,6,7,8,9 ```

Multiple string concatenation

var html = ['aaa', 'bbb', 'ccc', ...].join('');

var html = 'aaa' + 'bbb' + 'ccc' + ...;

HTTP headers parser

``` var rexp_keyval = /(.?): ?(.?)\r?\n/g; function headersToObject( allHeaders ) {

} ```

Using 'with' scope

with({ a:5 }) function toto() { return a }
toto() // returns 5

(object).toString()

var a = { toString:function() { return '123'; }  }
Print(a); // prints '123', and not [Object object]

RegExpr.$1

var re = /a(.*)/
'abcd'.match(re)
Print( RegExp.$1 ) // prints 'bcd'

Binary with XmlHTTPRequest

browser related example

var req = new XMLHttpRequest();
req.open('GET', "http://code.google.com/images/code_sm.png",false);
req.overrideMimeType('text/plain; charset=x-user-defined');
//req.overrideMimeType('application/octet-stream');
req.send(null);
var val = req.responseText;
Print( escape(val.substr(0,10)) );

Iterate on values

JavaScript 1.6

for each ( var i in [3,23,4] )
    Print(i)

3
23
4

Exceptions Handling / conditional catch (try catch if)

``` function Toto(){} function Titi(){}

try {

} catch ( err if err instanceof Toto ) { Print('toto') } catch ( err if err instanceof Titi ) { Print('titi') } catch(ex) { throw(ex); } ```

Special chars

$=4
_=5
Print( _+$)

9

object's eval method

var foo = { bar:123 };
foo.eval('bar') // returns 123

var foo = { bar:123 };
with ( foo )
 var val = eval( 'bar' );
Print( val ); // returns 123

eval this

``` function test() {

} test.call(123)

prints:

No Such Method ( noSuchMethod )

var o = {}
o.__noSuchMethod__ = function(arg){ Print('unable to call "'+arg+'" function') }
o.foo(234)

unable to call "foo" function

RegExp replace

``` function Replacer( conversionObject ) {

}

var myReplacer = Replacer( { '
':'\n', '&':'&', '<':'<', '>':'>', '"':'"' } );

Print( myReplacer('aa
a &&&<') );

prints:

Values comparison

``` [4] === 4 // is: false [4] == 4 // is: true

'0' == 0 // is: true '0' === 0 // is: false ```

undefined, null, 0, false, '', ...

``` var a = { b:undefined, c:null, d:0, f:'' }

a['b'] // is: undefined a['e'] // is: undefined

'b' in a // is: true 'e' in a // is: false

Boolean(a.b) // is: false Boolean(a.c) // is: false Boolean(a.d) // is: false Boolean(a.e) // is: false ! Boolean(a.f) // is: false

typeof( asvqwfevqwefq ) == 'undefined' // =true

Print( '' == false ); // prints: true Print( 0 == false ); // prints: true Print( [] == false ); // prints: true

Print( [] == '' ); // prints: true Print( '' == 0 ); // prints: true Print( [] == 0 ); // prints: true

```

constructor property ( InstanceOf + Type )

var a = {};
a.constructor === Object // is: true

AJAX evaluation

``` var a = {

}

var body = 'b();';

with(a) { eval(body) }; // Prints 123 ```

Comma operator

``` var a = 0; var b = ( a++, 99 );

a // is: 1 b // is: 99

var i = 0; while( Print('x '), i++<10 ) Print(i + ' ') ``` prints:

x 1 x 2 x 3 x 4 x 5 x 6 x 7 x 8 x 9 x 10 x

closures pitfall

``` var a = [];

for ( var i=0; i<10; i++ ) {

a[i] = function() { Print(i); } }

a0; // is: 10 a1; // is: 10 a2; // is: 10 a3; // is: 10 ```

simpler case:

var i = 5;
function foo() { Print(i) }
foo(); // prints 5
i = 6;
foo(); // prints 6

A closure occurs when one function appears entirely within the body of another, and the inner function refers to local variables of the outer function.

obligated lecture to understand closures

In the first example, you can avoid the behavior using the let instruction: ``` var a = [];

for ( var i=0; i<10; i++ ) { let j = i; a[i] = function() { Print(j); } } ``` In this case, each instances of the (anonymous) inner function refer to different instances of variable j.

sharp variable

``` var a = { titi:#1={}, toto:#1# }; a.titi === a.toto; // is: true

var a = { b:#1={ c:#1# } } // a.b.c.c.c.c.c.c... ```

common object between 2 objects

``` function a() {}

a.prototype = { b:{} }

c = new a; d = new a;

c.b.e = 2;

c.b === d.b // is: true ! d.b.e // is: 2 ```

constructor

``` function a( b ) {

}

c.prototype = new a;

function c( arg ) {

};

o = new c( [1,2,3] );

prints:

JavaScript string can contain null chars

var test = '\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00';
test.length // is: 10

'new' operator precedence

``` function test() {

}

(new test()).toto // ok ( logical way )

new test().toto // ok

new test.toto // bad !

(new test).toto // ok ```

constructor usage

``` function toto( val ) { // parent class

}

titi.prototype = new toto;

function titi( val ) { // child class

}

(new titi(7)).print(); // prints 7 ```

To object

var obj = Object(123);
obj.foo = 678;
Print( typeof( obj ) + ', ' + obj + ', ' + obj.foo ); // prints: object, 123, 678

Serialize or uneval a variable or an object ( can be nested )

``` var o = { a:123, b:'test', c:function() { return 987; } }

Print( o.toSource() ); // prints: ({a:123, b:"test", c:(function () {return 987;})})

Print( uneval(o) ); // prints: ({a:123, b:"test", c:(function () {return 987;})}) ```

JavaScript labels

xxx: {
    Print( 111 )
    break xxx;
    Print( 222 )
}

111

for in loop

for ( var i in function(){ return [1, 2, 3] }() )
  Print( i );

0
1
2

proto ( prototype property )

var a = {}
var b = {}
a.__proto__ == b.__proto__ // is: true

Numbers and floating point error

Print( 1000000000000000128 ); // prints 1000000000000000100

Number base conversion ( hexadecimal )

``` (255).toString(16); // is: ff

parseInt( 'ff', 16 ) // is: 255

parseInt('0xff'); // is 255 ```

try / catch / finally

``` try {

} catch(ex) {

} finally {

}

prints:

Object argument

``` var proto = {

}

var o1 = new Object( proto ); var o2 = new Object( proto );

o1 == o2 // is: true ```

object and its prototype

``` function obj() {}

obj.prototype = { x:1 }; var b = new obj;

obj.prototype = { x:2 }; var c = new obj;

c.x == b.x // is: false ```

Runtime prototype object

``` var proto1 = { a:function(){ return 1 } }

var proto2 = { a:function(){ return 2 } }

function createObject( proto ) {

}

var v1 = createObject( proto1 ).a var v2 = createObject( proto2 ).a

Print( v1() ); Print( v2() );

Print( createObject( proto1 ).a === createObject( proto1 ).a );

prints:

for in loop and undefined value

var o = { x:undefined }
for ( var i in o )
    Print(i)

x

Call function in parent class

``` toto.prototype = new function() {

};

function toto() {

}

var o = new toto; o.a();

prints:

getter and setter function

``` abcd getter = function() {

}

abcd; abcd; abcd;

prints:

The previous syntax used to define a getter is highly deprecated, and should be replaced with: ``` defineGetter('abcd', function() {

}); ```

defineGetter ( define getter )

o = {}
o.__defineGetter__('x', function(){ Print('xxx')} )
o.x

xxx

check if an object or its prototype has a propery (hasOwnProperty)

``` var o = { a:1 } o.proto = { b:2 }

o.hasOwnProperty('a'); // is: true o.hasOwnProperty('b'); // is: false ```

check this article about hasOwnProperty function

check if a property is enumerable (propertyIsEnumerable)

``` var o = { a:1 }

o.propertyIsEnumerable( 'a' ); // is: true

[].propertyIsEnumerable( 'splice' ); // is: false ```

find the getter/setter function of an object ( lookup getter )

``` function test() {

}

var t = new test Print( t.lookupGetter( 'x' ) );

prints:

suppress array element while iterating it

the following example will failed : ``` var a = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; for ( var i in a ) {

} Print( a ); // prints: 0,2,3,4,5,6,7,8,9 Print( a.length ); // prints: 9 ```

We can use :

a[i] == undefined;

for ( var i = a.length - 1; i >= 0; i-- ) {

} Print( a ); // prints: 1,2,3,4,5,6,7,9 Print( a.length ); // prints: 8 ```

JavaScript arrays

``` var a = [ 1,2,3 ]; a.x = 'xxx';

for ( var i = 0; i < a.length; i++ ) Print('a: '+a[i]);

for ( var i in a ) Print('b: '+a[i]);

prints:

delete array element

The following do not work:

var ti = [5,6,7,8];
ti.length // is: 4
delete ti[3]
ti.length // is: 4

Use 'splice' instead:

ti.splice(3, 1);

store information on the viewer’s computer

E-mail Validation

No Right-Click

Display Random Quotes

Previous/Next Links

Bookmark a Page

Easy Print Page Link

Show Formatted Date

Comma Separator

Get the Display Area of a Browser

Redirect with Optional Delay

Detect iPhones

Print Message to Status Bar

Highlighting text

unhighlight text

Creating dynamic menus

debugging

xmp, display html tags inside an HTML document

1 – Don’t forget var keyword when assigning a variable’s value for the first time.

2 – use === instead of ==

3 – undefined, null, 0, false, NaN, '' (empty string) are all falsy.

4 – Use Semicolons for line termination

5 – Create an object constructor

6 – Be careful when using typeof, instanceof and constructor.

7 – Create a Self-calling Function

8 – Get a random item from an array

9 – Get a random number in a specific range

10 – Generate an array of numbers with numbers from 0 to max

11 – Generate a random set of alphanumeric characters

12 – Shuffle an array of numbers

13 – A string trim function

14 – Append an array to another array

15 – Transform the arguments object into an array

16 – Verify that a given argument is a number

17 – Verify that a given argument is an array

18 – Get the max or the min in an array of numbers

19 – Empty an array

20 – Don’t use delete to remove an item from array

21 – Truncate an array using length

22 – Use logical AND/ OR for conditions

23 – Use the map() function method to loop through an array’s items

24 – Rounding number to N decimal place

25 – Floating point problems

26 – Check the properties of an object when using a for-in loop

27 – Comma operator

28 – Cache variables that need calculation or querying

29 – Verify the argument before passing it to isFinite()

30 – Avoid negative indexes in arrays

31 – Serialization and deserialization (working with JSON)

32 – Avoid the use of eval() or the Function constructor

33 – Avoid using with() (The good part)

34 – Avoid using for-in loop for arrays

35 – Pass functions, not strings, to setTimeout() and setInterval()

36 – Use a switch/case statement instead of a series of if/else

37 – Use switch/case statement with numeric ranges

38 – Create an object whose prototype is a given object

39 – An HTML escaper function

40 – Avoid using try-catch-finally inside a loop