Javascript is a really nice Programming Language because you can easily add logic and behavior to a Website Page.

It doesn't need to Compile and is rendered by the 🌐 Internet Browser in Realtime.

You can build:

Mobile Applications with React Native or Ionic

Scripts for webpages

It's also excellent at IO Intensive Jobs, made possible by a Non-Blocking Event Loop, that can queue up work in the background without clogging up the d

link Code Formatting

link Whitespace

Javascript ignores whitespace, so it doesn't matter where you insert it. (anywhere)

Use that to your advantage to make the code more readable!

link Comments

You insert a comment line with:

// This is a comment

You probably won't need to place a lot of comments if you think carefully about how you name your functions and variables.

But with some complex functions, it can make your code more readable and easier to understand.

link Variables

In javascript you can use var, const and let to declare a variable. You use let when you need to change the value of the variable, otherwise you always use const.

Javascript: Why you shouldn't use var

link Declaring

If you don't declare a variable, it automatically becomes Global Scope, even if the first time you use it is in a function!

You don't want to use Global Scope often. (Only when necessary)

Use Local Scope variables as much as possible.

Always declare the global variables at the top of the file, and the local variables at the top of the Function.

link Defining

Defining = assigning a value to a variable.

You don't have to define the kind of value (Int, Float, Boolean, String)

It's also not required to assign a value to the variable when you declare it. But you can if you want to.

If a variable doesn't have a value assigned to it, it is 'undefined' within Javascript. (It's also 'false' when undefined, and 'true' when it contains a value)

link Undefined

A variable or property becomes undefined when:

It hasn't been assigned a value.

When it doesn't exist in an array.

When the property doesn't exist.

When the variable or property got deleted.

I check if something is undefined quite frequently in order to see if it has been assigned a value or if it exists.

link Comparison Operators

These operators are used often:

== Will check on value (but it does a type conversion first, so it only checks value, not type!)

=== Will check for equal value and type, if they are both the same it will return True. Most of the time this will be better to use than ==

&& AND

|| OR

< Less than

> Greater than

<= Less than or equal to

>= More than or equal to

!= Not equal to

!== Strict not equal to

More info and other more advanced operators

link True and False Values within JavaScript

False

An object doesn't exist

A string is empty

A function returns 0 (You can use this to return if a condition within the function is not met)

True

An object exists

A string contains a value other than empty

A function returns 1 (You can use this to return if a condition within the function is met)

link If Else Statement

Often used with Comparison Operators to check if a condition is met.

If you use a return with your functions, you can leave out the 'else', because when it returns it leaves the function.

link Loops

link While Loop

I like the while loop more for looping over a boolean value, do something while x == false for example.

You then break out of that loop by assigning 'true' to x.

It's also possible to create an infinite loop with:

while(true){
}

link For Loop

The for loop works better if you want to iterate over data X amount of times.

You can declare the index and increase the index every loop, within the declaration of the for loop. Like this:

for(let i = 0; i < list.length; i += 1) {
}

link Functions

Javascript doesn't care if you declare your functions before or after you call them. You can put your functions anywhere you like in your Javascript files, and even functions within functions (That is called a Closure).

Javascript actually makes two passes over your code files. The first time to read all the function definitions, and the second time to execute it.

// This is a function decleration
function fly(number) {
    for (let i = 0; i < number; i++){
        console.log("Flying right now");
    }
};
fly(3);
 

link Parameters

In the code example above, number is a parameter, it's something you can pass to the function to use it within that function / scope. It can be for example an object, a class, a function, or a variable.

link Arguments

If you give more arguments than the function has parameters, it will just ignore them and the function would still work.

If a argument is missing, it will give some trouble.

link Function Expression

A function expression is a function, but you use it a bit differently. Instead of giving the function a name, it's assigned to a variable.

// This is a function expression
const fly = function(number) {
    for (let i = 0; i < number; i++){
        console.log("Flying right now");
    }
};
fly(3);

It essentially does the same as using a function declaration (the function fly example), but there are some key differences:

Function expressions are better for Objects

The expression results are assigned to the variable afterwards.

I think the function expression is cleaner when you create a function that calculates a value.

That way you can use calculate() when you want to assign a value, and then later use calculate as a variable.

This can also be done with a function expression, you get a reference to that function.

With a function expression, the code executes at runtime.

With a function declaration, it gets evaluated before the rest of the code.

The difference is subtle, and ultimately it's a matter of style.

A function is basically also a variable, with the difference being that you can invoke them.

link Arrow Function

The arrow function got introduced in ES6 Javascript. It can make code a bit more concise, with the added benefit that it doesn't change the scope of the this. reference.

Example:

function sum(a,b) {
  return a+b
}

Changes into:

let arrowSum = (a, b) => {
  a + b
}

// if there is only 1 line of code, you can remove the return within the arrow function. It assumes that is what you will return.

If you have only 1 parameter, you could also remove the parenthesis. Or if you don't have any parameters just use empty parenthesis:

let example = () => console.log("Nice")

link Arrays

The type of choice for ordered data in Javascript, is an Array.

An array is basically a list.

Examples of data that go well with arrays are:

Music Playlists

Shopping cart items

Saved input data

Or even an entire product catalog (but you would probably want to use a Database for that).

Each entry of the array has an index. (it starts with 0, so if you want the 5th item, the index = 4)

You want to limit the amount of items in an array to max hundreds or thousands, because each item will take up some memory.

link Objects

Objects are basically a collection of multiple properties, you can assign as many or as few as you like.

You can change them using, for example:

const bike = {
    wheels: 2,
    manufacturing year: 2022
}
bike.wheels = 3
// bike is now upgraded!

Note: when you call the object, you're actually referencing a pointer to the object,
If you pass an object to a function, you're making a copy of the reference, thus still changing the object if you change it within the function.

You can even add behavior to objects by calling a function from a property:

const bike = {
    honked: false,
    horn: function(){
         console.log("Move aside!")
         this.honked = true;
    }
}

When a function is called from an object, we call them 'Methods'.

If you want to use a property from the object, in a method, you need to add 'this.'

You can access an object multiple different ways:

bike.wheels // This is my prefered method, but the last one can provide a bit more flexibility if you need it.
bike["wheels"]
bike["whe" + "els"]

link Classes

Even though it's called a class in JavaScript, it's also an object.

link This

This refers to the current Object it's in, so that can be a property or function within the scope of the object.

this.propertyname

link Good Sources to learn Javascript

link The Documentation from Mozilla about Javascript

link A good reintroduction tutorial from Mozilla about Javascript

link Use Cases