Skip to main content

Absolutely Everything You Could Need To Know About How JavaScript Works.

Absolutely Everything You Could Need To Know About How JavaScript Works.

Absolutely Everything You Could Need To Know About How JavaScript Works.

Seriously… this list is utterly exhaustive it covers more core concepts than I can hold the names of in working memory on a very good day.

Absolutely Everything You Could Need To Know About How JavaScript Works.

Seriously… this list is utterly exhaustive it covers more core concepts than I can hold the names of in working memory on a very good day.

But first a little bit of mildly shameful self promotion:

(self promotion ends after the line denoted by a bunch of pictures of my dog🐕 )
(Followed by a brief introduction to JavaScript for beginners)
(Finally the main content / resources / imbedded YouTube links)

My Blog:

Discover More:

https://bgoonz-blog.netlify.app/

This is a work in progress and may be broken or hosted elsewhere at some time in the future.

Related posts:

The Beginner’s Guide To JavaScript

This is a quick intro for complete beginners … skip below for more advanced content and resources! (below the next photo montage of my dog)

Skip The Following To Get To Main Content!!

If you wanna skip this section you’ll find the main content about 10% of the way down the page… it will look like this:

The Number Data Type

The number data type in JS is used to represent any numerical
values, including integers and decimal numbers. Basic Arithmetic Operators are the symbols that perform particular operations.

  • + (addition)
  • - (subtraction)
  • asterisk (multiplication)
  • / (division)
  • % (modulo)

JS evaluates more complex expressions using the general math order of
operations aka PEMDAS.

  • PEMDAS : Parentheses, Exponents, Multiplication, Division, Modulo, Addition, Subtraction.
  • To force a specific order of operation, use the group operator ( ) around a part of the expression.

Modulo : Very useful operation to check divisibility of numbers,
check for even & odd, whether a number is prime, and much more!
(Discrete Math concept, circular problems can be solved with modulo)

  • Whenever you have a smaller number % a larger number, the answer will just be the initial small number.
  • console.log(7 % 10); // => 7;

The String Data Type

The string data type is a primitive data type that used to represent
textual data.

  • can be wrapped by either single or double quotation marks, best to choose one and stick with it for consistency.
  • If your string contains quotation marks inside, can layer single or double quotation marks to allow it to work.
"That's a great string"; (valid)
'Shakespeare wrote, "To be or not to be"'; (valid)
'That's a bad string'; (invalid)
  • Alt. way to add other quotes within strings is to use template literals.

This is a template literal

${function} // use ${} to invoke functions within.

.length : property that can be appended to data to return the length.
empty strings have a length of zero.
indices : indexes of data that begin at 0, can call upon index by using the bracket notation [ ].
console.log("bootcamp"[0]); // => "b"
console.log("bootcamp"[10]); // => "undefined"
console.log("boots"[1 * 2]); // => "o"
console.log("boots"["boot".length - 1]); // => "t"
  • we can pass expressions through the brackets as well since JS always evaluates expressions first.
  • The index of the last character of a string is always one less than it’s length.
  • indexOf() : method used to find the first index of a given character within a string.
  • console.log("bagel".indexOf("b")); // => 0 console.log("bagel".indexOf("z")); // => -1
  • if the character inside the indexOf() search does not exist in the string, the output will be -1.
  • the indexOf() search will return the first instanced index of the the char in the string.
  • concatenate : word to describe joining strings together into a single string.

The Boolean Data Type

The Boolean data type is the simplest data type since there are only
two values: true and false.

  • Logical Operators (Boolean Operators) are used to establish logic in our code.
  • ! (not) : reverses a Boolean value.

console.log(!true); // => false console.log(!!false); // => false

  • && (and) Truth Table
  • Logical Order of Operations : JS will evaluate !, then &&, then ||.
  • De Morgan’s Law : Common mistake in Boolean logic is incorrectly distributing ! across parentheses.
  • !(A || B) === !A && !B; !(A && B) === !A || !B;
  • In summary, to correctly distribute ! across parentheses we must also flip the operation within.

Comparison Operators

All comparison operators will result in a Boolean output.

The relative comparators

  • > (greater than)
  • < (less than)
  • >= (greater than or equal to)
  • <= (less than or equal to)
  • === (equal to)
  • !== (not equal to)
Fun Fact: “a” < “b” is considered valid JS Code because string
comparisons are compared lexicographically (meaning dictionary order),
so “a” is less than “b” because it appears earlier!
If there is ever a standstill comparison of two string
lexicographically (i.e. app vs apple) the comparison will deem the
shorter string lesser.

Difference between == and ===

  • === : Strict Equality, will only return true if the two comparisons are entirely the same.
  • == : Loose Equality, will return true even if the values are of a different type, due to coercion. (Avoid using this)

Variables

Variables are used to store information to be referenced and manipulated
in a program.

  • We initialize a variable by using the let keyword and a = single equals sign (assignment operator).
  • let bootcamp = "Lambda"; console.log(bootcamp); // "Lambda"
  • JS variable names can contain any alphanumeric characters,
    underscores, or dollar signs (cannot being with a number).
  • If you do not declare a value for a variable, undefined is
    automatically set.
  • let bootcamp; console.log(bootcamp); // undefined
  • We can change the value of a previously declared variable (let, not
    const) by re-assigning it another value.
  • let is the updated version of var; there are some
    differences in terms of hoisting and global/block scope — will be
    covered later in the course (common interview question!)

Assignment Shorthand

let num = 0;num += 10; // same as num = num + 10num -= 2; // same as num = num - 2num /= 4; // same as num = num / 4num *= 7; // same as num = num * 7
  • In general, any nonsensical arithmetic will result in NaN ; usually operations that include undefined.
  • declaration : process of simply introducing a variable name.
  • initialization : process of both declaring and assigning a variable on the same line.

Functions

A function is a procedure of code that will run when called. Functions
are used so that we do not have to rewrite code to do the same thing
over and over. (Think of them as ‘subprograms’)

  • Function Declaration : Process when we first initially write our function.
  • Includes three things:
  • Name of the function.
  • A list of parameters ()
  • The code to execute {}
  • Function Calls : We can call upon our function whenever and wherever* we want. (*wherever is only after the initial declaration)
  • JS evaluates code top down, left to right.
  • When we execute a declared function later on in our program we refer to this as invoking our function.
  • Every function in JS returns undefined unless otherwise specified.
  • When we hit a return statement in a function we immediately exit the function and return to where we called the function.
  • When naming functions in JS always use camelCase and name it something appropriate. > Great code reads like English and almost explains itself. Think: Elegant, readable, and maintainable!

Parameters and Arguments

  • Parameters : Comma separated variables specified as part of a function’s declaration.
  • Arguments : Values passed to the function when it is invoked.
  • If the number of arguments passed during a function invocation is different than the number of parameters listed, it will still work.
  • However, is there are not enough arguments provided for parameters our function will likely yield Nan.

END OF INTRO FOR BEGINNERS (MAIN ARTICLE BELOW)

↓↓Absolutely Everything You Could Need To Know About JavaScript↓↓

Here’s a live code editor where you can mess with any of the examples…

Here’s a live code editor where you can mess with any of the examples…

Coding practice

Dependent on data

Something that data structure and algorithms have in common when talking about time complexity is that they are both dealing with data. When you deal with data you become dependent on them and as a result the time complexity is also dependent of the data that you received. To solve this problem we talk about 3 different time complexity.
  • The best-case complexity: when the data looks the best
  • The worst-case complexity: when the data looks the worst
  • The average-case complexity: when the data looks average

Big O notation

The complexity is usually expressed with the Big O notation. The wikipedia page about this subject is pretty complex but you can find here a good summary of the different complexity for the most famous data structures and sorting algorithms.

The Array data structure

Definition

An Array data structure, or simply an Array, is a data structure consisting of a collection of elements (values or variables), each identified by at least one array index or key. The simplest type of data structure is a linear array, also called one-dimensional array. From Wikipedia

Arrays are among the oldest and most important data structures and are used by every program. They are also used to implement many other data structures.

A primitive as an object

Here’s the paradox faced by the creator of JavaScript:

  • There are many things one would want to do with a primitive like a string or a number. It would be great to access them using methods.
  • Primitives must be as fast and lightweight as possible.

The solution looks a little bit awkward, but here it is:

  1. Primitives are still primitive. A single value, as desired.
  2. The language allows access to methods and properties of strings, numbers, booleans and symbols.
  3. In order for that to work, a special “object wrapper” that provides the extra functionality is created, and then is destroyed.

The “object wrappers” are different for each primitive type and are called: String, Number, Boolean and Symbol. Thus, they provide different sets of methods.

For instance, there exists a string method str.toUpperCase() that returns a capitalized str.

Here’s how it works:

let str = "Hello";
alert( str.toUpperCase() ); // HELLO

Simple, right? Here’s what actually happens in str.toUpperCase():

  1. The string str is a primitive. So in the moment of accessing its property, a special object is created that knows the value of the string, and has useful methods, like toUpperCase().
  2. That method runs and returns a new string (shown by alert).
  3. The special object is destroyed, leaving the primitive str alone.

So primitives can provide methods, but they still remain lightweight.

The JavaScript engine highly optimizes this process. It may even skip the creation of the extra object at all. But it must still adhere to the specification and behave as if it creates one.

DOES IT MUTATE:

LINK….

.concat

no mutation

Description

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

Array.prototype.concat ( [ item1 [ , item2 [ , … ] ] ] )

Example

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

.copyWithin()

mutates

Description

The copyWithin() method shallow copies part of an array to another location in the same array and returns it, without modifying its size.

arr.copyWithin(target)
arr.copyWithin(target, start)
arr.copyWithin(target, start, end)

Example

var array1 = ['a', 'b', 'c', 'd', 'e'];
// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]
// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]

.entries()

no mutation

Description

The entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.

a.entries()

Example

var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();
console.log(iterator1.next().value);
// expected output: Array [0, "a"]
console.log(iterator1.next().value);
// expected output: Array [1, "b"]

.every

no mutation

Description

The every() method tests whether all elements in the array pass the test implemented by the provided function.

Array.prototype.every ( callbackfn [ , thisArg ] )

Example

function isBelowThreshold(currentValue) {
return currentValue < 40;
}
var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true

.fill()

mutates

Description

The fill() method fills all the elements of an array from a start index to an end index with a static value.

arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

Example :

var array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

.filter

no mutation

Description

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Array.prototype.filter ( callbackfn [ , thisArg ] )

Example

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

.find()

no mutation

Description

The find() method returns a value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

arr.find(callback[, thisArg])

Example

var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
// expected output: 12

https://codeburst.io/javascript-prototype-cb29d82b8809

https://www.youtube.com/watch?v=Jh_Uzqzz_wM

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
https://javascript.info/closure

https://codeburst.io/understand-closures-in-javascript-d07852fa51e7

https://www.youtube.com/watch?v=1JsJx1x35c0

http://www.bradoncode.com/blog/2012/04/big-o-algorithm-examples-in-javascript.html

https://www.sitepoint.com/simple-inheritance-javascript/

Comments

Popular posts from this blog

These Are The Bash Shell Commands That Stand Between Me And Insanity

These Are The Bash Shell Commands That Stand Between Me And Insanity These Are The Bash Shell Commands That Stand Between Me And Insanity I will not profess to be a bash shell wizard… but I have managed to scour some pretty helpful little scripts from Stack Overflow and modify… These Are The Bash Shell Commands That Stand Between Me And Insanity I will not profess to be a bash shell wizard… but I have managed to scour some pretty helpful little scripts from Stack Overflow and modify them to suit my needs. All of these commands are for Ubuntu/WSL … some may work in other scenarios but I can’t guarantee it. ...
Deploy-React-App-To-Heroku-Using-Postgres Deploy React App To Heroku Using Postgres & Express Heroku is an web application that makes deploying applications easy for a beginner. Deploy React App To Heroku Using Postgres & Express Heroku is an web application that makes deploying applications easy for a beginner. Before you begin deploying, make sure to remove any console.log ’s or debugger ’s in any production code. You can search your entire project folder if you are using them anywhere. You will set up Heroku to run on a production, not development, version of your application. When a Node.js application like yours is pushed up to Heroku, it is identified as a Node.js application because of the package.json file. It runs npm install automatically. Then, if there is a heroku-postbui...

Data Structures Resources

Data Structures & Algorithms Resource List Part 1 Data Structures & Algorithms Resource List Part 1 Guess the author of the following quotes: Data Structures & Algorithms Resource List Part 1 Guess the author of the following quotes: Talk is cheap. Show me the code. Software is like sex: it’s better when it’s free. Microsoft isn’t evil, they just make really crappy operating systems. Update: Here’s some more: ...