ES2015

Since ES2015, let and const can be used in addition to var. We will learn how they differ from var later. For now, lets have a look how const differs from var or let: const can be assigned a value only once (constant).
Reassigning a value will either throw an error (in strict mode, see below) or is silently ignored:

const foo = 42;
foo = 21; // error or ignored

consts must be initialized with a value:

const foo; // error
foo = 42;

If code runs in strict mode, assigning to an undeclared variable throws an error.

Strict mode is a mode of evaluating JavaScript that enforces stricter rules. It was introduced to "deprecate" certain patterns/behaviors that are considered bad or confusing.

Strict mode can be enabled for a JavaScript or a function by putting

'use strict';

at the beginning of it.

ES2015

The big difference between let, const, and var is that let and const are [block scoped][block scope]. If we would use let instead of var in the above example, we would get the following result:

function foo() {
    let bar = 42; // or var or const, doesn't matter
    // loop
    for (let i = 0; i < 10; i++) {
        // i is scoped to the loop body block
        let j = i; // j is scoped to the loop body block
    }

    console.log(bar); // 42
    console.log(i); // ReferenceError
    console.log(j); // ReferneceError
}

this is a special "variable" which implicitly exists in every function. It can be thought of being similar to Java's this and Python's self, but it's much more flexible than that.

Given the following function:

function foo() {
    console.log(this);
}

these would be the values of this if called in those specific ways:

// "normal call": global object / window in browsers
//                undefined in strict mode
foo();

// as object "method": to the object
var obj = { method: foo };
obj.method();

// via .call / .apply: To the value passed as first argument
foo.call(bar);

A quick introduction to basic and important concepts of JavaScript

Use the arrow keys (←, →) to navigate through the page.

You should use Google Chrome and make yourself familiar with the [developer tools][], especially with the console. You will need it for the exercises.

Found a problem with style or content? Or do you have suggestions for improving the content? Please [file an issue on GitHub][jsbasics-issues].

The Boolean data type has two values, true and false.

var foo = true;
var bar = false;

Numbers are double precision floating point numbers, following the IEEE 754 standard

This makes it very easy to work with them, since you don't have to differentiate between integer values and floating point values.

There are various ways that numeric value can be expressed:

var x = 5; // "integer"
var y = -4.2; // "float"
var z = 5e3; // = 5 * 10^3

An issue with floating point numbers is the loss of precision, which of course occurs in JavaScript as well:

0.1 + 0.2; // 0.30000000000000004

The maximum integer value that can be used without loss of precision is 2⁵³.

Math.pow(2, 53); // 9007199254740992
Math.pow(2, 53) + 1; // 9007199254740992

Strings are sequences of unicode characters and can either be delimited with a single or double quotation mark. Unlike in other languages, such as PHP, both are interpreted in the exact same way.

Example:

var foo = 'bar';
var bar = 'baz';

var a = 10; var b = 5; var c = "1";

log(a + b); log(a + c); log(b + Number(c));

JavaScript doesn't have classes like class-based OOP languages have, but it has something similar: constructor functions.

Constructor functions are functions which construct objects. Technically every function can be used as a constructor function, it just has to be called with the new operator:

function Person(name) {
    this.name = name;
}

var felix = new Person('Felix');
console.log(felix.name);

Inside the constructor function, this refers to a new, empty object. The result of the whole new expression (new Person(...)) is that object. You can think about it as if the function would implicitly return this;.

Calling a function with new has another effect: The prototype of the new object is the object referred to by the function's prototype property.

Example:

function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function () {
    return this.name;
};

var felix = new Person('Felix');
console.log(felix.sayName());

Given the example above, use console.dir(felix); to get a better understanding of the structure of the object (including it's prototype chain).

// Create variable

// log(foo);

This behavior becomes more understandable after we introduce hoisting. Before a JavaScript function is even executed, the engine finds all variable and function declarations and creates a binding for them in the functions scope.

Thus, the example of the previous slide is equivalent to the following:

function foo() {
    var bar, i, j;

    bar = 42;
    // loop
    for (i = 0; i < 10; i++) {
        j = i;
    }

    console.log(bar); // 42
    console.log(i); // 10
    console.log(j); // 9
}

Note how all variable declarations are put at the top of the function. The value will still be assigned only when the execution reaches the line of the assignment expression.

One of the practical implications of the hoisting concept is mutually recursive functions. Consider the following example:

function isEven(n) {
    if (n == 0) {
        return true;
    }
    return isOdd(n - 1);
}

// Normally may call `isEven` even though it's mutually
// dependent on the `isOdd` which is defined below.
console.log(isEven(2)); // true

function isOdd(n) {
    if (n == 0) {
        return false;
    }
    return isEven(n - 1);
}

To get more details on hoisting see this article.

function say() {
    console.log('My name is ' + this.name);
}

var felix = {
    name: 'Felix',
    sayName: say
};

var sarah = {
    name: 'Sarah',
    sayName: say
};

felix.sayName(); // My name is Felix
sarah.sayName(); // My name is Sarah
say.call({ name: 'Anonymous' }); // My name is Anonymous
say(); // My names is undefined

In this example we define a single function that uses this internally. The function is then assigned to different objects as property. The output the function produces depends on which object the function is called (how it is called).

JavaScript is predominantly run in browsers to make websites interactive. In order to do that, the browser provides access to other technologies, such as [CSS][] and the [DOM][].

This presentation is exclusively about JavaScript, the language, not the environment in which the JavaScript code runs!

// Hint: You can pass multiple arguments to log: // log(a, b)

Setting up more complex constructor functions with their prototypes can be cumbersome. For that reason ES2015 introduced a new syntax. With the syntax, the example from the previous slide would look like

class Person {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        return name;
    }
}

var felix = new Person('Felix');

As already established at the beginning, JavaScript is dynamically typed. It also performs type conversion, if a specific data type is expected and not provided. For example in a * b, the values of a and b will be converted to numbers first.

Even though there are well defined rules for converting one data type into another, these rules can be quite surprising.

What does this have to do with comparison? JavaScript has two kind of comparison operators:

• Loose comparison (a == b, a != b)
• Strict comparison (a === b, a !== b)

The difference is that loose comparison will convert both values to the same data type if they are of different data types. Strict comparison immediately returns false if both values don't have the same type.

Examples:

'42' == 42; // true
(('42' ===
    (42)[ // false
        // Objects are compared by reference
        (1, 2)
    ]) ==
    [1, 2][(1, 2)]) === // false
    [1, 2]; // false

The following tool visualizes the steps of the abstract equality comparison algorithm, which is used for loose comparison.

You can select some predefined examples and see which steps are performed during the comparison. The results will probably surprise you. You can also provide your own values.

[
  ["[1,2]", "'1,2'"],
  ["[0]", "false"],
  ["'\\n'", "false"],
  ["'0XA19'", "2585"]
]

Also have a look at this table to get a quick overview of the differences between == and ===.

The above examples hopefully showed you that loose comparison isn't that "simple" and it's not always clear what ends up being compared in the end. For that reason you should follow this advice:

title: ES5, ES2015 and beyond layout: Center

This tutorial primarily focuses on JavaScript following the [ECMAScript 5][es5] (ES5) specification. [ES2015][] (also known as ES6) was released in 2015 and brings many new features to the language, including new syntax constructs.

While this tutorial won't go into detail about new features in ES2015 and newer versions, it will point differences to/alternatives for certain ES5 features if they exist.

var bar = 42; function foo() { log(bar); var bar = 21; log(bar); } foo();

var obj = { foo: 42, bar: function () { log(this.foo); } };

var foo = obj.bar; foo();

Wikipedia describes closures as:

In programming languages, a closure (also lexical closure or function closure) is a function or reference to a function together with a referencing environment — a table storing a reference to each of the non-local variables (also called free variables or upvalues) of that function.

According to this definition, every function in JavaScript is a closure, because every function has an (internal) reference to the environment it was created in. The simplest example is:

var foo = 42;

function bar() {
    console.log(foo);
}

Here the function bar has access to foo, which is defined outside of it.

title: Exercise layout_data: description: Run the code and have a look at the output. Is it what you expect? What are reasons for this output? Modify the code, so that it prints the result you would expect. assertion: | var values = [" ", "0", 0];

    var c = 1;
    for (var i = 0, l = values.length; i < l; i++) {
      for (var j = i; j <  l; j++) {
        var expectedResult = values[i] === values[j];
        assert(
          expectedResult === output[c],
          'Comparing ' +  JSON.stringify(values[i]) + ' and ' +
          JSON.stringify(values[j]) + ' should yield ' + expectedResult.toString() +
          ' not ' + output[c]
        );
        c += 2;
      }
    }

var values = [" ", "0", 0];

for (var i = 0, l = values.length; i < l; i++) { for (var j = i; j < l; j++) { log( JSON.stringify(values[i]) + ' == ' + JSON.stringify(values[j]) + ': ', values[i] == values[j] ); } }

JavaScript has two data types to express the absence of a value, null and undefined.

null has the only value null and undefined has the only value undefined.

The difference between those two is subtle and is best explained by how to use them:

• undefined is the value JavaScript itself uses to indicate the absence of a value.
• null is the value the engineer should use to indicate the absence of a value.

Examples:

var foo; // no value is assigned, foo has the value undefined
var bar = null; // bar is explicitly set to null
console.log(foo); // logs "undefined"
console.log(bar); // logs "null"

There are other native occurrence of undefined which we will mention later.

var foo;
console.log(foo); // logs `undefined`
console.log(bar); // reference error

var foo = 42; function bar() { log(foo); } foo = 21; bar();

var functionArray = []; for (var i = 0; i < 3; i++) { functionArray[i] = function() { log(i); }; }

for (var j = 0; j < 3; j++) { functionArrayj; }

Properties of objects can be accessed in two ways:

• Dot notation (obj.prop)
• Bracket notation (obj["prop"])

You should always prefer dot notation, unless you have to use bracket notation. This could be if the property name is not a valid identifier or if it comes from a variable. You can use any expression inside the brackets.

Examples:

obj['test-field']; // test-field is not a valid identifier
var field = 'test';
obj[field];
obj['example' + i];

Because you can only use dot notation if the property name is a valid identifier name, array objects can only be accessed via bracket notation, arr[0], not dot notation, a.0.

You can assign to properties by putting the member expression on the left hand side of an assignment expression:

obj.prop = value;

If you have nested objects/arrays, you simply use a valid property accessor repeatedly:

var obj = { foo: { bar: [42, 21] } };
console.log(obj.foo.bar[0]); // which is evaluated as ((obj.foo).bar)[0]

Accessing a non existing property does not throw an error, it returns undefined:

var obj = {};
console.log(obj.foo);

Everything else besides primitive data type values is an object.

Objects are key-value stores, more specifically stringkey-value stores. The "keys" of an object are called properties.

The syntax to create a plain object is {key: value, ...}, which is called an object literal. For example:

var obj = {
    foo: 'bar',
    baz: 42
};

Note that the above example doesn't use quotation marks around the property names. In an object literal, quotation marks can be be omitted if the property name would also be a valid variable name. If not, they need to be quoted. Number literals are valid an object literal as well.

Here are some more examples of valid and invalid property names in object literals:

var obj = {
  foo: 0,        // valid, could be variable name
  'bar': 0,      // string literals are always valid
  123: 0,        // number literals are always valid
  1.5: 0,        // ^
  foo-bar: 0,    // invalid, would not be a valid variable name
  'foo-bar': 0,  // string literals are alwaus valid
};

Just like in Java and other object-oriented programming languages, objects are represented as references. That means if a variable has an object as a value, it really has a reference to that object.

var user = {name: 'Tom'}:

:::ascii

                         ┌──────────────┐
┌─────┬──────────┐       │  Object#123  │
│user │ ref:123 ◆┼──────▶├──────┬───────┤
└─────┴──────────┘       │ name │ "Tom" │
                         └──────┴───────┘

:::

Assigning the value to another variable makes both variables point to the same object:

var owner = user;

:::ascii

┌─────┬──────────┐       ┌──────────────┐
│user │ ref:123 ◆┼──┐    │  Object#123  │
├─────┼──────────┤  ├───▶├──────┬───────┤
│owner│ ref:123 ◆┼──┘    │ name │ "Tom" │
└─────┴──────────┘       └──────┴───────┘

:::

Assigning to user.name will therefore also "change" owner.name:

user.name = 'Joe';
console.log(user.name, owner.name);
// Joe, Joe

:::ascii

┌─────┬──────────┐       ┌──────────────┐
│user │ ref:123 ◆┼──┐    │  Object#123  │
├─────┼──────────┤  ├───▶├──────┬───────┤
│owner│ ref:123 ◆┼──┘    │ name │ "Joe" │
└─────┴──────────┘       └──────┴───────┘

:::

But assigning a new value to either user or owner will result in only that variable referring to the new value. The other variable will still refer to the same value.

owner = { name: 'Kim' };

:::ascii

                         ┌──────────────┐
                         │  Object#123  │
                    ┌───▶├──────┬───────┤
┌─────┬──────────┐  │    │ name │ "Joe" │
│user │ ref:123 ◆┼──┘    └──────┴───────┘
├─────┼──────────┤
│owner│ ref:456 ◆┼──┐    ┌──────────────┐
└─────┴──────────┘  │    │  Object#456  │
                    └───▶├──────┬───────┤
                         │ name │ "Kim" │
                         └──────┴───────┘

:::

The JavaScript standard defines a couple of built-in objects with additional properties and special internal behavior, must notably arrays and functions, which are explained in the next slides.

var obj = {foo: 'bar', 42: 'answer'};

You may have heard that JavaScript is a "prototype-based language", unlike other languages, such as Java, which are "class-based languages".

In short: A prototype is just another object. If an object A has this special connection to object B, then we say that "B is the prototype of A".

In addition to having "external" properties that can be accessed from code, objects also have internal/private properties/state. These cannot be accessed from code and their concrete implementation depends on the JavaScript engine.

Every object has an internal property [[Prototype]] (internal properties are usually denoted with [[...]] around the name). This property points to another object.

:::ascii

┌───────────────────────┐       ┌────────────────────────┐
│           A           │       │           B            │
├───────────────┬───────┤       ├───────────────┬────────┤
│ name          │ "Tom" │   ┌──▶│ toString      │ <func> │
├───────────────┼───────┤   │   ├───────────────┼────────┤
│ [[Prototype]] │   ◆───┼───┘   │ [[Prototype]] │  null  │
└───────────────┴───────┘       └───────────────┴────────┘

:::

Multiple objects can have the same prototype.

:::ascii

┌───────────────────────┐       ┌────────────────────────┐
│           A           │       │           B            │
├───────────────┬───────┤       ├───────────────┬────────┤
│ name          │ "Tom" │   ┌──▶│ toString      │ <func> │
├───────────────┼───────┤   │   ├───────────────┼────────┤
│ [[Prototype]] │   ◆───┼───┘   │ [[Prototype]] │  null  │
└───────────────┴───────┘       └───────────────┴────────┘
                                             ▲
┌───────────────────────┐                    │
│           C           │                    │
├───────────────┬───────┤                    │
│ time          │ "day" │                    │
├───────────────┼───────┤                    │
│ [[Prototype]] │   ◆───┼────────────────────┘
└───────────────┴───────┘

:::

Since a prototype is an object, it might itself have a prototype, which may have a prototype, and so forth.

:::ascii

┌───────────────────┐
│         A         │
├───────────────┬───┤
│ [[Prototype]] │ ◆─┼────┐
└───────────────┴───┘    │
                         ▼
               ┌───────────────────┐
               │         B         │
               ├───────────────┬───┤
               │ [[Prototype]] │ ◆─┼────┐
               └───────────────┴───┘    │
                                        ▼
                              ┌───────────────────┐
                              │         C         │
                              ├───────────────┬───┤
                              │ [[Prototype]] │ ◆─│─ ─ ─ ▷
                              └───────────────┴───┘

:::

This is called the prototype chain. Almost all objects have the same object at the end of the prototype chain, which doesn't have a prototype itself.

An object created using literal notation will have the object Object.prototype as its prototype. You can verify this using the following commands:

var testObject = {};
Object.getPrototypeOf(testObject) === Object.prototype; // true

:::ascii

                            ┌────────────────────────┐
┌───────────────────┐       │    Object.prototype    │
│    testObject     │       ├───────────────┬────────┤
├───────────────┬───┤       │ toString      │ <func> │
│ [[Prototype]] │ ◆─┼──────▶├───────────────┼────────┤
└───────────────┴───┘       │ hasOwnProperty│ <func> │
                            ├───────────────┼────────┤
                            │ [[Prototype]] │  null  │
                            └───────────────┴────────┘

:::

In order to create an object with an object other than Object.prototype as prototype, one can use Object.create:

var a = {};
var b = Object.create(a);
Object.getPrototypeOf(b) === a; // true

Now we know what prototypes are, but not what they do or which problem they solve.

Prototypes come in play when we are accessing the property of an object.

Consider the following structure:

:::ascii

┌───────────────────────┐
│           a           │
├───────────────┬───────┤
│ name          │ "Tom" │
├───────────────┼───────┤
│ [[Prototype]] │   ◆───┼───┐
└───────────────┴───────┘   │
                            ▼
                ┌───────────────────────┐
                │           b           │
                ├───────────────┬───────┤
                │ name          │ "Joe" │
                ├───────────────┼───────┤
                │ age           │   42  │
                ├───────────────┼───────┤
                │ [[Prototype]] │   ◆───┼───┐
                └───────────────┴───────┘   │
                                            ▼
                                ┌───────────────────────┐
                                │           c           │
                                ├───────────────┬───────┤
                                │ height        │  180  │
                                ├───────────────┼───────┤
                                │ [[Prototype]] │  null │
                                └───────────────┴───────┘

:::

These are the results for accessing different properties on A:

a.name; // Tom        `a` itself has this property, it shadows `b.name`
a.age; // 42         `a`'s prototype has this property
a.height; // 180        `a`'s prototype's prototype has this property
a.eyeColor; // undefined  this property doesn't exist

This is also the reason why we can access .toString() on almost every object: It is defined in Object.prototype, which sits at the end of every prototype chain.

var user = { name: 'Tom' };
user.toString();
// "[object Object]"

Arrays are objects, which treat properties with numeric keys (i.e. 0, 1, 2, ...) in a special way. For all purposes, they behave like arrays in other languages.

JavaScript has a special syntax for creating arrays, [value, value, ...]:

var arr = [1, 2];

If you run console.dir([1, 2]) in your browser's console, you can inspect the structure of the array object in more detail.

Unlike "plain" objects, array objects have Array.prototype as prototype, which provides all the array methods, such as .push, .map, etc.

:::ascii

┌──────────┐       [[Prototype]]        ┌──────────────────┐
│  obj {}  │───────────────────────────▶│ Object.prototype │
└──────────┘                            └──────────────────┘
                                                  ▲
                                                  │
                                            [[Prototype]]
                                                  │
┌──────────┐ [[Prototype]]  ┌─────────────────┐   │
│  arr []  │───────────────▶│ Array.prototype │───┘
└──────────┘                └─────────────────┘

:::

Functions are the only kind of objects that are callable, and JavaScript also has a special syntax for defining them:

function foo() {
    console.log("I'm a function");
}

There are other ways to create functions, which will be explained later.

Similar to arrays, function objects also have a dedicated prototype, Function.prototype:

:::ascii

┌──────────┐         [[Prototype]]          ┌──────────────────┐
│  obj {}  │───────────────────────────────▶│ Object.prototype │
└──────────┘                                └──────────────────┘
                                                ▲         ▲
                                                │         │
                                          [[Prototype]]   │
┌──────────┐ [[Prototype]]  ┌─────────────────┐ │         │
│  arr []  │───────────────▶│ Array.prototype │─┘         │
└──────────┘                └─────────────────┘     [[Prototype]]
                                                          │
                                                          │
┌──────────────────┐ [[Prototype]]  ┌──────────────────┐  │
│func function(){} │───────────────▶│Function.prototype│──┘
└──────────────────┘                └──────────────────┘

:::

JavaScript provides the same control structures known from other C-like languages:

• if (...) { ... } else if (...) { ... } else { ... }

• while (...) { ... } and do { ... } while (...)

• for (...; ...; ...) { ... }

• switch (...) { case ...: ... }

Additionally, JavaScript provides the for...in loop to iterate over properties of objects:

for (var prop in obj) {
    console.log(prop, obj[prop]);
}

prop is a variable containing the property name. You can use bracket notation to access the property values.

var arr = [1, 2, 3];
for (var v of arr) {
    console.log(v);
}
// 1
// 2
// 3

var obj = {foo: 0, bar: 1, 42: 2};

for (var prop in obj) { log('property: ' + prop, 'value: ' + obj[prop]); }

title: Exercise layout_data: description: | Log two value: an object which has a property foo and a value "bar", and an array with the values 1, 2 and 42. assertion: | assert( output.some(function(x) { return JSON.stringify(x) === JSON.stringify({foo: 'bar'}); }), 'Your log must contain an object with property "foo" and value "bar". Hint: {key: value}.' );

    assert(
      output.some(function(x) {
        return JSON.stringify(x) === JSON.stringify([1, 2, 42]);
      }),
      'Your log must contain an array with values 1, 2 and 42. Hint: `[value, ...]`.'
    );

• MDN JavaScript Guide, Eloquent JavaScript — basic JavaScript introduction.

• You don't know JS — another JavaScript introduction, more focus on advanced concepts and technical details

• ECMAScript 5 specification — only if you really like JavaScript.

• [ECMAScript 2015 specification][es2015]

• quirksmode.org - JavaScript — basic introduction and excellent explanation of event handling.

• Learning Advanced JavaScript — "strange" JavaScript concepts explored.

• jsFiddle — an online "editor" to quickly prototype JavaScript examples (with HTML, CSS and a selection of JS libraries).

• Learn how to debug JavaScript — knowing how to debug a program written in a specific language is as as important as knowing the language itself.

There are two syntactic constructs to create functions: function declaration and function expressions.

Function declarations start with the function keyword followed by a name, the parameter list and the function body:

function foo(a, b, c) {
    // do something
}

Function expressions have the same structure, but their name is optional:

var foo = function (a, b, c) {
    // do something
};

All function objects created either way behave exactly the same. Whether the parser treats a function definition as declaration or expression depends on where the definition is placed. If it is an expression context, it is interpreted as an expression, otherwise as a declaration. That's why

function () { }

generates an error (function declaration without name), but

(function () {});

does not, because the grouping operator ((...)) can only contain expressions.

Like other C-like languages, functions are called by putting () after the function reference:

myFunction();

Unlike other languages, functions can be called with any number of arguments, no matter how many formal parameters they have:

function myFunction(foo, bar) {
    console.log(foo, bar);
}

myFunction(); // undefined undefined
myFunction(1); // 1 undefined
myFunction(1, 2); // 1 2
myFunction(1, 2, 3); // 1 2

Each function has access to the special arguments variable, which is an array-like value. This allows you to access all the arguments passed to a function, even if there are more than formal parameters:

function myFunction(foo, bar) {
    console.log(foo, bar, arguments);
}

myFunction(); // undefined undefined []
myFunction(1); // 1 undefined [1]
myFunction(1, 2); // 1 2 [1, 2]
myFunction(1, 2, 3); // 1 2 [1, 2, 3]

title: Insert item inside an Array

tip-number: 00 tip-username: loverajoel tip-username-profile: https://github.com/loverajoel tip-tldr: Inserting an item into an existing array is a daily common task. You can add elements to the end of an array using push, to the beginning using unshift, or to the middle using splice. tip-writer-support: https://www.coinbase.com/loverajoel

• /en/insert-item-inside-an-array/

Inserting an item into an existing array is a daily common task. You can add elements to the end of an array using push, to the beginning using unshift, or to the middle using splice.

Those are known methods, but it doesn't mean there isn't a more performant way. Here we go:

Adding an element at the end of the array is easy with push(), but it can be done in different ways.

var arr = [1, 2, 3, 4, 5];
var arr2 = [];

arr.push(6);
arr[arr.length] = 6;
arr2 = arr.concat([6]);

Both first methods modify the original array. Don't believe me? Check the jsperf

1. arr.push(6); and arr[arr.length] = 6; have the same performance // 3 319 694 ops/sec
2. arr2 = arr.concat([6]); 50.61 % slower than the other two methods

1. arr[arr.length] = 6; // 6 125 975 ops/sec
2. arr.push(6); 66.74 % slower
3. arr2 = arr.concat([6]); 87.63 % slower

1. arr[arr.length] = 6; // 7 452 898 ops/sec
2. arr.push(6); 40.19 % slower
3. arr2 = arr.concat([6]); 49.78 % slower

Final victor

1. arr[arr.length] = 6; // with an average of 5 632 856 ops/sec
2. arr.push(6); // 35.64 % slower
3. arr2 = arr.concat([6]); // 62.67 % slower

1. arr[arr.length] = 6; // 21 602 722 ops/sec
2. arr.push(6); 61.94 % slower
3. arr2 = arr.concat([6]); 87.45 % slower

1. arr.push(6); // 56 032 805 ops/sec
2. arr[arr.length] = 6; 0.52 % slower
3. arr2 = arr.concat([6]); 87.36 % slower

1. arr[arr.length] = 6; // 67 197 046 ops/sec
2. arr.push(6); 39.61 % slower
3. arr2 = arr.concat([6]); 93.41 % slower

1. arr[arr.length] = 6; // 30 775 071 ops/sec
2. arr.push(6); 71.60 % slower
3. arr2 = arr.concat([6]); 83.70 % slower

1. arr.push(6); // 42 670 978 ops/sec
2. arr[arr.length] = 6; 0.80 % slower
3. arr2 = arr.concat([6]); 76.07 % slower

Final victor

1. arr[arr.length] = 6; // with an average of 42 345 449 ops/sec
2. arr.push(6); // 34.66 % slower
3. arr2 = arr.concat([6]); // 85.79 % slower

Now if we are trying to add an item to the beginning of the array:

var arr = [1, 2, 3, 4, 5];

arr.unshift(0);
[0].concat(arr);

Here is a little more detail: unshift edits the original array; concat returns a new array. jsperf

1. [0].concat(arr); // 1 808 717 ops/sec
2. arr.unshift(0); 97.85 % slower

1. [0].concat(arr); // 1 269 498 ops/sec
2. arr.unshift(0); 99.86 % slower

1. arr.unshift(0); // 3 250 184 ops/sec
2. [0].concat(arr); 33.67 % slower

Final victor

1. [0].concat(arr); // with an average of 4 972 622 ops/sec
2. arr.unshift(0); // 64.70 % slower

1. [0].concat(arr); // 2 656 685 ops/sec
2. arr.unshift(0); 96.77 % slower

1. [0].concat(arr); // 8 039 759 ops/sec
2. arr.unshift(0); 99.72 % slower

1. [0].concat(arr); // 3 604 226 ops/sec
2. arr.unshift(0); 98.31 % slower

1. [0].concat(arr); // 4 102 128 ops/sec
2. arr.unshift(0); 97.44 % slower

1. arr.unshift(0); // 12 356 477 ops/sec
2. [0].concat(arr); 15.17 % slower

Final victor

1. [0].concat(arr); // with an average of 6 032 573 ops/sec
2. arr.unshift(0); // 78.65 % slower

Adding items in the middle of an array is easy with splice, and it's the most performant way to do it.

var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');

I tried to run these tests in various Browsers and OS and the results were similar. I hope these tips will be useful for you and encourage to perform your own tests!

title: Improve Nested Conditionals tip-number: 03 tip-username: AlbertoFuente tip-username-profile: https://github.com/AlbertoFuente tip-tldr: How can we improve and make a more efficient nested if statement in javascript?

• /en/improve-nested-conditionals/

How can we improve and make a more efficient nested if statement in javascript?

if (color) {
    if (color === 'black') {
        printBlackBackground();
    } else if (color === 'red') {
        printRedBackground();
    } else if (color === 'blue') {
        printBlueBackground();
    } else if (color === 'green') {
        printGreenBackground();
    } else {
        printYellowBackground();
    }
}

One way to improve the nested if statement would be using the switch statement. Although it is less verbose and is more ordered, it's not recommended to use it because it's so difficult to debug errors. Here's why.

switch (color) {
    case 'black':
        printBlackBackground();
        break;
    case 'red':
        printRedBackground();
        break;
    case 'blue':
        printBlueBackground();
        break;
    case 'green':
        printGreenBackground();
        break;
    default:
        printYellowBackground();
}

But what if we have a conditional with several checks in each statement? In this case, if we want it less verbose and more ordered, we can use the conditional switch. If we pass true as a parameter to the switch statement, it allows us to put a conditional in each case.

switch (true) {
    case typeof color === 'string' && color === 'black':
        printBlackBackground();
        break;
    case typeof color === 'string' && color === 'red':
        printRedBackground();
        break;
    case typeof color === 'string' && color === 'blue':
        printBlueBackground();
        break;
    case typeof color === 'string' && color === 'green':
        printGreenBackground();
        break;
    case typeof color === 'string' && color === 'yellow':
        printYellowBackground();
        break;
}

If refactoring is an option, we can try to simplify the functions themselves. For example instead of having a function for each background color we could have an function that takes the color as an argument.

function printBackground(color) {
    if (!color || typeof color !== 'string') {
        return; // Invalid color, return immediately
    }
}

But if refactoring is not an option, we must always avoid having several checks in every condition and avoid using switch as much as possible. We also must take into account that the most efficient way to do this is through an object.

var colorObj = {
    black: printBlackBackground,
    red: printRedBackground,
    blue: printBlueBackground,
    green: printGreenBackground,
    yellow: printYellowBackground
};

if (color in colorObj) {
    colorObj[color]();
}

Here you can find more information about this.

title: Sorting strings with accented characters tip-number: 04 tip-username: loverajoel tip-username-profile: https://github.com/loverajoel tip-tldr: Javascript has a native method sort that allows sorting arrays. Doing a simple array.sort() will treat each array entry as a string and sort it alphabetically. But when you try order an array of non ASCII characters you will obtain a strange result. tip-writer-support: https://www.coinbase.com/loverajoel

• /en/sorting-strings-with-accented-characters/

Javascript has a native method sort that allows sorting arrays. Doing a simple array.sort() will treat each array entry as a string and sort it alphabetically. Also you can provide your own custom sorting function.

['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort();
// ["Buenos Aires", "Mumbai", "New York", "Shanghai"]

But when you try order an array of non ASCII characters like this ['é', 'a', 'ú', 'c'], you will obtain a strange result ['c', 'e', 'á', 'ú']. That happens because sort works only with the English language.

See the next example:

// Spanish
['único', 'árbol', 'cosas', 'fútbol'].sort();
// ["cosas", "fútbol", "árbol", "único"] // bad order

// German
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort();
// ["Wann", "Woche", "wäre", "wöchentlich"] // bad order

Fortunately, there are two ways to overcome this behavior localeCompare and Intl.Collator provided by ECMAScript Internationalization API.

Both methods have their own custom parameters in order to configure it to work adequately.

['único', 'árbol', 'cosas', 'fútbol'].sort(function (a, b) {
    return a.localeCompare(b);
});
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
    return a.localeCompare(b);
});
// ["Wann", "wäre", "Woche", "wöchentlich"]

['único', 'árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare);
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare);
// ["Wann", "wäre", "Woche", "wöchentlich"]

• For each method you can customize the location.
• According to Firefox Intl.Collator is faster when comparing large numbers of strings.

So when you are working with arrays of strings in a language other than English, remember to use this method to avoid unexpected sorting.

title: Differences between undefined and null tip-number: 05 tip-username: loverajoel tip-username-profile: https://github.com/loverajoel tip-tldr: Understanding the differences between undefined and null. tip-writer-support: https://www.coinbase.com/loverajoel

• /en/differences-between-undefined-and-null/

• undefined means a variable has not been declared, or has been declared but has not yet been assigned a value

• null is an assignment value that means "no value"

• Javascript sets unassigned variables with a default value of undefined

• Javascript never sets a value to null. It is used by programmers to indicate that a var has no value.

• undefined is not valid in JSON while null is

• undefined typeof is undefined

• null typeof is an object. Why?

• Both are primitives

• Both are falsy (Boolean(undefined) // false, Boolean(null) // false)

• You can know if a variable is undefined

  typeof variable === 'undefined';

- You can check if a variable is [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)

  ```javascript
  variable === null

• The equality operator considers them equal, but the identity doesn't

  null == undefined; // true
  
  null === undefined; // false

title: Writing a single method for arrays and a single element tip-number: 06 tip-username: mattfxyz tip-username-profile: https://twitter.com/mattfxyz tip-tldr: Rather than writing separate methods to handle an array and a single element parameter, write your functions so they can handle both. This is similar to how some of jQuery's functions work (css will modify everything matched by the selector).

• /en/writing-a-single-method-for-arrays-and-a-single-element/

Rather than writing separate methods to handle an array and a single element parameter, write your functions so they can handle both. This is similar to how some of jQuery's functions work (css will modify everything matched by the selector).

You just have to concat everything into an array first. Array.concat will accept an array or a single element.

function printUpperCase(words) {
    var elements = [].concat(words || []);
    for (var i = 0; i < elements.length; i++) {
        console.log(elements[i].toUpperCase());
    }
}

printUpperCase is now ready to accept a single node or an array of nodes as its parameter. It also avoids the potential TypeError that would be thrown if no parameter was passed.

printUpperCase('cactus');
// => CACTUS
printUpperCase(['cactus', 'bear', 'potato']);
// => CACTUS
//  BEAR
//  POTATO

title: use strict and get lazy tip-number: 07 tip-username: nainslie tip-username-profile: https://twitter.com/nat5an tip-tldr: Strict-mode JavaScript makes it easier for the developer to write "secure" JavaScript.

• /en/use-strict-and-get-lazy/

Strict-mode JavaScript makes it easier for the developer to write "secure" JavaScript.

By default, JavaScript allows the programmer to be pretty careless, for example, by not requiring us to declare our variables with "var" when we first introduce them. While this may seem like a convenience to the unseasoned developer, it's also the source of many errors when a variable name is misspelled or accidentally referred to out of its scope.

Programmers like to make the computer do the boring stuff for us, and automatically check our work for mistakes. That's what the JavaScript "use strict" directive allows us to do, by turning our mistakes into JavaScript errors.

We add this directive either by adding it at the top of a js file:

// Whole-script strict mode syntax
'use strict';
var v = "Hi!  I'm a strict mode script!";

or inside a function:

function f() {
    // Function-level strict mode syntax
    'use strict';
    function nested() {
        return 'And so am I!';
    }
    return "Hi!  I'm a strict mode function!  " + nested();
}
function f2() {
    return "I'm not strict.";
}

By including this directive in a JavaScript file or function, we will direct the JavaScript engine to execute in strict mode which disables a bunch of behaviors that are usually undesirable in larger JavaScript projects. Among other things, strict mode changes the following behaviors:

• Variables can only be introduced when they are preceded with "var"
• Attempting to write to read-only properties generates a noisy error
• You have to call constructors with the "new" keyword
• "this" is not implicitly bound to the global object
• Very limited use of eval() allowed
• Protects you from using reserved words or future reserved words as variable names

Strict mode is great for new projects, but can be challenging to introduce into older projects that don't already use it in most places. It also can be problematic if your build chain concatenates all your js files into one big file, as this may cause all files to execute in strict mode.

It is not a statement, but a literal expression, ignored by earlier versions of JavaScript. Strict mode is supported in:

• Internet Explorer from version 10.
• Firefox from version 4.
• Chrome from version 13.
• Safari from version 5.1.
• Opera from version 12.

See MDN for a fuller description of strict mode.

title: Converting a Node List to an Array tip-number: 08 tip-username: Tevko tip-username-profile: https://twitter.com/tevko tip-tldr: Here's a quick, safe, and reusable way to convert a node list into an array of DOM elements.

• /en/converting-a-node-list-to-an-array/

The querySelectorAll method returns an array-like object called a node list. These data structures are referred to as "Array-like", because they appear as an array, but can not be used with array methods like map and forEach. Here's a quick, safe, and reusable way to convert a node list into an array of DOM elements:

const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.apply(null, nodelist);

//later on ..

nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);

//etc...

The apply method is used to pass an array of arguments to a function with a given this value. MDN states that apply will take an array-like object, which is exactly what querySelectorAll returns. Since we don't need to specify a value for this in the context of the function, we pass in null or 0. The result is an actual array of DOM elements which contains all of the available array methods.

Alternatively you can use Array.prototype.slice combined with Function.prototype.call or Function.prototype.apply passing the array-like object as the value of this:

const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.prototype.slice.call(nodelist); // or equivalently Array.prototype.slice.apply(nodelist);

//later on ..

nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);

//etc...

Or if you are using ES2015 you can use the spread operator ...

const nodelist = [...document.querySelectorAll('div')]; // returns a real array

//later on ..

nodelist.forEach(...);
nodelist.map(...);
nodelist.slice(...);

//etc...

title: Template Strings tip-number: 09 tip-username: JakeRawr tip-username-profile: https://github.com/JakeRawr tip-tldr: As of ES6, JS now has template strings as an alternative to the classic end quotes strings.

• /en/template-strings/

As of ES6, JS now has template strings as an alternative to the classic end quotes strings.

Ex: Normal string

var firstName = 'Jake';
var lastName = 'Rawr';
console.log('My name is ' + firstName + ' ' + lastName);
// My name is Jake Rawr

Template String

var firstName = 'Jake';
var lastName = 'Rawr';
console.log(`My name is ${firstName} ${lastName}`);
// My name is Jake Rawr

You can do multi-line strings without \n, perform simple logic (ie 2+3) or even use the ternary operator inside ${} in template strings.

var val1 = 1,
    val2 = 2;
console.log(`${val1} is ${val1 < val2 ? 'less than' : 'greater than'} ${val2}`);
// 1 is less than 2

You are also able to modify the output of template strings using a function; they are called tagged template strings for example usages of tagged template strings.

You may also want to read to understand template strings more.

title: Check if a property is in a Object tip-number: 10 tip-username: loverajoel tip-username-profile: https://www.twitter.com/loverajoel tip-tldr: These are ways to check if a property is present in an object. tip-writer-support: https://www.coinbase.com/loverajoel

• /en/check-if-a-property-is-in-a-object/

When you have to check if a property is present in an object, you probably are doing something like this:

var myObject = {
  name: '@tips_js'
};

if (myObject.name) { ... }

That's ok, but you have to know that there are two native ways for this kind of thing, the in operator and Object.hasOwnProperty. Every object descended from Object, has both ways available.

var myObject = {
    name: '@tips_js'
};

myObject.hasOwnProperty('name'); // true
'name' in myObject; // true

myObject.hasOwnProperty('valueOf'); // false, valueOf is inherited from the prototype chain
'valueOf' in myObject; // true

Both differ in the depth at which they check the properties. In other words, hasOwnProperty will only return true if key is available on that object directly. However, the in operator doesn't discriminate between properties created on an object and properties inherited from the prototype chain.

Here's another example:

var myFunc = function () {
    this.name = '@tips_js';
};
myFunc.prototype.age = '10 days';

var user = new myFunc();

user.hasOwnProperty('name'); // true
user.hasOwnProperty('age'); // false, because age is from the prototype chain

Check the live examples here!

I also recommend reading this discussion about common mistakes made when checking a property's existence in objects.

title: Hoisting tip-number: 11 tip-username: squizzleflip tip-username-profile: https://twitter.com/squizzleflip tip-tldr: Understanding hoisting will help you organize your function scope.

Understanding hoisting will help you organize your function scope. Just remember, variable declarations and function definitions are hoisted to the top. Variable definitions are not, even if you declare and define a variable on the same line. Also, a variable declaration lets the system know that the variable exists while definition assigns it a value.

function doTheThing() {
    // ReferenceError: notDeclared is not defined
    console.log(notDeclared);

    // Outputs: undefined
    console.log(definedLater);
    var definedLater;

    definedLater = 'I am defined!';
    // Outputs: 'I am defined!'
    console.log(definedLater);

    // Outputs: undefined
    console.log(definedSimulateneously);
    var definedSimulateneously = 'I am defined!';
    // Outputs: 'I am defined!'
    console.log(definedSimulateneously);

    // Outputs: 'I did it!'
    doSomethingElse();

    function doSomethingElse() {
        console.log('I did it!');
    }

    // TypeError: undefined is not a function
    functionVar();

    var functionVar = function () {
        console.log('I did it!');
    };
}

To make things easier to read, declare all of your variables at the top of your function scope so it is clear which scope the variables are coming from. Define your variables before you need to use them. Define your functions at the bottom of your scope to keep them out of your way.

title: Pseudomandatory parameters in ES6 functions tip-number: 12 tip-username: Avraam Mavridis tip-username-profile: https://github.com/AvraamMavridis tip-tldr: In many programming languages the parameters of a function are by default mandatory and the developer has to explicitly define that a parameter is optional.

• /en/pseudomandatory-parameters-in-es6-functions/

In many programming languages the parameters of a function are by default mandatory and the developer has to explicitly define that a parameter is optional. In Javascript, every parameter is optional, but we can enforce this behavior without messing with the actual body of a function, taking advantage of [es6's default values for parameters] (http://exploringjs.com/es6/ch_parameter-handling.html#sec_parameter-default-values) feature.

const _err = function (message) {
    throw new Error(message);
};

const getSum = (a = _err('a is not defined'), b = _err('b is not defined')) => a + b;

getSum(10); // throws Error, b is not defined
getSum(undefined, 10); // throws Error, a is not defined

_err is a function that immediately throws an Error. If no value is passed for one of the parameters, the default value is going to be used, _err will be called and an Error will be thrown. You can see more examples for the default parameters feature on Mozilla's Developer Network

title: Tip to measure performance of a javascript block tip-number: 13 tip-username: manmadareddy tip-username-profile: https://twitter.com/manmadareddy tip-tldr: For quickly measuring performance of a javascript block, we can use the console functions like console.time(label) and console.timeEnd(label)

• /en/tip-to-measure-performance-of-a-javascript-block/

For quickly measuring performance of a javascript block, we can use the console functions like console.time(label) and console.timeEnd(label)

console.time('Array initialize');
var arr = new Array(100),
    len = arr.length,
    i;

for (i = 0; i < len; i++) {
    arr[i] = new Object();
}
console.timeEnd('Array initialize'); // Outputs: Array initialize: 0.711ms

More info: Console object, Javascript benchmarking

Demo: jsfiddle - codepen (outputs in browser console)

Note: As Mozilla suggested don't use this for production sites, use it for development purposes only.

title: Fat Arrow Functions tip-number: 14 tip-username: pklinger tip-username-profile: https://github.com/pklinger/ tip-tldr: Introduced as a new feature in ES6, fat arrow functions may come as a handy tool to write more code in fewer lines

• /en/fat-arrow-functions/

Introduced as a new feature in ES6, fat arrow functions may come as a handy tool to write more code in fewer lines. The name comes from its syntax, =>, which is a 'fat arrow', as compared to a thin arrow ->. Some programmers might already know this type of function from different languages such as Haskell, as 'lambda expressions', or as 'anonymous functions'. It is called anonymous, as these arrow functions do not have a descriptive function name.

• Syntax: fewer LOC; no more typing function keyword over and over again
• Semantics: capturing the keyword this from the surrounding context

Have a look at these two code snippets, which do the exact same job, and you will quickly understand what fat arrow functions do:

// general syntax for fat arrow functions
param => expression

// may also be written with parentheses
// parentheses are required on multiple params
(param1 [, param2]) => expression


// using functions
var arr = [5,3,2,9,1];
var arrFunc = arr.map(function(x) {
  return x * x;
});
console.log(arr)

// using fat arrow
var arr = [5,3,2,9,1];
var arrFunc = arr.map((x) => x*x);
console.log(arr)

As you can see, the fat arrow function in this case can save you time typing out the parentheses as well as the function and return keywords. I would advise you to always write parentheses around the parameter inputs, as the parentheses will be needed for multiple input parameters, such as in (x,y) => x+y. It is just a way to cope with forgetting them in different use cases. But the code above would also work like this: x => x*x. So far, these are only syntactical improvements, which lead to fewer LOC and better readability.

There is another good reason to use fat arrow functions. There is the issue with the context of this. With arrow functions, you don't need to worry about .bind(this) or setting that = this anymore, as fat arrow functions pick the context of this from the lexical surrounding. Have a look at the next [example] (https://jsfiddle.net/pklinger/rw94oc11/):

// globally defined this.i
this.i = 100;

var counterA = new CounterA();
var counterB = new CounterB();
var counterC = new CounterC();
var counterD = new CounterD();

// bad example
function CounterA() {
    // CounterA's `this` instance (!! gets ignored here)
    this.i = 0;
    setInterval(function () {
        // `this` refers to global object, not to CounterA's `this`
        // therefore starts counting with 100, not with 0 (local this.i)
        this.i++;
        document.getElementById('counterA').innerHTML = this.i;
    }, 500);
}

// manually binding that = this
function CounterB() {
    this.i = 0;
    var that = this;
    setInterval(function () {
        that.i++;
        document.getElementById('counterB').innerHTML = that.i;
    }, 500);
}

// using .bind(this)
function CounterC() {
    this.i = 0;
    setInterval(
        function () {
            this.i++;
            document.getElementById('counterC').innerHTML = this.i;
        }.bind(this),
        500
    );
}

// fat arrow function
function CounterD() {
    this.i = 0;
    setInterval(() => {
        this.i++;
        document.getElementById('counterD').innerHTML = this.i;
    }, 500);
}

Further information about fat arrow functions may be found at MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). To see different syntax options visit [this site] (http://jsrocks.org/2014/10/arrow-functions-and-their-scope/).

title: Even simpler way of using indexOf as a contains clause tip-number: 15 tip-username: jhogoforbroke tip-username-profile: https://twitter.com/jhogoforbroke tip-tldr: JavaScript by default does not have a contains method. And for checking existence of a substring in a string or an item in an array you may do this.

• /en/even-simpler-way-of-using-indexof-as-a-contains-clause/

JavaScript by default does not have a contains method. And for checking existence of a substring in a string or an item in an array you may do this:

var someText = 'javascript rules';
if (someText.indexOf('javascript') !== -1) {
}

// or
if (someText.indexOf('javascript') >= 0) {
}

But let's look at these Expressjs code snippets.

examples/mvc/lib/boot.js

for (var key in obj) {
  // "reserved" exports
  if (~['name', 'prefix', 'engine', 'before'].indexOf(key)) continue;

lib/utils.js

exports.normalizeType = function (type) {
    return ~type.indexOf('/') ? acceptParams(type) : { value: mime.lookup(type), params: {} };
};

examples/web-service/index.js

// key is invalid
if (!~apiKeys.indexOf(key)) return next(error(401, 'invalid api key'));

The gotcha is the bitwise operator ~, "Bitwise operators perform their operations on binary representations, but they return standard JavaScript numerical values."

It transforms -1 into 0, and 0 evaluates to false in JavaScript:

var someText = 'text';
!!~someText.indexOf('tex'); // someText contains "tex" - true
!~someText.indexOf('tex'); // someText NOT contains "tex" - false
~someText.indexOf('asd'); // someText doesn't contain "asd" - false
~someText.indexOf('ext'); // someText contains "ext" - true

ES6 introduced the includes() method and you can use it to determine whether or not a string includes another string:

'something'.includes('thing'); // true

With ECMAScript 2016 (ES7) it is even possible to use these techniques with Arrays:

!!~[1, 2, 3].indexOf(1); // true
[1, 2, 3].includes(1); // true

Unfortunately, it is only supported in Chrome, Firefox, Safari 9 or above and Edge; not IE11 or lower. It's better used in controlled environments.

title: Passing arguments to callback functions tip-number: 16 tip-username: minhazav tip-username-profile: https://twitter.com/minhazav tip-tldr: By default you cannot pass arguments to a callback function, but you can take advantage of the closure scope in Javascript to pass arguments to callback functions.

• /en/passing-arguments-to-callback-functions/

By default you cannot pass arguments to a callback function. For example:

function callback() {
    console.log('Hi human');
}

document.getElementById('someelem').addEventListener('click', callback);

You can take advantage of the closure scope in Javascript to pass arguments to callback functions. Check this example:

function callback(a, b) {
    return function () {
        console.log('sum = ', a + b);
    };
}

var x = 1,
    y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created. Check MDN Documentation to learn more.

So this way the arguments x and y are in scope of the callback function when it is called.

Another method to do this is using the bind method. For example:

var alertText = function (text) {
    alert(text);
};

document.getElementById('someelem').addEventListener('click', alertText.bind(this, 'hello'));

There is a very slight difference in performance of both methods, checkout jsperf.

title: Node.js - Run a module if it is not required tip-number: 17 tip-username: odsdq tip-username-profile: https://twitter.com/odsdq tip-tldr: In node, you can tell your program to do two different things depending on whether the code is run from require('./something.js') or node something.js. This is useful if you want to interact with one of your modules independently.

• /en/nodejs-run-a-module-if-it-is-not-required/

In node, you can tell your program to do two different things depending on whether the code is run from require('./something.js') or node something.js. This is useful if you want to interact with one of your modules independently.

if (!module.parent) {
    // ran with `node something.js`
    app.listen(8088, function () {
        console.log('app listening on port 8088');
    });
} else {
    // used with `require('/.something.js')`
    module.exports = app;
}

See the documentation for modules for more info.

title: Truncating the fast (but risky) way tip-number: 18 tip-username: pklinger tip-username-profile: https://github.com/pklinger tip-tldr: .~~X is usually a faster Math.trunc(X), but can also make your code do nasty things.

• /en/rounding-the-fast-way/

This tip is about performance...with a hidden price tag.

Have you ever come across the double tilde ~~ operator? It's also often called the "double bitwise NOT" operator. You can often use it as a faster substitute for Math.trunc(). Why is that?

One bitwise shift ~ first truncates input to 32 bits, then transforms it into -(input+1). The double bitwise shift therefore transforms the input into -(-(input + 1)+1) making it a great tool to round towards zero. For numeric input, it therefore mimics Math.trunc(). On failure, 0 is returned, which might come in handy sometimes instead of Math.trunc(), which returns NaN on failure.

// single ~
console.log(~1337); // -1338

// numeric input
console.log(~~47.11); // -> 47
console.log(~~1.9999); // -> 1
console.log(~~3); // -> 3

However, while ~~ is probably a better performer, experienced programmers often stick with Math.trunc() instead. To understand why, here's a clinical view on this operator.

~~ is probably faster than Math.trunc() across the board, though you should test that assumption on whichever platforms matter to you. Also, you'd generally have to perform millions of such operations to have any visible impact at run time.

If you're trying to confuse others, or get maximum utility from your minifier/uglifier, this is a relatively cheap way to do it.

Code clarity is of great importance in the long term, whether you work in a team, contribute to public code repos, or fly solo. As the oft-quoted saying goes:

Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.

For a solo programmer, that psychopath is inevitably "you in six months".

Newbie programmers may fixate on the cleverness of ~~, forgetting the significance of "just drop the fractional portion of this number". This can easily lead to fencepost errors (a.k.a. "off-by-one") when transforming floats to array indices or related ordinal values, where a different kind of fractional rounding may actually be called for. (Lack of code clarity usually contributes to this problem.)

For instance, if you're counting numbers on a "nearest integer" basis, you should use Math.round() instead of ~~, but programmer laziness and the impact of 10 whole characters saved per use on human fingers often triumph over cold logic, leading to incorrect results.

In contrast, the very names of the Math.xyz() functions clearly communicate their effect, reducing the probability of accidental errors.

Because ~ first does a 32-bit conversion, ~~ results in bogus values around ±2.15 billion. If you don't properly range-check your input, a user could trigger unexpected behavior when the transformed value ends up being a great distance from the original:

a = 2147483647.123; // maximum positive 32-bit integer, plus a bit more
console.log(~~a); // ->  2147483647     (ok)
a += 10000; // ->  2147493647.123 (ok)
console.log(~~a); // -> -2147483648     (huh?)

One particularly vulnerable area involves dealing with Unix epoch timestamps (measured in seconds from 1 Jan 1970 00:00:00 UTC). A quick way to get such values is:

epoch_int = ~~(+new Date() / 1000); // Date() epochs in milliseconds, so we scale accordingly

However, when dealing with timestamps after 19 Jan 2038 03:14:07 UTC (sometimes called the Y2038 limit), this breaks horribly:

// epoch timestamp for 1 Jan 2040 00:00:00.123 UTC
epoch = +new Date('2040-01-01') / 1000 + 0.123; // ->  2208988800.123

// back to the future!
epoch_int = ~~epoch; // -> -2085978496
console.log(new Date(epoch_int * 1000)); // ->  Wed Nov 25 1903 17:31:44 UTC

// that was fun, now let's get real
epoch_flr = Math.floor(epoch); // ->  2208988800
console.log(new Date(epoch_flr * 1000)); // ->  Sun Jan 01 2040 00:00:00 UTC

Because ~~ transforms every non-number into 0:

console.log(~~[]); // -> 0
console.log(~~NaN); // -> 0
console.log(~~null); // -> 0

some programmers treat it as alternative to proper input validation. However, this can lead to strange logic bugs down the line, since you're no longer distinguishing between invalid inputs and actual 0 values. This is therefore not a recommended practice.

Most people who write about "double bitwise NOT" incorrectly equate it with Math.floor() for some reason. If you can't write about it accurately, odds are good you'll eventually misuse it.

Others are more careful to mention Math.floor() for positive inputs and Math.ceil() for negative ones, but that forces you to stop and think about the values you're dealing with. This defeats the purpose of ~~ as a handy no-gotchas shortcut.

Avoid where possible. Use sparingly otherwise.

1. Apply cautiously.
2. Sanitize values before applying.
3. Carefully document relevant assumptions about the values being transformed.
4. Review code to deal with, at minimum:
   • logic bugs where invalid inputs are instead passed to other code modules as valid 0 values
   • range errors on transformed inputs
   • fencepost errors due to incorrect rounding direction

title: Safe string concatenation tip-number: 19 tip-username: gogainda tip-username-profile: https://twitter.com/gogainda tip-tldr: Suppose you have a couple of variables with unknown types and you want to concatenate them in a string. To be sure that the arithmetical operation is not be applied during concatenation, use concat

• /en/safe-string-concatenation/

Suppose you have a couple of variables with unknown types and you want to concatenate them in a string. To be sure that the arithmetical operation is not be applied during concatenation, use concat:

var one = 1;
var two = 2;
var three = '3';

var result = ''.concat(one, two, three); //"123"

This way of concatenting does exactly what you'd expect. In contrast, concatenation with pluses might lead to unexpected results:

var one = 1;
var two = 2;
var three = '3';

var result = one + two + three; //"33" instead of "123"

Speaking about performance, compared to the join type of concatenation, the speed of concat is pretty much the same.

You can read more about the concat function on MDN page.

title: Return objects to enable chaining of functions tip-number: 20 tip-username: WakeskaterX tip-username-profile: https://twitter.com/WakeStudio tip-tldr: When creating functions on an object in Object Oriented Javascript, returning the object in the function will enable you to chain functions together.

• /en/return-objects-to-enable-chaining-of-functions/

When creating functions on an object in Object Oriented Javascript, returning the object in the function will enable you to chain functions together.

function Person(name) {
    this.name = name;

    this.sayName = function () {
        console.log('Hello my name is: ', this.name);
        return this;
    };

    this.changeName = function (name) {
        this.name = name;
        return this;
    };
}

var person = new Person('John');
person.sayName().changeName('Timmy').sayName();

title: Shuffle an Array tip-number: 21 tip-username: 0xmtn tip-username-profile: https://github.com/0xmtn/ tip-tldr: Fisher-Yates Shuffling it's an algorithm to shuffle an array.

• /en/shuffle-an-array/

This snippet here uses Fisher-Yates Shuffling Algorithm to shuffle a given array.

function shuffle(arr) {
    var i, j, temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}

An example:

var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = shuffle(a);
console.log(b);
// [2, 7, 8, 6, 5, 3, 1, 4]

title: Two ways to empty an array tip-number: 22 tip-username: microlv tip-username-profile: https://github.com/microlv tip-tldr: In JavaScript when you want to empty an array, there are a lot ways, but this is the most performant.

• /en/two-ways-to-empty-an-array/

You define an array and want to empty its contents. Usually, you would do it like this:

// define Array
var list = [1, 2, 3, 4];
function empty() {
    //empty your array
    list = [];
}
empty();

But there is another way to empty an array that is more performant.

You should use code like this:

var list = [1, 2, 3, 4];
function empty() {
    //empty your array
    list.length = 0;
}
empty();

• list = [] assigns a reference to a new array to a variable, while any other references are unaffected. which means that references to the contents of the previous array are still kept in memory, leading to memory leaks.

• list.length = 0 deletes everything in the array, which does hit other references.

In other words, if you have two references to the same array (a = [1,2,3]; a2 = a;), and you delete the array's contents using list.length = 0, both references (a and a2) will now point to the same empty array. (So don't use this technique if you don't want a2 to hold an empty array!)

Think about what this will output:

var foo = [1, 2, 3];
var bar = [1, 2, 3];
var foo2 = foo;
var bar2 = bar;
foo = [];
bar.length = 0;
console.log(foo, bar, foo2, bar2);

// [] [] [1, 2, 3] []

Stackoverflow more detail: difference-between-array-length-0-and-array

title: Converting to number fast way tip-number: 23 tip-username: sonnyt tip-username-profile: http://twitter.com/sonnyt tip-tldr: Converting strings to numbers is extremely common. The easiest and fastest way to achieve that would be using the + operator.

• /en/converting-to-number-fast-way/

Converting strings to numbers is extremely common. The easiest and fastest (jsPerf) way to achieve that would be using the + (plus) operator.

var one = '1';

var numberOne = +one; // Number 1

You can also use the - (minus) operator which type-converts the value into number but also negates it.

var one = '1';

var negativeNumberOne = -one; // Number -1

title: Use === instead of == tip-number: 24 tip-username: bhaskarmelkani tip-username-profile: https://www.twitter.com/bhaskarmelkani tip-tldr: The == (or !=) operator performs an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster (jsPref) than ==.

• /en/use*===_instead_of*==/

The == (or !=) operator performs an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster (jsPref) than ==.

[10] ==  10      // is true
[10] === 10      // is false

'10' ==  10      // is true
'10' === 10      // is false

 []  ==  0       // is true
 []  === 0       // is false

 ''  ==  false   // is true but true == "a" is false
 ''  === false   // is false

title: Using immediately invoked function expression tip-number: 25 tip-username: rishantagarwal tip-username-profile: https://github.com/rishantagarwal tip-tldr: Called as "Iffy" ( IIFE - immediately invoked function expression) is an anonymous function expression that is immediately invoked and has some important uses in Javascript.

• /en/Using-immediately-invoked-function-expression/

Called as "Iffy" ( IIFE - immediately invoked function expression) is an anonymous function expression that is immediately invoked and has some important uses in Javascript.

(function () {
    // Do something​
})();

It is an anonymous function expression that is immediately invoked, and it has some particularly important uses in JavaScript.

The pair of parenthesis surrounding the anonymous function turns the anonymous function into a function expression or variable expression. So instead of a simple anonymous function in the global scope, or wherever it was defined, we now have an unnamed function expression.

Similarly, we can even create a named, immediately invoked function expression:

(someNamedFunction = function(msg) {
	console.log(msg || "Nothing for today !!")
	}) (); // Output --> Nothing for today !!​
​
someNamedFunction("Javascript rocks !!"); // Output --> Javascript rocks !!
someNamedFunction(); // Output --> Nothing for today !!​

For more details, check the following URL's -

1. Link 1
2. Link 2

Performance: jsPerf

title: Filtering and Sorting a List of Strings tip-number: 26 tip-username: davegomez tip-username-profile: https://github.com/davegomez tip-tldr: You may have a big list of names you need to filter in order to remove duplicates and sort them alphabetically.

c

• /en/filtering-and-sorting-a-list-of-strings/

You may have a big list of names you need to filter in order to remove duplicates and sort them alphabetically.

In our example we are going to use the list of JavaScript reserved keywords we can find across the different versions of the language, but as you can notice, there is a lot of duplicated keywords and they are not alphabetically organized. So this is a perfect list (Array) of strings to test out this JavaScript tip.

var keywords = [
    'do',
    'if',
    'in',
    'for',
    'new',
    'try',
    'var',
    'case',
    'else',
    'enum',
    'null',
    'this',
    'true',
    'void',
    'with',
    'break',
    'catch',
    'class',
    'const',
    'false',
    'super',
    'throw',
    'while',
    'delete',
    'export',
    'import',
    'return',
    'switch',
    'typeof',
    'default',
    'extends',
    'finally',
    'continue',
    'debugger',
    'function',
    'do',
    'if',
    'in',
    'for',
    'int',
    'new',
    'try',
    'var',
    'byte',
    'case',
    'char',
    'else',
    'enum',
    'goto',
    'long',
    'null',
    'this',
    'true',
    'void',
    'with',
    'break',
    'catch',
    'class',
    'const',
    'false',
    'final',
    'float',
    'short',
    'super',
    'throw',
    'while',
    'delete',
    'double',
    'export',
    'import',
    'native',
    'public',
    'return',
    'static',
    'switch',
    'throws',
    'typeof',
    'boolean',
    'default',
    'extends',
    'finally',
    'package',
    'private',
    'abstract',
    'continue',
    'debugger',
    'function',
    'volatile',
    'interface',
    'protected',
    'transient',
    'implements',
    'instanceof',
    'synchronized',
    'do',
    'if',
    'in',
    'for',
    'let',
    'new',
    'try',
    'var',
    'case',
    'else',
    'enum',
    'eval',
    'null',
    'this',
    'true',
    'void',
    'with',
    'break',
    'catch',
    'class',
    'const',
    'false',
    'super',
    'throw',
    'while',
    'yield',
    'delete',
    'export',
    'import',
    'public',
    'return',
    'static',
    'switch',
    'typeof',
    'default',
    'extends',
    'finally',
    'package',
    'private',
    'continue',
    'debugger',
    'function',
    'arguments',
    'interface',
    'protected',
    'implements',
    'instanceof',
    'do',
    'if',
    'in',
    'for',
    'let',
    'new',
    'try',
    'var',
    'case',
    'else',
    'enum',
    'eval',
    'null',
    'this',
    'true',
    'void',
    'with',
    'await',
    'break',
    'catch',
    'class',
    'const',
    'false',
    'super',
    'throw',
    'while',
    'yield',
    'delete',
    'export',
    'import',
    'public',
    'return',
    'static',
    'switch',
    'typeof',
    'default',
    'extends',
    'finally',
    'package',
    'private',
    'continue',
    'debugger',
    'function',
    'arguments',
    'interface',
    'protected',
    'implements',
    'instanceof'
];

Since we don't want to change our original list, we are going to use a high order function named filter, which will return a new filter array based in a predicate (function) we pass to it. The predicate will compare the index of the current keyword in the original list with its index in the new list and will push it to the new array only if the indexes match.

Finally we are going to sort the filtered list using the sort function which takes a comparison function as the only argument, returning a alphabetically sorted list.

var filteredAndSortedKeywords = keywords
    .filter(function (keyword, index) {
        return keywords.lastIndexOf(keyword) === index;
    })
    .sort(function (a, b) {
        return a < b ? -1 : 1;
    });

The ES6 (ECMAScript 2015) version using arrow functions looks a little simpler:

const filteredAndSortedKeywords = keywords.filter((keyword, index) => keywords.lastIndexOf(keyword) === index).sort((a, b) => (a < b ? -1 : 1));

And this is the final filtered and sorted list of JavaScript reserved keywords:

console.log(filteredAndSortedKeywords);

// ['abstract', 'arguments', 'await', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', 'continue', 'debugger', 'default', 'delete', 'do', 'double', 'else', 'enum', 'eval', 'export', 'extends', 'false', 'final', 'finally', 'float', 'for', 'function', 'goto', 'if', 'implements', 'import', 'in', 'instanceof', 'int', 'interface', 'let', 'long', 'native', 'new', 'null', 'package', 'private', 'protected', 'public', 'return', 'short', 'static', 'super', 'switch', 'synchronized', 'this', 'throw', 'throws', 'transient', 'true', 'try', 'typeof', 'var', 'void', 'volatile', 'while', 'with', 'yield']

Thanks to @nikshulipa, @kirilloid, @lesterzone, @tracker1, @manuel_del_pozo for all the comments and suggestions!

title: Short circuit evaluation in JS. tip-number: 27 tip-username: bhaskarmelkani tip-username-profile: https://www.twitter.com/bhaskarmelkani tip-tldr: Short-circuit evaluation says, the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression, when the first argument of the AND && function evaluates to false, the overall value must be false, and when the first argument of the OR || function evaluates to true, the overall value must be true.

• /en/short-circuit-evaluation-in-js/

Short-circuit evaluation says, the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression: when the first argument of the AND (&&) function evaluates to false, the overall value must be false; and when the first argument of the OR (||) function evaluates to true, the overall value must be true.

For the following test condition and isTrue and isFalse function.

var test = true;
var isTrue = function () {
    console.log('Test is true.');
};
var isFalse = function () {
    console.log('Test is false.');
};

Using logical AND - &&.

// A normal if statement.
if (test) {
    isTrue(); // Test is true
}

// Above can be done using '&&' as -

test && isTrue(); // Test is true

Using logical OR - ||.

test = false;
if (!test) {
    isFalse(); // Test is false.
}

test || isFalse(); // Test is false.

The logical OR could also be used to set a default value for function argument.

function theSameOldFoo(name) {
    name = name || 'Bar';
    console.log("My best friend's name is " + name);
}
theSameOldFoo(); // My best friend's name is Bar
theSameOldFoo('Bhaskar'); // My best friend's name is Bhaskar

The logical AND could be used to avoid exceptions when using properties of undefined. Example:

var dog = {
    bark: function () {
        console.log('Woof Woof');
    }
};

// Calling dog.bark();
dog.bark(); // Woof Woof.

// But if dog is not defined, dog.bark() will raise an error "Cannot read property 'bark' of undefined."
// To prevent this, we can use &&.

dog && dog.bark(); // This will only call dog.bark(), if dog is defined.

title: Currying vs partial application tip-number: 28 tip-username: bhaskarmelkani tip-username-profile: https://www.twitter.com/bhaskarmelkani tip-tldr: Currying and partial application are two ways of transforming a function into another function with a generally smaller arity.

• /en/curry-vs-partial-application/

Currying

Currying takes a function

f: X * Y -> R

and turns it into a function

f': X -> (Y -> R)

Instead of calling f with two arguments, we invoke f' with the first argument. The result is a function that we then call with the second argument to produce the result.

Thus, if the uncurried f is invoked as

f(3,5)

then the curried f' is invoked as

f(3)(5)

For example: Uncurried add()

function add(x, y) {
    return x + y;
}

add(3, 5); // returns 8

Curried add()

function addC(x) {
    return function (y) {
        return x + y;
    };
}

addC(3)(5); // returns 8

The algorithm for currying.

Curry takes a binary function and returns a unary function that returns a unary function.

curry: (X × Y → R) → (X → (Y → R))

Javascript Code:

function curry(f) {
    return function (x) {
        return function (y) {
            return f(x, y);
        };
    };
}

Partial application

Partial application takes a function

f: X * Y -> R

and a fixed value for the first argument to produce a new function

f`: Y -> R

f' does the same as f, but only has to fill in the second parameter which is why its arity is one less than the arity of f.

For example: Binding the first argument of function add to 5 produces the function plus5.

function plus5(y) {
    return 5 + y;
}

plus5(3); // returns 8

The algorithm of partial application.*

partApply takes a binary function and a value and produces a unary function.

partApply : ((X × Y → R) × X) → (Y → R)

Javascript Code:

function partApply(f, x) {
    return function (y) {
        return f(x, y);
    };
}

title: Speed up recursive functions with memoization tip-number: 29 tip-username: hingsir tip-username-profile: https://github.com/hingsir tip-tldr: Fibonacci sequence is very familiar to everybody. we can write the following function in 20 seconds.it works, but not efficient. it did lots of duplicate computing works, we can cache its previously computed results to speed it up.

• /en/speed-up-recursive-functions-with-memoization/

Fibonacci sequence is very familiar to everybody. We can write the following function in 20 seconds.

var fibonacci = function (n) {
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
};

It works, but is not efficient. It did lots of duplicate computing works, we can cache its previously computed results to speed it up.

var fibonacci = (function () {
    var cache = [0, 1]; // cache the value at the n index
    return function (n) {
        if (cache[n] === undefined) {
            for (var i = cache.length; i <= n; ++i) {
                cache[i] = cache[i - 1] + cache[i - 2];
            }
        }
        return cache[n];
    };
})();

Also, we can define a higher-order function that accepts a function as its argument and returns a memoized version of the function.

var memoize = function (func) {
    var cache = {};
    return function () {
        var key = JSON.stringify(Array.prototype.slice.call(arguments));
        return key in cache ? cache[key] : (cache[key] = func.apply(this, arguments));
    };
};
fibonacci = memoize(fibonacci);

And this is an ES6 version of the memoize function.

var memoize = function (func) {
    const cache = {};
    return (...args) => {
        const key = JSON.stringify(args);
        return key in cache ? cache[key] : (cache[key] = func(...args));
    };
};
fibonacci = memoize(fibonacci);

we can use memoize() in many other situations

• GCD(Greatest Common Divisor)

var gcd = memoize(function (a, b) {
    var t;
    if (a < b) (t = b), (b = a), (a = t);
    while (b != 0) (t = b), (b = a % b), (a = t);
    return a;
});
gcd(27, 183); //=> 3

• Factorial calculation

var factorial = memoize(function (n) {
    return n <= 1 ? 1 : n * factorial(n - 1);
});
factorial(5); //=> 120

Learn more about memoization:

• Memoization - Wikipedia
• Implementing Memoization in JavaScript

title: Converting truthy/falsy values to boolean tip-number: 30 tip-username: hakhag tip-username-profile: https://github.com/hakhag tip-tldr: Logical operators are a core part of JavaScript, here you can see a a way you always get a true or false no matter what was given to it.

• /en/converting-truthy-falsy-values-to-boolean/

You can convert a truthy or falsy value to true boolean with the !! operator.

!!''; // false
!!0; // false
!!null; // false
!!undefined; // false
!!NaN; // false

!!'hello'; // true
!!1; // true
!!{}; // true
!![]; // true

title: Avoid modifying or passing arguments into other functions — it kills optimization tip-number: 31 tip-username: berkana tip-username-profile: https://github.com/berkana tip-tldr: Within JavaScript functions, the variable name arguments lets you access all of the arguments passed to the function. arguments is an array-like object; arguments can be accessed using array notation, and it has the length property, but it doesn't have many of the built-in methods that arrays have such as filter and map and forEach. Because of this, it is a fairly common practice to convert arguments into an array using the following snipet

• /en/avoid-modifying-or-passing-arguments-into-other-functions-it-kills-optimization/

###Background

Within JavaScript functions, the variable name arguments lets you access all of the arguments passed to the function. arguments is an array-like object; arguments can be accessed using array notation, and it has the length property, but it doesn't have many of the built-in methods that arrays have such as filter and map and forEach. Because of this, it is a fairly common practice to convert arguments into an array using the following:

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

This calls the slice method from the Array prototype, passing it arguments; the slice method returns a shallow copy of arguments as a new array object. A common shorthand for this is :

var args = [].slice.call(arguments);

In this case, instead of calling slice from the Array prototype, it is simply being called from an empty array literal.

###Optimization

Unfortunately, passing arguments into any function call will cause the V8 JavaScript engine used in Chrome and Node to skip optimization on the function that does this, which can result in considerably slower performance. See this article on optimization killers. Passing arguments to any other function is known as leaking arguments.

Instead, if you want an array of the arguments that lets you use you need to resort to this:

var args = new Array(arguments.length);
for (var i = 0; i < args.length; ++i) {
    args[i] = arguments[i];
}

Yes it is more verbose, but in production code, it is worth it for the performance optimization.

title: Map() to the rescue; adding order to Object properties tip-number: 32 tip-username: loverajoel tip-username-profile: https://twitter.com/loverajoel tip-tldr: An Object it is an unordered collection of properties... that means that if you are trying to save ordered data inside an Object, you have to review it because properties order in objects are not guaranteed. tip-writer-support: https://www.coinbase.com/loverajoel

• /en/map-to-the-rescue-adding-order-to-object-properties/

An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method. ECMAScript

Take a look in action

var myObject = {
	z: 1,
	'@': 2,
	b: 3,
	1: 4,
	5: 5
};
console.log(myObject) // Object {1: 4, 5: 5, z: 1, @: 2, b: 3}

for (item in myObject) {...
// 1
// 5
// z
// @
// b

Each browser have his own rules about the order in objects bebause technically, order is unspecified.

Using a new ES6 feature called Map. A Map object iterates its elements in insertion order — a for...of loop returns an array of [key, value] for each iteration.

var myObject = new Map();
myObject.set('z', 1);
myObject.set('@', 2);
myObject.set('b', 3);
for (var [key, value] of myObject) {
  console.log(key, value);
...
// z 1
// @ 2
// b 3

Mozilla suggest:

So, if you want to simulate an ordered associative array in a cross-browser environment, you are forced to either use two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.

// Using two separate arrays
var objectKeys = [z, @, b, 1, 5];
for (item in objectKeys) {
	myObject[item]
...

// Build an array of single-property objects
var myData = [{z: 1}, {'@': 2}, {b: 3}, {1: 4}, {5: 5}];

title: Create array sequence [0, 1, ..., N-1] in one line tip-number: 33 tip-username: SarjuHansaliya tip-username-profile: https://github.com/SarjuHansaliya tip-tldr: Compact one-liners that generate ordinal sequence arrays

• /en/create-range-0...n-easily-using-one-line/

Here are two compact code sequences to generate the N-element array [0, 1, ..., N-1]:

Array.apply(null, { length: N }).map(Function.call, Number);

1. Array.apply(null, {length: N}) returns an N-element array filled with undefined (i.e. A = [undefined, undefined, ...]).
2. A.map(Function.call, Number) returns an N-element array, whose index I gets the result of Function.call.call(Number, undefined, I, A)
3. Function.call.call(Number, undefined, I, A) collapses into Number(I), which is naturally I.
4. Result: [0, 1, ..., N-1].

For a more thorough explanation, go here.

It uses Array.from https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from(new Array(N), (val, index) => index);

Array.from(Array(N).keys());

1. A = new Array(N) returns an array with N holes (i.e. A = [,,,...], but A[x] = undefined for x in 0...N-1).
2. F = (val,index)=>index is simply function F (val, index) { return index; }
3. Array.from(A, F) returns an N-element array, whose index I gets the results of F(A[I], I), which is simply I.
4. Result: [0, 1, ..., N-1].

If you actually want the sequence [1, 2, ..., N], Solution 1 becomes:

Array.apply(null, { length: N }).map(function (value, index) {
    return index + 1;
});

and Solution 2:

Array.from(new Array(N), (val, index) => index + 1);

title: Implementing asynchronous loop tip-number: 34 tip-username: madmantalking tip-username-profile: https://github.com/madmantalking tip-tldr: You may run into problems while implementing asynchronous loops.

• /en/implementing-asynchronous-loops/

Let's try out writing an asynchronous function which prints the value of the loop index every second.

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000 * (i + 1));
}

The output of the above programs turns out to be

> 5
> 5
> 5
> 5
> 5

So this definitely doesn't work.

Reason

Each timeout refers to the original i, not a copy. So the for loop increments i until it gets to 5, then the timeouts run and use the current value of i (which is 5).

Well , this problem seems easy. An immediate solution that strikes is to cache the loop index in a temporary variable.

for (var i = 0; i < 5; i++) {
    var temp = i;
    setTimeout(function () {
        console.log(temp);
    }, 1000 * (i + 1));
}

But again the output of the above programs turns out to be

> 4
> 4
> 4
> 4
> 4

So , that doesn't work either , because blocks don't create a scope and variables initializers are hoisted to the top of the scope. In fact, the previous block is the same as:

var temp;
for (var i = 0; i < 5; i++) {
    temp = i;
    setTimeout(function () {
        console.log(temp);
    }, 1000 * (i + 1));
}

Solution

There are a few different ways to copy i. The most common way is creating a closure by declaring a function and passing i as an argument. Here we do this as a self-calling function.

for (var i = 0; i < 5; i++) {
    (function (num) {
        setTimeout(function () {
            console.log(num);
        }, 1000 * (i + 1));
    })(i);
}

In JavaScript, arguments are passed by value to a function. So primitive types like numbers, dates, and strings are basically copied. If you change them inside the function, it does not affect the outside scope. Objects are special: if the inside function changes a property, the change is reflected in all scopes.

Another approach for this would be with using let. With ES6 the let keyword is useful since it's block scoped unlike var

for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000 * (i + 1));
}

title: Assignment Operators tip-number: 35 tip-username: hsleonis tip-username-profile: https://github.com/hsleonis tip-tldr: Assigning is very common. Sometimes typing becomes time consuming for us 'Lazy programmers'. So, we can use some tricks to help us and make our code cleaner and simpler.

• /en/assignment-shorthands/

Assigning is very common. Sometimes typing becomes time consuming for us 'Lazy programmers'. So, we can use some tricks to help us and make our code cleaner and simpler.

This is the similar use of

x += 23; // x = x + 23;
y -= 15; // y = y - 15;
z *= 10; // z = z * 10;
k /= 7; // k = k / 7;
p %= 3; // p = p % 3;
d **= 2; // d = d ** 2;
m >>= 2; // m = m >> 2;
n <<= 2; // n = n << 2;
n++; // n = n + 1;
n--;
n = n - 1;

There is a special ++ operator. It's best to explain it with an example:

var a = 2;
var b = a++;
// Now a is 3 and b is 2

The a++ statement does this:

1. return the value of a
2. increment a by 1

But what if we wanted to increment the value first? It's simple:

var a = 2;
var b = ++a;
// Now both a and b are 3

See? I put the operator before the variable.

The -- operator is similar, except it decrements the value.

This is what we write on regular basis.

var newValue;
if (value > 10) newValue = 5;
else newValue = 2;

We can user ternary operator to make it awesome:

var newValue = value > 10 ? 5 : 2;

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
    var variable2 = variable1;
}

Shorthand here:

var variable2 = variable1 || '';

P.S.: If variable1 is a number, then first check if it is 0.

Instead of using:

var a = new Array();
a[0] = 'myString1';
a[1] = 'myString2';

Use this:

var a = ['myString1', 'myString2'];