JavaScript Intermediate Part- 1

const name = "Jane Smith"; // if value will not change;

const numbers = [12, 45];
numbers[1] = 88; // can change value
numbers.push(15); // can add new value
console.log(numbers); // [ 12, 88, 15 ]

//const numbers = [50, 60, 34]; // can't change the variable with new array

const person = {
  name: "Will Smith",
  phone: 000 - 000 - 0000,
}; // can add, change property value but can't change the variable with new object

// if value may change use let, let is scope variable
let userName = "Ed Sheeran";
userName = "Adam Levine";

let sum = 0;
for (var i = 0; i < 10; i++) {
  // var will be accessible outside the loop
  sum = sum + i;
}
console.log(i); // 10

// use let instead
let sum = 0;
for (let i = 0; i < 10; i++) {
  sum = sum + i;
}

function add(num1, num2) {
  // if num2 is not provided
  // way 1:
  // if (num2 == undefined) {
  //     num2 = 0;
  // }
  // way 2:
  num2 = num2 || 20;
  return num1 + num2;
}

// way 3: ES6 convention
function add(num1, num2 = 0) {
  // = 0 is default parameter value
  return num1 + num2;
}

const total = add(15, 17);
console.log(total); //32
const total2 = add(15);
console.log(total2); // 15
const total3 = add(15, 1);
console.log(total3); // 16

const firstName = "Justin";
const lastName = "TimerLake";
const fullName = firstName + " " + lastName + " is a good boy";
console.log(fullName);
// Justin TimerLake is a good boy

// Create ES6 template instead:
const fullName2 = `${firstName} ${lastName} is a nice person.`;
console.log(fullName2);
// Justin TimerLake is a nice person.

const fullName3 = `${firstName} ${20 + 50 + 30} is a nice person.`;
console.log(fullName3);

// Before
const multiLine = "I love you\n" + "I miss you\n" + "I need you";
console.log(multiLine);

// ES6:
const multiLine2 = `I love you
I miss you
I need you`;
console.log(multiLine2);

/* I love you
I miss you
I need you */

function doubleIt(num) {
  return num * 2;
}
console.log(doubleIt(2)); // 4

const doubleIt2 = function myFun(num) {
  return num * 3;
};
console.log(doubleIt2(2)); // 4

// Arrow Function:
// if one parameter
const doubleIt3 = (num) => num * 2;
console.log(doubleIt3(5)); //25

// if more than one parameter
const add = (x, y) => x + y;
console.log(add(4, 3)); // 7

// if no parameter
const noParameter = () => 5;
console.log(noParameter()); // 5

const doMath = (x, y) => {
  const sum = x + y;
  const diff = x - y;
  const result = sum * diff;
  return result;
};

console.log(doMath(7, 5)); // 24

const ages = [12, 14, 16, 13, 17];
const ages2 = [15, 16, 12];
const ages3 = [25, 36, 22, 29];

// const allAges = ages.concat(ages2).concat(ages3);
const allAges = ages.concat(ages2).concat([5]).concat(ages3);
console.log(allAges);
// [ 12, 14, 16, 13, 17, 15, 16, 12,  5, 25, 36, 22, 29 ]

const allAges2 = [ages, ages2, 5, ages3]; // array inside array
console.log(allAges2);
// [ [ 12, 14, 16, 13, 17 ], [ 15, 16, 12 ], 5, [ 25, 36, 22, 29 ] ]

// spread operator
const allAges3 = [...ages, ...ages2, 5, ...ages3]; // new array
console.log(allAges3);
// [ 12, 14, 16, 13, 17, 15, 16, 12,  5, 25, 36, 22, 29 ]

const business = 650;
const minister = 450;
const sochib = 250;

const maximum = Math.max(business, minister, sochib);
console.log(maximum); // 650

// if array
const amount = [650, 450, 250];
const maxAmount = Math.max(...amount);
console.log(maxAmount); // 650

class Student {
  constructor(sId, sName) {
    this.id = sId; //property that can change, pass as parameter
    this.name = sName; //property that can change, pass as parameter
    this.school = "E-School"; //shared property
  }
}

const student1 = new Student(12, "shuvo");
const student2 = new Student(22, "Mahiya");
console.log(student1, student2);
// Student { id: 12, name: 'shuvo', school: 'E-School' } Student { id: 22, name: 'Mahiya', school: 'E-School' }

// access attribute:
console.log(student1.name, student2.name); // shuvo Mahiya

// new
const student3 = new Student(22, "Bappi");
console.log(student3);
// Student { id: 22, name: 'Bappi', school: 'E-School' }

class Parent {
  constructor() {
    this.fatherName = "Schwarzenegger";
  }
}

class Child extends Parent {
  constructor(name) {
    // call Parent class constructor
    super();
    this.name = name;
  }

  // create function, not required to specify function keyword
  getFullName() {
    return this.name + " " + this.fatherName;
  }
}

const baby = new Child("Arnold");
const baby2 = new Child("Tom");
console.log(baby); // Child { fatherName: 'Schwarzenegger', name: 'Arnold' }
console.log(baby2); // Child { fatherName: 'Schwarzenegger', name: 'Tom' }

console.log(baby.getFullName()); // Arnold Schwarzenegger
console.log(baby2.getFullName()); // Tom Schwarzenegger

// inheritance, encapsulation, polymorphism

const person = {
  name: "Jack William",
  age: 17,
  address: "Brooklyn",
  sibling: "Ema Watson",
  phone: "000 - 000 - 0000",
  job: "Facebook Analyst",
  friends: ["Tom Hancks", "Tom Cruise", "Will Smith"],
};

// way 1:
console.log(person.sibling); // Ema Watson
console.log(person.sibling); // Ema Watson
console.log(person.sibling); // Ema Watson
console.log(person.sibling); // Ema Watson

// way 2:
const sibling1 = person.sibling;
const phoneNumber = person.phone;
console.log(sibling1, phoneNumber); // Ema Watson 000 - 000 - 0000
console.log(sibling1, phoneNumber); // Ema Watson 000 - 000 - 0000
console.log(sibling1, phoneNumber); // Ema Watson 000 - 000 - 0000
console.log(sibling1, phoneNumber); // Ema Watson 000 - 000 - 0000

// way 3: efficient and convenient
// one variable
const { phone } = person;

// same as above
// const {
//     phone
// } = {
//     name: 'Jack William',
//     age: 17,
//     address: 'Brooklyn',
//     sibling: "Ema Watson",
//     phone: "000 - 000 - 0000",
//     job: "Facebook Analyst",
//     friends: ['Tom Hancks', 'Tom Cruise', "Will Smith"]
// };

console.log(phone); // 000 - 000 - 0000

// more than one variable
const { name, sibling, job } = person;

console.log(name, sibling, job); // Jack William Ema Watson Facebook Analyst

// if any property is not in object
const {
  address,
  salary, // is not in person object, will give undefined
} = person;

console.log(address, salary); // Brooklyn undefined

// array destructuring
const friends2 = [
  "Sakib Khan",
  "Arman Khan",
  "Aamir Khan",
  "Salman Khan",
  "Sharukh Khan",
];
const [first, nextFriend, ...restFriends] = friends2;
console.log(first); // Sakib Kha
console.log(restFriends); // [ 'Aamir Khan', 'Salman Khan', 'Sharukh Khan' ]

// accessing another object property from an object using deconstructing
const complexObject = {
  name: "abc",
  info: {
    city: "New Rochelle",
    state: "NY",
  },
};

const { state } = complexObject.info;
console.log(state); // NY

// Falsy: 0, "", undefined, null, NaN, let name=false
// Truthy: '0', " ", [], let name='false'

// 0 will return false, for other value true
const age = 0;
// const age = 4;
// const age = 6;

if (age) {
  console.log("condition is true");
} else {
  console.log("condition is false");
}

// empty string will return false, other string will be true
let name = "";
// const name = "Solaiman";

if (name) {
  console.log("condition is true");
} else {
  console.log("condition is false");
}

// if variable value is not defined, false will return
let name;
console.log(name); // undefined
if (name) {
  console.log("condition is true");
} else {
  console.log("condition is false");
}

// if variable value is null, false will return
let name = null;

if (name) {
  console.log("condition is true");
} else {
  console.log("condition is false");
}

// if variable value is NaN, false will return
let name = NaN;

if (name) {
  console.log("condition is true");
} else {
  console.log("condition is false");
}

// Common cases that return undefined
// 1.
let name;
console.log(name); //undefined

// 2.
function add(num1, num2) {
  console.log(num1 + num2); // if you're not returning anything
}
console.log(add(13, 82)); // undefined

// 3.
function add(num1, num2) {
  console.log(num1 + num2);
  return; // if typed return, bot not specify what to return
}
console.log(add(13, 82)); // undefined

// 4.
function add(num1, num2) {
  console.log(num1, num2);
}
console.log(add(13)); // undefined - if less parameter value is passed than required
// set default value can resolve the issue

// 5.
const car = {
  make: "Tesla",
  currentSpeed: "30 mph",
  color: "blue",
  fuelType: "Electric",
};
console.log(car.mpg); // undefined - if tried to access object property which is not exist

// 6.
let fun = undefined; // if assigned undefined as variable value
console.log(fun);

// 7.
let ageArray = [23, 25, 18];
console.log(ageArray[10]); // if tried to access the element which is not exist

// The value null represents the intentional absence of any object value.
// It is one of JavaScript's primitive values and is treated as falsy for boolean operations.

// Exercise
function doSomething(x, y) {
  console.log(y);
}
console.log(doSomething(32)); // undefined

// == will check value only but not the type, so this will return true
let first = 2;
let second = "2";
// let first = 1;
// let second = true;
// let first = 0;
// let second = false;

if (first == second) {
  console.log("Condition is true");
} else {
  console.log("Condition is false");
}

// === will check the both value and type also, so this will return false
let first = 2;
let second = "2";
// let first = 1;
// let second = true;
// let first = 0;
// let second = false;

if (first === second) {
  console.log("Condition is true");
} else {
  console.log("Condition is false");
}

const numbers = [3, 4, 5, 6, 7, 9];
const output = [];

for (let i = 0; i < numbers.length; i++) {
  const element = numbers[i];
  const result = element * element;
  output.push(result);
}
console.log(output); // [ 9, 16, 25, 36, 49, 81 ]

// using map
function square(element) {
  return element * element;
}

// arrow function, above function can be written as
const square2 = (element) => element * element;
const square3 = (x) => x * x;

//numbers.map(square);
numbers.map(function (element, index, array) {
  // map can take three parameter
  console.log(element, index, array);
  /*  3 0 [ 3, 4, 5, 6, 7, 9 ]
    4 1 [ 3, 4, 5, 6, 7, 9 ]
    5 2 [ 3, 4, 5, 6, 7, 9 ]
    6 3 [ 3, 4, 5, 6, 7, 9 ]
    7 4 [ 3, 4, 5, 6, 7, 9 ]
    9 5 [ 3, 4, 5, 6, 7, 9 ] */
});

const result = numbers.map(function (element) {
  return element * element;
});
console.log(result); // [ 9, 16, 25, 36, 49, 81 ]

// map and arrow function
const result2 = numbers.map((x) => x * x);
console.log(result2); // [ 9, 16, 25, 36, 49, 81 ]

// filter
const numbers2 = [3, 4, 5, 6, 7, 9];
const bigger = numbers2.filter((x) => x > 5); // will return matching element based on condition
console.log(bigger); // [ 6, 7, 9 ]

// find
const numbers3 = [3, 4, 5, 6, 7, 9];
const isThere = numbers3.find((x) => x > 5); // will return first matching element
console.log(isThere); // 6

// forEach, reduce

const students = [
  {
    id: 31,
    name: "Jeff Bezos",
  },
  {
    id: 31,
    name: "Elon Musk",
  },
  {
    id: 41,
    name: "Bill Gates",
  },
  {
    id: 71,
    name: "Tim Cook",
  },
];

const names = students.map((s) => s.name);
console.log(names); // [ 'Jeff Bezos', 'Elon Musk', 'Bill Gates', 'Tim Cook' ]

const ids = students.map((s) => s.id);
console.log(ids); // [ 31, 31, 41, 71 ]

const bigger = students.filter((s) => s.id > 40);
console.log(bigger); // [ { id: 41, name: 'Bill Gates' }, { id: 71, name: 'Tim Cook' } ]

const biggerOne = students.find((s) => s.id > 40);
console.log(biggerOne); // { id: 41, name: 'Bill Gates' }

let bonus = 20; //global scope, accessible any where

function sum(first, second) {
  let result = first + second + bonus;
  return result; //local scope, not accessible outside function
}

const output = sum(3, 7);
console.log(output); // 30

//console.log(result); // return error
console.log(bonus); // 20

function sum2(first, second) {
  let result = first + second;
  if (result > 9) {
    // block scope and hoisting
    // if let and const is used in block scope then hoisting will not happen
    // but var will hoist, so accessible outside block scope
    let mood = "Happy";
    // const mood ="Happy"
    mood = "Fishy";
    mood = "Funky";
    mood = "Cranky";
    console.log(mood);
  }
  //console.log(mood); // throw error because it outside the block scope if let or const is used.
  return result;
}
const output2 = sum2(6, 7);
console.log(output2); // Cranky 13

// Difference when var and let used and try to access variable before variable declaration
//console.log(day); //Error: undefined
var day = "Friday";
console.log(day);

//console.log(dayLet); // Error: Cannot access 'dayLet' before initialization
let dayLet = "Saturday";
console.log(dayLet);

// Closure:
/* A closure is the combination of a function bundled together (enclosed) with references 
to its surrounding state (the lexical environment). In other words, a closure gives you 
access to an outer function’s scope from an inner function. In JavaScript, closures are 
created every time a function is created, at function creation time. */

function stopWatch() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const clock1 = stopWatch();
console.log(clock1()); // 1
console.log(clock1()); // 2
console.log(clock1()); // 3
console.log(clock1()); // 4

const clock2 = stopWatch();
console.log(clock2()); // 1
console.log(clock2()); // 2
console.log(clock1()); // 5
console.log(clock2()); // 3

const nums = [1, 2, 3, 4, 5, 6, 7, 8];

// slice
const part = nums.slice(2, 5); // start index, excluding end index, select based on index
console.log("slice: ", part); // [3, 4, 5]
console.log("array after slice: ", nums); // original array will remain same

// splice
const removed = nums.splice(2, 3); // here 2 is index start, and 3 is count of element remove
console.log("splice: ", removed); // [3, 4, 5]
console.log(" array after splice: ", nums); // [ 1, 2, 6, 7, 8 ]

const nums2 = [1, 2, 3, 4, 5, 6, 7, 8];
const removedPPlusInject = nums2.splice(2, 3, 77, 88); // here 2 is index start, and 3 is count of element remove, 77, 88 item that want to inject
console.log("splice: ", removedPPlusInject); // [3, 4, 5]
console.log(" array after splice: ", nums2); // [ 1, 2, 77, 88, 6, 7,  8 ]

// join
const nums3 = [1, 2, 3, 4, 5, 6, 7, 8];
// const together = nums3.join(""); // when join array element together
// const together = nums3.join(" ");
// const together = nums3.join("ami");
const together = nums3.join(",");
console.log(together); // 1,2,3,4,5,6,7,8

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < nums.length; i++) {
  if (nums[i] > 3) {
    // debugger
    break;
  }
  console.log(nums[i]); // 1 2 3
}

const nums2 = [1, -2, 3, 4, -5, 6, 7, -8, 9];

for (let i = 0; i < nums2.length; i++) {
  if (nums2[i] < 0) {
    // debugger
    continue;
  }
  console.log(nums2[i]); // 1 3 4 6 7 9
}