# JavaScript Basics

## 1. Introduction
[CodeAcademy Tutorial](https://www.codecademy.com/learn/introduction-to-javascript)

You can also watch a popular JavaScript basics crash course video on Youtube.

## 2. Modules

[Read this article](https://www.freecodecamp.org/news/node-module-exports-explained-with-javascript-export-function-examples/)

Video - [https://www.youtube.com/watch?v=hyYbs3SANRo](https://www.youtube.com/watch?v=hyYbs3SANRo)

## 3. Best Practices: Indentation

Ensure that your code indentation is good. Submitting code that looks like the example given is unprofessional and makes it difficult to read for you as well as anyone who has to work with your code.

Bad indentation:
```javascript
 function problem1(inventory,passid){

if(Array.isArray(inventory)){

return inventory;}

else{
    return [];
}
}

module.exports=problem1;
```


Good indentation:
```javascript
function problem1(inventory, passid) {
    if(Array.isArray(inventory) && passid<50) {
        return inventory;
    } else {
        return [];
    }
}

module.exports = problem1;
```

An easy way to indent your code is to press Ctrl + Shift + I in VSCode.

If you are on a Mac, try Cmd + Shift + I

## 4. Best Practices: Variable Naming

Ensure that your variable names are descriptive. Variables names looks like the examples below are unprofessional and makes it difficult to read for you as well as anyone who has to work with your code.

Bad Naming:
```javascript
const a = [1, 2, 3, 4, 5];
const a1 = [1, 4, 9, 16, 25];
```

Good naming:
```javascript
const numbers = [1, 2, 3, 4, 5];
const squares = [1, 4, 9, 16, 25];
```

This also applies to functions


Bad Naming:
```javascript
const numbers = [1, 2, 3, 4, 5];

function calc(n) {
    return n * n;
}

const squares = numbers.map(calc);
```

Good naming:
```javascript
const numbers = [1, 2, 3, 4, 5];

function squareNumber(number) {
    return number * number;
}

const squares = numbers.map(squareNumber);
```

Naming is tricky for every engineer. But that does not mean you don't do it. It means you think about what to name it **while** you are writing code, not after you have finished.

### 4. Best Practices: if else

Keeping your code as readable as possible will ensure that you don't run into issues later on. One way to ensure this with `if else if` is to always use `{}` with the statements.

Bad Usage:
```javascript
let sum = 10;

if(value %2 == 0)
    sum += value;
else if(value == 0)
    sum += 1;
else
    sum += -1;
```

Good usage:
```javascript
let sum = 10;

if(value %2 == 0) {
    sum += value;
} else if(value == 0) {
    sum += 1;
} else {
    sum += -1;
}
```

This ensures that there is never any confusion about which code runs and when.

It also ensures that there will be no chance of code not getting executed because it was placed on an adjacent line and is missed by the interpreter.

## 6. JS Drill: Cars

To help us use arrays with real world problems we are going to simulate a used car dealer that has 50 cars in their inventory.
The car dealer has all of their inventory housed in the array seen below.  Scroll down past the data to find out how you can help the car dealer.

PROJECT RESTRICTION: You can't use map, reduce, or filter to solve these problems.  Only use native JavaScript for loops. No other types of loops are allowed.

Example for loop:
-----------------
```js
arr = [1,2,3,4];
for (i = 0; i < arr.length; i++) {
    arr[i];  // 1,2,3,4
}
```

Create a function for each problem in a file called

    problem1.js
    problem2.js
    problem3.js
and so on in the root of the project.

Ensure that the functions in each file is exported and tested in its own file called

    testProblem1.js
    testProblem2.js
    testProblem3.js
and so on in a folder called `test`.

Each function must take at least one argument. The first argument must always be the inventory.

Example:
```js
const result = problem1(inventory);
```

If you want to pass more arguments, that is up to you.

Create a new git repo on gitlab for this project, ensure that you commit after you complete each problem in the project.
Ensure that the repo is a public repo.

```js

let inventory = [{"id":1,"car_make":"Lincoln","car_model":"Navigator","car_year":2009},
{"id":2,"car_make":"Mazda","car_model":"Miata MX-5","car_year":2001},
{"id":3,"car_make":"Land Rover","car_model":"Defender Ice Edition","car_year":2010},
{"id":4,"car_make":"Honda","car_model":"Accord","car_year":1983},
{"id":5,"car_make":"Mitsubishi","car_model":"Galant","car_year":1990},
{"id":6,"car_make":"Audi","car_model":"riolet","car_year":1995},
{"id":7,"car_make":"Smart","car_model":"Fortwo","car_year":2009},
{"id":8,"car_make":"Audi","car_model":"4000CS Quattro","car_year":1987},
{"id":9,"car_make":"Ford","car_model":"Windstar","car_year":1996},
{"id":10,"car_make":"Mercedes-Benz","car_model":"E-Class","car_year":2000},
{"id":11,"car_make":"Infiniti","car_model":"G35","car_year":2004},
{"id":12,"car_make":"Lotus","car_model":"Esprit","car_year":2004},
{"id":13,"car_make":"Chevrolet","car_model":"Cavalier","car_year":1997},
{"id":14,"car_make":"Dodge","car_model":"Ram Van 1500","car_year":1999},
{"id":15,"car_make":"Dodge","car_model":"Intrepid","car_year":2000},
{"id":16,"car_make":"Mitsubishi","car_model":"Montero Sport","car_year":2001},
{"id":17,"car_make":"Buick","car_model":"Skylark","car_year":1987},
{"id":18,"car_make":"Geo","car_model":"Prizm","car_year":1995},
{"id":19,"car_make":"Oldsmobile","car_model":"Bravada","car_year":1994},
{"id":20,"car_make":"Mazda","car_model":"Familia","car_year":1985},
{"id":21,"car_make":"Chevrolet","car_model":"Express 1500","car_year":2003},
{"id":22,"car_make":"Jeep","car_model":"Wrangler","car_year":1997},
{"id":23,"car_make":"Eagle","car_model":"Talon","car_year":1992},
{"id":24,"car_make":"Toyota","car_model":"MR2","car_year":2003},
{"id":25,"car_make":"BMW","car_model":"525","car_year":2005},
{"id":26,"car_make":"Cadillac","car_model":"Escalade","car_year":2005},
{"id":27,"car_make":"Infiniti","car_model":"Q","car_year":2000},
{"id":28,"car_make":"Suzuki","car_model":"Aerio","car_year":2005},
{"id":29,"car_make":"Mercury","car_model":"Topaz","car_year":1993},
{"id":30,"car_make":"BMW","car_model":"6 Series","car_year":2010},
{"id":31,"car_make":"Pontiac","car_model":"GTO","car_year":1964},
{"id":32,"car_make":"Dodge","car_model":"Ram Van 3500","car_year":1999},
{"id":33,"car_make":"Jeep","car_model":"Wrangler","car_year":2011},
{"id":34,"car_make":"Ford","car_model":"Escort","car_year":1991},
{"id":35,"car_make":"Chrysler","car_model":"300M","car_year":2000},
{"id":36,"car_make":"Volvo","car_model":"XC70","car_year":2003},
{"id":37,"car_make":"Oldsmobile","car_model":"LSS","car_year":1997},
{"id":38,"car_make":"Toyota","car_model":"Camry","car_year":1992},
{"id":39,"car_make":"Ford","car_model":"Econoline E250","car_year":1998},
{"id":40,"car_make":"Lotus","car_model":"Evora","car_year":2012},
{"id":41,"car_make":"Ford","car_model":"Mustang","car_year":1965},
{"id":42,"car_make":"GMC","car_model":"Yukon","car_year":1996},
{"id":43,"car_make":"Mercedes-Benz","car_model":"R-Class","car_year":2009},
{"id":44,"car_make":"Audi","car_model":"Q7","car_year":2012},
{"id":45,"car_make":"Audi","car_model":"TT","car_year":2008},
{"id":46,"car_make":"Oldsmobile","car_model":"Ciera","car_year":1995},
{"id":47,"car_make":"Volkswagen","car_model":"Jetta","car_year":2007},
{"id":48,"car_make":"Dodge","car_model":"Magnum","car_year":2008},
{"id":49,"car_make":"Chrysler","car_model":"Sebring","car_year":1996},
{"id":50,"car_make":"Lincoln","car_model":"Town Car","car_year":1999}];

// ==== Problem #1 ====
// The dealer can't recall the information for a car with an id of 33 on his lot. Help the dealer find out which car has an id of 33 by calling a function that will return the data for that car. Then log the car's year, make, and model in the console log in the format of:
"Car 33 is a *car year goes here* *car make goes here* *car model goes here*"

// ==== Problem #2 ====
// The dealer needs the information on the last car in their inventory. Execute a function to find what the make and model of the last car in the inventory is?  Log the make and model into the console in the format of:
"Last car is a *car make goes here* *car model goes here*"

// ==== Problem #3 ====
// The marketing team wants the car models listed alphabetically on the website. Execute a function to Sort all the car model names into alphabetical order and log the results in the console as it was returned.

// ==== Problem #4 ====
// The accounting team needs all the years from every car on the lot. Execute a function that will return an array from the dealer data containing only the car years and log the result in the console as it was returned.

// ==== Problem #5 ====
// The car lot manager needs to find out how many cars are older than the year 2000. Using the array you just obtained from the previous problem, find out how many cars were made before the year 2000 and return the array of older cars and log its length.

// ==== Problem #6 ====
// A buyer is interested in seeing only BMW and Audi cars within the inventory.  Execute a function and return an array that only contains BMW and Audi cars.  Once you have the BMWAndAudi array, use JSON.stringify() to show the results of the array in the console.
```

## 7. Higher Order Array Functions

Watch the videos and then practice

- [https://www.youtube.com/watch?v=zdp0zrpKzIE](https://www.youtube.com/watch?v=zdp0zrpKzIE)
- [https://www.youtube.com/watch?v=rRgD1yVwIvE](https://www.youtube.com/watch?v=rRgD1yVwIvE)

## 8. Best Practices: Higher Order Functions

When writing higher order functions, it is tempting to write all the functionality in one line of code. The problem with this approach is that it makes the code much harder to read and much harder to debug.

To make your code better, always use arrow functions with a `{}` block. That way, it becomes more readable and it makes things easier to work with for yourself and for other people who will be working with your code.

Bad Usage:
```javascript
const arr = [1, 2, 3, 4, 5];

const numbers = arr.filter(number => number > 5).map(number => number * number).reduce((acc, number) => acc + number);
```

Bad Usage:
```javascript
const arr = [1, 2, 3, 4, 5];

const numbers = arr.filter(number => number > 5)
.map(number => number * number)
.reduce((acc, number) => acc + number);
```

Good Usage:
```javascript
const arr = [1, 2, 3, 4, 5];

const numbers = arr.filter((number) => {
    return number > 5;
})
.map((number) => {
    return number * number;
})
.reduce((acc, number) => {
    acc = acc + number;

    return acc;
})
```

Here it becomes much more clear where all the functionality is happening and it has become much easier to work with. Making changes also becomes much easier since we would anyway have to have added the `{}` block.

This practice must also be followed when there is only 1 higher order function used. This will ensure that you do not fall into the bad practice of writing single line functions.

Bad Usage:
```javascript
const arr = [1, 2, 3, 4, 5];

const numbers = arr.filter(number => number > 5);
```

Good Usage:
```javascript
const arr = [1, 2, 3, 4, 5];

const numbers = arr.filter((number) => {
    return number > 5;
});
```

## 9. JS Drill: Cars 2

To help us use arrays with real world problems we are going to simulate a used car dealer that has 50 cars in their inventory.
The car dealer has all of their inventory housed in the array seen below.  Scroll down past the data to find out how you can help the car dealer.

PROJECT RESTRICTION: Use map, filter, reduce

Create a function for each problem in a file called

    problem1.js
    problem2.js
    problem3.js
and so on in the root of the project.

Ensure that the functions in each file is exported and tested in its own file called

    testProblem1.js
    testProblem2.js
    testProblem3.js
and so on in a folder called `test`.

Each function must take at least one argument. The first argument must always be the inventory.

Example:
```js
const result = problem1(inventory);
```

If you want to pass more arguments, that is up to you.

Create a new git repo on gitlab for this project, ensure that you commit after you complete each problem in the project.
Ensure that the repo is a public repo.

```js

let inventory = [{"id":1,"car_make":"Lincoln","car_model":"Navigator","car_year":2009},
{"id":2,"car_make":"Mazda","car_model":"Miata MX-5","car_year":2001},
{"id":3,"car_make":"Land Rover","car_model":"Defender Ice Edition","car_year":2010},
{"id":4,"car_make":"Honda","car_model":"Accord","car_year":1983},
{"id":5,"car_make":"Mitsubishi","car_model":"Galant","car_year":1990},
{"id":6,"car_make":"Audi","car_model":"riolet","car_year":1995},
{"id":7,"car_make":"Smart","car_model":"Fortwo","car_year":2009},
{"id":8,"car_make":"Audi","car_model":"4000CS Quattro","car_year":1987},
{"id":9,"car_make":"Ford","car_model":"Windstar","car_year":1996},
{"id":10,"car_make":"Mercedes-Benz","car_model":"E-Class","car_year":2000},
{"id":11,"car_make":"Infiniti","car_model":"G35","car_year":2004},
{"id":12,"car_make":"Lotus","car_model":"Esprit","car_year":2004},
{"id":13,"car_make":"Chevrolet","car_model":"Cavalier","car_year":1997},
{"id":14,"car_make":"Dodge","car_model":"Ram Van 1500","car_year":1999},
{"id":15,"car_make":"Dodge","car_model":"Intrepid","car_year":2000},
{"id":16,"car_make":"Mitsubishi","car_model":"Montero Sport","car_year":2001},
{"id":17,"car_make":"Buick","car_model":"Skylark","car_year":1987},
{"id":18,"car_make":"Geo","car_model":"Prizm","car_year":1995},
{"id":19,"car_make":"Oldsmobile","car_model":"Bravada","car_year":1994},
{"id":20,"car_make":"Mazda","car_model":"Familia","car_year":1985},
{"id":21,"car_make":"Chevrolet","car_model":"Express 1500","car_year":2003},
{"id":22,"car_make":"Jeep","car_model":"Wrangler","car_year":1997},
{"id":23,"car_make":"Eagle","car_model":"Talon","car_year":1992},
{"id":24,"car_make":"Toyota","car_model":"MR2","car_year":2003},
{"id":25,"car_make":"BMW","car_model":"525","car_year":2005},
{"id":26,"car_make":"Cadillac","car_model":"Escalade","car_year":2005},
{"id":27,"car_make":"Infiniti","car_model":"Q","car_year":2000},
{"id":28,"car_make":"Suzuki","car_model":"Aerio","car_year":2005},
{"id":29,"car_make":"Mercury","car_model":"Topaz","car_year":1993},
{"id":30,"car_make":"BMW","car_model":"6 Series","car_year":2010},
{"id":31,"car_make":"Pontiac","car_model":"GTO","car_year":1964},
{"id":32,"car_make":"Dodge","car_model":"Ram Van 3500","car_year":1999},
{"id":33,"car_make":"Jeep","car_model":"Wrangler","car_year":2011},
{"id":34,"car_make":"Ford","car_model":"Escort","car_year":1991},
{"id":35,"car_make":"Chrysler","car_model":"300M","car_year":2000},
{"id":36,"car_make":"Volvo","car_model":"XC70","car_year":2003},
{"id":37,"car_make":"Oldsmobile","car_model":"LSS","car_year":1997},
{"id":38,"car_make":"Toyota","car_model":"Camry","car_year":1992},
{"id":39,"car_make":"Ford","car_model":"Econoline E250","car_year":1998},
{"id":40,"car_make":"Lotus","car_model":"Evora","car_year":2012},
{"id":41,"car_make":"Ford","car_model":"Mustang","car_year":1965},
{"id":42,"car_make":"GMC","car_model":"Yukon","car_year":1996},
{"id":43,"car_make":"Mercedes-Benz","car_model":"R-Class","car_year":2009},
{"id":44,"car_make":"Audi","car_model":"Q7","car_year":2012},
{"id":45,"car_make":"Audi","car_model":"TT","car_year":2008},
{"id":46,"car_make":"Oldsmobile","car_model":"Ciera","car_year":1995},
{"id":47,"car_make":"Volkswagen","car_model":"Jetta","car_year":2007},
{"id":48,"car_make":"Dodge","car_model":"Magnum","car_year":2008},
{"id":49,"car_make":"Chrysler","car_model":"Sebring","car_year":1996},
{"id":50,"car_make":"Lincoln","car_model":"Town Car","car_year":1999}];

// ==== Problem #1 ====
// The dealer can't recall the information for a car with an id of 33 on his lot. Help the dealer find out which car has an id of 33 by calling a function that will return the data for that car. Then log the car's year, make, and model in the console log in the format of:
"Car 33 is a *car year goes here* *car make goes here* *car model goes here*"

// ==== Problem #2 ====
// The dealer needs the information on the last car in their inventory. Execute a function to find what the make and model of the last car in the inventory is?  Log the make and model into the console in the format of:
"Last car is a *car make goes here* *car model goes here*"

// ==== Problem #3 ====
// The marketing team wants the car models listed alphabetically on the website. Execute a function to Sort all the car model names into alphabetical order and log the results in the console as it was returned.

// ==== Problem #4 ====
// The accounting team needs all the years from every car on the lot. Execute a function that will return an array from the dealer data containing only the car years and log the result in the console as it was returned.

// ==== Problem #5 ====
// The car lot manager needs to find out how many cars are older than the year 2000. Using the array you just obtained from the previous problem, find out how many cars were made before the year 2000 and return the array of older cars and log its length.

// ==== Problem #6 ====
// A buyer is interested in seeing only BMW and Audi cars within the inventory.  Execute a function and return an array that only contains BMW and Audi cars.  Once you have the BMWAndAudi array, use JSON.stringify() to show the results of the array in the console.
```

## 10. Scopes and Closures
- [JavaScript Scope and Closures](https://css-tricks.com/javascript-scope-closures/)

- [The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript](https://ui.dev/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript/)