typeof x or typeof (x) returns a string with the name of the data type of x. For null, it returns "object".
INTERACTION
alert("Hello"); - shows a message and waits for the user to press "OK".
result = prompt(title, [default]); - input field for user and buttons OK/Cancel. title is text to show, default is optional 2nd argument for initial value for the input field. []'s around default means its optional. The input is stored into result.
result = confirm(question); - shows text question and has two buttons (Ok and Cancel) returns Boolean value.
String Comparison - 'Z' > 'A' is true - compares lexicographical order where a is least Z is most in value.
Strict Equality : 0 == false is true b/c different types are converted to numbers by the equality operator ==. So an "" becomes 0 as does false. === is the strict equality operator which checks equality without type conversion.
IF-STATEMENT, ? OPERATOR
The if, if-else, and if-elseif-else is the same as in Java
? Operator
Used to assign something to a variable depending on a condition:
if (age>18) { pass =true;} else { pass =false;}// same thing but with ? operator:let pass = (age >18) ?true:false;// general syntaxlet result = condition ? value1IfTrue: value2IfFalse;
Multiple ?'s for >1 conditions:
let result = (condition) ? value1 : (condition2) ? value2 : (condition3) ? value3 : value4Else;
LOGICAL OPERATORS
|| OR
Finds first truthy value: result = value1 || value2 || value3; converts operands (value1/2/3) to Boolean and evaluates each from left to right one by one. If the operand is true, stops and returns the original value of that operand. if all are false, returns last operand.
&& AND
Finds the first falsy value. same process as above. If all are true, returns the last operand.
! NOT
NULLISH COALESCING OPERATOR - ??
?? is the nullish coalescing operator; it treats null and undefined similarly and it's a nice syntax to get the first "defined" value of the two arguments.
a ?? b --> returns the first argument (a) if it's not null/undefined; otherwise returns b. It's basically:
result = (a !==null&& a!==undefined) ? a : b;
Multiple ??'s:
// returns first of a/b/c which is defined (not null/undefined) otherwise "None".a ?? b ?? c ??"None";
LOOPS
while, do-while, for, switch, break/continue are all the same as in Java.
In JS, functions aren't structures; they're actually a special kind of value which can be assigned; hence Function Expressions:
// function declarationfunctionsayHi() {console.log("hi");}// function expressionletsayHi=function() {console.log("hi");};
The function is created and assigned to the sayHi variable. You can even copy a function to another variable:
functionsayHi() {console.log("hi");} // function expression would also work instead of this.let func = sayHi;func(); // hisayHi(); // hi
Differences b/n function expressions & declarations:
Function Declaration:
function, declared as a separate statement, in the main code flow.
visible in the whole script, no matter where it is; can be called earlier than it's defined.
Function Expression:
function, created inside an expression.
created when the execution reaches it and is usably only from that moment forward.
ARROW FUNCTIONS
There's another way to create functions besides declarations & expressions: Arrow Functions.
// general syntaxletfunc= (arg1, arg2, ..., argN) => expressionletsum= (a, b) => a + b; // returns sum// for 0 parameters:letfunc= () => {...};// for 1 param, remove ():letfunc= param1 => {...};
For a multiline expression, use {}'s and use a normal return inside them:
letsum= (a, b) => {let result = a + b;return result;};
Arrow Functions:
Don't have this
Don't have arguments
Can't be called with new
Don't have super
POLYFILLS
New language features may include not only syntax constructs and operators, but also built-in functions. Ie. some outdated JS engines don't have Math.trunc() so it can't run that code.
A polyfill is a script which updates/adds new functions. It "fills" in the gap and adds missing implementations. (core.js is good for this)
if (!Math.trunc) { /// if no such function,//implement itMath.trunc=function(number) {return number <0?Math.ceil(number) :Math.floor(number); };}
TRANSPILERS
A transpiler is a special piece of software that can parse ("read and understand") modern code, and rewrite it using older syntax constructs (the result would be the same). Usually, a developer runs the transpiler on their own computer, and then deploys the transpiled code to the server. Babel is one of the most used transpilers.
OBJECTS ; [python dictionary]
The object data type is basically the python dictionary. It's created with {}'s and an optional list of properties
property is a key-value pair.
key is a string (called name/identifier)
value is anything
CREATE EMPTY OBJECT
// 2 ways of creating an empty object
let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax
LITERALS AND PROPERTIES
// This object has 3 propertieslet user = {// key: value, name:"John", age:30,"likes birds":true,// multiword property name must be quoted};
ADD, REMOVE, AND READ
// GET property values of object using dot notation:var x =user.name; // Johnvar y =user.age; // 30// dot notation won't work for multi-word properties so do this:var z = user["likes birds"]; // true// ADD value:user.isAdmin =true;// CHANGE value:user.age =18; // changes age to 18.user.age +=1; // increments age by 1.// REMOVE property using 'delete _propertyName_':deleteuser.age;
PROPERTY VALUE SHORTHAND
functionmakeUser(name, age) {return { name: name, age: age, };}// SHORTHAND: instead of 'name: name,' just write 'name,'functionmakeUser(name, age) {return { name,// same as name: name, age; 30, }}
PROPERTY EXISTENCE TEST, " in " OPERATOR
// check if a property exists in an object; returns boolean value.console.log("name"in makeUser); // true
FOR-IN LOOP
// to iterate thru all keys in an object, use a for-in loop.let user = {name:"Dev", age:17, isIndian:true};for(let key in user) {console.log( key ); // keysconsole.log( user[key] ); // values}
METHOD SHORTHAND
// you can also add function expressions into objects then call those methods via dot notation:
let user = {
// method shorthand
sayHi() {
console.log("hi");
}
};
' THIS ' METHODS
// used to access a property-value in a method, in the same Object:let user = { name:"Dev", age:17,sayHi () {console.log(`"Hi ${this.name}"`); }};user.sayHi(); // Hi Dev
CONSTRUCTOR FUNCTION - ' new ' operator
They're technically regular functions, but they're always: 1) named with a capital letter first, and 2) they should be executed only with the new operator.
When objects are added/subtracted (obj1 +/- obj2) or printed, objects are auto-converted to primitives, then the operation is carried out.
Objects are true in boolean, and there are only numeric and string conversions
NUMERIC CONVERSION - happens when you apply math functions on objects. ie. Date objects (from datetime) can be substracted
STRING CONVERSION - happens when you output an object like alert(obj), etc...
ToPrimitive
There are 3 variants of type-conversion, each called a "hint":
Object-to-String
alert(obj); // output
Object-to-Number
let num =Number(obj); // explicit conversionlet delta = date1 - date2; // subtraction of datetime objects is allowedlet greater = user1 > user2; // less/greater comparison
Default - when operator is "not sure" what type to expect (ie. a + can concatenate sting && add nums)
let total = obj1 + obj2; // binary plus uses "default"if (user ==1) {...}; // obj == number uses "default"
Symbol.toPrimitive
obj[Symbol.toPrimitive] =function(hint) {// must return a primitive value// hint = one of "string", "number", "default"};// ex.let user = { name:'dev', age:17, [Symbol.toPrimitive](hint) {alert(`"hint: ${hint}"`);return hint =="string"?`{name: "${this.name}"}`:this.age; }};// conversions demo:alert(user) // hint: string -> {name: "John"}alert(+user) // hint: number -> 17alert(user +1) // hint: default -> 18
Object.keys, .values, .entries
/*Object.keys(obj) - returns an array of keysObject.values(obj) - returns an array of valuesObject.entries(obj) - returns an array of [key, value] pairs*/// looping over values (or keys):let salaries = {"john":100,"pete":300,"mary":250};for (let salary ofObject.values(salaries)) {// salary is values in salaries object}
SYMBOL type
Object property keys can be either Strings or Symbols.
A Symbol is a unique value; It's created using Symbol();
// CREATE SYMBOL w/ an optional description (called symbol name/label)let id =Symbol("id");let id2 =Symbol("id");// SET a VALUEuser[id] ="Their id value";// Set SYMBOL VALUE in an object LITERAL with square brackets but you still have to declare it as a symbol:let id =Symbol();let user = { name :"dev", [id] :123};// id != id2 even though they share the same description/name.// for printing, either do:console.log(id.toString()); // shows 'symbol: id'console.log(id.description()); // shows 'description: id'
HIDDEN PROPERTIES - symbols allow us to create hidden properties of an object that can't be accidentally access or overwrite. Symbols are skipped by for-in loops and Object.keys(objectName) method
GLOBAL SYMBOLS
Sometimes, you want same-names symbols, perhaps different parts of your application want to access symbol "id"- exactly the same property. That's where the global symbol registry steps in. You can create symbols in it and access them later.
In order to read a symbol from the registry, use Symbol.for(key). This returns the symbol with the symbol name/description/label of key- otherwise, it creates a new symbol Symbol(key) and stores it:
// read from the global registrylet id =Symbol.for("id"); // if the symbol doesn't exist, create it// read it again (maybe from another part of the code)let idAgain =Symbol.for("id");// the same symbolalert( id === idAgain ); // true// Symbol.keyFor(symbol) returns global symbol descriptionlet sym =Symbol.for("name");let sym2 =Symbol.for("id");alert( Symbol.forKey(sym) ); // namealert( Symbol.forKey(sym2) ); // id
NUMBER
// More ways to write a number:let billion =1000000000;let billion =1_000_000_000;let billion =1e9;let ms =1e-6; // 0.000001 (microsecond)// rounding: Math.floor, .ceil, .round, .trunc, and .toFixed(x) for nearest xth decimallet numVar =12.3494;alert( numVar.toFixed(1) ) // 12.4// parseInt/parseFloat "read" a number from a string from left to right until they can't:alert( parseInt("100px") ); // 100alert( parseFloar("12.5vw") ); // 12.5alert( parseInt("a123") ); // NaN, the first symbol stops the process// Max and min:alert( Math.max(3,5,-10,0,1) ); // 5alert( Math.min(1,2,0) ); // 0
STRING
Concatenation
alert('wu'+'-tang') // 'wu-tang'alert('1'+2+2) // '122' and not '14'
Length
'hello'.length// 5
Finding String in a String
var str ="Please locate where 'locate' occurs!"; // -1 if not foundvar pos =str.indexOf("locate"); // pos=7var lastpos =str.lastIndexOf("locate"); // pos=21var posAfterIndex15 =str.indexOf("locate",15); // pos=21var pos =str.search("locate"); // pos=7// search() can't take a second start position argument// indexOf() can't take powerful search values (regex)
Substring (str.slice, str.substring, str.substr)
var str ="Apple, Banana, Kiwi";var res =str.slice(7,13); // Banana -> slice(include, exclude)var res =str.slice(-12,-6); // Banana -> start @ end of strvar res =str.slice(7); // from 7 to end of strstr.substring(7,13); // same as slice, but can't do neg. paramsstr.substr(7,6); // Banana -> 2nd param is length of substr (from 7, a 6 letter str)str.substr(-4); // Kiwi -> counts backwards from end of str
Replacing String Content
replaces specified value with another value in a string. It doesn't change the string, it returns a new string. It only replaces first match and is case sensitive.
str ="Please visit Microsoft";var n =str.replace("Microsoft","Apple"); // n= "Please visit Apple"// to replace case insensitive, use /i flag:var n =str.replace(/MICROSOFT/i,"Apple"); // /i for insensitive// to replace all matches, use /g flag:var n =str.replace(/Microsoft/g,"Apple"); // /g for global
Upper and Lower Cases
str.toUpperCase();str.toLowerCase();
Trim
str.trim(); // removes whitespace from both sides of a string
Converting String to Array
str.split(""); // split string into all characters arraystr.split(","); // split on commas
String interpolation (kinda like printf)
// use `` instead "" and insert variable into ${}let myPet ="chimp";console.log(`I own a pet ${myPet}.`)
for (let char of"hello") {console.log(char); // H, e, l, l, o (char becomes H, then e, then l...)}
Test for Match (includes, startsWith, endsWith)
alert( "Widget with id".includes("Widget") ); // truealert( "Hello".includes("Bye") ); // false// The opt. 2nd arg of str.includes is the position to start search:alert( "Widget".includes("id") ); // truealert( "Widget".includes("id",3) ); // false [from position 3]
ARRAYS
Creating an array
var cars = ["Corvette","Alfa Romeo","BMW"];var values = ["Foo","Bar",10]; // can hold multiple types// use names to access its "members"; person.firstName -> "John"var person = {firstName:"John", lastName:"Doe", age:46};
Access Elements
var firstCar = cars[0];var john =person.firstName; // from person array
Adding Elements
var fruits = ["Banana","Orange","Apple","Mango"];fruits.push("Lemon"); // adds to end and returns lengthfruits[fruits.length] ="Peach"; // add peach at end
Difference b/n Arrays & Objects: arrays use numbered indexes, while, Objects use names indexes.
Removing Elements
var nums = [1,2,3,4];nums.pop(); // returns and removes last elementnums.shift(); // removes first element and shifts element left by 1nums.unshift(1); // adds new element in front, and pushes elements right by 1delete nums[0]; // change first element to undefined; leaves undefined "holes"
/* length is actually not the count of values in the array, but the greatest numeric index plus one. The length property is also writable. If we increase it manually, nothing interesting happens. But if we decrease it, the array is irreverseibly truncated: */
let arr = [1,2,3,4,5];arr.length=2; // truncate to 2 elementsalert( arr ); // [1, 2]arr.length=5; // return length backalert( arr[3] ); // undefined: the values do not return// so technically, the simplest way to clear an array is:arr.length=0;
Properties & Methods
/*- length -> cars.length;- sort -> cars.sort();- reverse() -> reverses the array then returns it- check array -> Array.isArray(cars);- convert array to csv string -> cars.toString();- join elements by a char -> cars.join("*");- merge arrays -> arr3 = arr1.concat(arr2); adds arr2 at the end of arr1- slice part of array -> var x = nums.slice(1); starts from 1 to end (do 1,x)- push(...items) –> adds items to the end,- pop() –> extracts an item from the end,- shift() –> extracts an item from the beginning,- unshift(...items) –> adds items to the beginning.- includes(value) -> returns boolean if array has the value.*/
Iteration
let arr = ["Apple","Orange","Pear"];// normal for-loop:for (let i =0; i <arr.length; i++) {alert( arr[i] );}// for-of:for (let fruit of fruits) {alert( fruit );}// for-in, since arrays are objects:for (let key in arr) {alert( arr[key] ); // Apple, Orange, Pear}// for-each, run a function for elements in array:arr.forEach((item, index, array) {alert( item );});["Bilbo","Gandalf","Nazgul"].forEach((item, index, array) => {alert(`${item} is at index ${index} in ${array}`);});
Basically an object (or python Dictionary) but Map allows keys of any type.
Methods and Properties:
/*
new Map() – creates the map.
map.set(key, value) – stores the value by the key.
map.get(key) – returns value of key, else, undefined.
map.has(key) – returns boolean if key exists.
map.delete(key) – removes the value by the key.
map.clear() – removes everything from the map.
map.size – returns the current element count.
map.keys() – returns an iterable for keys,
map.values() – returns an iterable for values,
map.entries() – returns an iterable for [key, value]'s.
Every map.set returns the map, so we can chain the calls:
map.set('1', 'str1')
.set(1, 'num1')
.set(true, 'bool1');
*/
Basic Implementation:
let map = new Map(); // creates the map
map.set('name', 'dev'); // a string key
map.set(99, 'problems'); // a numeric key
map.set(true, 'isMessiGoat'); // a boolean key
// Objects would convert keys to string but
// Map keeps the type, so these two are different:
alert( map.get('name') ); // 'dev'
alert( map.get(99) ); // 'problems'
alert( map.size ); // 3
Map can also use Objects as Keys:
let john = { name: "John" };
let ben = { name: "Ben" };
// for every user, let's store their visits count
let usersMap = new Map();
// john is the key for the map
usersMap.set(john, 123);
usersMap.set(ben, 321)
alert( usersMap.get(john) ); // 123
alert( usersMap.get(ben) ); // 321
Iteration
let recipeMap = new Map([
['cucumber', 500],
['tomatoes', 350],
['onion', 50]
]);
// iterate over keys using map.keys()
for (let vegetable of recipeMap.keys()) {
alert(vegetable); // cucumber, tomatoes, onion
}
// iterate over values using map.values()
for (let amount of recipeMap.values()) {
alert(amount); // 500, 350, 50
}
// iterate over [key, value] entries.
// recipeMap is the same as of recipeMap.entries()
for (let entry of recipeMap) {
alert(entry); // cucumber,500 (and so on)
}
// Map also has a built-in forEach method like the array:
// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
alert(`${key}: ${value}`); // cucumber: 500 etc
});
SET
“set of values” (without keys), where each value may occur only once
Methods & Properties:
/*
new Set(iterable) – creates set- optional iterable object (array etc...)
set.add(value) – adds a value, returns set.
set.delete(value) – removes the value.
set.has(value) – returns boolean if the value exists.
set.clear() – removes everything from the set.
set.size – is the elements count.
*** main feature is that repeated calls of set.add(value) with the same value don’t do anything.
*/
Basic Implementation:
let set = new Set(); // creates set
let john = { name: "John" }; // 3 users
let pete = { name: "Pete" };
let mary = { name: "Mary" };
// users are added, often repeatedly
set.add(john);
set.add(pete);
set.add(mary);
set.add(john); // repeat
set.add(mary); // repeat
alert( set.size ); // 3; set keeps only unique values
for (let user of set) {
alert(user.name); // John then Pete then Mary
}
Iteration over Set:
let set = new Set(["oranges", "apples", "bananas"]);
// single-line for-of loop
for (let value of set) {
alert(value)
}
// forEach:
set.forEach((value, valueAgain, set) => {
alert(value);
});
WeakMap
is Map-like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means.
WeakSet
is Set-like collection that stores only objects and removes them once they become inaccessible by other means. [WeakMap&Set]'s main advantages are that they have weak reference to objects, so they can easily be removed by garbage collector. That comes at the cost of not having support for clear, size, keys, values…
DESTRUCTURING ASSIGNMENT
Destructuring assignment is a special syntax that allows us to “unpack” arrays/objects into a bunch of variables.
Array Destructing
// we have an array with the name and surname
let arr = ["John", "Smith"]
// destructuring assignment
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;
alert(firstName); // John
alert(surname); // Smith
Ignore Elements using commas
// second element is not needed so leave it empty
let [firstName, , title] = ["Julius", "Caesar", "Consul"];
alert( firstName ); // Julius
alert( title ); // Consul
String Destructing
// destructive assignment can work on any iterable like strings
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]); // even on Sets
Assign to anything
// you can use any "assignables" on the left side.
// Ie. an object property:
let user = {};
[user.name, user.surname] = "Julius Caesar".split(" ");
alert(user.name); // Julius
alert(user.surname); // Caesar
Swapping Values in 1 line via destructive assignment
let user1 = "Julius";
let user2 = "Pompey";
[user1, user2] = [user2, user1];
// now, user1="Pompey" & user2="Julius"
The Rest "..."
// Usually, if the array is longer than the list at the left, the “extra” items are omitted. If we’d like also to gather all that follows, add "...rest":
let [name1, name2, ...rest] = ["A", "B", "C", "D", "E"];
// 'rest' is array of items, starting from the 3rd one:
// ["C", "D", "E"]
alert(rest[0]); // C
alert(rest.length); // 3
// *** We can use any other variable name in place of rest
Default Value
// If the right array is shorter than the left list, they're just undefined values. If we want a “default” value to replace undefined values, we can provide it using =:
let [name = "Guest", surname = "Anonymous"] = ["Julius"];
alert(name); // Julius (from array)
alert(surname); // Anonymous (default used)
Object Destructing
Basic Syntax: let {var1, var2} = {var1:…, var2:…}
The right side is an existing object. The left side contains an object-like “pattern” for corresponding properties (same name as property names in object):
let options = {
title: "Menu",
width: 100,
height: 200
};
let {title, width, height} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200
// The order does not matter. This works too:
let {height, width, title} = { title: "Menu", height: 200, width: 100 }
If we want to assign a property to a variable with another name, set the variable name using a colon:
let {width: w, height: h, title} = options;
The Rest "..."
let options = {title: "Menu", height: 200, width: 100};
// rest = object with the rest of properties
let {title, ...rest} = options;
// now title="Menu", rest={height: 200, width: 100}
alert(rest.height); // 200
alert(rest.width); // 100
DATE AND TIME
new Date object:
// no parameters
let now = new Date();
alert( now ); // shows current date/time
/* new Date(year, month, date, hours, minutes, seconds, ms)
- Create the date with the params (first 2 args are obligatory)
- The year must have 4 digits.
- The month count starts with 0 (Jan), up to 11 (Dec).
- The date param is day of month, if absent then 1 is assumed.
- If hours/min/secs/ms is absent, they're assumed to be 0.
*/
new Date(2011, 0, 1, 0, 0, 0, 0); // 1 Jan 2011, 00:00:00
new Date(2011, 0, 1); // the same, hours etc are 0 by default
Access date components from Date object:
/*
getFullYear() - get the year (4digits)
getMonth() - get month (from 0 to 11)
getDate() - Get the day of month, from 1 to 31
--> getHours(), getMinutes(), getSeconds(), getMilliseconds()
getDay() - Get day of week, from 0 (Sun) to 6 (Sat)
getTime() - Returns timestamp (#ms since Jan,1,1970)
*/
Autocorrection (Out-of-range date components are distributed automatically)
let date = new Date(2016, 1, 28);
date.setDate(date.getDate() + 2);
alert( date ); // 1 Mar 2016
Date.now() - returns the current timestamp
let start = Date.now(); // ms count from 1 Jan 1970
for (let i = 0; i < 100000; i++) {
let doSomething = i * i * i;
}
let end = Date.now(); // done
alert(`loop time (ms): ${end - start}`);
Date.parse() from a string
// The method Date.parse(str) can read a date from a string.
// The string format should be: YYYY-MM-DDTHH:mm:ss.sssZ
let ms = Date.parse('2012-01-26T13:51:50.417-07:00');
alert(ms); // 1327611110417 (timestamp)
JSON
Let’s say we have a complex object, and we’d like to convert it to a string, to send it over a network, or just to output it for logging purposes. Throughout development, properties are added, renamed, and removed; updating a toString() every single time is PAIN.
JSON (JavaScript Object Notation) is a general format to represent values/objects.
JSON.stringify
converts objects into JSON to a string called encoded / serialized / stringified / marshalled object.
Note: JSON-encoded object differs from the object literal in that:
Strings use "". No '' or backticks in JSON. So 'John'--> "John".
All Object property names are "". So age:30 --> "age":30.
JSON.stringify can be applied to str, numbers, bool, null, & even arrays:
// a number in JSON is just a number
alert( JSON.stringify(1) ) // 1
// a string in JSON is still a string, but double-quoted
alert( JSON.stringify('test') ) // "test"
alert( JSON.stringify(true) ); // true
alert( JSON.stringify([1, 2, 3]) ); // [1,2,3]
JSON is a data-only language-independent specification, so some JS-specific object properties are skipped by JSON.stringify: functions, symbolic keys and values, and properties that store undefined:
To decode a JSON-string, we need JSON.parse(). Basic Syntax:
let value = JSON.parse(str, [reviver]);
// str: JSON-string to parse
/// reviver: Optional function(key,value) that will be called for each (key, value) pair and can transform the value
Basic Implementation + For Nested Objects:
let numbers = "[0, 1, 2, 3]"; // stringified array
numbers = JSON.parse(numbers); // decodes from JSON
alert( numbers[1] ); // 1
// nested objects (ie. array property or another obj):
let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';
let user = JSON.parse(userData); // decodes along with array obj
alert( user.friends[1] ); // 1
Reviver:
// Imagine, we got a stringified meetup object from the server:
// title: (meetup title), date: (meetup date)
let str = '{"title":"Meeting","date":"2017-11-30T12:00:00.000Z"}';
/* PROBLEMOOO:
let meeting = JSON.parse(str); // deserialize
// The value of meeting.date is a string, not a Date object.
alert( meetup.date.getDate() );
*/
// Pass to JSON.parse the reviving function as the second argument, that returns all values “as is”, but date will become a Date:
let meeting = JSON.parse(str, function(key, value) {
if (key == 'date')
return new Date(value);
return value;
});
alert( meetup.date.getDate() ); // now works!
REST PARAMETERS
A function can be called with any number of arguments, no matter how it is defined:
function sum(a, b) {
return a + b;
}
alert( sum(1, 2, 3, 4, 5) ); // 3
// There's no "excessive arguments" error; only the first 2 count
The rest of the unused parameters can be included in the function definition by using three dots ... followed by the name of the array that will contain them:
function sumAll(...args) { // args is the array
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6
We can choose to get the first parameters as variables, and gather only the rest. Here below, the first 2 arguments go into variables, and the rest go into a 'titles' array:
function showName(firstName, lastName, ...titles) {
alert( firstName + ' ' + lastName ); // Julius Caesar
// i.e. titles = ["Consul", "Imperator"]
alert( titles[0] ); // Consul
alert( titles[1] ); // Imperator
alert( titles.length ); // 2
}
showName("Julius", "Caesar", "Consul", "Imperator");
Spread Syntax
In Rest Parameters, we saw how to get an array from the list of parameters. But sometimes we need to do the opposite.
Ie. Math.max() returns the greatest number from a list. Let's say we have an array [3, 5, 1]. You can't pass the array into the function as it expects numeric arguments, and doing Math.max(arr[0], arr[1], etc..) may take forever.
Spread Syntax works similarly with rest parameters, also using ..., but inversely. When ...arr is used in a function call, it expands the iterable object into the list of arguments:
let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5 (spread turns arr into list of args)
// we can also pass multiple iterables and solo number arguments:
let arr2 = [8, 3, -8, 1];
alert( Math.max(..arr, ...arr2, 8, 24) ); // 24
We can also use Spread Syntax to merge arrays:
let arr = [3, 5, 1];
let arr2 = [8, 9, 15];
let merged = [0, ...arr, 2, ...arr2];
alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2)
GLOBAL OBJECTS
The Global object provides variables & functions that are available anywhere. In a browser it's named window. for Node.js it's global, and recently, globalThis (use this now).
In a browser, global functions & variables declared with var (not let/const) become the property of the global object:
var gVar = 5;
alert(window.gVar); // 5 (became a property of the global object)
If a value is so important that you’d like to make it available globally, write it as a property:
window.currentUser = {
name: "John"
};
// somewhere else in code
alert(currentUser.name); // John
// or, if we have a local variable with the name "currentUser"
// get it from window explicitly (safe!)
alert(window.currentUser.name); // John
For some reason, this works instead of the above:
gVar = 5;
console.log(global.gVar); // 5
NFE : Named Function Expression
In JS, functions are objects, kinda like: "action objects"
The "name" property:
// function’s name is accessible as the “name” property
function sayHi() { alert("Hi"); }
alert( sayHi.name ); // sayHi
// also applicable to functions in Objects:
let user = {
sayHi() {/* ...*/},
sayBye: function() {/* ...*/}
}
alert(user.sayHi.name); // sayHi
alert(user.sayBye.name); // sayBye
The "length" property:
// returns the number of function parameters (excl. rest @params)
function f1(a) {}
function f2(a, b) {}
function many(a, b, ...more) {}
alert(f1.length); // 1
alert(f2.length); // 2
alert(many.length); // 2
NFE
// ordinary function expression:
let sayHi = function(who) {
alert(`Hello, ${who}`);
};
// add a name to it
let sayHi = function func(who) {
alert(`Hello, ${who}`);
};
// the "func" allows the function to reference itself internally, and it's not visisible outside the function:
let sayHi = function func(who) { // who is a param
if (who) {
alert(`Hello, ${who}`);
} else {
func("Guest"); // use func to re-call itself
}
};
sayHi(); // Hello, Guest
func(); // Error, func is not defined outside sayHi()
You can also call sayHi() internally and it would work, the problem is that sayHi may change outside. If the function gets assigned to another variable instead, the code will start to give errors:
let welcome = sayHi;
sayHi = null; // sayHi and welcome both point to the same thing
welcome(); // Error, the nested sayHi call doesn't work any more!
Function Binding
When passing object methods as callbacks, there’s a known problem: "losing this".
ie. Here’s how it may happen with setTimeout:
let user = {
firstName: "John",
sayHi() {
alert(`Hello, ${this.firstName}!`);
}
};
setTimeout(user.sayHi, 1000); // Hello, undefined!
// It outputs undefined instead of "John" for this.firstName because setTimeout got the function user.sayHi, separately from the object.
Solution: a Wrapper (also called wrapping function):
let user = {
firstName: "John",
sayHi() {
alert(`Hello, ${this.firstName}!`);
}
};
setTimeout(() => user.sayHi(), 1000); // Hello, John!
// this works bc it recieves user from the outer lexical env, then calls the method normally.
PROPERTY FLAGS AND DESCRIPTORS
Object properties, besides a value, have three special attributes (“flags”):
writable – if true, the value can be changed, otherwise it’s read-only.
enumerable – if true, then listed in loops, otherwise not listed.
configurable – if true, the property can be deleted and these attributes can be modified, otherwise not.
All 3 are initially true, but they can be changed. To access the full info about a property: (returns a "property-descriptor" object: value and all the flags)
let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
To change the flags: use the Object,defineProperty method:
Object.defineProperty(obj, propertyName, descriptor)
// descriptor: property descriptor object to apply
Basic Implementation of Writable:
// make user.name non-writable (can’t be reassigned) by changing writable flag
let user = { name: "John" };
Object.defineProperty(user, "name", {
writable: false
});
user.name = "Pete"; // Error; 'name' is read-only
Basic Implementation of Enumberable:
// basically, the toString is skipped if enumerable is false
let user = {
name: "John",
toString() { return this.name; }
};
Object.defineProperty(user, "toString", {
enumerable: false
});
// Now our toString disappears:
for (let key in user) alert(key); // name
// non-enumerable properties are also skipped in Object.keys
Basic Implementation of Configurable:
// basically, non-configurable =can't be deleted, nor can it be changed back with defineProperty (one-way road).
// Below, user.name can't changed nor deleted.
let user = {
name: "John"
};
Object.defineProperty(user, "name", {
writable: false,
configurable: false
});
// won't be able to change user.name or its flags
// all this won't work:
user.name = "Pete";
delete user.name;
Object.defineProperty(user, "name", { value: "Pete" });
Define many properties with Object.defineProperties:
There are 2 kinds of object properties: data properties,accessor properties.
Accessor properties are essentially properties used to get and set a value. In an object literal, they're denoted by getand set:
let obj = {
get propName() {
// getter, the code executed on getting obj.propName
},
set propName(value) {
// setter, the code executed on setting obj.propName = value
}
};
Basic implementation:
let user = {
name: "John",
surname: "Smith",
get fullName() { // getter
return `${this.name} ${this.surname}`;
},
set fullName(value) { // setter
[this.name, this.surname] = value.split(" ");
}
};
user.fullName = "Alice Cooper"; // set fullName splits this str
alert(user.name); // Alice
alert(user.surname); // Cooper
You can also create accessor properties, get&set, via defineProperty descriptor:
let user = {
name: "John",
surname: "Smith"
};
Object.defineProperty(user, 'fullName', {
get() {
return `${this.name} ${this.surname}`;
},
set(value) {
[this.name, this.surname] = value.split(" ");
}
});
alert(user.fullName); // John Smith
for(let key in user) alert(key); // name, surname
PROTOTYPAL INHERITANCE
Java Inheritance (extending one object to another, to access object properties)
[ [ Prototype ] ]
Objects have a special hidden property [[Prototype]] ; either null or references another object. This object is called a "prototype".
When we read a property from object, and it’s missing, JavaScript automatically takes it from the prototype. This is Prototypal Inheritence.
The property [[Prototype]] is internal and hidden. One way to set it is:
__proto__:
let animal = {
eats: true
};
let rabbit = {
jumps: true
};
rabbit.__proto__ = animal; // rabbit prototypically inherits from animal.
// If we read a property from rabbit, and it’s missing, JS will automatically take it from animal:
alert( rabbit.eats ); // true
alert( rabbit.jumps ); // true
So if animal has a lot of useful properties and methods, then they become automatically available in rabbit. Such properties are called “inherited”:
// If we have a method in animal, it can be called on rabbit:
let animal = {
eats: true,
walk() {
alert("Animal walk");
}
};
let rabbit = {
jumps: true,
__proto__: animal
};
rabbit.walk(); // Animal walk is taken from the prototype
You can have as many prototypes as you want, and you can chain them: if duck inheritis from rabbit inherits from animal, then duck can also inherit from animal.
For-in loop
If rabbit inherits from animal, a call to Object.keys(rabbit) will only return the keys of rabbit. But, if you use a for-in loop, it iterates over it's own and inherited keys:
let animal = {
eats: true
};
let rabbit = {
jumps: true,
__proto__: animal
};
// Object.keys only returns own keys
alert(Object.keys(rabbit)); // jumps
// for..in loops over both own and inherited keys
for(let prop in rabbit) alert(prop); // jumps, eats
// obj.hasOwnProperty(key) returns boolean if the key at hand (use for-loop) is the object's (true) or inherited (false).
Prototype methods, objects without __proto__
The __proto__ is considered outdated; the modern methods are:
Object.create(proto, [descriptors]) – creates an empty object with given proto as [[Prototype]] and optional property descriptors.
Object.getPrototypeOf(obj) – returns the [[Prototype]] of obj.
Object.setPrototypeOf(obj, proto) – sets the [[Prototype]] of obj to proto
let animal = { eats: true };
// create a new object with animal as a prototype
let rabbit = Object.create(animal);
alert(rabbit.eats); // true
// returns the animal (rabbit's prototype)
alert(Object.getPrototypeOf(rabbit) === animal); // true
// changes the prototype of rabbit to {}
Object.setPrototypeOf(rabbit, {});
Object.create's optional second argument:
// We can provide extra properties to the new object there:
let animal = { eats: true };
let rabbit = Object.create(animal, {
jumps: {
value: true
}
});
alert(rabbit.jumps); // true
// This 2nd argument also allows for better cloning than for-in:
let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
// This call makes a truly exact copy of obj, including all properties: enumerable & non-enumerable, data properties and setters/getters – everything, and with the right [[Prototype]].
Other Methods:
Object.keys(obj), Object.values(obj), Object.entries(obj) returns an array of property names/values/key-value pairs.
Object.getOwnPropertySymbols(obj) - returns an array of all keys with Symbols.
Object.getOwnPropertyNames(obj) - returns an array of all own string keys.
Reflect.ownKeys(obj) - returns an array of all keys (basically same as ^).
obj.hasOwnProperty('keyName') - returns boolean if obj has own (not inherited) key named keyName.
F.PROTOTYPE
Remember, new objects can be created with a constructor function like new F(). So if F.prototype is an object, then the new operator uses it to set [[Prototype]] for the new object.
F.prototype here is a regular property on F. Ie:
let animal = {eats: true};
function Rabbit(name) {
this.name = name;
}
Rabbit.prototype = animal; // When a 'new Rabbit' is created, its prototype will be 'animal'
let rabbit = new Rabbit("Bugs Bunny");
alert( rabbit.eats ); // true
NATIVE PROTOTYPES
All built-in objects follow the same pattern:
The methods are stored in the prototype (Array.prototype, Object.prototype, etc...)
The object itself stores only the data (array items, object properties, etc...)
CLASSES
We often need to create many objects of the same kind (ie. users).
A class is kind of like template code for creating objects, providing initial values for variables and methods.
General Syntax:
class className {
// class methods
constructor() {...}
method1() {...}
method2() {...}
...
}
// CREATE NEW OBJECTS
let obj1 = new className(); // the constructor() is called by 'new'
user.method1();
In JS, a class is a a function (typeof myClass >>> function). After new className object is created, when we call its method, it’s taken from the prototype.
Class Expression
Just like functions, classes can be defined inside another expression, passed around, returned, assigned, etc:
let User = class {
sayHi() {
alert("Hello");
}
};
// Similar to NFE, class expressions may have a name, call it NCE:
let User = class MyClass {
sayHi() { alert(MyClass); } //MyClass name only visible in the class
};
new User().sayHi(); // works, shows MyClass definition
alert(MyClass); // error, MyClass name isn't visible outside of class
Getters/Setters
Just like literal objects, classes may include getters/setters:
class User {
constructor(name) { // invokes the setter
this.name = name;
}
get name() {
return this.name;
}
set name(value) {
if (value.length < 4) {
alert("Name is too short.");
return;
}
this._name = value;
}
}
let user = new User("John");
alert(user.name); // John
user = new User(""); // Name is too short.
CLASS INHERITANCE - way for one class to extend another class.
Extends
To extend a child class to a parent, class Child extends Parent:
// Animal class not shown but Rabbit objects can access Rabbit + Animal methods.
class Rabbit extends Animal {
...
}
Overriding methods
If both Parent and Child classes share a method name, a call from a Child class object will call the Child class method.
"Super"
If you want to intentionally call the Parent method instead of overriding, then call super.methodName(). However, arrow functions don't have a super keyword.
Overriding Constructors
A call to super(...) will call the Parent constructor (only from inside the child constructor).
If a Child extends a Parent and has no constructor, then it calls the Parent constructor passing it all the arguments.
class Animal {
constructor(name, speed) {
this.name = name;
this.speed = speed;
}
}
class Rabbit extends Animal {
// if you even remove this constructor and leave Rabbit empty, this code will still work
// because it will just pass the arguments to the Animal constructor.
constructor(name, speed) {
super(name, speed);
}
}
let rabbit = new Rabbit("Bugs Bunny", 25);
console.log(rabbit.name); // "Bugs Bunny"
console.log(rabbit.speed); // 25
NOTE: You can override both methods, but also class fields (methods+variables).
STATIC PROPERTIES AND METHODS
Static Methods
Static methods are the same as they're in Java (don't need to make an object to call it):
class User {
static staticMethod() {
console.log('hi');
}
}
User.staticMethod(); // hi
Usually, static methods are used to implement functions that belong to the class, but not to any particular object of it. Call it via: className.staticMethodName();
Static Properties
Static properties look like regular class properties but have static prepended
Internal interface – methods+properties, accessible from other methods of the class, but not from the outside.
External interface – methods+properties, accessible also from outside the class
Public vs. Private Fields (properties+methods):
Public: accessible from anywhere. They comprise the external interface.
Private: accessible only from inside the class. These are for the internal interface.
# prefix ie. #name or #returnName(){...}
Protected: like private, but child classes can access. These fields will be read-only. JS doesn't have an actual implementation but you can emulate it by a class having a getter but not a setter.
_ prefix ie. _name or _returnName(){...}
Ie. a Name Class:
class NameGenerator {
_name; // _ indicates protected
#race; // # indicates private
constructor(name) { this._name = name; }
get name() { return this._name; } // only getter, no setter
}
let nameGenerator = new NameGenerator("John");
console.log(`My name is ${nameGenerator.name}`); // My name is John
nameGenerator.name = "Jane"; // Error; 'name' is read-only
EXTENDING BUILT-IN CLASSES
You can extend a given class onto built-in classes, like Array/Map, and add functionality:
Ie. extend a custom PowerArray class to the built-in Array class:
// add one more method to it (can do more)
class PowerArray extends Array {
isEmpty() {
return this.length === 0;
}
}
let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false
let filteredArr = arr.filter(item => item >= 10);
alert(filteredArr); // 10, 50
alert(filteredArr.isEmpty()); // false
CLASS CHECKING: "instanceof"
The instanceof operator allows to check whether an object belongs to a certain class. It also takes inheritance into account. The syntax is:
obj instanceof Class
// returns true if obj is a Class object, or it inherits from Class.
// ie:
class Rabbit {}
let rabbit = new Rabbit();
alert( rabbit instanceof Rabbit ); // true
It also works with constructor functions:
function Rabbit() {}
alert( new Rabbit() instanceof Rabbit ); // true
Object.prototype.toString
We can use toString as an extended typeof and an alternative for instanceof. It will return:
For a number, it will be [object Number]
For a boolean, it will be [object Boolean]
For null: [object Null]
For undefined: [object Undefined]
For arrays: [object Array]
…etc (customizable).
let arr = [];
console.log( Object.prototype.toString(arr) ); // [object Array]
MIXINS
In JS we can only inherit from a single object & a class can only extend one other class.
A mixin is a class containing methods that can be used by other classes without a need to inherit from it.
The simplest way to implement a mixin in JS is to make an object with useful methods, so that we can easily merge them into a prototype of any class.
ie. here the mixin sayHiMixin is used to add some “speech” for User:
// mixin object
let sayHiMixin = {
sayHi() { alert(`Hello ${this.name}`); },
sayBye() { alert(`Bye ${this.name}`); }
};
// usage:
class User {
constructor(name) { this.name = name; }
}
Object.assign(User.prototype, sayHiBye); // User now has sayHiBye methods
let me = new User("dev");
me.sayHi(); // Hi dev
// There’s no inheritance, but a simple method copying
ERROR HANDLING
The try-catch syntax is same as in Java:
try {
alert('Start of try runs'); // runs
lalala; // ERROR
alert('End of try (never reached)'); // skipped over
} catch (err) {
alert(`Error has occurred!`); // runs if there's an error.
}
Error Object
When an error occurs, JS generates an object containing the details about it. The object is then passed as an argument to catch:
try {
// ...
} catch (err) { // <-- "error object", could use another word instead of err
// ...
}
the error object has two main properties:
name - Error name. For instance, for an undefined variable that’s "ReferenceError".
message - Textual message about error details.
There are other non-standard properties available in most environments. One of most widely used and supported is:
stack - Current call stack: a string with info about the sequence of nested calls that led to the error.
ie:
try {
lalala; // ERROR
} catch (err) {
alert(err.name); // ReferenceError
alert(err.message); // lalala is not defined
alert(err.stack); // ReferenceError: lalala is not defined at (call stack)
// Can also show an error as whole. The error is converted to string as "name: message"
alert(err); // ReferenceError: lalala is not defined
}
Throwing our own errors
Let's say we have a JSON and we are parsing it. What if the json is syntactically correct, but doesn’t have a required name property?
// Here JSON.parse runs normally, but non-existent 'name' is errorful.
let json = '{ "age": 30 }';
try {
let user = JSON.parse(json);
alert( user.name ); // ERROR: JSON doesn't have 'name' property
} catch (err) {
alert( "doesn't execute" );
}
'Throw' operator
The throw operator generates an error. The syntax is:
throw <error object>
JS has many built-in constructors for standard errors: Error, SyntaxError, ReferenceError, TypeError, etc... We can use them to create error objects:
let error = new Error(message);
let error = new SyntaxError(message);
let error = new ReferenceError(message);
// For built-in errors (above), the 'name' property is the name of the constructor. And 'message' is taken from the argument.
Implementation of try-catch and throw operator:
// Have the abscence of `name` is an error
let json = '{ "age": 30 }'; // JSON
try {
let user = JSON.parse(json); // <-- no errors
if (!user.name) { // if 'name' property doesn't exist
throw new SyntaxError("Incomplete data: no name"); // (*)
}
alert( user.name );
} catch (err) {
alert( "JSON Error: " + err.message ); // error mesaage display
}
A callback is a function that's passed into another function and is to be executed after another function has finished executing.
Function Sequence
JS functions are executed in the sequence they are called. Not in the sequence they are defined. ie:
// myDisplayer changes innerHTML of an element, so the final call to it will be the final product.
function myFirst() { myDisplayer("Hi"); }
function mySecond() { myDisplayer("Bye"); }
myFirst();
mySecond();
// this example ends up displaying "Bye"
Callback Function
Let’s add a callback function as a second argument (usually anonymous) to loadScript that should execute when the script loads.
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Using a callback, you can call myCalculator with a callback, and let the calculator function run the callback after the calculation is finished.
Right: myCalculator(5, 5, myDisplayer);
Wrong: myCalculator(5, 5, myDisplayer());
Callback in Callback
ie. We can load two scripts sequentially: the first one, and then the second one after it, by putting the second callback call inside the first callback:
// After the outer loadScript is complete, the callback initiates the inner one.
loadScript('/my/script.js', function(script) {
alert(`Cool, the ${script.src} is loaded, let's load one more`);
loadScript('/my/script2.js', function(script) {
alert(`Cool, the second script is loaded`);
});
});
Callback Error handling
ie. In the case the script loading fails, the callback need to react to the error. The error handling usage:
The first argument of the callback is actually reserved for an error if it occurs.
PROMISES
"Producing code" - code that does something and takes time. ie. code that loads the data over a network
"Consuming code" - code that wants the result of the “producing code” once it’s ready. ie. Functions
A Promise - a JavaScript object that links producing code and consuming code
Constructor Syntax
let promise = new Promise(function(resolve, reject) {
// executor (the producing code)
});
executor - function passed to new Promise. "Producing Code"
resolve/reject - callbacks provided by JS itself. When the executor obtains the result, it should call one of these callbacks:
resolve(value) — if the job is finished successfully, with result value.
reject(error) — if an error has occurred, error is the error object.
The promise object returned by the new Promise constructor has these internal properties:
state
initially "pending", then changes to either
"fulfilled" when resolve is called or
"rejected" when reject is called.
result
initially undefined, then changes to either
value when resolve(value) is called or
error when reject(error) is called.
ie:
let myPromise = new Promise(function(resolve, reject) {
// after 1 second signal that the job is done with the result "done"
// calling resolve('done') changes myPromise properties to (state='fulfilled' and result='done')
setTimeout(() => resolve("done"), 1000);
});
let promise = new Promise(function(resolve, reject) {
// after 1 second signal that the job is finished with an error
// calling reject(error) changes myPromise properties to (state='rejected' and result=error)
setTimeout(() => reject(new Error("Whoops!")), 1000);
});
Note: there can only be one call to resolve/reject in the executor. All other resolve/reject calls below the first one are ignored.
Consumers: then, catch, finally
The state and result properties of the Promise object are internal. We can’t directly access them. We have to use the methods .then/.catch/.finally
then
// general syntax
myPromise.then(
function(result) { /* handle a successful result */ },
function(error) { /* handle an error */ }
);
The 1st argument of .then is a function that runs when the promise is resolved, and receives the result
The 2nd argument of .then is a function that runs when the promise is rejected, and receives the error
ie.
let myPromise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("done!"), 1000);
});
// a callback to resolve from the executor runs the first function in .then
myPromise.then(
result => alert(result), // shows "done!" after 1 second
error => alert(error) // doesn't run
);
catch
If we’re interested only in errors, then we can use null as the first argument:
.then(null, errorHandlingFunction)
Or we can use .catch(errorHandlingFunction), which is exactly the same:
let myPromise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("Whoops!")), 1000);
});
// .catch(f) is the same as promise.then(null, f)
myPromise.catch(alert); // shows "Error: Whoops!" after 1 second
finally
Just like there’s a finally clause in a try-catch there’s finally in promises.
The call .finally(f) is similar to .then(f, f) in the sense that f always runs when the promise is settled: be it resolve or reject.
It's a good handler for performing cleanup ie. stopping our loading indicators (not needed anymore regardless of outcome)
// here, there’s an error in the promise, passed through finally to catch:
let myPromise = new Promise((resolve, reject) => {
throw new Error("error");
})
myPromise.finally(() => alert("Promise ready"))
myPromise.catch(err => alert(err)); // <-- .catch handles the error object
ie:
function loadScript(src) {
return new Promise(function(resolve, reject) {
let script = document.createElement('script');
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Script load error for ${src}`));
document.head.append(script);
});
}
// loadscript returns a promise object
let myPromise =loadScript("/myscript.js");
myPromise.then(
script => alert(`${script.src} is loaded!`),
error => alert(`Error: ${error.message}`)
);
promise.then(script => alert('Another handler...'));