JavaScript ES6 Refresher (Part 1)
Tags: javascript, es6, beginners, react
Published: 2022-02-16 02:55:32

***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
  

```javascript
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

```javascript
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:
  
  1. `person.talk()`
    
  2. `person["name"]`
    
- We use second method only if we are getting keys from else where (eg. getting `name` key from user through some forms)
  
  ```javascript
  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
  

```javascript
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
  
  ```javascript
  const square = function(number) {
      return number * number
  }
  ```
  
- Arrow Functions
  
  ```javascript
  const square = (number) => {
      return number * number
  }
  ```
  
  ```javascript
  const square = number => number * number
  ```
  

 *The second one is more preferred*

- Arrow Functions Template
  
  ```javascript
  const <function_name> = <parameters, ....> => {
      <code>
      <return statement>
  }
  ```
  
- A good use case of arrow function
  
  ```javascript
  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
    
    ```javascript
    const ActiveJobs = jobs.filter(function(job) {return job.isActive})
    ```
    
  - using arrow functions
    
    ```javascript
    const ActiveJobs = jobs.filter(job => job.isActive)
    ```
    
    or
    
    ```javascript
    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

```javascript
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 **${}**

---