Basics
There is so much that can be said about javascript but one of its biggest misconceptions is that java and javascript are tightly related. They arn't java is to javascript is like ham to hamster
This chapter will describe javascript in ES5. For more updated syntax, have a look at the ES2015/2016
Variables
var <variable name> = <value>
Example:
var str = 'a string';
var no = 114;
var isValid = true;
Undefined
A variable that does not have a value assigned has the value undefined.
var a; // undefined
Typeof
typeof "" // string
typeof false // boolean
typeof 113 // number
typeof [1,2,3] //object
typeof { a : '2' } // object
typeof function test(){} // function
typeof undefined "undefined"
typeof null // object
Operators
You don't need to learn every single operator to be efficient with javascript but you do need to know the difference between certain operations
Equality
Checking for equality can be done in two ways, equal on value == or equal on value and data type, ===
Example
3 == 4 // false
3 == 3 // true
3 == '3' // true
3 === 3 // true
Worth noting
null === undefined // false null == undefined // true
Mathematical operators
/*-+
Data types
Number String Boolean
Functions
function test(){}
test();
Data structures
Arrays
var arr = [1,2,3]
or
var arr = new Array(1,2,3)
forEach
Has the following value
list.forEach([currentValue],[index], [array])
var list = [1,2,3]
list.forEach(function(item, index, array){
})
for
var list = [1,2,3]
for(var i = 0, i< list.length; i++) {
}
for in
var list = [1,2,3];
for( var item in list ) {
}
var obj = { a : 1, b : 2, c : 3 } // outputs the keys, rather than values
If you want to loop an object I recommend one of the following constructs:
alt 1
var obj = { a : 1, b : 2, c : 3 }
for( var item in obj ) {
if(obj.hasOwnProperty( item )) {
console.log( obj[ item ] )
}
}
hasOwnProperty only looks at the object itself and not the property chain.
alt 2
var obj = { a : 1, b : 2, c : 3 }
Object.keys(obj).forEach(function(item){
console.log( obj[ item ] )
})
gotcha
Don't use forEach if you want to be able to exit the loop break won't work. If you want to be able to exit use for. Lookout with using a for-in loop, the result may not be what you had in mind
Maps
Classes & Objects
Objects are a little weird in javascript compared to other languages. Objects might exist without there being a function used. Functions could be used as a template for an Object. If that is the case then the function is called a constructor function. You can tell that is the case cause there is a convention saying that constructor function should start with a capital letter.
function Constructor(){}
Instantiation with a function
There are two ways to create objects new operator and Object.create. new operator is pretty much what you might be used to from other languages:
function Person(name){
this.name = name
}
var person = new Person('chris');
person.name // chris
Instantiation using Object.create
The other way Object.create is a more powerful version that allows you to finely control how your object is created. Lets look at a nice example:
var obj = Object.create(
Person.prototype,
{ foo : { writable : false, value : 11 } }
)
Here we are creating an Object based on a prototype Person and we give it an additional property foo that can only have its value set once. Examining object you discover the following:
obj.name // is defined
obj.foo // 11
obj.foo = 13 // still 11
obj.constructor // Person
You can also just do this:
var person = Object.create(Person.prototype);
person.name // defined
person.constructor // Person
Instantiation with neither
var obj = { a : 3 };
Constructor
There is a property on your object pointing to the constructor function that created it
var obj = new Person();
obj.constructor // Person
Prototype
Lets start out like this:
function Test(){
}
var test = new Test();
After a while we decide we want to add a method to that definition:
Testing.prototype.testing = function(){ console.log('testing') }
Now if we try to use that on our created object:
test.testing() // prints 'testing'
We see that its possible.
Interesting..
However if we do the following:
function Player(){}
var player = new Player();
player.title = 'a great player';
var player2 = new Player();
player2.title // undefined
This is because we assign the title property on the object and not the class. Think of the prototype as defining static methods that is able to access object properties like so:
Player.prototype.sayHi = function(){
console.log('hi ' + this.name)
}
Mutation
You can mutate an object by adding or removing a property to it at any time.
var obj = { a: 3 }; // created with property 'a'
obj.b = 3 // just added 'b' as a property
Same thing goes with function
function Test(){}
Test.a = 3;
Test.a // 3
And an array instance
var arr = [1,2,3];
arr.b = 5;
arr.b // 5
Object methods
Object.create Object.assign Object.freeze Object.keys