Javascript Secrets - Front in Floripa 2015

SecretsJavaScript

Fernando Daciuknpm install fdaciuk

http://zimp.me

da2k.com.br

JAVASCRIPTNINJA

eventick.com.br/curso-javascript-ninja

use strictAdd into your code

#1

DeclarationsVariable

function func() {

a = 1;

return a;

}

console.log(func());

use strictwithout

function func() {

a = 1;

return a;

}


use strictwithout

?

function func() {

a = 1;

return a;

}

console.log(func()); // 1

use strictwithout

function func() {

'use strict';

a = 1;

return a;

}


use strictwith

function func() {

'use strict';

a = 1;

return a;

}


use strictwith

?

function func() {

'use strict';

a = 1;

return a;

}

console.log(func()); // ReferenceError: a is

not defined

use strictwith

thisThe misunderstood

function a() {

this.one = 1;

return this;

}

console.log(a() === window);

console.log(a().one);

console.log(window.one);

console.log(one);

use strictwithout

function a() {

this.one = 1;

return this;

}




console.log(one);

use strictwithout

?

function a() {

this.one = 1;

return this;

}

console.log(a() === window); // true

console.log(a().one); // 1

console.log(window.one); // 1

console.log(one); // 1

use strictwithout

function a() {

'use strict';

this.one = 1;

return this;

}




use strictwith

function a() {

'use strict';

this.one = 1;

return this;

}




use strictwith

?

/home/code/app.js:3

this.one = 1;

^

TypeError: Cannot set property 'one' of undefined

use strictwith

function a() {

'use strict';

this.one = 1;

return this;

}

console.log(a.call({}).one); // 1

console.log(a.apply({}).one); // 1

console.log(new a().one); // 1

use strictwith

methodsCall and apply

function func() {

this.a = 1;

return this;

}

console.log(func.call(null) === window);

console.log(func.call('a') instanceof String);

use strictwithout

function func() {

this.a = 1;

return this;

}



use strictwithout

?

function func() {

this.a = 1;

return this;

}



use strictwithout

function func() {

'use strict';

this.a = 1;

return this;

}



use strictwith

?

TypeError: Cannot set property 'a' of null

use strictwith

function func() {

'use strict';

this.a = 1;

return this;

}



use strictwith

ScopeAvoid Global

#2

var a = 'global';

function b() {

var a = 'local';

var c = 'c local';

return a;

}

console.log(a);

console.log(b());

console.log(c);

ScopeAvoid Global

var a = 'global';

function b() {

var a = 'local';

var c = 'c local';

return a;

}

console.log(a);

console.log(b());

console.log(c);

ScopeAvoid Global

?

var a = 'global';

function b() {

var a = 'local';

var c = 'c local';

return a;

}

console.log(a); // 'global'

console.log(b());

console.log(c);

ScopeAvoid Global

var a = 'global';

function b() {

var a = 'local';

var c = 'c local';

return a;

}

console.log(a);

console.log(b()); // 'local'

console.log(c);

ScopeAvoid Global

var a = 'global';

function b() {

var a = 'local';

var c = 'c local';

return a;

}

console.log(a);

console.log(b());

console.log(c); // ReferenceError: c is not defined

ScopeAvoid Global

var a = 'global';

function b() {

var a = 'local';

var c = 'c local';

return a;

}

console.log(a); // 'global'

console.log(b()); // 'local'

console.log(c); // ReferenceError: c is not defined

ScopeAvoid Global

var a = 'global';

function b() {

a = 'local';

return a;

}

console.log(a);

console.log(b());

ScopeAvoid Global

var a = 'global';

function b() {

a = 'local';

return a;

}

console.log(a);

console.log(b());

ScopeAvoid Global

?

var a = 'global';

function b() {

a = 'local';

return a;

}

console.log(a); // global

console.log(b()); // local

ScopeAvoid Global

var a = 'global';

function b() {

a = 'local';

return a;

}

console.log(b());

console.log(a);

ScopeAvoid Global

?

var a = 'global';

function b() {

a = 'local';

return a;

}

console.log(b()); // local

console.log(a); // local

ScopeAvoid Global

Solve?How to

Immediately-invoked Function Expression

IIFE

(function() {

'use strict';

// your code

})();

ScopeAvoid Global

function() {}

ScopeAvoid Global

(function() {})

ScopeAvoid Global

(function() {})();

ScopeAvoid Global

(function() {}());

ScopeAvoid Global

(function() {

})();

ScopeAvoid Global

(function() {

'use strict';

// your code

})();

ScopeAvoid Global

(function() {

'use strict';

function myModule() {

return 'hey!';

}

console.log(myModule()); // 'hey!'

})(); ScopeAvoid Global

export my module?How can I

(function() {

'use strict';


return 'hey!';

}

window.myModule = myModule;

})();

console.log(window.myModule());

console.log(myModule()); ScopeAvoid Global

ScopeUse local

(function(win, $) {

'use strict';


return $('[data-js="container"]').html();

}

win.myModule = myModule;

})(window, jQuery);

ScopeUse local

namespaceUse a

(function(win) {

'use strict';


return 'hey!';

}

win.MyProjectName = win.MyProjectName || {};

win.MyProjectName.myModule = myModule;

})(window);

console.log(MyProjectName.myModule()); // 'hey!'

namespaceUse a

into arrayConvert array-like

#3

var $links = document.querySelectorAll('a');

console.log($links.length);

console.log($links[0]);

console.log(Array.isArray($links));

console.log($links.pop());



console.log($links.length); // 10







console.log($links[0]); // <a href=""></a>







console.log(Array.isArray($links)); // false








// TypeError: $links.pop is not a function


slice


var numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(0, 2));


var numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(0, 2)); // [10, 20]


var numbers = [10, 20, 30, 40, 50];


// [20, 30, 40]


var numbers = [10, 20, 30, 40, 50];


// [20, 30, 40, 50]


var numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(1));

// [20, 30, 40, 50]


var numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(0));

// [10, 20, 30, 40, 50]


var numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice());

// [10, 20, 30, 40, 50]


var numbers = [10, 20, 30, 40, 50];

var numbers2 = numbers.slice();

console.log(numbers === numbers2); // false


var numbers = [10, 20, 30, 40, 50];

var numbers2 = numbers;

console.log(numbers === numbers2); // true




console.log(Array.isArray($links)); // false


// TypeError: $links.pop is not a function


var $links = Array.prototype.slice.call(

document.querySelectorAll('a')

);







);







);


console.log(Array.isArray($links)); // true





);



console.log($links.pop()); // <a href=""></a>


function func() {

return Array.isArray(arguments);

}

console.log(func(1, 2, 3));


function func() {

return Array.isArray(arguments);

}

console.log(func(1, 2, 3)); // false


function func() {

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

return Array.isArray(args);

}

console.log(func(1, 2, 3));


function func() {

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

return Array.isArray(args);

}

console.log(func(1, 2, 3)); // true


object typesGetting real

#4

console.log(typeof 10); // 'number'


console.log(typeof 'test'); // string


console.log(typeof true); // boolean


console.log(typeof function(){}); // function


console.log(typeof {}); // object


console.log(typeof []); // object


function test() {

return typeof arguments;

}

console.log(test()); // object


toString


var obj = {};

console.log(obj.toString());

// '[object Object]'


// '[object Object]'


Object.prototype.toString.call([]);

// '[object Array]'


Object.prototype.toString.call(function() {});

// '[object Function]'


function test() {

return Object.prototype.toString.call(

arguments

);

}

console.log(test()); // [object Arguments]


function is(type, object) {

type = type[0].toUpperCase() + type.slice(1);

return Object.prototype.toString

.call(object) === '[object ' + type + ']';

}


is(object', {});

is('array', []);

is('function', function() {});

is('object', []);


is(object', {}); // true

is('array', []);


is('object', []);


is(object', {});

is('array', []); // true


is('object', []);


is(object', {});

is('array', []);

is('function', function() {}); // true

is('object', []);


is(object', {});

is('array', []);


is('object', []); // false


instead loopsUse array methods

#5

var numbers = [10, 20, 30];

for(var i = 0; i < numbers.length; i++) {

console.log('array[' + i + '] =', numbers[i]);

}


array[0] = 10

array[1] = 20

array[2] = 30


forEach


var numbers = [10, 20, 30];

numbers.forEach(function(item, index) {

console.log('array[' + index + '] =', item);

});


array[0] = 10

array[1] = 20

array[2] = 30


var numbers = [10, 20, 30];

function logNumbers(item, index) {

console.log('array[' + index + '] =', item);

}

numbers.forEach(logNumbers);


signatureforEach method

arr.forEach(callback[, thisArgument]);


callback(

currentValue,

index,

array

)


var numbers = [10, 20, 30];

numbers.forEach(function(item, index, array) {

console.log('array[' + index + '] =', array[index]);

});


array[0] = 10

array[1] = 20

array[2] = 30


var numbers = [10, 20, 30];

numbers.forEach(function(item, index, array) {

console.log('array[' + index + '] =', this[index]);

});


array[0] = 10

array[1] = 20

array[2] = 30


var numbers = [10, 20, 30];

var numbers2 = [11, 21, 31];

function logNumbers(item, index, array) {

console.log('array[' + index + '] =', this[index]);

}

numbers.forEach(logNumbers, numbers2);


array[0] = 11

array[1] = 21

array[2] = 31


map


var numbers = [10, 20, 30];

var numbers2 = numbers.map(plusOne);

function plusOne(number) {

return number + 1;

}

console.log(numbers2);


var numbers = [10, 20, 30];



return number + 1;

}



?

var numbers = [10, 20, 30];



return number + 1;

}

console.log(numbers2); // [11, 21, 31]


every


var numbers = [10, 20, 30];

var isAllEven = numbers.every(checkEven);

function checkEven(number) {

return number % 2 === 0;

}

console.log(isAllEven);


var numbers = [10, 20, 30];




}



?

var numbers = [10, 20, 30];




}

console.log(isAllEven); // true


var numbers = [10, 20, 25, 30];




}



var numbers = [10, 20, 25, 30];




}

console.log(isAllEven); // false


some


var numbers = [11, 21, 30];

var hasEven = numbers.some(checkEven);



}

console.log(hasEven);


?

var numbers = [11, 21, 30];




}

console.log(hasEven); // true


var numbers = [11, 21, 31];




}

console.log(hasEven);


var numbers = [11, 21, 31];




}

console.log(hasEven); // false


filter


var numbers = [11, 21, 30];

var justEven = numbers.filter(checkEven);



}

console.log(justEven);


var numbers = [11, 21, 30];




}

console.log(justEven);


?

var numbers = [11, 21, 30];




}

console.log(justEven); // [30]


reduce


arr.reduce(callback[, initialValue]);

signaturereduce method

callback(

accumulatedOrPreviousValue,

currentValue,

index,

array

)

signaturereduce method

var numbers = [10, 20, 30];

var resultSum = numbers.reduce(sum);

function sum(previous, actual) {

return previous + actual;

}

console.log(resultSum);


var numbers = [10, 20, 30];




}



?

var numbers = [10, 20, 30];




}

console.log(resultSum); // 60


var numbers = [10, 20, 30];




}



= 30

var numbers = [10, 20, 30];




}



30

var numbers = [10, 20, 30];




}



= 6030

var numbers = [10, 20, 30];

var resultSum = numbers.reduce(sum, 1);



}



var numbers = [10, 20, 30];




}



?

var numbers = [10, 20, 30];




}



var myName = ['fer', 'nan', 'do'];

var pName = myName.reduce(pLanguage, '');

function pLanguage(previous, actual) {

return previous + 'P' + actual;

}

console.log(pName);






}

console.log(pName);


?





}

console.log(pName); // PferPnanPdo


var numbers = [10, 20, 30];

var numbers2 = numbers.reduce(newArray, []);

function newArray(previous, actual) {

previous.push(actual);

return previous;

}



var numbers = [10, 20, 30];




return previous;

}



?

var numbers = [10, 20, 30];




return previous;

}

console.log(numbers2); // [10, 20, 30]


reduceRight


array methods?When you shouldn’t use

to break a loopWhen you need

with eventsWorking

#6

var $link = document.querySelector('a');

$link.onclick = function() {

console.log('clicked!');

};

with eventsWorking




};

with eventsWorking

?




};

// 'clicked!'

with eventsWorking




};


console.log('clicked again!');

};

with eventsWorking

?




};



};

// 'clicked again!'

with eventsWorking


$link.addEventListener('click', function() {


}, false);

$link.addEventListener('click', function() {


}, false);

with eventsWorking

// 'clicked!'

// 'clicked again!'

with eventsWorking

with closuresRemembering values

#7


for(var i = 0; i < $links.length; i++) {

$links[i].addEventListener('click', function(e) {

e.preventDefault();

console.log('counter:', i);

}, false);

}





e.preventDefault();


}, false);

}


?

// 70





e.preventDefault();


}, false);

}




);

$links.forEach(function($link, index) {

$link.addEventListener('click', function(e) {

e.preventDefault();

console.log('counter:', index);

}, false);

});



for(var i = 0; i < $links.length; i++) (function(i) {


e.preventDefault();


}, false);

})(i);


to numberConverting

#8

parseInt('s55');

parseInt('10px');

parseInt('1.5x25');

parseInt('0x25');

to numberConverting

?

parseInt('s55'); // NaN

parseInt('10px');

parseInt('1.5x25');

parseInt('0x25');

to numberConverting

parseInt('s55');

parseInt('10px'); // 10

parseInt('1.5x25');

parseInt('0x25');

to numberConverting

parseInt('s55');

parseInt('10px');

parseInt('1.5x25'); // 1

parseInt('0x25');

to numberConverting

parseInt('s55');

parseInt('10px');

parseInt('1.5x25');

parseInt('0x25'); // 37

to numberConverting

parseInt(string[, radix]);

signatureparseInt

parseInt('0x'[, 16]);

signatureparseInt

parseInt('0X'[, 16]);

signatureparseInt

parseInt('0'[, 8]);

signatureparseInt

parseInt('0'[, 10]);

signatureparseInt

parseInt('s55', 10); // NaN

parseInt('10px', 10); // 10

parseInt('1.5x25', 10); // 1

parseInt('0x25', 10); // 0

to numberConverting

parseFloat('s55'); // NaN

parseFloat('10px'); // 10

parseFloat('1.5x25'); // 1.5

parseFloat('0x25'); // 0

to numberConverting

Number('150'); // 150

Number('1.42'); // 1.42

to numberConverting

+'150'; // 150

+'1.42'; // 1.42

to numberConverting

devdocs.io

MDN

developer.mozilla.org/en-US/docs/Web/JavaScript

the box!Think outsidethe box!Think outside

Fernando DaciukFullStack Engineer

Thanks!

/fdaciuk/talks npm install fdaciuk

Javascript Secrets - Front in Floripa 2015

Technology

Transcript of Javascript Secrets - Front in Floripa 2015