React: Difference between revisions

From Han Wiki
Jump to navigation Jump to search
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>

Revision as of 22:27, 30 September 2019

Installation

// initialize a nodejs project (creates package.json)
$ npm init -y

// package manager 
$ npm install yarn

$ yarn install packagename

$ yarn remove packagename

JavaScript

Kangax compatibility table

Three ways to declare variables are

  1. const
  2. var
  3. let


Template string

console.log(`${lastName}, ${firstName} ${middleName}`);

document.body.innerHTML = `
<section>
  <header>
      <h1>The React Blog</h1>
  </header>
  <article>
      <h2>${article.title}</h2>
      ${article.body}
  </article>
  <footer>
      <p>copyright ${new Date().getYear()} | The React Blog</p>
  </footer>
</section>
`;


Function declaration vs function expression

declarations are hoisted

const f = function() {
};


Arrow functions

const lordify = function(firstName) {
  return `${firstName} of Canterbury`;
};

// equals

const lordify = firstName => `${firstName} of Canterbury`;


Returning an object

DON'T FORGET PARENTHESES!

const person = (firstName, lastName) => ({
  first: firstName,
  last: lastName
});

console.log(person("Flad", "Hanson"));


Arrow functions and scope

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 {}

To solve this problem:

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


= Destructing objects

const sandwich = {
  bread: "dutch crunch",
  meat: "tuna",
  cheese: "swiss",
  toppings: ["lettuce", "tomato", "mustard"]
};

const { bread, meat } = sandwich;

console.log(bread, meat); // dutch crunch tuna


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


destructuring parameter

const lordify = ({ firstname }) => {
  console.log(`${firstname} of Canterbury`);
};

const regularPerson = {
  firstname: "Bill",
  lastname: "Wilson"
};

lordify(regularPerson); // Bill of Canterbury


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


Destructuring arrays

const [firstAnimal] = ["Horse", "Mouse", "Cat"];

console.log(firstAnimal); // Horse

const [, , thirdAnimal] = ["Horse", "Mouse", "Cat"];

console.log(thirdAnimal); // Cat


Object literal enhancement

const name = "Tallac";
const elevation = 9738;

const funHike = { name, elevation };

console.log(funHike); // {name: "Tallac", elevation: 9738}
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


old vs. new: object syntax

// 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);
  }
};


Spread operator

const peaks = ["Tallac", "Ralston", "Rose"];
const canyons = ["Ward", "Blackwood"];
const tahoe = [...peaks, ...canyons];

console.log(tahoe.join(", ")); // Tallac, Ralston, Rose, Ward, Blackwood

Getting last element:

const peaks = ["Tallac", "Ralston", "Rose"];
const [last] = peaks.reverse();

console.log(last); // Rose
console.log(peaks.join(", ")); // Rose, Ralston, Tallac