General JavaScript Info

Popup Windows created with:
alert(), confirm(), prompt()
confirm returns true or false based on what the user selects, either OK or Cancel

Use console.log(), .warn(), .error(), to troubleshoot, etc.

Pure JavaScript string literals are indicated with ""

Most things + a string causes concatenation

The typeof command will return the object type:
typeof(10 < 2); = boolean
boolean literals are true and false, no ""

JavaScript only has one numeric type, the number, which is a floating point value.

An unknown thing that conforms to a variable name but is not declared is a typeof undefined

A declared variable with no value is null

To check lexical string equality or value equality use ===
Presumably == would check for object equality

Switch Case Statements

switch(n) {
case thing1:
statement(arg);
break;
case thing2:
statement(arg);
break;
default:
statement(arg);
break;
}

When switching on a string, remember to use toLowerCase or toUpperCase as necessary.

For loops match Java

for(i=0; i<10; i++) {
statement(args);
}

for (var property in object) {
statement(property);
}

The Do-While Loop
var x = 1
do {
statement(arg);
x++;
}
while( x < 10 );

OR

var x = 1
while( x < 10 ) {
statement(arg);
x++;
}

Functions

function goodJSName(arg1, arg2) {
statement(arg1);
statement(arg2);
return "Done!";
}

Arrays
var emptyArray = [];
var coolArray = ["cool", "array"];
console.log(coolArray[1]); // = array
coolArray[2] = "stuff";
console.log(coolArray[2]); // = stuff
coolArray.push("kids");
console.log(coolArray[3]); // = kids
console.log(coolArray.length); // = 4

JSON
Literal:
var thing = {
prop1: "string",
prop2: 100,
prop3: ["array", "of", "strings"],
prop4: true,
prop5: {
nestedObjProp1: "string",
nestedObjProp2: false,
nestedObjProp3: "etc."
},
func1: function() {
statement(thing.prop2)
}
};

Accessible via dot notation, e.g., thing.prop5.nestedObjProp3 === "etc." // = true

Also accessible like this: thing["prop3"][0] === "array" // = true
This is primarily in case you have a property that isn't a valid identifier and thus can't be called using dot notation.

You can dynamically add properties as well:
thing.what = "No really, you can do this."
console.log(thing.what); // = "No really, you can do this."

With the bracket notation you can also use objects as keys
var what = 'what?'
thing[what] = 'wha what?'
console.log(thing[what]); // = wha what?
Benefit is, if you aren't sure the value of an object, you can use the variable to store and retrieve values.

Prototype:
function Thing(prop1, prop2) {
this.prop1 = prop1;
this.prop2 = prop2;
}

var coolThing = new Thing("neat", "stuff");

Object.create
Use of literals and functions as displayed above are just syntactic sugar for:
Object.create(Object.prototype, {JSON: Object})
The {JSON: Object} in this case looks something like this:
{
prop: {
value: "value",
enumerable: true/false,
writeable: true/false,
configurable: true/false
}
}
This itself is an object that is used to define other objects. You can add additional props.
These values are available via Object.getOwnPropertyDiscriptor(obj, 'prop')
You can also set these directly via Object.defineProperty(obj, 'prop', {writable: false})
These settings don't generate errors unless you have 'use strict' set, otherwise they fail silently
Make a property not writable so you can't overwrite it, e.g.,
if you create a toString property that calls a function, you wouldn't want to accidentally overwrite it with a string literal
Make a property that is an object not writable doesn't prevent you from changing properties in that object,
You'll also need to call Object.freeze(obj.prop)
Making a property not enumerable hides it during enumeration as in the for in loop,
It is still available via obj['prop']
Making a property non configurable means you can't change the enumerable, and configurable properties,
You also can't delete the property
You can also use Object.defineProperty to add functions as properties, like this:
Object.defineProperty(obj, 'prop', {
get: function() {
return statement();
}
set: function(value) {
statement(value);
}
}

Then access it like normal: obj.prop or obj.prop = arg

ES6 Object:
Allows you to declare an object like this:
class thing {
constructor(arg) {
this.arg = arg
}

methodName(arg) {
statement(arg);
}
}

Kinds of Objects:
Host Objects: Those defined by the host, e.g., a web browser, like console
Core Object: Those defined by the language, like Math, String, etc.
User Defined Object: Stuff we make

If you create a variable using var at the root level of a .js file, it has global scope.
If you create a variable in a function using var, it has local scope.
If you create a variable in a function without using var, it has global scope.
Scope in general is basically like Java except for this last example.

'use strict'
This makes JavaScript follow EcmaScript standards exactly and disable or error on deprecated methods.

In JavaScript there is a lot of syntactic sugar that makes things faster, e.g.,
var colorArray = ['red', 'green', 'blue'];
is the same as:
var colorArray = new Array('red', 'green', 'blue');

As with the prototype items discussed above, we can add things to Array, e.g.,
Object.defineProperty(Array.prototype, 'last', {get: function() {return this[this.length -1]} })
The above code allows us to add a last method to any array which returns the last element

A function's prototype is the object instance that will become the prototype for all objects created using this function as a constructor.
Accessible via myFunction.prototype
An object's prototype is the object instance from which the object is inherited.
Accessible via myObject.__proto__

Let's create a simple object:
function myObj(prop1, prop2) {
this.prop1 = prop1
this.prop2 = prop2
}
By doing this I have created a prototype instance of an object in memory.
That instance is effectively a blank JSON, like this: myObj{}

If I then type:
myObj.prototype.numProp = 3
I have modified the prototype, like this myObj{numProp: 3}
All subsequent instances created with new myObj, will have the above property
I can override this value like this:
var myObjInstance = new myObj('x', 'y')
myObjInstance.numProp = 5
I can change the value in the prototype instance by writing:
myObj.prototype.numProp = 4
myObjInstance.__proto__.numProp = 4
The immediate above is basically referencing the prototype of the specific object.
However, neither of these will print out 4, if I call: console.log(myObjInstance.numProp), as that value is still overwritten in the instance.

If I make changes to the prototype AFTER instantiation, that creates a new prototype instance from which all new instances inherit.
So the prototypes are dynamic in that sense.

You can use the myObjInstance.hasOwnProperty('numProp') to return a boolean indicating that the instance has its own numProp property.

You can walk up an objects inheritance chain like this:
myObjInst.__proto__.__proto__. ...
This will continue until you get to a null

To allow inheritance you first have to have a chain:
UrObject.prototype.doit = function(value) { return statement(value) }
You can then say:
MyObject.prototype = Object.create(UrObject.prototype)
Finally, in your MyObject constructor, call:
UrObject.call(args)
And set your constructor explicitly:
MyObject.prototype.constructor = MyObject

We can also use Java like constructions
class UrObject {
constructor(arg) {
statement(arg)
}

myFunc(arg) {
otherStatement(arg)
}
}

class MyObject extends UrObject {
constructor(arg) {
super(arg)
diffStatement(arg)
}
}

Important to note that constructor is also a class and properties of classes are not enumerable by deafult.

JavaScript Design Patterns

Creational
When using the new keyword 4 things happen
1. JS creates a brand new object
2. It links the new object to a prototype
3. It binds 'this' to the new object scope
4. It returns this
Constructor
Module
Factory
Singleton

Structural
Decorator
Facade
Flyweight

Behavioral
Command
Mediator
Observer

	Erstellt von Alex Poiry vor mehr als 8 Jahre

Introductory notes to the use and function of modern JavaScript