Local storage allows you to store data locally in the user's browser with no expiration date.
localStorage.setItem('name','Ben');
// the key and value parameters of local storage are strings
You can see that key/value pair has been created. With key = `name` and value = `Ben` in the web developer tools of your browser. To access this open the browser. Select ctrl + shirt + i and go into `Application` then `Local Storage` and select the tab where you see your local web address.
localStorage.removeItem('name');
This removes the key/value pair from the local storage.
localStorage.clear();
This clears the local storage. Use with caution.
const name = localStorage.getItem('name')
This clears the local storage. Use with caution.
let names =[];
names.push('ABBA','ACDC','Aerosmith');
localStorage.setItem('names',JSON.stringify(names)); // use JSON.stringify to convert array to string.
If we have data in a array that we want to pass to localStorage, we must first convert that into a string.
var tot = 0;
myArr.forEach((curr)=>{
tot +=curr;
})
console.log('forEach',tot);
When are two objects equal? When they are pointing to the same memory location.
var obj1 = { myValue: 100};
var obj2 = { myValue: 100};
console.log('Are they equal? ',obj1 === obj2); //expected output: false;
var obj3 = obj1;
obj1.myValue = 200; // upddate value;
console.log('Are they equal?',obj1 === obj3); //expected output: true;
Note: obj1 and obj3 are pointing to the same memory location. Updating the value of obj1 updates the value of obj3 as well.
It does not matter that obj1 and obj2 have the same value because they are two different objects. Because obj1 and obj2 are two different objects, they point to a different memory location. Thus, they are not the same object.
An array is also an object in javascript. Because arrays are a special type of js object, the same reasoning from the previous example holds true. The two arrays below point to different locations in a computers memory. Eventhough both arrays have the same value, they are two different objects.
[1,2,3] === [1,2,3]; //expected output: false;
Object instantiation lets you create instances of objects. Below is a person object constructor. Each person object has a name, a gender, and an age.
// INSTANTIATION
class Person {
constructor(name,gender,age){
this.name = name;
this.gender = gender;
this.age = age;
console.log('what is this? ',this); // expected output: Person object.
}
}
const anna = new Person('Anna','female',22);
We can keep adding new methods to the Person object.
// INSTANTIATION
class Person {
constructor(name,gender,age){
this.name = name;
this.gender = gender;
this.age = age;
console.log('what is this? ',this); // expected output: Person object.
}
}
const anna = new Person('Anna','female',22);
Anonymous functions are functions without a name. For instance:
//create a function with multiple inputs
function(a,b){
return a + b;
}
//An Anonymous function
Function expressions: are anonymous functions that are assigned to a variable. For instance:
//A function expression
var add1 = function(a,b){
return a + b;
}
// a function expression.
Note:If you call the function add1 before the function expression you get an undefined TypeError.
add1(2,1); // expected output: TypeError: add1 is not a function
var add1 = function(a,b){
return a + b;
}
Function Declarations are named functions. They are not assigned to a variable and are written like:
add2(2,1); // expected output: 3;
function add2 (a,b){
return a + b;
}
// add2 is an example of a function declaration. It can be called before the named function.
// note function statement and function declaration is often used interchangeablely.
Function constructors create blueprints for an object. They are handy when we know we will be creating many similar objects with similar properties. Below outlines the `steps` or algorithm needed to create function constructors.
// Creating function constructors
// Here is an example of creating a Person object using the function constructor method.
// We name function constructors starting with a Capital letter by convention.
// This is to distinguish function contstructors from regular objects and functions.
//Create a `Person` function constructor
function Person(name,age,netWorth,gender){
this.name = name;
this.age = age;
this.netWorth = netWorth;
this.gender = gender;
}
const mark = new Person('Mark',34,'74 billion','male'); // a new Person object `mark` was created.
console.log(mark);
// we can add a property to the existing Person object of mark.
mark.nationality = 'American'; // this nationality is unique to the mark object only.
console.log(mark);
// we can add a new method to the existing Person object or mark.
mark.greeting = () =>{
console.log(`Hi my name is ${mark.name} and I am CEO bitch`); // this greeting is unique to mark.
}
// calling the greeting function
mark.greeting();
// we can add additional properties or method to the Person function constructor anytime.
// Example
function Person(name,age,netWorth,gender){
this.name = name;
this.age = age;
this.netWorth = netWorth;
this.gender = gender;
this.greeting = ()=>{
console.log(`Hi my name is ${this.name}!`);
}
}
const jeff = new Person('Jeff Bezos', 54,'100 billion','male');
console.log(jeff); // we see the jeff object does not have the `nationality` property.
// calling the greeting method.
jeff.greeting();
// over writing the greeting method with a personalized `jeff` greeting method
jeff.greeting = ()=>{
console.log(`Hi my name is ${jeff.name} but you can call me king Bezos! `);
}
// calling the updated `jeff` greeting method
jeff.greeting();