Intro to OOP

in Javascript

var greeting = {
    place : 'Lancaster',
    name : 'speaker',
    sayHi: function(){
               return 'Hello' + this.place + ' my name is ' + this.name + '!';
            }        
}

var yolixtly = Object.create(greeting);
yolixtly.name = 'Yoli';
yolixtly.sayHi();

yolixtly.aboutYou = function() {
        return 'I am a full-stack web developer ' + this.toDo;
}

// Hello Lancaster my name is Yoli

yolixtly.toDo = 'student';

Content:

What is an Object?

Class vs Object

How to create Objects in Javascript

Everything in Javascript is an Object!???

Build-in Objects vs Primitive Data types

What is an Object?

“An unordered collection of properties”

Key : Value pairs

name : 'John'

skill : talk()

color: 'Red'

feature: stop()

var person = {
    name : 'John'; 
}

var person = {
    talk: function(){
        'Hello my Name is ' + this.name;
    }
};

	CLASS	OBJECT
in Javascript		Building Blocks of JS

No no no!

So... then how Do objects get created?

In Javascript Objects are instances of other Objects

PROTOTYPE

WHAT IS A PROTOTYPE?

An Object
The top level of the prototypal inheritance

	CLASS	OBJECT
static	BluePrints

	CLASS	OBJECT
DEFINITION	1 way	multiple ways

var person = {
     name : 'John', //string
     age: 28, //number 
     children: null, // null
     married: False, //boolean
}

Simplest Way - Object Literal:

person.sayHi = function(){  //function 
        return 'Hello my Name is ' + this.name 
        + ', I am ' + this.age + ' !';
}

person.sayHi() 

'Hello my Name is John, I am 28!'

Ways to Define an Object and create Instances

Object Literal
Object Constructor

var Person = {
    name: "Martha",
    age: 56
}

var Mike = Object.create(Person);

function Person(name, age){
    this.name = name;
    this.age = age;
    sayHi = function(){
        return 'Hello my name is ' 
        + this.name + ' and I am '
        + this.age;
    }
}

var Mike = new Person('Mike', 28);

var Carol = new Person('Carol', 40);

var Marcus = new Person('Marcus', 10);

Mike.name   //Mike
Mike['name'] //28

object.Super-Fun!

object["Super-Fun!"]

Mike.name = 'Mike'
Mike.age = 28

STEP 1: Create an Object

What is Prototypal Inheritance?

var Person = {
    name: "Yoli",
    age: 56
}

STEP 2: Clone it

var Mike = Object.create(Person);

STEP 3: Extend it!

Mike.lastName = 'Smith';

Prototype and 'this' keyword

/* HUMAN PROTOTYPE */
function Human(name, nationality){
	this.name = name;
	this.nationality = nationality
}

var MexicanMom = new Human('Alicia', 'Mexican');

var AmericanMom = new Human('Amber', 'American');

//Instance of Human 
Human { name: 'Alicia', nationality: 'Mexican' }

//Instance of Human
Human { name: 'Amber', nationality: 'American' }

MexicanMom.language = 'Spanish';

AmericanMom.country = 'United States';

//Extensions of Mexican:

Human { 
name: 'Alicia', 
nationality: 'Mexican', 
language: 'Spanish' 
}

//Extensions of American:

Human { 
name: 'Amber',
nationality: 'American',
country: 'United States' 
}

AmericanMom.language  // undefined

MexicanMom.language  // Spanish

/* Employee PROTOTYPE */
function Employee(name, title){
	this.name = name;
	this.title = title;
}

Prototype and 'this' keyword

/* HUMAN PROTOTYPE */
function Human(name, nationality){
	this.name = name;
	this.nationality = nationality
}

/* Employee PROTOTYPE */
function Employee(name, title){
	this.name = name;
	this.title = title;
}

/* Employee PROTOTYPE Refactor 1*/
function Employee(title){
	Human.call(this);
	this.title = title;
}

Connect????

Avoid Redundancy?

var FrenchMom = new Employee('Full Stack Web Developer');

Employee {
  name: undefined,
  nationality: undefined,
  title: 'Full Stack Web Developer' 
}

/* Employee PROTOTYPE Refactor 2 */
function Employee(name, title, nationality){
	Human.call(this, name, nationality);
	this.title = title;
}

var FrenchMom = new Employee('Adrianne', 'Full Stack Web Developer', 'French');

Employee {
  name: 'Adrianne',
  nationality: 'French',
  title: 'Full Stack Web Developer'
}

/* Important Extra snippets : */
Employee.prototype = Object.create(Human.prototype);
Employee.prototype.constructor = Employee;

Human.prototype.speak = function(){
	return 'Hello my name is ' 
        + this.name + ' and I am '
         + this.nationality;
}

FrenchMom.speak(); // Hello my name is Adrianne and I am French

Everything in JS is an OBJECT!!!???? Answer is: NO

TRUE: Objects are the building blocks upon which much of JS is built.But that is not all!

Data Types	Representation
string	"hello"
number	3, NaN
boolean	true false
null	null
undefined	undefined
Object	{}

The Only object!

and our

Complex Primitive friend the: function

They are what they are:

Simple primitives!

The Build-In Objects of JS

Build-In Objects
String
Number
Boolean
Object
Function
Array
Date
RegExp
Error

The Build-In Objects of JS

Build-In Objects	Methods and properties attached to build-In Constructors (some...)	has conter-part primitive-form
String	length, lastIndexOf(), indexOf(), slice(), substring...etc	yes
Number		yes
Boolean		yes
Object	call(), apply(), bind(), etc..	no
Function		no
Array	length, pop(), push(),shift(),splice() etc...!!!	no
Date		no
RegExp	search(), replace();	no
Error		no

//A simple string (data type)

var myStr = 'hello';
//hello

typeof myStr
//string

myStr.length
// 5

myStr.slice(0,2)
//he

//A build-in Object -> String

var myObj = new String('hello')
//[String: 'hello']

typeof myObj
//object

myObj.length
//5

myObj.slice(0,2);
//he

How a data type relates to its counter-part Object?

Resources:

http://www.w3schools.com/js/js_objects.asp

http://www.htmlgoodies.com/html5/tutorials/javascript-prototypical-inheritance-explained.html#fbid=jOATVQ27MOt

http://raganwald.com/2013/02/10/prototypes.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

http://stackoverflow.com/questions/2800964/benefits-of-prototypal-inheritance-over-classical

Books:

You don't know JS by Kyle Simpson

@yolixtly

yolixtly@gmail.com

Yolixtly Anderson

Intro to OOP

What is an Object?

Resources:

Intro to OOP

More from Yolixtly ANDERSON