React: Difference between revisions
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 | == 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 == | |||
'''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 23: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
Three ways to declare variables are
- const
- var
- 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