JAVASCRIPT

going Vanilla

Andrei Pfeiffer

Lead Front-end Dev
[e-spres-oh]

Co-Organizator
tim.js

Autor
Revista CTRL-D

Actually, let's talk about

ECMASCRIPT

but...

ES != JS ?

Let's take a step back to...

1995

When Internet speed was really

S L    O        W

may 1995 - Netscape

Mocha

September 1995

LIVESCRIPT

December 1995

JavaSCRIPT

1996 - Internet Explorer

JScript

1996

European COMPUTER MANUFACTURERS Association

june 1997

ES1

JUNE 1998

ES2

1999

ES3

ES4

ABANDONED

2009

ES3.1  =>  ES5

work in progress

ES6 Harmony

Heavy

wORK IN PROGRESS

ES7

ECMASCRIPT

+

DOM

+

BOM

== JAVASCRIPT

ES5

Strict Mode

"use strict";

Removed some of the

"bad parts"

"with" statement

syntax error

    
        
        ns.ns1.ns2.object.foo = 1;
        ns.ns1.ns2.object.bar = 2;

        with ( ns.ns1.ns2.object ) {
            foo = 1;
            bar = 2;
        }
        
    
    

"eval" STATEMENT

restricted usage

    
        
        eval("var x = 2");
    
        console.log( x ); // ReferenceError
        
    

octal literals

Syntax Error

    
                var n = 010; // 8
    

Stricter

Exceptions

Undeclared variables

reference error

    
        
            function foo() {
                n = 1;
            }
        
    

Implicit access to global object

runtime ERROR

    
        
            function foo() {
                return this;
            }

            foo(); // undefined
        
    

duplicate object property names

syntax ERROR

    
        
            var obj = {
                name: 'Andrei',
                name: 'Pfeiffer'
            };
        
    

DUPLICATE function parameter NAMES

SYNTAX ERROR

    
        
            function foo(p1, p2, p1) {
                // ...
            };
        
    

Native support

JSON

JSON methods

    
        
            JSON.parse();

            JSON.stringify();
        
    

BUILT-IN

Array extras

Array Search

    
        
            [1, 2, 3, 2].indexOf(2);

            // 1
        
    

Array Search

    
        
        [1, 2, 3, 2].lastIndexOf(2);
    
        // 3
        
    

Array Filter

    
        
    [1, 2, 3, 4].filter(function(item, i) {
        return item > 2;
    });
    
    // [3, 4]
        
    

Array Parsers

    
        
    [1, 2, 3].forEach(function(item, i) {
        foo( item );
    });
        
    

Array Parsers

    
        
        [1, 2, 3].map(function(item, i) {
            return item * item;
        });

        // [1, 4, 9]
        
    

Array Parsers

    
        
        [1, 2, 3].some(function(item, i) {
            return item > 2;
        });
    
        // true
        
    

Array Parsers

    
        
        [1, 2, 3].every(function(item, i) {
            return item > 2;
        });

        // false
        
    

Array Reducers

    
        
    [1, 2, 3].reduce(function(prev, item) {
        return prev - item;
    });
    
    // -4
        
    

Array Reducers

    
        
[1, 2, 3].reduceRight(function(prev, item) {
    return prev - item;
});
    
// 0
        
    

BUILT-IN

OBJECT Extensions

Object Property Descriptors

    
        
var o = {};

Object.defineProperty(o, "name", {
    enumerable  : false,
    configurable: true,
    writable    : false,
    value       : "Andrei"
});

        
    

Object.getOwnPropertyDescriptor(o, "name");

OBJECT CREATION

var o  = { name: "Andrei" };
var o2 = Object.create( o );

console.log( o === o2 );
// false

console.log( o.isPrototypeOf( o2 ) );
// true

Object Properties

    
        
        var o = { a: 1, b: 2, c: 3 };

        Object.keys( o );

        Object.getOwnPropertyNames( o );
        // ["a", "b", "c"]
        
    

Object Protection

    
        
        var o = { a: 1, b: 2, c: 3 };

        Object.freeze( o );

        Object.seal( o );

        Object.preventExtensions( o );
        
    

Object Protection Getters

    
        
            Object.isFrozen( o );
    
            Object.isSealed( o );
    
            Object.isExtensible( o );
        
    

SO... PLEASE, DO use

and... Please, do

"use strict";

Objects

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

Arrays

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

ES5

ES6

Crockford on Javascript

Thank You