WELCOME TO

JAVASCRIPT 101

SKG Node.js Meetup

Let's talk about

  • What is it
  • Who uses it
  • Variables
  • Functions
  • Objects

Kostas Bariotis

http://kostasbariotis.com

  • Back End Engineer @
  • Blogger
  • Have worked mostly with Web Technologies

@kbariotis

What is JavaScript 

  • Standard codename "ECMAScript"
  • Is not "Interpretive Java"
  • The scripting language for Web pages
  • The sugar in Non-Browser Environments
  • Object-oriented language with first-class functions

  • Executes at Runtime

Who uses JavaScript 

  • Web Browsers
  • Servers (Node.js, etc)
  • IoT
  • Cross Platform Apps
  • Native Apps

Most Popular Technologies

StackOverflow Survey 2015

Compensation by Technology

StackOverflow Survey 2015

Variables

  • Use var to declare
  • Loosely Typing
  • Types
  • Type Coersion
  • Hoisting

Primitive Values

  • Number
  • String
  • Boolean
  • Null
  • Undefined
  • NaN

Reference Values

  • Object
  • Function
  • Array
  • Date
  • RegExp
/* Java Example (strong typing) */  
int a = 13; // int declaration  
String b = "thirteen"; // String declaration 

/* JavaScript Example (loose typing) */  
var a = 13; // Number declaration  
var b = "thirteen"; // String declaration  

/* Type Coersion */
7 + 7 + 7; // = 21  
7 + 7 + "7"; // = 147  
"7" + 7 + 7; // = 777 

1 == true; // = true  
1 === true; // = false  
  
7 == "7"; // = true  
7 === "7"; // = false; 
console.log(typeof "Javascript 101"); // string

console.log(typeof 1); // number

console.log(typeof undefined); // undefined

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

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

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

console.log(typeof null); // object

console.log(typeof NaN); // number

Do not use them!

Global Variables

Hoisting

bla = 2
var bla;
console.log(bla); // 2


// is implicitly understood as:
var bla;
bla = 2;

Always declare variables at the top!

var obj = {};

Objects

var obj = new Object();

as in Object Oriented Programming

  • Not Class Oriented
  • Unordered Collection of properties
  • Key-Value Structures
  • Array Access or Object Access
  • Created in Runtime
  • Object Literal --> {}
  • Prototypical Inheritance
/* Javascript Objects */

var Course = {
    property: "Javascript 101",
    method: function() {

        console.log("Are we 
                    done yet??!?!");

    };
}

Course.method(); 

Course['method'](); 
/* PHP Objects */

class Object {

    var $property = "Javascript 101";

    public function method() {
        
        print_r("Are we done 
                    yet!?!?!");        

    }    

}

var Course = new Object();

Course.method();
/* Method 2 */
function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

var rand = new Person("Rand McKinnon", 33, "M");
var ken = new Person("Ken Jones", 39, "M");


/* Method 3 */
var Animal = {
  type: "Invertebrates",
  displayType : function(){ 
    console.log(this.type);
  }
}

var animal1 = Object.create(Animal);
animal1.displayType(); 

var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType();

Functions  

  • Functions are objects
  • First Class Citizens
  • Will have properties and values
  • Is Closure
  • Can create and return other functions
  • Have own scope
function helloWorld() {

    console.log("Hello World");

}

var helloWorld = function() {

    console.log("Hello World");

}

/* Passed the Body as a String, Not Recommended */
var helloWorld = new Function('console.log("Hello World");'); 


helloWorld();
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

console.log(makeAdder(5)(2)); // 7
/* Function Expression */

alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; } 


/* Function Declaration */

alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; } 

Function Declaration vs Function Expression

Functions Arguments

  • Store in pseudo-array `arguments`
  • Primitives Type arguments are always passed by Value
  • Reference Type arguments are always passed by Reference
var testFunction = function(a, b, obj){

    obj.modified = true;
    console.log(arguments);    

};

var obj = {};
obj.modified = false;

console.log(obj.modified); // "false"

testFunction(1, a, obj); // { '0': 1, '1': a, '2': { modified: true } }

console.log(obj.modified); // "true"

JQUERY IS NOT JAVASCRIPT

Thank you fellows!

Follow me, @kbariotis.