Java script Techniques Part I

presentation.call(this,

‘Advanced JavaScript Techniques’);

part = ‘I’;

Luis Atencio

Technical Readiness and Enablement

General Purpose

Programming Language

Interpreted

Single Threaded

Functional

Non-classical inheritance

Maintained by ECMA Group

JavaScript is…

JavaScript today

• Language of the Year 2014!

• Frameworks

• Backbone.js

• JavaScriptMVC

• *.JS

• Platforms

• AngularJS

• Future ECMA Proposals

• Node.JS -> Chrome V8 Engine

“”

“JavaScript is a misunderstood language”

Douglas Crockford

PayPal

OBJECTS CLOSURES

FUNCTIONS

To become a JavaScript expert you need to understand

“Everything is an Object”

Objects and Inheritance

Object instantiation

function Person(first, last) {

var _firstname = first

var _lastname = last

this.getFullName = function () {

return [_firstname, _lastname].join(“ ”);

var p = new Person();

var Person = {first: ‘Luis’, last: ‘Atencio’};

var p = Object.create(Person);

instanceof checks work on

both scenarios

This is the prototype

Prototype

• A prototype is an object from which other objects inherit properties

• Prototype is a special property of the constructor function, not of the instance.

• A constructor creates objects. Each constructor has an associated prototype

object, which is simply another object.

• When an object is created, it’s parent is set to the prototype object associated

with the constructor that created it

Content borrowed from Bala’s presentation

Dissecting an Object

person Object

person

[[Prototype]]

Object

constructor

hasOwnProperty

isPrototypeOf

propertyIsEnumerable

toLocaleString

toString

valueOf

[[Prototype]]the __proto__ property

the prototype object

var person = {};

Constructors

When a function is called with the new operator, the function serves as the constructor for that class.

Internally, JavaScript creates an object, and then calls the constructor function. Inside the

constructor, the variable this is initialized to point to the just created Object.

obj = new Object;

obj.x = 1;

obj.y = 2;

function Foo() {

this.x = 1;

this.y = 2;

var obj = new Foo();

Prototype vs __proto__

var bob = Person('Bob');

bob instanceof Person //false

FORGETTING

TO CALL new

instance

prototype constructor.prototype

Superclass…

Undefined

constructor.prototype

var obj = new Object();

alert (obj.toString());

Object

Subclass.prototype = new SuperClass();

instanceof VS typeof

• Typeof is a unary operator

• Good for telling apart the basic type of object: number, string, object, function…

• typeof null === ‘object’

• typeof [] === ‘object’

• Instanceof is a binary operator

• Inspects prototype chain

• Use to tell the type of object an instance belongs to

• p instanceof Person

• p instanceof Object

Coercion

var Twelve = new Number(12);

var fifteen = Twelve + 3;

fifteen; //15

typeof fifteen; //"number" (primitive)

typeof Twelve; //"object"; (still object)

object coerced to primitive

Keep in mind…

• Do not try to extend native objects: Number, Array, etc

• Affects Globally

• Not forward compatible

• One example: forEach (introduced in ECMAScript 5.1)

• Rather than extending native classes (like Array), try creating array-like classes

Functions

Parameter Passing

• Objects pass by reference• Arrays

• Objects

• null

• Primitives pass by value • Strings

• Numbers

JavaScript Functions

• JS unit of abstraction and behavior

• First-class objects ≈ a value ≈ an object

• Callable - Invoked via the ( ) operator

• Used to create object instances

• Have 2 important properties:• name: the name of the function

• length: the number of formal arguments

• arguments: an array-like structure that contains the function arguments

JavaScript Functions as First-Class Objects

var someFunc = function () { return ”ABC"}; // assigned to a variable

someFunc();

function someFunc() { // created with name

return "ABC”;

(function () { // Immediately-Invoked function expression (IIFE)

// module content here

JavaScript Functions as First Class objects2

function someFunc(otherFunc) { // as argument to function

var innerResult = otherFunc();

return innerResult;

function someFunc() { // returned from functions

return function () {

return “ABC”;

Closures

Function’s Closure

function makeAdder(x) {

return function(y) {

return x + y;

var add5 = makeAdder(5);

var add10 = makeAdder(10);

console.log(add5(2)); // 7

console.log(add10(2)); // 12

Function declaration “closes

over” all variables (local and

global) present at the moment

of function declaration

“x” is part stored in the

function’s stack

Emulating Private Methods

var counter = (function() {

var privateCounter = 0;

function changeBy(val) {

privateCounter += val;

return {

increment: function() {

changeBy(1);

Immediately Invoked Function

Execution IIFE

privateCounter is only visible

within the scope of the

function

Duck Typing

function myArray() { }

MyArray.prototype.length = 0;

(function() {

var methods = [‘push’, ‘pop’, ‘slice’, ‘join’];

for(var i = 0; i < methods.length; i++)(function(name) {

MyArray.prototype[name] = function() {

return Array.prototype[name].apply(this, arguments);

})(methods[i]);

var myObj = new MyArray();

myObj.push(1,2,3);

Function Level Scope

• Scope changes inside functions

• This is JavaScript’s main scoping rule

• Variables declared are LOCAL to the

function in which they are declaredfunction myFunction() {

var carName = "Volvo";

// code here can use carName

Global Scope

• Declared outside the context of a

function

• All functions and modules have access

to this data

• Should be used with caution!

• Variables without var are automatically

global. Not allowed in strict mode.

var carName = ”Z";

function myFunction() {

carMake = “Nissan”;

// code everywhere can use carName and

carMake

Block Scope

var foo = 1;

function bar() {

if (!foo) {

var foo = 10;

alert(foo);

bar();

JavaScript does not use

block-level scope. Through a

process called “hoisting”

declarations are defined at

the top of the enclosing

function, assignment is

defined at the moment the

assignment is made

Prints out the value “10”

Block Scope2- More Hoisting

var a = 1;

function b() {

a = 10;

return;

function a() {}

alert(a);

Prints out the value “1” !!!

Function declaration is

hoisted to the top of the

function, overriding the value

for a entirely

Minimum vertical distance

principle

Block Scope3- Let

if (x > y) {

let gamma = 12.7 + y;

i = gamma * x;

gamma only exists in the context

of this block

Remember with?

PRACTICE

var someFunc = function () { return "ABC"};

var myObj = {

someProp = 4,

someFunc = function () { return "XYZ"};

with (myObj) {

// bound the scope of myObj into the curly

braces

var xyz= someFunc(); // confusing???

alert (xyz); // prints XYZ

Enterprise-class JavaScript Applications

AngularJS

• Open Source web application framework maintained

by Google

• Client side MVC

• Web Components

• Declarative Programming platform

• Pre-Process HTML page and interpreting custom

HTML attributes that can then be manipulated via

JavaScript.

Great JS Libraries

• Writing Object Oriented JS• Prototype.js

• Backbone.js

• Ember.js

• Writing Cross-Browser JS• JQuery.js

• Unit testing JS• JSUnit

• QUnit

New Language Features

Strict Mode

• Opt in to a restricted variant of JavaScript

• Eliminate silent errors by changing them to throw

• Makes it easier for JS engine optimizations

• Prohibits syntax to be defined in future versions

• Different semantics from normal mode

• Both modes can coexist

ECMAScript 5

(function(){

"use strict";

var foo = "test";

console.log(test);

Getters and SettersECMAScript 5

var obj = {

get foo() {

return 'getter';

set foo(value) {

console.log('setter: ’ + value);

obj.foo = ’bar'; // setter: bar

obj.foo // 'getter'

Arrow Functions (lambdas)

Implement the … operator.

Syntax:

() => { };

Java 8 recently introduced this

let x = [0,1,2];

x.map(x => console.log(x * x));

ECMAScript 6

Variadic Functions

Implement the … operator.

Syntax:

function* name(

[param[, param[, ... param]]]) {

statements

ECMAScript 6

Array Comprehension

Very popular in Python and

Shorten operations on multiple

Format:

[for (x of iterable)

if (condition) x]

// simple example

var abc = [“A”, “B”, “C”];

[for (letters in abc) letters.lowerCase()]

// another example (with if)

var years = [1954, 1974, 1990, 2006, 2010];

[for (year of years) if (year > 2000) year];

ECMAScript 7

next.call(this,

‘Advanced JavaScript Techniques’);

part = ‘II’;

Covers

•Functions Invocation

•Dynamic Scoping

•Functional Programming

• Why?

• Benefits

• Techniques

Resources

Great Resources

• http://www.yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/

• Resig, John and Bibeault, Bear. Secrets of a JavaScript Ninja. Manning Publications

• http://javascript.crockford.com/javascript.html

• http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

• http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

• http://skilldrick.co.uk/2011/09/understanding-typeof-instanceof-and-constructor-in-javascript/

WORK BETTER. LIVE BETTER.

Java script Techniques Part I

Software

Transcript of Java script Techniques Part I

Java script security for java developers

Java script vs vb script

Java script - it.uu.se · Java script ÓJavaScriptÕs is a language everybody loves to hateÓ /Tim johnson

Java Script Introduction

Java script patterns

Java script basics

LAB Java Script

Java Script notes

Java Script Workshop

Java script

Java script questions

Java Script Promise

Asynchronous java script

Java Script Guide

Java script ppt

Mvc & java script