Han Wiki

React: Difference between revisions

Page Discussion

React (view source)

Revision as of 22:27, 30 September 2019

3,637 bytes added ,  30 September 2019
→‎JavaScript
← Older editNewer edit →
Returning an object
Line 17: Line 17:
[http://kangax.github.io/compat-table/esnext/ Kangax compatibility table]
[http://kangax.github.io/compat-table/esnext/ Kangax compatibility table]


 
== Three ways to declare variables are ==
Three ways to declare variables are


# const
# const
Line 25: Line 24:




Template string
== Template string ==


<source lang="js">
<source lang="js">
Line 47: Line 46:




Function declaration vs function expression: declarations are hoisted
== Function declaration vs function expression ==
 
declarations are hoisted


<source lang="js">
<source lang="js">
Line 54: Line 55:
</source>
</source>


Arrow functions
 
== Arrow functions ==


<source lang="js">
<source lang="js">
Line 67: Line 69:




== Returning an object ==


Returning an object -- '''DON'T FORGET PARENTHESES!'''
'''DON'T FORGET PARENTHESES!'''


<source lang="js">
<source lang="js">
Line 77: Line 80:


console.log(person("Flad", "Hanson"));
console.log(person("Flad", "Hanson"));
</source>
== Arrow functions and scope ==
<source lang="js">
const tahoe = {
  mountains: ["Freel", "Rose", "Tallac", "Rubicon", "Silver"],
  print: function(delay = 1000) {
    setTimeout(function() {
      console.log(this.mountains.join(", "));
    }, delay);
  }
};
tahoe.print(); // Uncaught TypeError: Cannot read property 'join' of undefined
console.log(this); // Window {}
</source>
To solve this problem:
<source lang="js">
const tahoe = {
  mountains: ["Freel", "Rose", "Tallac", "Rubicon", "Silver"],
  print: function(delay = 1000) {
    setTimeout(() => {
      console.log(this.mountains.join(", "));
    }, delay);
  }
};
tahoe.print(); // Freel, Rose, Tallac, Rubicon, Silver
</source>
== Destructing objects =
<source lang="js">
const sandwich = {
  bread: "dutch crunch",
  meat: "tuna",
  cheese: "swiss",
  toppings: ["lettuce", "tomato", "mustard"]
};
const { bread, meat } = sandwich;
console.log(bread, meat); // dutch crunch tuna
</source>
<source lang="js">
const sandwich = {
  bread: "dutch crunch",
  meat: "tuna",
  cheese: "swiss",
  toppings: ["lettuce", "tomato", "mustard"]
};
let { bread, meat } = sandwich;
bread = "garlic";
meat = "turkey";
console.log(bread); // garlic
console.log(meat); // turkey
console.log(sandwich.bread, sandwich.meat); // dutch crunch tuna
</source>
destructuring parameter
<source lang="js">
const lordify = ({ firstname }) => {
  console.log(`${firstname} of Canterbury`);
};
const regularPerson = {
  firstname: "Bill",
  lastname: "Wilson"
};
lordify(regularPerson); // Bill of Canterbury
</source>
<source lang="js">
const regularPerson = {
  firstname: "Bill",
  lastname: "Wilson",
  spouse: {
    firstname: "Phil",
    lastname: "Wilson"
  }
};
const lordify = ({ spouse: { firstname } }) => {
  console.log(`${firstname} of Canterbury`);
};
lordify(regularPerson); // Phil of Canterbury
</source>
== Destructuring arrays ==
<source lang="js">
const [firstAnimal] = ["Horse", "Mouse", "Cat"];
console.log(firstAnimal); // Horse
const [, , thirdAnimal] = ["Horse", "Mouse", "Cat"];
console.log(thirdAnimal); // Cat
</source>
== Object literal enhancement ==
<source lang="js">
const name = "Tallac";
const elevation = 9738;
const funHike = { name, elevation };
console.log(funHike); // {name: "Tallac", elevation: 9738}
</source>
<source lang="js">
const name = "Tallac";
const elevation = 9738;
const print = function() {
  console.log(`Mt. ${this.name} is ${this.elevation} feet tall`);
};
const funHike = { name, elevation, print };
funHike.print(); // Mt. Tallac is 9738 feet tall
</source>
== old vs. new: object syntax ==
<source lang="js">
// Old
var skier = {
  name: name,
  sound: sound,
  powderYell: function() {
    var yell = this.sound.toUpperCase();
    console.log(`${yell} ${yell} ${yell}!!!`);
  },
  speed: function(mph) {
    this.speed = mph;
    console.log("speed:", mph);
  }
};
// New
const skier = {
  name,
  sound,
  powderYell() {
    let yell = this.sound.toUpperCase();
    console.log(`${yell} ${yell} ${yell}!!!`);
  },
  speed(mph) {
    this.speed = mph;
    console.log("speed:", mph);
  }
};
</source>
== Spread operator ==
<source lang="js">
const peaks = ["Tallac", "Ralston", "Rose"];
const canyons = ["Ward", "Blackwood"];
const tahoe = [...peaks, ...canyons];
console.log(tahoe.join(", ")); // Tallac, Ralston, Rose, Ward, Blackwood
</source>
Getting last element:
<source lang="js">
const peaks = ["Tallac", "Ralston", "Rose"];
const [last] = peaks.reverse();
console.log(last); // Rose
console.log(peaks.join(", ")); // Rose, Ralston, Tallac
</source>
</source>
Retrieved from "https://wiki.michaelhan.net/Special:MobileDiff/3146"