ES6 Refresher for Learning React
let, const, var
let | const | var | |
---|---|---|---|
scope | block | block | function |
re-assignable | yes | no | yes |
re-declarable | no | no | yes |
objects
In the object below, walk and talk are known as methods and can be declared in two ways
Both walk and talk are the same but its declaration is different
const person = {
name: "Dork",
walk: function () {
console.log('Walk')
}
talk() {
console.log('Talk')
}
}
- person.walk doesn't call the function but only person.walk() does
const newWalk = person.walk
- here we are getting a reference of walk and newWalk also becomes a method
console.log(walk)
→ logs the function in console
console.log(walk)
→ calls the function
- to access the items in an object, we use these:
person.talk()
person["name"]
- We use second method only if we are getting keys from else where (eg. getting
name
key from user through some forms)
const keyName = 'name'
person[keyName.value]
this
this keyword points to the particular object or gives a reference to that particular object
calling a function with this keyword outside the object as a standalone function, returns a global object
the global object is also known as the window object
every function in javascript is an object
using the bind keyword points this keyword to a particular object
const newWalk = person.walk.bind(person)
now the newWalk function points to the person object with name Dork while logging it in the console
console.log(newWalk())
→ logs the person object in the console
arrow function
- Normal Functions
const square = function(number) {
return number * number
}
- Arrow Functions
const square = (number) => {
return number * number
}
const square = number => number * number
The second one is more preferred
- Arrow Functions Template
const <function_name> = <parameters, ....> => {
<code>
<return statement>
}
- A good use case of arrow function
const jobs = [
{id: 1, isActive: true},
{id: 2, isActive: true},
{id: 3, isActive: false}
]
Here the jobs with true values of isActive is filtered and stored in ActiveJobs variable
The parameters passed to the functions are jobs and jobs with true jobs.isActive is returned by the functions
-
normal functions
const ActiveJobs = jobs.filter(function(job) {return job.isActive})
-
using arrow functions
const ActiveJobs = jobs.filter(job => job.isActive)
or
const ActiveJobs = jobs.filter((jobs) => {return jobs.isActive})
Template String
Rather than using +
to concatenate strings, template strings can do the job in a better way
const name = "Dork"
const message = "Hello " + name + "! How are you?"
// rather we can use template string
const templateStringMessage = `Hello ${name}! How are you?`;
For template strings we use ` (back ticks) rather than " (quotation marks) and the variable are placed inside ${}
Top comments (0)