Javascript

Javascript is a dynamic programming language.
Javascript has dynamic typing and first class functions.
Javascript can be added in between and body tags.
Any code should be enclosed by the script tag <script></script>

<script type="text/javascript">alert("Hello World");</script>
<script src="main.js"></script>  <!-- external script -->

Primitive Types: Numbers, Strings, Booleans
special Data Types: null, undefined
Object Types: Object, Array
Same variable can be used as more than one type
Variable names are case sensitive, can only start with a letter, an underscore (_) or $.
Unsigned Right Shift Operator (>>>) is like >> operator, except that the bits shifted in on the left are always zeros.
== Checks if value of two operands is equal or not; !== not equal to. ===
Javascript does not have block scope. Instead, the scopr is the same as the function or script that precedes it.

var x = 1;
{
    var x = 2;
}
console.log(x); // output 2

finally block will be executed even if there is no catch block.
String properties: length, ...
String methods: charAt(), split(), slice()

All HTML elements and attributes are nodes in the Document Object Model (DOM). The idea of DOM is that every node is an object and its properties can be changed with CSS code.
To work with a particular id, you use the getElementById method, and if you want to interact with the content of the same element, then you use the innerHTML property.
DOM methos

methods	description
getElementById
getElementsByTagName
getElementsByClassName
getElementById(id).onclick = function()
element.attribute =	to change the attribute
element.setAttribute(att, val)	to set attribute

If a function is invoked with missing arguments, the values will be set to undefined.
Function statement is where a statement begins with the word "function". If not it's a function expression.

// Function statement
function fncName(params){
}

// Function expression
var variableName = function(parameters){
};

Function name can be omitted in a function expression to create an anonymous function.
An IIFE(Immediately Invoked Function Expression) is a JS function that runs as soon as it is defined. IIFE prevents accessing variables within function as well as polluting the global scope.

// IIFE
(function(){

})();

// Arrow IIFE
(() => {

})();

// async IIFE
(async () => {

})();

When you assign a value to a variable that has not been declared, it will automatically become global.
Hoisting is when function and variable declarations are moved to the top of their scope. This is the default behaviour of JavaScript. A variable can either be declared after it has been used, or used before it has been declared.
Javascript only hoists declaratoins, not initializations.

var x=5;
elem=document.getElementById("demo");
elem.innerHTML = x+" "+y; // y undefined here
var y=7; // y declaration is hoisted but not initalization

A closure is an inner function that has access to the variables of the outer function.

HTML Event	Description
`onchange`
`onclick`
`onmouseover`
`onmouseout`
`onkeydown`
`onload`

var person = {
    firstName: "Aamir",
    lastName: "Ali"
};

var person = new Object();
person.firstName = "Aamir";
person.lastName = "Ali";

The value of "this" when using in a function is the object that the function belongs to. However, when "this" is used in an object, it is the object itself.
Constructors are functions used to create multiple instances of an object by using the new keyword. If you need to create multiple objects of the same type, then you will need to create an object constructor, and then you can create new instances of the object with different values.
Constructor function starts with a capital letter by convention.

var Fruit = function Fruit(name, color) {
    this.name = name;
    this.color = color;
    this.info = function() { reutrn "I am a "+ this.color+ " "+this.name};
}

Prototypes allow us to define properties and methods to all instances of a particular object.
Every function has a property called "Prototype". All JavaScript objects inhert their properties and methods from their prototype.

Eloquent JavaScript

JavaScript was introduced in 1995 as a way to add programs to web pages in the Netscape Navigator browser
ECMAScript: a standard document to describe the way the JavaScript language should work.
2015 - Version 6
JavaScript uses a fixed number of bits, 64 of them, to store a single number value.
There are three special values in JavaScript that are considered numbers but don’t behave like normal numbers. Infinity, -Infinity and NaN.
You can use single quotes, double quotes, or backticks to mark strings,
Backtick-quoted strings, usually called template literals, can embed other values. When you write something inside ${} in a template literal, its result will be computed, converted to a string, and included at that position.

`half of 100 is ${100/2}`

typeof operator produces a string value naming the type of the value you give it. console.log(typeof 4.5)
There is only one value in JavaScript that is not equal to tself, and that is NaN. console.log(NaN == NaN); // false.
There are two special values, written null and undefined, that are used to denote the absence of a meaningful value.
A fragment of code that produces a value is called an expression.
To catch and hold values, JavaScript provides a thing called a binding, or variable: let caught = 5 * 5;
The words var and const can also be used to create bindings.
The Number.isNaN function is a standard JavaScript function that returns true only if the argument it is given is NaN .
Bindings declared with let and const are in local to the block that they are declared in.
In pre-2015 JavaScript, only functions created new scopes, so old-style bindings, created with the var keyword, are visible throughout the whole function that they appear in - or throughout the global scope, if they are not in a function.
Each local scope can also see all the local scopes that contain it, and all scopes can see the global scope. This approach to binding visibility is called lexical scoping.
When the function keyword is used at the start of a statement, it is called a function declaration.

function square(x) {
    return x * x;
}

Function declarations are not part of the regular top-to-bottom flow of control. They are conceptually moved to the top of their scope and can be used by all the code in that scope.
Arrow functions: Instead of function keyword, it uses an arrow (=>).

const power = (base, exponent) => {

}

const square1 = (x) => { return x * x; };
const square2 = x => x * x;

JavaScript is extremely broad-minded about the number of arguments you pass to a function. If you pass too many, the extra ones are ignored. If you pass too few, the missing parameters get assigned the value undefined .

let a = [1, 2, 3, 4, 5];
a.length;
a["length"];

Values of the type object are arbitrary collections of properties.
The delete operator when applied to an object property, will remove the named property from the object.
The binary in operator, when applied to a string and an object, tells you whether that object has a property with that name. "left" in obj.
To find out what properties an object has, you can use the Object.keys function.

const score = {visitors: 0, home: 0};
score = {visitors:1, home: 1}; // NOT ALLOWED
score.visitors = 1; // Allowed

Arrays have an includes method that checks whether a given value exists in the array.
for...in loop iterates over the keys, for...of iterates over values.

array method	description
`shift()`	remove the first element of the array
`unshift()`	add new element at the beginning of the array
`push()`	add new element to the end of array
`pop()`	remove last element from array
`sort()`	sorts array alphabetically
`reverse()`	reverse content of array
`indexOf()`	search from start to end and return index of found element otherwise -1
`lastIndexOf()`	search from end to start
`slice()`	takes start and end indices and returns an array
`concat()`	glue arrays together

string method	description
`slice()`
`indexOf()`
`trim()`
`padStart()`
`split()`
`repeat()`

Rest all parameters function max(...numbers)
Math.random function returns a new pseudorandom number between zero (inclusive) and one (exclusive) every time you call it. To get a whole random number use Math.floor(Math.random() * 10))
A popular serialization format is called JSON (pronounced “Jason”), which stands for JavaScript Object Notation. In JSON, all property names have to be surrounded by double quotes, and only simple data expressions are allowed - no function calls, bindings etc.
JavaScript provides JSON.stringify and JSON.parse to convert data to and from JSON format.
Abstractions hide details and give us the ability to talk about problems at a higher (or more abstract) level.
Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.
filter is a standard array method.
The map method transforms an array by applying a function to all of its elements and building a new array from the returned values.
The some method is another higher-order function. It takes a test function and tells you whether that function returns true for any of the elements in the array.
The some() method tests whether at least one element in the array passes the test implemented by the provided function.
JavaScript uses UTF-16 unicode format. Most characters are described by using a single 16-bit code point.
JavaScript’s charCodeAt method gives you a code unit, not a full character code. The codePointAt method, added later, does give a full Unicode character.
The this keyword in method body automatically points at the object that it was called on.
Arrow functions are different—they do not bind their own this but can see the this binding of the scope around them.
A prototype is another object that is used as a fallback source of properties. When an object gets a request for a property that it does not have, its prototype will be searched for the property, then the prototype’s prototype, and so on.
Functions derive from Function.prototype, and arrays derive from Array.prototype.
You can use Object.create to create an object with a specific prototype.

let protoRabbit = {
    speak(line) {
        console.log(`The ${this.type} rabbit says '${line}'`);
    }
};
let killerRabbit = Object.create(protoRabbit);

The most widely used approach to bolted-on JavaScript modules is called CommonJS modules. Node.js uses it and is the system used by most packages on NPM.
The main concept in CommonJS modules is a function called require. When you call this with the module name of a dependency, it makes sure the module is loaded and returns its interface.
The spread operator ... is used to unpack, or "spread out," the elements of an array (or any other iterable object, such as strings) in a context where individual values are expected.

JavaScript The Good Parts

The very good ideas include functions, loose typing, dynamic objects, and an expressive object literal notation. The bad ideas include a programming model based on global variables.
A controversial feature in JavaScript is prototypal inheritance. JavaScript has a class-free object system in which objects inherit properties directly from other objects.
Javascript's one choice that was particularly bad: JavaScript depends on global variables for linkage. All of the top-level variables of all compilation units are tossed together in a common namespace called the global object.
JSLint, a JavaScript parser that can analyze a JavaScript program and report on the bad parts that it contains.
JavaScript has a single number type. Internally, it is represented as 64-bit floating point, the same as Java’s double . Unlike most other programming languages, there is no separate integer type.
NaN is not equal to any value, including itself. You can detect NaN with the isNaN(number) function.
The value Infinity represents all values greater than 1.79769313486231570e+308.
JavaScript has a Math object that contains a set of methods that act on numbers.
All characters in JavaScript are 16 bits wide.
The \u convention allows for specifying character code points numerically. "A" === "\u0041". Strings have a length property.
In web browsers, each <script> tag delivers a compilation unit that is compiled and immediately executed. Lacking a linker, JavaScript throws them all together in a common global namespace.
Unlike many other languages, blocks in JavaScript do not create a new scope, so variables should be defined at the top of the function, not in blocks.
The for in enumerates the property names (or keys) of an object. On each iteration, another property name string from the object is assigned to the variable.

for (myvar in obj) {
    if (obj.hasOwnProperty(myvar)) {
        ...
    }
}

JavaScript does not allow a line end between the return and the expression.
Objects in JavaScript are mutable keyed collections. In JavaScript, arrays are objects, functions are objects, regular expressions are objects, and, of course, objects are objects.
An object is a container of properties, where a property has a name and a value. A property name can be any string, including the empty string. A property value can be any JavaScript value except for undefined.
Objects in JavaScript are class-free.
Objects are passed around by reference. They are never copied.
Every object is linked to a prototype object from which it can inherit properties. All objects created from object literals are linked to Object.prototype, an object that comes standard with JavaScript.
The delete operator can be used to remove a property from an object.
Objects produced from object literals are linked to Object.prototype. Function objects are linked to Function.prototype (which is itself linked to Object.prototype). Every function is also created with two additional hidden properties: the function’s context and the code that implements the function’s behavior.
In addition to the declared parameters, every function receives two additional parameters: this and arguments. The this parameter is very important in object oriented programming, and its value is determined by the invocation pattern. There are four patterns of invocation in JavaScript:
- the method invocation pattern,
- the function invocation pattern,
- the constructor invocation pattern, and
- the apply invocation pattern.
The patterns differ in how the bonus parameter this is initialized.
There is no run-time error when the number of arguments and the number of parameters do not match. If there are too many argument values, the extra argument values will be ignored. If there are too few argument values, the undefined value will be substituted for the missing values. There is no type checking on the argument values: any type of value can be passed to any parameter.
When a function is stored as a property of an object, we call it a method.
When a function is invoked with Function invocation pattern, this is bound to the global object.
Functions that are intended to be used with the new prefix are called constructors. By convention, they are kept in variables with a capitalized name.
Because of a design error, arguments is not really an array. It is an array-like object. arguments has a length property, but it lacks all of the array methods.
A function always returns a value. If the return value is not specified, then undefined is returned.

var add = function (a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw {
            name: 'TypeError',
            message: 'add needs numbers'
        };
    }
    return a + b;
}

var try_it = function ( ) {
try {
add("seven");
} catch (e) {
document.writeln(e.name + ': ' + e.message);
}
}
try_it( );

Some languages offer the tail recursion optimization. This means that if a function returns the result of invoking itself recursively, then the invocation is replaced with a loop, which can significantly speed things up.
Unfortunately, JavaScript does not have block scope even though its block syntax suggests that it does. This confusion can be a source of errors. JavaScript does have function scope.
a variable defined anywhere within a function is visible everywhere within the function.
Currying allows us to produce a new function by combining a function and an argument:

var add1 = add.curry(1);
document.writeln(add1(6)); // 7

JavaScript provides an object that has some array-like characteristics. It converts array subscripts into strings that are used to make properties. It is significantly slower than a real array. The first value will get the property name '0' , the second value will get the property name '1' , and so on

Effective JavaScript

ES5 introduced another versioning consideration with its strict mode. This feature allows you to opt in to a restricted version of JavaScript that disallows some of the more problematic or error-prone features of the full language.
Strict mode is enabled in a program by adding a special string constant at the very beginning of the program:

"use strict";  // at the beginning of the file

function f(x) {
    "use strict"
    // ...
}

The bitwise arithmetic operators are special. Rather than operating on their arguments directly as floating-point numbers, they implicitly convert them to 32-bit integers. (To be precise, they are treated as 32-bit, big-endian, two’s complement integers.)
doubles can represent integers perfectly with up to 53 bits of precision. All of the integers from –9,007,199,254,740,992 (–2^53) to 9,007,199,254,740,992 (2^53) are valid doubles.
There are exactly seven falsy values: false , 0 , -0 , "" , NaN , null , and undefined. All other values are truthy
JavaScript strings consist of 16-bit code units, not Unicode code points.
Every unit of text of all the world’s writing systems is assigned a unique integer between 0 and 1,114,111, known as a code point in Unicode terminology.
Unicode allows multiple different binary encodings of code points. there are multiple standard encodings of Unicode, the most popular of which are UTF-8, UTF-16, and UTF-32.
The current Unicode range is over 2^20 code points. The new increased range is organized into 17 subranges of 2^16 code points each. The first of these, known as the Basic Multilingual Plane (or BMP), consists of the original 2^16 code points. The additional 16 ranges are known as the supplementary planes.
JavaScript’s global namespace is also exposed as a global object, which is accessible at the top of a program as the initial value of the this keyword. In web browsers, the global object is also bound to the global window variable.
ES5 introduced a new global JSON object for reading and writing the JSON data format.
Instead of raising an error, a program that assigns to an unbound variable simply creates a new global variable and assigns to it.
Functions that keep track of variables from their containing scopes are known as closures.

function sandwichMaker() {
    var magicIngredient = "peanut butter";
    function make(filling) {
        return magicIngredient + " and " + filling;
    }
    return make;
}

// Eventhough sandwichMaker returned here, the make function still remember's magicIngredient variable
var f = sandwichMaker();
f("jelly");   // "peanut butter and jelly"
f("bananas"); // "peanut butter and bananas"
f("marshmallows"); // "peanut butter and marshmallows"

Understanding closures only requires learning three essential facts.
1. JavaScript allows you to refer to variables that were defined outside of the current function
2. functions can refer to variables defined in outer functions even after those outer functions have returned!
3. closures can update the values of outer variables.
JavaScript does not support block scoping: Variable definitions are not scoped to their nearest enclosing statement or block, but rather to their containing function.
JavaScript implicitly "hoists" the declaration part to the top of the enclosing function and leaves the assignment in place.
Closures store their outer variables by reference, not by value.

// Function declaration
function f() {...}

// Function expression
var f = function() {...};
var f = function f() {...}

In JavaScript, functions, methods, and class constructors are just three different usage patterns of one single construct: functions.
Higher-order functions are nothing more than functions that take other functions as arguments or return functions as their result. Taking a function as an argument (often referred to as a callback function because it is "called back" by the higher-order function) is a particularly powerful and expressive idiom, and one that JavaScript programs use heavily.
functions come with a built-in call method for providing a custom receiver.

// Invoking a function via its call method:
f.call(obj, arg1, arg2, arg3);

// similarly to calling it directly:
f(arg1, arg2, arg3);

JavaScript provides every function with an implicit local variable called arguments .

TypeScript

A JavaScript superset, add types to JavaScript.
Non-JavaScript Features like Interfaces or Generics, Meta-Programming features like Decorators.
sudo npm i -g typescript
Core Types
- number (integer + floating point)
- string
- boolean
- object (key-value pair, {})
- Array (flexible/strict)
- Tuple [1, 2] (array push is allowed)
- Enum
- Any
- Union Type
Type alias

type Combinable = number | string

Typescript is statically typed, JS is dynamically type.

wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb sudo dpkg -i packages-microsoft-prod.deb rm packages-microsoft-prod.deb

Useful Links

Live Server vs code extension: spin local development web server Vetur vs code extension Material Icon Theme

lite-server

sudo npm install -g @vue/cli

npm install to install all dependencies of the project within the project directory.

Babel
Prettier VS code extension

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript.md

Javascript.md

Javascript

Eloquent JavaScript

JavaScript The Good Parts

Effective JavaScript

TypeScript

Useful Links

Files

Javascript.md

Latest commit

History

Javascript.md

File metadata and controls

Javascript

Eloquent JavaScript

JavaScript The Good Parts

Effective JavaScript

TypeScript

Useful Links