Please enable JavaScript.
Coggle requires JavaScript to display documents.
javascript.info (part1: JS) - Coggle Diagram
javascript.info
(part1: JS)
fundamentals
Hello, world!
insert external file: <script src="path/to/script.js"></script>
Code structure
comment //, /
/
A semicolon may be omitted in most cases when a line break exists.
Statements are syntax constructs and commands that perform actions.
The modern mode, "use strict"
top of a script - script works the “modern” way.
Modern JavaScript supports “classes” and “modules”, you may omit it
Variables
is a “named storage” for data
use "let" to create and declared only once
create constants (unchanging) variables use "const"
Data types
8 basic data types : number, bigInt, string, boolean, null, underfined, object, symbol
typeof operator : return type of variables. note: typeof null => "object"
Interaction: alert, prompt, confirm
alert : show a message
prompt: shows a message and ask the user to input text
confirm shows a message and 2 button Ok or cancel to confirm
Type conversions
Most of the time, operators and func automatically convert the values given to them to the right type.
String conversion: String(value)
Number(value)
Number(undefined/null/true/false/string) => NaN/0/1/0/ "The string is read “as is”, whitespaces from both sides are ignored. An empty string becomes 0. An error gives NaN"
Boolean(value)
Boolean(0/null/undefined/NaN/"") => false, the rest returns true
Basic operators, maths
maths: + - * / %...
Asignment = , chaining asignments a=b=c =2
increment/decrement: Increasing or decreasing a number by one: ++a, a--
modify-in-place: apply an operator to a variable and save new value to that same variable. n = n+ 5 => n+=5
Bitwise operators: AND ( & ) OR ( | ) XOR ( ^ ) NOT ( ~ )
LEFT SHIFT ( << ) RIGHT SHIFT ( >> ) ZERO-FILL RIGHT SHIFT ( >>> )
Comparisons
greater/less | equal | not-equal : > < >= <= == !=
String comparison: Strings are compared letter-by-letter in the “dictionary” order
ex: 'z' > 'a' -> true
compare different types: converts the values to numbers.
strict equality checks the equality without type conversion.: === and !==
Be careful when using comparisons like > or < with variables that can occasionally be null/undefined. Checking for null/undefined separately is a good idea
alert( null > 0 ); // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true
alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)
Conditional branching: if, '?'
if (){
} else if(){
}else{}
condition ? value1 : value2
or condition ? value1 : (condition ? value2 : value3)
Loops: while and for
while (condition) {} : condition is truthy, execute body
do {} while (condition) : execute then check condition, if true execute it again.
for ( begin ; condition ; step){ body }
"break;" to break the loop
"continue" to skip the remaining part of the body
labels for break/continue to break/continue from multiple nested loops at once
labelName: for (...) {
...
break labelName;
}
A break/continue directive must be inside this code block.
The "switch" statement
A switch statement can replace multiple if checks
to compare a value with multiple variants with same type
switch(x) {
case 'value1': // if (x === 'value1')
...
[break]
case 'value2': // if (x === 'value2')
case 'value3': // if (x === 'value3')
... // grouping case
[break]
default:
...
[break]
}
Functions
They allow the code to be called many times without repetition.
Functions are the main “building blocks” of the program
local variables & outer variables
Parameters
default values
Values passed to a function as parameters are copied to its local variables.
A function can return a value. If it doesn’t, then its result is undefined.
Function expressions
Function Declaration
function sayHi() {
alert( "Hello" );
}
A Function Declaration can be called earlier than it is defined.
declared as a separate statement, in the main code flow.
Function Expression
a function is a value. They can be assigned, copied or declared in any place of the code
let sayHi = function() {
alert( "Hello" );
};
A Function Expression is created when the execution reaches it and is usable only from that moment.
declared as a separate statement, in the main code flow.
In most cases when we need to declare a function, a Function Declaration is preferable,
we should use a Function Expression only when a Function Declaration is not fit for the task
Arrow functions, the basics
Without curly braces: (...args) => expression – the right side is an expression: the function evaluates it and returns the result
With curly braces: (...args) => { body } – brackets allow us to write multiple statements inside the function, but we need an explicit return to return something.
Logical operator
|| (OR), && (AND), ! (NOT), ?? (Nullish Coalescing).
a ?? b : a is defined, then a / a isn’t defined, then b.
|| returns the first truthy value.
?? returns the first defined value.
alert(0 || 100); // 100
alert(0 ?? 100); // 0
code quality
Debugging in the browser
Coding style
Automated Linters: JSLint, JSHint, ESLint
Comments
Ninja code
Automated testing with Mocha
Polyfills and transpilers
modern code work on older engines - don’t forget to use transpiler (if using modern syntax or operators,) and polyfills (to add functions that may be missing)
ex framework Babel(transpilers) and corejs, polyfills.io( polyfill)
a code build system based on webpack with babel-loader plugin
object: the basic
Objects
Object references and copying
Garbage collection
Object methods, "this"
Constructor, operator "new"
constructor, operator "new"
Optional chaining '?'
symbol type
Object to primitive conversion
Data types
Methods of primitives
numbers
Strings
Arrays
Array methods
Iterables
map and set
WeakMap and WeakSet
Object.keys, values, entries
Desctructuring assignment
Date and time
Json methods, toJSON
Advanced working with functions
Recursion and stack
rest parameters and spread syntax
variables scope, closure
The old "var"
Blobal object
Function object, NFE
The "new Function" syntax
Scheduling: setTimeout and setInterval
Decorators and forwarding, call/apply
Function binding
Arrow functions revisited
Prototypes, inheritance
Prototypes, inderitance
F.prototype
Native prototypes
Prototype methods, objects without
proto
classes
Class basic syntax
Class inheritance
Static properties and methods
Private and protected properties and methods
Extending built-in classes
Class checking: "instanceof"
Mixins
Error handling
Error handling, "try...catch"
Custom errors, extending Error
promises, async/await
Introduction: callbacks
Promise
Promises chaining
Error handling with promises
Promise API
Promisification
Microtasks
Async/await
Generators, advanced iteration
Generators
Async interation and generators
Modules
Modules, introduction
Export and import
Dynamic imports
Miscellaneous
Proxy and Reflect
Eval: run a code string
Currying
Reference Type
BigInt