JavaScript Crash Course: the overview:

Trigger a popup alert:

alert('Hello World');

Or push to console: (Better for performance)
https://developer.mozilla.org/en-US/docs/Web/API/console

console.log('hello world');
console.warn('this is a warning');
console.error('this is an error');

Variables: var, let, const.

• Don’t use var anymore as it’s global and can cause conflicts.
• let is used for varables that can change all the time.
• const is used for fixed varables that don’t change.
• Use const unless you thing you’re going to reasign it.

let age = 30;
age = 31

console.log(age);

Variable types: String, Numbers, Boolean, null, undefined

// String
const name = 'John';

//Number
const age = 30;
const rating = 4.5;

//Boolean (No quotes, otherwise it becomes a string)
const isCool = true;

//Null (An empty variable)
const x = null

//undefined
let z;

console.log(typeof name);
console.log(Array.isArray(fruits));

Catenation, stringing variables together to print out

const name = 'John';
const age = 30;


//Old way of doing it:

console.log('my name is ' + name + ' and I am '+ age + ' years old')

//Better way (Use ticks instead of parenthesis)
console.log(`my name is ${name} and I am ${age} years old`)

String Properties/Methods

const s = 'Hello World';

console.log(s.length);
console.log(s.toUpperCase());
console.log(`${s.substring(0, 5)}...`);
console.log(s.split(''));

const tags = 'Business, Life, Design';
console.log(tags.split(', '));

Arrays

//Arrays - Variables that hold multiple values


const numbers = new Array(1,2,3,4,5);
const fruits = ['Lemon', 'Apple', 'Orange', 'Grapes'];

//Add an object, but overwrite it
fruits[3] = 'Pears';

//Add an object, but push across
fruits.push('Mangos');

//Add an object to the start of the string
fruits.unshift('Strawberries');

console.log(fruits);

//Access just one of them
console.log(fruits[3]);


//Remove last one
fruits.pop();
console.log(fruits);

console.log(Array.isArray(fruits));

//Get the location of an object:
console.log(fruits.indexOf('Orange'));

Objects:

//Object Literals

const person = {
  firstName: 'John',
  lastName: 'Smith',
  age: 30,
  hobbies: ['music', 'movies', 'sports'],
  address: {
    street: 'test',
    city: 'test',
    state: 'test'
  }
}

console.log(person)
console.log(person.firstName)
console.log(person.firstName, person.lastName)

console.log(person.hobbies[1])
console.log(person.address.city)

//Add a new object
person.email = 'john@gmail.com';

console.log(person.email);

Arrays of Objects

const todos = [
  {
    id: 1,
    text: 'take out trash',
    isCompleted: true
  },
  {
    id: 2,
    text: 'Meeting with boss',
    isCompleted: true
  },
  {
    id: 3,
    text: 'Doctor Appointment',
    isCompleted: true
  }
]

console.log(todos[1].text)

Format JSON:
https://www.freeformatter.com/json-formatter.html

//Prepair JSON to send to another server
const todoJSON = JSON.stringify(todos);
console.log(todoJSON);

For Loops:

//For loops
//Run until this is true
for(let i = 0; i < 10; i++){
console.log(`For Loop Number: ${i}`);
}

//While
let i = 0;
while(i < 10) {
  console.log(`While Loop: ${i}`);
  i++;
}

Using Arrays with For Loops:

//Printing items from an Object Array using a For Loop
for(let i = 0; i < todos.length; i++){
  console.log(todos[i].text);
}

//Better ways of doing it
for (let todo of todos) {
  console.log(todo.text);
}

//ForEach
todos.forEach(function(todo){
  console.log(todo.text);
});

//map (Returns an array)
const todoText = todos.map(function(todo){
  return todo.text;
});
console.log(todoText);

//filter (Returns an array based on a condition)
const todoCompleted = todos.filter(function(todo){
  return todo.isCompleted === true;
});
console.log(todoCompleted);

//filter but return text
const todoCompleted2 = todos.filter(function(todo){
  return todo.isCompleted === true;
}).map(function(todo) {
  return todo.text;
})

console.log(todoCompleted2);

Conditionals

//Conditionals

const x = 4;
const y = 10;

if(x === 10) {
  console.log('x is 10');
} else {
  console.log('x is NOT 10')
}

if(x > 10) {
  console.log('x is 10');
} else if (x > 10) {
  console.log('x is greater than 10');
} else if (x < 10) {
  console.log('x is less than 10');
}

const x = 11;

// if x is greater than 10, THEN set colour to red ELSE blue.
const colour = x > 10 ? 'red' : 'blue';

console.log(colour);

const x = 11;

// if x is greater than 10, THEN set colour to red ELSE blue.
const colour = x > 10 ? 'red' : 'blue';

switch(colour) {
  case 'red':
    console.log('color is red');
    break;
  case 'blue':
    console.log('color is blue');
    break;
}

Functions

//Simple function to add two numbers
function addNums(num1, num2) {
console.log(num1 + num2);
}
addNums(5,4);

//Otra
function addNums(num1, num2) {
  return num1 + num2;
}
console.log(addNums(5,4));