JavaScript

Essentials

 

JavaScript Essentials

 
  • Variables
  • Objects
  • Arrays
  • If, Else & Else If
  • Functions
  • Loop (For, While, forEach)
  • Scoping
  • Naming Convention
 

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

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

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

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

Scoping

 

How nested Scopes looks in JavaScript?

 

Naming Convention

 
  • Use camelCase for JavaScript Variables, Functions etc
  • The names have to make sense!
  • Have to be related to the Value or Object where it is in
  • Someone else has to understand your code
 

Sources

 

JavaScript Essentials

By Raymon Schouwenaar

More from Raymon Schouwenaar