Mathematical expression will *never* cause an error. At worst the result will be NaN.
### String data type
```javascript
let string = "text";
let string$ = 'text';
let string_ = `text ${expression}`; //string interpolation (needs backticks)
string.length; // length of the string
let char = string.charAt(index); // extaraction of a single character by position
string[index]; // char extraction by property access
let index = strinf.indexOf(substring); // start index of substring in string
```
Property access is unpredictable:
- does not work in IE7 or earlier
- makes strings look like arrays (confusing)
- if no character is found, `[ ]` returns undefined, `charAt()` returns an empty string
- Is read only: `string[index] = "value"` does not work and gives no errors
### [Slice vs Substring vs Substr](https://stackoverflow.com/questions/2243824/what-is-the-difference-between-string-slice-and-string-substring)
If the parameters to slice are negative, they reference the string from the end. Substring and substr doesn´t.
```js
string.slice(begin [, end]);
string.substring(from [, to]);
string.substr(start [, length]);
```
### Boolean data type
```javascript
let boolean = true;
let boolean_ = false;
```
### Null data type
```javascript
let _ = null;
```
### Undefined
```javascript
let $; //value is "undefined"
$ = undefined;
```
### Typeof()
```javascript
typeof x; //returns the type of the variable x as a string
typeof(x); //returns the type of the variable x as a string
```
The result of typeof null is "object". That’s wrong.
It is an officially recognized error in typeof, kept for compatibility. Of course, null is not an object.
It is a special value with a separate type of its own. So, again, this is an error in the language.
### Type Casting
```javascript
String(value); //converts value to string
Number(value); //converst value to a number
Number(undefined); //--> NaN
Number(null); //--> 0
Number(true); //--> 1
Number(false); //--> 0
Number(String); //Whitespaces from the start and end are removed. If the remaining string is empty, the result is 0. Otherwise, the number is “read” from the string. An error gives NaN.
Boolean(value); //--> true
Boolean(0); //--> false
Boolean(""); //--> false
Boolean(null); //--> false
Boolean(undefined); //--> false
Boolean(NaN); //--> false
//numeric type checking the moronic way
typeof var_ == "number"; // typeof returns a string with the name of the type
```
### Type Checking
```js
isNaN(var); // converts var in number and then check if is NaN
Number("A") == NaN; //false ?!?
```
### Dangerous & Stupid Implicit Type Casting
```js
2 + 'text'; //"2text", implicit conversion and concatenation
1 + "1"; //"11", implicit conversion and concatention
"1" + 1; //"11", implicit conversion and concatention
this.properyName; // reference to object property inside the object
}
method; () => {
obj.propertyName; // this is undefined here, use full object name
}
};
// access to property (non existant porperties will return Undefined)
obj.property; // dot notation
obj["property"]; // array notation
// property modification (will add property if missing)
obj.property = value; // dot notation
obj["property"] = value; // array notation
obj.func(); //method access
delete obj.propertyName; // delete property
Object.keys(obj); // list of all property names
Object.entries(obj); // list contents as key-value pairs
```
### Constructors and object instances
JavaScript uses special functions called **constructor functions** to define and initialize objects and their features.
Notice that it has all the features you'd expect in a function, although it doesn't return anything or explicitly create an object — it basically just defines properties and methods.
```js
// constructor function definition
function Class(params) {
this.property = param;
this.method = function(parms) { /* code here */ }
}
let obj = new Class(params); // object instantiation
let obj = new Object(); // cretaes empty object
let obj = new Object({
// JSON
});
```
### Prototypes
Prototypes are the mechanism by which JavaScript objects *inherit* features from one another.
JavaScript is often described as a **prototype-based language**; to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.
An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on.
This is often referred to as a **prototype chain**, and explains why different objects have properties and methods defined on other objects available to them.
If a method is implemented on an object (and not it's prototype) then only that object will heve that method and not all the ones that come from the same prototype.
```js
// constuctor function
function Obj(param1, ...) {
this.param1 = param1,
...
}
// method on the object
Obj.prototype.method = function(params) {
// code here (operate w/ this)
}
let obj = new Obj(args); // object instantiation
obj.method(); // call method from prototype
```
### Extending with prototypes
```js
// constructor function
function DerivedObj(param1, param2, ...) {
Obj.call(this, param1); // use prototype constructor
let dobj = new DerivedObj(args); // object instantiation
dobj.method(); // call method from prototype
```
### Classes (ES6+)
```js
class Obj {
constructor(param1, ...) {
this.param1 = param1,
...
}
get param1() // getter
{
return this.param1;
}
func() {
// code here (operate w/ this)
}
static func() { } // static method
// object instantiation
let obj = new Obj(param1, ...);
obj.func(); // call method
```
### Extending with Classes
```js
class DerivedObj extends Obj {
constructor(param1, param2, ...){
super(param1); // use superclass constructor
this.param2 = param2;
}
newFunc() { }
}
let dobj = DerivedObj();
dobj.newFunc();
```
## Deconstruction
### Object deconstruction
```js
let obj = {
property: value,
...
}
let { var1, var2 } = obj; // extract values from object into variables
let { property: var1, property2 : var2 } = obj; // extract props in variables w/ specified names
let { property: var1, var2 = defalut_value } = obj; // use default values if object has less then expected props
```
### Array Deconstrions
```js
let array = [ 1, 2, 3, 4, 5, 6 ];
let [first, , third, , seventh = "missing" ] = array; // extract specific values from array
```
## Serialization
```js
let object = {
// ojectt attributes
}
let json = JSON.stringify(object); // serialieze onbect in JSON
let json = { /* JSON */ };
let object = JSON.parse(json); // deserialize to Object
```
## Timing
### Timers
Function runs *once* after an interval of time.
```js
// param1, param2, ... are the arguments passed to the function (IE9+)
let timerId = setTimeout(func [, milliseconds, param1, param2, ... ]); // wait milliseconds before executing the code (params are read at execution time)
useTimeout(pos); // schedule next call with new walue
}
}, 1_000, pos);
}
useTimeout();
```
### `let` vs `var` with `setTimeout`
```js
// let instantitates a new variable for each iteration
for (let i = 0; i <3;++i){
setTimeout(function() {
console.log(i);
}, i * 100);
}
// output: 0, 1, 2
for (var i = 0; i <3;++i){
setTimeout(function() {
console.log(i);
}, i * 100);
}
// output: 3, 3, 3
```
### Preserving the context
```js
let obj = {
prop: value,
method1 : function() { /* statement */ }
method2 : function() {
let self = this // memorize context inside method (otherwise callback will not know it)
setTimeout(function() { /* code here (uses self) */ })
}
}
// better
let obj = {
prop: value,
method1 : function() { /* statement */ }
method2 : function() {
setTimeout(() => { /* code here (uses this) */ }) // arrow func does not create new scope, this context preserved
}
}
```
### Intervals
Function runs regularly with a specified interval. JavaScript is **Single Threaded**.
```js
// param1, param2, ... are the arguments passed to the function (IE9+)
let timerId = setInterval(func, milliseconds [, param1, param2, ... ]); // (params are read at execution time)
// works in IE9
let timerId = setInterval(function(){
func(param1, param2);
}, milliseconds);
// Anonymous functions with arguments
let timerId = setInterval(function(arg1, ...){
// code here
}, milliseconds, param1, ...);
clearTimeout(timerId); // cancel execution
```
## DateTime
A date consists of a year, a month, a day, an hour, a minute, a second, and milliseconds.
There are generally 4 types of JavaScript date input formats:
- **ISO Date**: `"2015-03-25"`
- Short Date: `"03/25/2015"`
- Long Date: `"Mar 25 2015"` or `"25 Mar 2015"`
- Full Date: `"Wednesday March 25 2015"`
```js
// constructors
new Date();
new Date(milliseconds);
new Date(dateString);
new Date(year, month, day, hours, minutes, seconds, milliseconds);
// accepts parameters similar to the Date constructor, but treats them as UTC. It returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.
[Firefox CORS not HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp)
**NOTE**: Firefox 68 and later define the origin of a page opened using a `file:///` URI as unique. Therefore, other resources in the same directory or its subdirectories no longer satisfy the CORS same-origin rule. This new behavior is enabled by default using the `privacy.file_unique_origin` preference.
```json
"privacy.file_unique_origin": "false"
```
In `page.html`
```html
<scriptsrc="scripts/module.js"></script>
<scriptsrc="scripts/script.js"></script>
```
In `module.js`:
```js
// exporting indivisual fratures
export default function() {} // one per module
export func = () => expression; // zero or more per module
// Export list
export { name1, name2, …, nameN };
// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };
// Exporting destructured assignments with renaming
export const { name1, name2: bar } = o;
// re-export
export { func } from "other_script.js"
```
In `script.js`:
```js
import default_func_alias, { func as alias } from "./module.js"; // import default and set alias
import { default as default_func_alias, func as alias } from "./module.js"; // import default and set alias
// use imported functions
default_func_alias();
alias();
```
```js
import * from "./module.js"; // import all
module.function(); // use imported content with fully qualified name
