demo.js

let animal = {
    name:"cat",
    type:"mammal",
    color:"black",
    class:'carnivorous',
    gender:'female',
    legs:{
        number:4,
        claws:'long',
        paws:{
           finger:3 
        }
    }
}

animal.class.red?.thread ?? "hello"

demo.ts

// Template Literals

// string
// number
// boolean
// object


let nameOfPerson:string;
nameOfPerson = "Jane"

type POutput = {
    color:string
    LuckyNumber:number
}
type PersonDetail = {
    name?:string
    age:number
    address:{
      street:number  
      city:string
      country:string
    }
    output:(favColor:string) => number
}


interface Food {
    name:string
    cost:number
}

interface Food {
    delicious:number
}

let myFavFood = {
     name:"Rice",
     delicious:30,
} as Food

let myString:string | number 



// myFavFood

let joe:PersonDetail;

joe = {
//  name:'Joe',
 age:10,
 address:{
    city:'ikaja',
    country:"Nig",
    street:4
 },
 output:function myFunc(name){
    console.log(name)
    return 120
 }
}


let personDetails = {
    name:'Juliet',
    age:30,
    address:{
        street:1,
        city:"ikeja",
        country:"NG"
    }
}

personDetails.address.country



const greet= (name, age)=>{
    return "hello, " + name + " you're " + age +  " years old";
}

const greetTem = (name, age)=>{
    return `hello ${name} you're ${age} years old`
}

console.log(greet("React", 20))
console.log(greetTem("Joe", 10))


// Ternary Operators;

function checkLogStatus(status:boolean){

    // if(status){
    //     return 'Logged in'
    // } else {
    //     return "you are not logged in"
    // }
    let userStatus =  status ? 'logged in' : "you are not logged in"

    return userStatus
}


// Spread and Rest Operator
let person = {
    name:"Jane"
}

let address = {
    str:1,
    country:"NG"
}

let personAddress = {...person,...address}

console.log(personAddress)

const pDetails = Object.assign({num:90}, address, person)

console.log(pDetails)

// Rest 

let houseProp = {
    colr:"white",
    hasBedroom:true,
    hasSwimming:false,
    hasBathroom:false
}

const {colr, ...restProp} = houseProp

console.log(colr, restProp)

let otherStreetProp ={
    hasGarden:true
}

const names =  ["name", "john"]
const color = ["red", "green", "blue", "yellow"]

 let [,,blu, ...res]  = color

console.log(blu, res)

function getColor(name='red', number=10) {
    return `${name} ${number}`
}



console.log(getColor( undefined, 30))


// Nullish Coalescing
let a=0;
let b;

let c = a || 2
console.log(c)

let d = a ?? 405
console.log(d)

// Arrow Fuction and Funtions Declaration

// named function
// anonymonus function 


addNumber(1,7)
// addNumberA(1,3)



function addNumber(a,b){
    console.log(this)
    return a + b;
}

const addNumberA  = (a,b) => a + b;


class Person {
    name;
    constructor(name){
        this.name = name
    }  
    greet(){
        return this.name
    }
}

const maya = new Person('maya')
console.log(maya.greet())



let user = {
    age:67
}

let button  = document.getElementById('nyBtn')

button?.addEventListener("click", function (){

})

// Destructuring

const Header = (props, children, ...others)=>{
    const { name:namePerson='my name', age, color } = props

    // const nameOfPerson = props.name
    // const age = props.age
    // const color = props.color

    return 1234
}




let animal = {
    name:"cat",
    type:"mammal",
    color:"black",
    class:'carnivorous',
    gender:'female',
    legs:{
        number:4,
        claws:'long',
        paws:{
           finger:3 
        }
    }
}

const {name:nameOfAnimal, type } = animal
console.log(nameOfAnimal, color)

gistfile1.txt

Javascript - ES6 Refresher -> Reactjs

## Template literals
## Ternary Operators
## Spread and Rest
## Nullish Coalescing
## Arrow and function Declaration
## Destructuring
## Optional Chaining
## Short Circuit
## Map, Reduce, Filter - HOF