Let's talk a little about javascript functions and objects. I'll use Atom text editor, you can find lots off tutorial about using Atom.
Named functions:
function multiply(a,b) {
var result = a*b;
return result;
}
var multiplied = multiply(3,4);
console.log(multiplied);
function multiply(a,b) {
var result = ["my result:", a*b];
return result;
}
var multiplied = multiply(3,4);
console.log(multiplied);
console.log(multiplied[0] + " >>>> " + multiplied[1]);
console output:
[ 'my result:', 12 ]
my result: >>>> 12
Anonymous functions:
var a = 4;
var b = 3;
//only execute if we call the variable as if it is a function
var multiplied = function() {
var result = a*b;
console.log(result);
}
// which means inside multiplied variable there is a anonymous function, run it!
multiplied();
//only execute if we call the variable as if it is a function
var multiplied = function(a,b) {
var result = ["my result:", a*b];
return result;
}
// which means inside multiplied variable there is a anonymous function, run it!
console.log(multiplied(4,5));
console.log(multiplied);
console output:
[ 'my result:', 20 ]
[Function: multiplied]
Immediately invoked functional expressions:
//inside the variable, we have an immediately invoked function expression
//run the function with below arguments
var multiplied = (function(a,b) {
var result = ["my result:", a*b];
return result;
})(4,5) // arguments are here
console.log(multiplied);
console output:
[ 'my result:', 20 ]
//result is NaN, why i'm in trouble?
//the browser runs the function(immediately invoked expressions) when it is encountered
//so the variables should be before the function
var multiplied = (function(a,b) {
var result = ["my result:", a*b];
return result;
})(a,b) // arguments are here
var a = 3;
var b = 4;
console.log(multiplied);
variables:
***For scope control, you should always declare your variables using the var prefix.
There is a difference between var a = 1 and a = 1.
var a = 1 --> declares the variable in the current scope which can be local or global.
a = 1 --> if the variable couldn't be found anywhere in the scope chain, it becomes global.
This usage is very bad practice!!!
***With ES2015 two new types could be used:
const (cannot be changed once defined)
let (block scope variable. smaller scope then var)
const MYCONSTANT = 3;
console.log(MYCONSTANT);
MYCONSTANT = 4; // gets error
console output:
3
[stdin]:6
MYCONSTANT = 4;
^
TypeError: Assignment to constant variable.
at [stdin]:6:12
at Script.runInThisContext (vm.js:96:20)
function example() {
var localVariable = 4;
if(localVariable) {
var localVariable = "different localVariable"; //changes local variable for entire scope, to resolve that problem we should use type of let
console.log("nested localVariable: " + localVariable);
}
console.log("localVariable: " + localVariable);
}
example();
console output:
nested localVariable: different localVariable
localVariable: different localVariable
function example() {
var localVariable = 4; // or let localVariable = 4;
if(localVariable) {
let localVariable = "different localVariable";
console.log("nested localVariable: " + localVariable);
}
console.log("localVariable: " + localVariable);
}
example();
console output:
nested localVariable: different localVariable
localVariable: 4
objects:
var ltmc = new Object();
var ltmc = {
description: "Less Talk More Code",
year: "2018",
//objects can also have function that uses or changes object's properties
updateYears: function() {
return ++ltmc.year;
}
}
// or you can define as below:
// ltmc.description = "Less Talk More Code";
// ltmc.year = "2018";
console.log("all object: " + ltmc);
console.log("one property of object: " + ltmc.description);
ltmc.updateYears();
console.log("updated: " + ltmc.year);
console output:
all object: [object Object]
one property of object: Less Talk More Code
updated: 2019
//object constructor examples
function Ltmc(description, year) {
this.description = description;
this.year = year;
this.updateYears = function() { //anonymous function
return ++this.year;
};
}
var ltmc01 = new Ltmc("Less Talk More Code", "2018");
var ltmc02 = new Ltmc("Less Talk More Code2", "2019");
console.log(ltmc01);
console.log("************");
console.log(ltmc02);
var ltmcList = [
new Ltmc("Less Talk More Code3", "2020"),
new Ltmc("Less Talk More Code4", "2021"),
];
console.log("************");
console.log(ltmcList);
console output:
Ltmc {
description: 'Less Talk More Code',
year: '2018',
updateYears: [Function] }
************
Ltmc {
description: 'Less Talk More Code2',
year: '2019',
updateYears: [Function] }
************
[ Ltmc {
description: 'Less Talk More Code3',
year: '2020',
updateYears: [Function] },
Ltmc {
description: 'Less Talk More Code4',
year: '2021',
updateYears: [Function] } ]
// ltmc01["year"] --> bracket notation example
// ltmc01.year and ltmc01["year"] are same
function Ltmc(description, year) {
this.description = description;
this.year = year;
}
var ltmc01 = new Ltmc("Less Talk More Code", "2018");
console.log(ltmc01["year"]);
I'll mention about closures in an another post.
(much more examples: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures )
