Create Todo List with React and Firebase
June 22, 2022
1 min
Classes are essentially blueprints for objects. Methods are simply functions attached to classes where properties are variables attached to classes.
class Person { name = 'Andi' // <= property call = () => {...} // <= method }
Classes also support inheritence. If Person exteds Human, this method printGender can use on the person as well. If you are extending another class and you are implementing the constructor which you dont have to, then you have to add super().
class Human { constructor() { this.gender = 'Male'; } printGender() { console.log(this.gender); } } class Person extends Human { constructor() { super(); this.name = 'Andi'; } printName() { console.log(this.name); } } const person = new Person(); person.printName(); // Andi person.printGender(); // Male
Now there is a more modern syntax which spares us using this constructor function with next generation javascript. You can assign a property directly. And stores a function as a value.
class Human { gender = 'Male'; printGender = () => { console.log(this.gender); } } class Person extends Human { name = 'Andi'; printName = () => { console.log(this.name); } }
default export
// person.js const person = { name: 'Andi' } export default person
name export
// utility.js export const riding = () => {...}; export const base_speed = 50;
// app.js import p from './person.js'; p.name; // Andi import { riding } from './utility.js'; riding; // {...} import { base_speed as baseSpeed } from './utility.js'; baseSpeed; // 50 import * as u from './utility.js'; u.base_speed; // 50
Quick Links
Legal Stuff