🚀☄️JavaScript from ZERO to HERO: All you need to know and more
Tags: javascript, webdev, frontend, codenewbie
Published: 2023-08-19 14:30:55

Hello and welcome!! 🤩🤩🤩

Today we will be starting our Javascript class.

Javascript is a vast topic. Javascript has been adapted to various aspects of technology and programming, including AI, web development, and others.

![uses of javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k5t2z8fe5132ldvu0m1.jpg)

In this tutorial, I will explain some important key concepts to note as you go on your Javascript journey. However, some concepts I will be demonstrating with a solved example.

## Table of Contents
&nbsp;1. [Introduction](#introduction)
&nbsp;2. [Javascript Keywords](#javascript-keywords)
&nbsp;3. [Variable declaration](#variable-declaration)
&nbsp;4. [Data types in Javascript](#data-types-in-javascript)
&nbsp;5. [Naming conventions in javascript](#naming-conventions-in-javascript)
&nbsp;6. [Scope in Javascript](#scope-in-javascript)
&nbsp;7. [Javascript blocks](#javascript-blocks)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 7.1. [Functions](#functions)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 7.2. [Conditional statements](#conditional-statements)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 7.3. [Loops in Javascript](#loops-in-javascript)
&nbsp;8. [What is 'this'?](#what-is-this)
&nbsp;9. [Data types cont'd](#data-types-contd)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 9.4. [Arrays in Javascript](#arrays-in-javascript)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 9.5. [Objects in Javascript](#objects-in-javascript)
&nbsp;10. [Methods in Javascript](#methods-in-javascript)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 10.6. [String methods](#string-methods)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 10.7. [Array Methods](#array-methods)
&nbsp;11. [Array and object destructuring in Javascript](#array-and-object-destructuring-in-javascript)
&nbsp;12. [Functions and types of functions](#functions-and-types-of-functions)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 12.8. [Function return statement in JavaScript](#function-return-statement-in-javascript)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 12.9. [Arrow functions](#arrow-functions)
&nbsp;13. [Javascript Spread operator](#javascript-spread-operator)
&nbsp;14. [References](#references)

## Introduction

👉🏾 Javascript is the world's most popular programming language.

👉🏾 Javascript is the programming language of the Web.

👉🏾 JavaScript is easy to learn. 😏

## Javascript Keywords

***In computer programming, keywords are predefined words in a programming language with a specific use. Additionally, we use them to define the structure and flow of a program. Furthermore, they specify the operations that the program should perform.***

In javascript, there are keywords like `const`, `var`, `catch`, `await`, `typeOf`, `static`, `protected`, `goTo`, `let` amongst others.

## Variable declaration

Think of a variable as an empty container in which you want to store a product. Let me paint a scenario: you are moving out of your house, and have gathered a lot of moving boxes to contain your belongings. You start in the living room, pick up a box, label it "living room", and put all the living room items in it. You continue this process until you get to the garage. The boxes are variables, meaning they can contain any information or data. The labeling is called a variable name, and the items inside the box are the data stored in the variable.

`x = 'I am a stranger in this land.'`

In the above example; we see that `x` is the variable name, `I am a stranger in this land` is the information we are storing in a box `x` (which is our variable). `=` is a connector. Its function is to connect a variable name with the data to be stored in the variable.

## Data types in Javascript


![data types in javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f02t7qfv4614pt55e6ll.jpg)

Data types define the various forms of data that we will be working with and storing in variables. There are five basic, or primitive, forms of data in Javascript. `Strings`, `integers`, `booleans`, `undefined`, and `null` are the five most fundamental forms of data. These are known as primitive data types. ***A single variable can only hold one kind of data.***

Let's go over each type of data and what it can be used for in more detail.

* **Strings** are collections of alphanumeric and symbol characters. This is how we'll save letters and words, such as addresses.
    
* **Numbers** are exactly how they sound. They are numbers, including integers and decimals. Numbers are frequently used by computers to execute mathematical operations, but they can also simply be a number, such as the number of ice cream flavors available at a given establishment.
    
* **Booleans** can only have two possible values. Both true and false. They represent any data that has only two states, such as a light switch. Either on or off.
    
* **The undefined data** type indicates that the variable was created but never assigned a value. It is nothing because no one has bothered to tell it what it should be worth.
    
* **Null** is similar to undefined in that it must be explicitly set. It also implies emptyness or nothingness, but it's because a developer commanded it to be that way.
    

## Naming conventions in javascript

When working in an organization, as a team, or individually, certain principles have to be followed or adhered to. This can vary depending on individual, team, or company standards.

* Variable names should have meaning, representing what data they are holding or where they are to be used.
    
* Variable names in JavaScript are conventionally written using the camelCase method. In the case of a compound word name, the first letter of the second word should be capitalized, while the others are in small letters.
    
* End every piece of code or code block with a semicolon `;` . Unlike in other languages with strict syntax rules, when writing Javascript code, semicolons are not added, it doesn't break the flow of the code. However, it is important to add these semicolons for readability.
    

*You can find more Javascript conventions* [*here.*](https://www.w3schools.com/js/js_conventions.asp)

## Scope in Javascript

Scope determines the accessibility (visibility) of variables. JavaScript has 3 types of scope:

* Block scope
    
* Function scope
    
* Global scope
    

**Block scope**: Before ES6 (2015), JavaScript had only **Global Scope** and **Function Scope**. ES6 introduced two important new JavaScript keywords: `let` and `const`. These two keywords provide **Block Scope** in JavaScript. Variables declared inside a `{ }` block cannot be accessed from outside the block.

```javascript
{
  let x = 2;
}
// x can NOT be used here
```

**Function scope**: JavaScript has function scope: Each function creates a new scope. Variables defined inside a function are not accessible (visible) from outside the function. Variables declared with `var`, `let` and `const` are quite similar when declared inside a function.

```javascript
function functionExample() {
  var variableName = "Volvo";   // Function Scope
};
```

**Global scope**: Variables declared **Globally** (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program. Variables declared with `var`, `let` and `const` are quite similar when declared outside a block.

```javascript
let x = 2;  // Global scope
```

## Javascript blocks

### Functions

![functions in javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d6nweijpocfps7k6p4k.png)

A function is a block of reusable code written to perform a specific task. You can think of a function as a sub-program within the main program. A function consists of a set of `statements` but executes as a single unit. A function can be written like:

 ```javascript
        function sayHello() {
        	console.log("Hello world"); 
        };
        // sayHello()
 ```
    

The code block above is the common syntax for writing a function in javascript. There is present the `function` keyword. The name of the function is followed by parentheses which can include parameters or be left blank, and a set of curly braces that encloses the entire function block. A set of instructions or *arguments* that are supposed to run once the function is called.
    
Outside the function scope, we see, `sayHello()` this is a function call. Meaning, we are telling our computer to execute the commands within the function block.
    
 ```javascript
      function addNumbers(num1, num2) {
       console.log(num1 +num2) 
      };
      addNumbers(1, 2);
 ```
    
The above is an example of a function with parameters. A function can contain many parameters, of various data types.
    

### Conditional statements

**If/Else statements**: Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In Javascript, we have the following conditional statements:

* Use `if` to specify a block of code to be executed, if a specified condition is true
    
* Use `else` to specify a block of code to be executed, if the same condition is false
    
* Use `else if` to specify a new condition to test, if the first condition is false.
    
    ```javascript
    var hour = 24
    if (hour < 18) {
      greeting = "Good day";}
    else if (hour = 12) {
      greeting = "It is noon!" }
    else {
      greeting = "Good evening";
    }
    console.log(greeting)
    ```
    
    In the example above, we are telling the computer to give an output such that (`if`) the value of `hour` is &lt;18, it should log on the console "Good day". However (`else if`), if the value of `hour` =12, it should log on the console, "It is noon!". Then (`else`), if the value of `hour` is &gt;18, it should log on the console "Good evening".
    

**Switch statements**: Switch statements are an upgrade to the if/else statement. The `switch` statement specifies many alternative blocks of code to be executed.

 ```javascript
      var testScore = prompt("What is your score?");
      function grade(testScore) {
          switch (true) {
              case testScore <= 39: 
                  alert("You got an F!");
                  break;
              case testScore <=44:
                  alert("You got a E!");
                  break;
              case testScore <= 49:
                  alert("You got a D!");
                  break;
              case testScore <= 59:
                  alert("You got a C!");
                  break;
              case testScore <= 69:
                  alert("You got a B!");
                  break;
              case testScore <= 100:
                  alert("You got an A!");
                  break;
              default:
                  alert("You did not take the test!");
                 break;
          }
      }
      grade(testScore);
  ```
    
Above, we have a function that takes a `switch` statement. We initially created a variable to store a user's input. We take the value of that input and analyze it with our `switch` statement such that if it is less than or equal to (`<=`) the number specified in either of our cases, the command inside the `case` block will be run. Think of each case as an `else if` statement.
    

### Loops in Javascript

Loops can execute a block of code as long as a specified condition is true.

* **While loops**: The `while` loop loops through a block of code as long as a specified condition is true.
    
    ```javascript
    while (i < 10) {
      text += "The number is " + i;
      i++;
    }
    ```
    
    In the above example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10.
    
* **While..Do loop**: The `do...while` statements combo defines a code block to be executed once, and repeated as long as a condition is `true`. The `do...while` is used when you want to run a code block **at least one time**.
    
    ***If you use a variable in the condition, you must initialize it before the loop, and increment it within the loop. Otherwise, the loop will never end. This will crash your browser. If the condition is always true, the loop will never end. This will also crash your browser.***
    
    ```javascript
    let text = "Hello";
    let i = 0;
    do {
      text + "John";
      i++;
    }
    while (i < 5);
    ```
    
    Execute a code block `text + "John"` once, and then continue if condition (i &lt; 5) is true.
    
* **For loops**: The `for` statement defines a code block that is executed as long as a condition is `true`.
    
    `for (statement 1; statement 2; statement 3) {   code block to be executed }`
    
    * Statement 1: command to be executed before the code block starts. (Optional). This parameter can be omitted, but not the semicolon ";"
        
    * Statement 2: The condition for running the code block.  
        If it returns `true` the loop will start over again; otherwise, the loop will end. This parameter can be omitted, but not the semicolon ";"
        
    * Statement 3: command to be executed after the code block. This parameter can be omitted, but not the semicolon ";"
        
    
    ***If you omit statement 2, you must provide a break inside the loop.***
    
    ***Otherwise, the loop will never end. This will crash your browser.***

## What is '**this'**?

In JavaScript, the `this` keyword refers to an **object**.

**Which** object depends on how `this` is being invoked (used or called).

The `this` keyword refers to different objects depending on how it is used:

<table><tbody><tr><td colspan="1" rowspan="1"><p>In an object method, <code>this</code> refers to the <strong>object</strong>.</p></td></tr><tr><td colspan="1" rowspan="1"><p>Alone, <code>this</code> refers to the <strong>global object</strong>.</p></td></tr><tr><td colspan="1" rowspan="1"><p>In a function, <code>this</code> refers to the <strong>global object</strong>.</p></td></tr><tr><td colspan="1" rowspan="1"><p>In a function, in strict mode, <code>this</code> is <code>undefined</code>.</p></td></tr><tr><td colspan="1" rowspan="1"><p>In an event, <code>this</code> refers to the <strong>element</strong> that received the event.</p></td></tr></tbody></table>

## Data types cont'd

### Arrays in Javascript

In JavaScript, an array is **an ordered list of values**. Each value in an array is called an element and is identified by an index. An array can hold values of mixed types. For example, you can have an array that stores elements with the types number, string, boolean, and null.

```javascript
var anArray = ["hello", 1, null, false];
```

The above is the more common way of writing out an array in Javascript.

However, there is another way: using the `Array` constructor function.

```javascript
var emptyArray = new Array();
var controlledArray = new Array(6);
var anArray = new Array(1, 'hello', null, false];
```

The example above has three examples using the `Array constructor function`. In the first line, what we have done is initialize an empty array. That is, we have opened up a 'box' or 'container' in which to store our data. This creates flexibility in that it allows our array to take any number of data inputs. In the second line, we have a controlled array. A controlled array in that we have specified a total number of values that the array is allowed to store or carry. In this case, we have made it so that `controlledArray` can only have six values. In the last line, we have initialized an array, as we did in the first code example above.

A way to initialize an empty array is

`var emptyArray = []`

As earlier stated, values in a Javascript array are identified by their index. In programming, we start our indexing from 0, not 1.

`var array = [1,2,3,4,5];`

**Accessing values**

From `array` above, our value '1' is indexed at 0. Subsequently, '2' is indexed at 1, and so on. This is a concept new programmers often struggle with (I know I did 😅), but in time and with frequent practice, it becomes second nature knowledge to you.

***Note: When we start indexing from reverse, that is, from the end of a value to the beginning, we start our index from -1. That is, from the example above, in reverse counting, the index of '5' is -1.***

To pick off a value in an array by its index, we use the following syntax:

```javascript
var array = [1, 2, 3, 4, 5, 6];
console.log(array[1], array[4], array[0]);

//console output: 2, 5, 1 
```

### Objects in Javascript

An object in JavaScript is an unordered collection of key-value pairs. Each key-value pair is referred to as a property. A property's key can be a string. A property's value can be anything, such as a string, a number, an array, or even a function. There are numerous ways to construct an object with JavaScript. The object literal notation is the most often used.

```javascript
var objectExample = 
{name: 'John',
 num: 15754, 
isEducated: false,
runOnce() {return 'I ran once!'}
};
```

**Accessing properties:**

To access a property of an object, you use one of two notations: the `dot notation` and `array notation`.

```javascript
var objectExample = 
{name: 'John',
 num: 15754, 
isEducated: false,
runOnce() {return 'I ran once!'}
};
console.log(objectExample.num) //this is the dot notation
console.log(objectExample['isEducated']); //this is the array notation

/*
console output: 
objectExample.num: 15754
objectExample['isEducated']: false
*/
```

## Methods in Javascript

An object is a collection of key/value pairs or properties.

There are a lot of JavaScript methods that are useful to our progress in JavaScript development. I will only touch on two in this article. However, you can read about more Javascript methods and how you can use them [here](https://www.tutorialspoint.com/javascript/javascript_builtin_functions.htm).

### String methods


![Different string methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wh82cvtlkqg5p0h97b6.png)

String methods are methods that we can use on strings to either modify them or read their values.

**String length:** This is a string property that tells us the number of characters contained in a string.

```javascript
var string = 'string';
var length = string.length;
console.log(length);

//console output: 6
```

Properties or methods are attached after a `dot notation` at the end of our variable name. In the above code block, we see that the `length` property was attached with a `dot notation` at the end of our variable name `string`.

**String extraction**

There are 3 methods for extracting a part of a string:

* `slice(start, end)` : this specifies to extract a string from the start of an index to the end of the index.
    
* `substring(start, end)` : in this method, any negative index is treated as starting from index zero.
    
* `substr(start, length)` : in this method, the second parameter is used to specify the length(or extent) to which we want the string extracted.
    

```javascript
var text = 'This is a full text.';
var slice = text.slice(5, 11);
var substring = text.substring(-5, 11);
var substr = text.substr(5, 11);
console.log(slice, substring, substr);

/* console output: 
slice: is a f 
substring: This is a f 
substr: is a full t
*/
```

In the code block above, we see that with `.slice`, we got the string sliced from index 5 to index 11. But we see something funny here. The extraction does stop at 10. Yes, that is because in programming, when selecting a range, we start from the beginning of the range to the number just before the end of the range. So, as in the example above, our extraction stopped at index 10.

***Please note that in a string such as the one we have above, whitespaces are indexed as well.***

**Converting to upper and lower cases**

A string is converted to uppercase with `toUpperCase()`

A string is converted to lowercase with `toLowerCase()`

```javascript
var example1 = 'hello';
var upperCase = example1.toUpperCase();
var example2 = 'HELLO';
var lowerCase = example2.toLowerCase();
console.log(upperCase, lowerCase);

/*
console output: 
upperCase: HELLO
lowerCase: hello
*/
```

For more string methods, and the beautiful things we can do with them, check out W3School's [documentation](https://www.w3schools.com/js/js_string_methods.asp) on string methods.

### Array Methods


![Different array methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8mmk9umetv2rjb0qwzl.png)

**Array Length**

The array length property serves the same purpose as the string length property in that it is used to tell the length of an array.

```javascript
var array = ['hello', 1, null, false];
console.log(array.length);

// console output: 4
```

**Popping and Pushing**

When you work with arrays, it is easy to remove elements and add new ones.

This is what popping and pushing are: Popping items **out** of an array, or pushing items **into** an array.

```javascript
var salutations = ['Hello', 'Hi', 'Hey', 'Howdy']
salutations.pop();
console.log(salutations);
salutations.push('Ekaroo');
console.log(salutations);

/*
console output: 
salutations.pop(): ['Hello', 'Hi', 'Hey']
salutations.push('ekaroo'): ['Hello', 'Hi', 'Hey', 'Ekaroo']
*/ 
```

For more on array methods, and the beautiful things we can do with them, check out W3School's [documentation](https://www.w3schools.com/js/js_array_methods.asp) on array methods. Also, check out this [amazing article](https://medium.com/@mandeepkaur1/a-list-of-javascript-array-methods-145d09dd19a0) on JavaScript array methods.

## Array and object destructuring in Javascript

The destructuring assignment is a cool feature that came along with ES6. Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables.

```javascript
let array = [1, 2, 'kitty', 4, 5, 6, 7];
let [1, 2, 3, 4, 5, 6, 7] = array;
console.log(3);

//console output: kitty
```

This might seem as though we almost reversed our array. What we did was assign a *variable name* to each item/value in our array, to make it easy for retrieval. Instead of typing `array[3]` to get the item at index `3`, all we had to do was type in '3'. You can read more about destructuring [here](https://www.freecodecamp.org/news/array-and-object-destructuring-in-javascript/).

## Functions and types of functions

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

Get a better introduction to functions in Javascript from our [lesson](https://dumebi.hashnode.dev/learn-front-end-web-development-in-12-days-beginner-javascript) last week.

Broadly speaking, JavaScript has four kinds of functions:

- **Regular function**: can return anything; always runs to completion after invocation

The general syntax for a JavaScript function is

```
function thisIsAFunction() {
  //Enter function code block here
}
```
    
- **Generator function**: returns a [`Generator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) object; can be paused and resumed with the [`yield`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield) operator
    
- **Async function**: returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise); can be paused and resumed with the [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) operator. 

The general syntax for a JavaScript async function is

``` 
async function thisIsAFunction() {
  //Enter function code block here
}
```
    
- **Async generator function**: returns an [`AsyncGenerator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator) object; both the `await` and `yield` operators can be used
    

### Function return statement in JavaScript

When JavaScript reaches a `return` statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.

Functions often compute a **return value**. The return value is "returned" back to the "caller".

```javascript
function myFunction(a, b) {
  return a * b;
// Function returns the product of a and b
}
console.log(myFunction(5, 6));

//console output: 30
```

### Arrow functions

An [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) (also called a *fat arrow* to distinguish it from a hypothetical `->` syntax in future JavaScript) has a shorter syntax compared to function expressions and does not have its own [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this). Arrow functions are always anonymous.

Two factors influenced the introduction of arrow functions: *shorter functions* and the *non-binding* of `this`.

```javascript
const arrow = () => {return 'Her name is Chloe'}
arrow()
```

The above is a standard syntax for an arrow function. Arrow functions are very effective for writing in-line functions or for returning only one value.

```javascript
function fizzBuzz() {
    for (let i = 0; i < 100; i++) {
        if (i % 15 === 0) {
            console.log("fizzBuzz")
        }
        else if (i % 3 === 0) {
           console.log("fizz") 
        }
        else if (i % 5 === 0) {
            console.log("Buzz")
        }
        else {
            console.log(i) 
        }
    }
}

fizzBuzz()
```

The above code block is an example of a function solving the famous Fizzbuzz algorithm challenge. I detail more about this solution [here](https://dumebi.hashnode.dev/javascript-fizzbuzz-solution).

## Javascript Spread operator

This is my favorite thing about ES6! 🤣

The JavaScript spread operator (`...`) allows us to quickly copy all or part of an existing array or object into another array or object.

```javascript
var firstSixNumbers = [1, 2, 3, 4, 5, 6];
var firstTenNumbers = [...firstSixNumbers, 7, 8, 9, 10];
console.log(firstTenNumbers);

//console output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

We see above how we did not have to copy all the values from our first array into the second one. We simply had to *spread* it in the second one. Imagine how useful this will be for an array with a longer length or more!


## References
    
* [Keywords in programming](https://www.baeldung.com/cs/keyword-vs-reserved-word#:~:text=In%20computer%20programming%2C%20keywords%20are,that%20the%20program%20should%20perform.)
    
* [Javascript scope](https://www.w3schools.com/js/js_scope.asp)
    
* [Data types in javascript](https://devmountain.com/blog/what-are-data-types-javascript-101/#:~:text=In%20Javascript%2C%20there%20are%20five,booleans%2C%20undefined%2C%20and%20null.)
    
* [Image: variables in javascript](https://simplesnippets.tech/javascript-variables-data-types/)
    
* [Image: uses of javascript](https://www.educba.com/uses-of-javascript/)
    
* [Image: javascript functions](https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.programiz.com%2Fjavascript%2Ffunction&psig=AOvVaw0LZhaqB2sxGGNX4W0Qg5CW&ust=1686934259088000&source=images&cd=vfe&ved=0CBMQjhxqFwoTCNio8_3dxf8CFQAAAAAdAAAAABAE)
    
* [Javascript functions](https://www.freecodecamp.org/news/what-are-functions-in-javascript-a-beginners-guide/#:~:text=A%20function%20is%20a%20block,prompt()%2C%20and%20confirm().)
    
* [Javascript if..else statements](https://www.w3schools.com/js/js_if_else.asp)
    
* [Javascript while loop](https://www.w3schools.com/js/js_loop_while.asp)
    
* [Javascript do..while loop](https://www.w3schools.com/jsref/jsref_dowhile.asp)
    
* [Javascript for loop](https://www.w3schools.com/jsref/jsref_for.asp)
 

* [Cover Image](https://www.google.com/url?sa=i&url=https%3A%2F%2Fcodeberryschool.com%2Fblog%2Fen%2Fjavascript-a-programming-language%2F&psig=AOvVaw2c3YkLyBA2hf6yO1Y1RtzJ&ust=1687478265461000&source=images&cd=vfe&ved=0CBMQjhxqFwoTCIi0jcvI1f8CFQAAAAAdAAAAABAE)
    
* [Javascript Arrays](https://www.javascripttutorial.net/javascript-array/#:~:text=In%20JavaScript%2C%20an%20array%20is,string%2C%20boolean%2C%20and%20null.)
    
* [Javascript objects](https://www.javascripttutorial.net/javascript-objects/)
    
* [String methods](https://www.w3schools.com/js/js_string_methods.asp)
    
* [Array methods](https://www.w3schools.com/js/js_array_methods.asp)
    
* [Methods in Javascript](https://www.javascripttutorial.net/javascript-object-methods/)
    
* [Functions in javascript](https://www.w3schools.com/js/js_functions.asp)
    
* [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)
    
* [Types of functions in Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
    
* [What is 'this'?](https://www.w3schools.com/js/js_this.asp)