Variables

How to write Variables in JavaScript

Don't write Variables in JavaScript like this

var windowHeight = 850;
var valutaSign = '€';
var emailValidationError = 'This emailadress is not valid';

var a = 850;
valutaSign = '€';

Variables

Variables can contain

// Boolean
var isAdmin = true;

// Arrays
var slidesArray = [];

// Objects
var slideObject = {};

// Functions
var getSlideHeight = function(elementClassName) {
    var slideElement = document.querySelector(elementClassName);
    return slideElement.style.height;
};

Objects

How to write Objects in JavaScript?

// Object literal
var slideObject = {};

// Object constructor
var sliderObject = new Object();

Objects

Object properties

// Object literal
var slideObject = {
    name: 'Slide name',
    id: 6,
    date: '16-02-2016',
    content: 'Slide content',
    category: [9, 12, 26],
    tags: [33, 77]
};


// Object constructor
var sliderObject = new Object();
sliderObject.name = 'Slide name',
sliderObject.id = 6,
sliderObject.date = '16-02-2016',
sliderObject.content = 'Slide content'
sliderObject.category = [9, 12, 26],
sliderObject.tags = [33, 77]

Objects

How to acces Object properties value

// Object literal
var slideObject = {
    name: 'Slide name',
    id: 6,
    date: '16-02-2016',
    content: 'Slide content',
    category: [9, 12, 26],
    tags: [33, 77]
};

slideObject.name;

slideObject['content'];

slideObject.date;

slideObject['category'];

Objects

How to edit/set Object properties value

// Object literal
var slideObject = {
    name: 'Slide name',
    id: 6,
    date: '16-02-2016',
    content: 'Slide content',
    category: [9, 12, 26],
    tags: [33, 77]
};

slideObject.name = 'Slide namesss';

slideObject['content'] = 'Differtent content of the slide';

slideObject.date = new Date();

// remove the value
slideObject['category'] = '';

Objects

How to acces Object methods

// Object literal
var slideObject = {
    name: 'Slide name',
    id: 6,
    date: '16-02-2016',
    content: 'Slide content',
    category: [9, 12, 26],
    tags: [33, 77],
    getSlideCategories: function() {
        return this.category;
    },
    getSlideName: function() {
        return this.date;
    }
};

slideObject.getSlideName();

Array

How to write Arrays in JavaScript?

// Array literal
var slideArray = [];

// Array constructor
var sliderArray = new Array();

Array

Array properties

// Array literal
var slideArray = [9, 12, 26, 'JavaScript Array', ['Google', 'Twitter', 'Facebook']];


// Array constructor
var sliderArray = new Array(9, 12, 26, 'JavaScript Array', 'Google');

Array

How to acces Array properties value

// Array literal
var slideArray = [9, 12, 26, 'JavaScript Array', ['Google', 'Twitter', 'Facebook']];


// returns 9
slideArray[0];

// returns 'JavaScript Array'
slideArray[3];

// returns 'Facebook'
slideArray[4][2];

Array

How to edit/set Array properties value

// Array literal
var slideArray = [9, 12, 26, 'JavaScript Array', ['Google', 'Twitter', 'Facebook']];


// 9 is changed to 25
slideArray[0] = 25;

// 'JavaScript Array' is changed to 'JavaScript is easy'
slideArray[3] = 'JavaScript is easy';

// 'Facebook' is changed to 'Instagram'
slideArray[4][2] = 'Instagram';

Array

How to add new properties to an Array

// Array literal
var slideArray = [9, 12, 26, 'JavaScript Array', ['Google', 'Twitter', 'Facebook']];

slideArray.push(25);

// Add objects to array
var slidesArray = [];

slidesArray.push({
    name: 'First slide',
    date: new Date(),
    id: 33
});

slidesArray.push({
    name: 'Second slide',
    date: new Date(),
    id: 34
});

If, Else, Else If

How to write If, Else, Else If in JavaScript?

// if/else/else if
if(value) {
    return true;
} else if(value) {
    return value;
} else {
    return false;
}

// if
if(value) {
    return true;
}

// if/else
if(value) {
    return true;
} else {
    return false;
}

If, Else, Else If

Example:

var priceA = 500;
var priceB = 600;

if(priceA && priceB) {
    if(priceA > priceB) {
        return priceA;
    } else if(priceB > priceA) {
        return priceB;
    } else {
        return false;
    }
} else {
    return false;
}

I want to return the highest price value if the are set

var priceA = '';
var priceB = 200;

if(priceA && priceB) {
    if(priceA > priceB) {
        return priceA;
    } else if(priceB > priceA) {
        return priceB;
    } else {
        return false;
    }
} else {
    return false;
}

Functions

How to write Functions in JavaScript?

function documentIsReady() {
    return true;
}

var documentIsReady = function() {
    return true;
}

// Immediately-Invoked-Function-Expressions
(function() {
    return true;
})();

// Module pattern
var DocumentIsReady = (function() {
    return true;
})();

// Object with methods
var object = {
    isDocumentReady: function() {
        return true;
    },
    todayDate: function() {
        return new Date();
    }
};

Functions

How to call a Function in JavaScript?

function documentIsReady() {
    return true;
}

documentIsReady();

=>

var documentIsReady = function() {
    return true;
}

documentIsReady();

=>

// Immediately-Invoked-Function-Expressions
(function() {
    return true;
})();

=>

Is automaticly called

Functions

How to call a Function in JavaScript?

// Module pattern
var DocumentIsReady = (function() {
    var documentReady = {};

    documentReady.isReady = function(value) {
        if(value) {
            return true;
        } else {
            return false;
        }
    }

    return documentReady;
})();

// call method from Module pattern on Global Scope
DocumentIsReady.isReady();

// or in a Immediately-Invoked-Function-Expressions
(function(window, document, documentReady, undefined) {

    documentReady.isReady(true);

})(window, document, DocumentIsReady);

See it works:

https://jsfiddle.net/rsschouwenaar/2pssjrrm/3/

Functions

How to call a Function in JavaScript?

// Object with methods
var object = {
    isDocumentReady: function() {
        return true;
    },
    todayDate: function() {
        return new Date();
    }
};

object.todayDate();
object.isDocumentReady();

=>

Loops

How to write Loops in JavaScript?

// For loop
for(i = 0; i < numberArrayLength; i++) {
    console.log(numberArray[i]);
}

// For/in loop
for(x in numberArray ) {
    console.log(numberArray[x]);
}

// forEach loop
array.forEach(function(number) {
    console.log(number);
});

// While loop
while (i < 10) {
    console.log('The number is ' + i);
    i++;
}

Loops

How to use Loops in JavaScript?

// For loop
var numberArray = [5, 6, 9, 12, 26, 35];

var i;
var numberArrayLength = numberArray.length;
for(i = 0; i < numberArrayLength; i++) {
    console.log(numberArray[i]);
}

// For/in loop
var numberArray = [5, 6, 9, 12, 26, 35];

var x;
for(x in numberArray ) {
    console.log(numberArray[x]);
}

// While loop
var numberArray = [5, 6, 9, 12, 26, 35];

var i;
while (i < 10) {
    console.log('The number is ' + i);
    i++;
}

// forEach loop
var numberArray = [5, 6, 9, 12, 26, 35];

numberArray.forEach(function(number) {
    console.log(number);
});

Scoping

What is Scoping in JavaScript?

Global scope:

Any variable declared outside of a function belongs to the global scope, and is, therefore, accessible from anywhere in your code. [source]

Local scope:

any variable declared within that function is only accessible from that function and any nested functions.  [source]

Scoping

How global Scope looks in JavaScript?

Global scope:

Global variable are accessible inside a local scope.

// Global scope
var thisVariable = 'Google';
var thisSecondVar = 250;

(function() {
    // Local scope
    console.log('thisVariable: ', thisVariable);
    console.log('thisSecondVar: ', thisSecondVar);
})();

Example: https://jsfiddle.net/rsschouwenaar/u5whs7d4/

Scoping

How local Scope looks in JavaScript?

Local scope:

Local variable are NOT accessible inside a global scope. Only in the local scope.

(function() {
    // Local scope
    var thisVariable = 'Google';
    var thisSecondVar = 250;
    
    console.log('local thisVariable: ', thisVariable);
    console.log('local thisSecondVar: ', thisSecondVar);
})();

// Global scope
console.log('global thisVariable: ', thisVariable);
console.log('global thisSecondVar: ', thisSecondVar);

Example: https://jsfiddle.net/rsschouwenaar/sh8e4geg/​

Nested local scope:

Children scopes can see parent scopes. Parent scopes can't see child scopes

var thisGlobalVariable = 'Twitter';

(function() {
    // Local scope
    var thisVariable = 'Google';
    
    (function() {
      var secondNestedVar = 'Facebook';
      
      console.log('--- Nested Local ---');
      console.log('Nested Local thisGlobalVariable: ', thisGlobalVariable);
      console.log('Nested Local thisVariable: ', thisVariable);
      console.log('Nested Local secondNestedVar: ', secondNestedVar);
     
    })();
    
    console.log('--- Local ---');
    console.log('Local thisGlobalVariable: ', thisGlobalVariable);
    console.log('Local thisVariable: ', thisVariable);
    console.log('Local secondNestedVar: ', secondNestedVar); 
    
})();

// Global scope
console.log('--- Globals ---');
console.log('global thisGlobalVariable: ', thisGlobalVariable);
console.log('global thisVariable: ', thisVariable);
console.log('global secondNestedVar: ', secondNestedVar);

Example: https://jsfiddle.net/rsschouwenaar/v631bdtx/

Scoping

How nested Scopes looks in JavaScript?