JS Cheatsheet (work in process)

JavaScript engine makes multiply passes over the same code:

  1. First pass to parse the syntax. During this pass the engine undertakes a process called automatic semicolon insertion.
  2. Second pass to initialise variables and functions and store them in memory. Hoisting: is a JS default behaviour of moving all declarations to the top of the current scope ( to the top of the current script or the current function). Variables and constants declared with let or const are not hoisted.
  3. The third pass is to actually execute the code line-by-line.

First and second passes are called the compilation phase and the third phase is called the execution phase.

Debugging:

No matter what combination of types you write, JS won’t throw an error and will return something, even a non sense and weird something.

  • alert(“Hola!”);
  • console.log(“Hola!”);
  • console.error(“Hola!”);
  • console.warn(“Hola!”);
  • console.table

  • try statement lets you test a block of code for errors.

catch statement lets you handle the error.

  • throw statement lets you create custom errors.

  • finally¬†statement lets you execute code, after try and catch, regardless of the result.

Tests:

  • Unit testing
  • Integration testing
  • End-to end testing

Operators:

Data types:

Everything in JavaScript is data except:

  • operators:+, -, <=, etc.
  • reserved words:function, for, debugger, etc.

A basic type checking with the typeof operator: typeof(42);

The JS’s seven data types:

1.Numbers (primitive data type).

2. strings (primitive data type).

We use ‘single quotes’, “double quotes”, or `backticks.

String concatenation:

3. Booleans (primitive data type).

The following values are falsy:

false

null

undefined

0

NaN

'', ""

Every other value is truthy.

4.Symbols(primitive data type) are primarily used as an alternate way to add properties to objects.

5. Objects:

JS defines 5 types of primitive data types: string, number, boolean, null, undefined. All JS values, except primitives, are objects. In JS almost everything is an object: booleans, numbers and strings, if defined with the new keyword can be objects. Primitive data types represent single values, such as a number, a string or false, instead of a collection of values.

var x = new Boolean(false);

//typeof x returns object 

JS objects: dates, maths, regular expressions, arrays, functions and objects.

Objects are similar to a hash in Ruby or a dictionary in Python. Arrays in JS are objects too.

All keys in an object are strings.

Access a value stored in an Object:

Add a property to an Object:

Delete an property

Arrays:

Add an element:

 

Delete an element:

 

6. Null (primitive data type). Null is an absent object, but when called with typeof returns object.

7. Undefined (primitive data type). It is like a “not yet assigned a value”.

Spread operator (…)

Variables:

Start with a lower case and don’t use spaces, use camelCase.

Mind reserved words or future reserved words.

We can package both of the initialisation steps, declaration and assignment in a single line of code:

Differences between var, const and let.

*Variables declared without a const, let, or var keywords are always globally scoped. You can avoid this using strict mode.

var:

var is function scoped. The scope is limited to the function within which it is defined. If it is defined outside any function, the scope of the variable is global. They are not block-scoped.

Can be reassigned.

var comes with a ton of baggage in the form of scope issues, for example, with var no error is thrown if you declare a variable twice.

let:

let is block scoped. The scope is limited to the block defined by curly braces {}.

Can be reassigned.

const:

const is block scoped. The scope is limited to the block defined by curly braces {}.

Can not be reassigned to anew value, but can be mutated.

Conditional statements:

Functions:

A function is an object that contains a sequence of JavaScript statements.  Declaration:

Function calling or execution:

Parameters. They are locally scoped variables that are usable, scoped, to inside the function. Here name is our parameter.

JS will assign the argument of “Diana” to the parameter name when this function is called.

Function declaration vs function expression

The difference lies in how the browser loads them into the execution context.

Function declarations load before any code is executed.

Function expressions load only when the interpreter reaches that line of code.

If you try to call a function expression before it is loaded you get an error.

Arrow functions:

Arrow functions do not have their own this, it uses  whatever this is defined within the scope it is in.

Looping and iteration:

Iteration is the number of times a loop can be executed, while loop is the code which generate or causes expressions to be iterated.

Looping is the process of executing a set of statements¬†repeatedly until a condition is met. It’s great for when we want to do something a specific number of times (for¬†loop) or unlimited times until the condition is met (while¬†loop).

Iteration is the process of executing a set of statements once for each element in a collection.

Creating object with JS

Definitions:

  • S.O.L.I.D.: 5 principles of Object Oriented Design with JS.
    • S: Single responsibility principle.
    • O: Open closed principle. Open for extensions and closed for modifications, we shouldn’t introduce breaking changes to existing functionality.
    • L: Liskov substitution principle. Every subclass should be substitutable for their parent class.
    • I: Interface segregation principle. A client should never be forced to implement an interface that it doesn’t use or clients shouldn’t be forced to depend on methods they do not use.
    • D: Dependency Inversion principle. Entities must depend on abstractions not on concretions. Importance of higher-order functions.
  • ES6: “ES” ECMAScript, the official name of the JavaScript specification (Harmony – ES5)
  • Higher Order function: Function¬†that may receive a first-class function as an argument and can even return a function.
  • First-class functions: Functions that are treated as objects or assignable to a variable.
  • AJAX: Process of making requests for additional data became known as Asynchronous JavaScript and XML, or AJAX.
  • Closure: When a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.¬†A closure is a feature in JavaScript such that a function holds onto the variables that it had access to when it was declared. Closures can be used to declare functions that have specific variables always defined. JavaScript developers also take advantage of closures to encapsulate data, as we can declare our functions in such a way that the data is only accessible from the returned function, with no way to overwrite the variables captured by the closure.

  • Lexical scope: Where functions and variables are declared.
  • Hoisting: It is JS’s default behaviour of moving declarations to the top of the current scope. Let and const are not hoisted. During a compilation, every declaration ( of variables or functions) are added to the relative scope. Function declaration hoisting differs from variables as the content of the function get hoisted too.

  • Scope: Where something is available. In JS, where declared variables and methods are available within our code. Global scope, function scope, block scope, scope chain, lexical scope ( where functions and variables are declared).

  • Recursion: A recursive function is a function that calls itself.

  • Call back: When we pass a function into another function where in it might be invoked, we refer to the passed function as a callback.

  • forEach: Differences between map and forEach:
    • forEach():¬† It simply calls a provided function on each element in your array. This callback is allowed to mutate the calling array.¬†It returns undefined.¬†forEach()¬†affects and changes our original Array.¬†forEach()¬†may be preferable when you‚Äôre not trying to change the data in your array, but instead want to just¬†do something¬†with it ‚ÄĒ like saving it to a database or logging it out.
    • map(): creates a new array with the results of calling a provided function on every element in the calling array. The difference is that¬†map()¬†utilises return values and actually returns a new Array of the same size.¬†map()¬†returns an entirely new Array ‚ÄĒ thus leaving the original array unchanged.¬†And¬†map()¬†might be preferable when changing or altering data. Not only is it faster but it returns a new Array.

  • Statement vs expression: A statement is a unit of code that accomplish something but does not produce a value. An expression is a unit of code that produces a value.
    • statements: variable declarations, iteration, control flow, debugging.
  • this:¬†keyword that refers to the object it belongs to. Safer if using arrow functions, because arrow function uses whatever¬†this¬†is defined within the scope it is in.
    • This, inside a standalone function will refer to the global object.
    • Outside any function, this refers t the global object, in web browsers this is window.
    • Inside an object method, this refers to the object that received the method call.
    • Inside an standalone function, even one inside a method, this will default to the global object.
    • When using strict mode in a standalone function, as we do inside classes, this will be undefined.
    • We can use .bind, .call and .apply to control the value of this.

Leave a Reply

Your email address will not be published.