Skip to content

Latest commit

 

History

History
320 lines (238 loc) · 6.01 KB

README.md

File metadata and controls

320 lines (238 loc) · 6.01 KB
Raw

Refreshing Next Generation JavaScript (Optional)

1. Understanding "let" and "const"

var = not block-scoped, could be dangerous to use it!

let = the new var which is now block-scoped, for variable values.

const = for constant values.

var myName = 'Max';
console.log(name); // "Max"
myName = 'Manu';
console.log(name); // "Manu"
let myName = 'Max';
console.log(name); // "Max"
myName = 'Manu';
console.log(name); // "Manu"
const myName = 'Max';
console.log(name); // "Max"
myName = 'Manu';
console.log(name); // "TypeError: Assignment to constant variable"

2. Arrow Functions

No more issues with the this keyword!

function myFunc() {
  ...
}

const myFunc = () => {
  ...
}
const multiply = (number) => number * 2;

console.log(multiply(2)); // 4

3. Exports and Imports

// person.js
const person = {
  name: 'Max',
};

export default person;
// utility.js
export const clean = () => {...}
export const baseData = 10;
// app.js
import person from './person';

import { baseData, clean } from './utility';
// OR you could assign an alias
import { clean as cleanFn } from './utility';
// OR you can import everything and assign an alias (or not)
import * as bundled from './utility';

4. Understanding Classes

JS classes are essentially blueprints for objects.

class Person {
  name= 'Max' // property
  call = () => {...} // method
}

And the usage of the class above:

const myPerson = new Person();
myPerson.call();
console.log(myPerson.name);
// inheritance
class Person extends Master

Classes also support inheritance which means you have another class which you inherit from taking all its properties and methods and potentially adding new properties and methods.

class Human {
  constructor() {
    this.gender = 'female';
  }

  printGender() {
    console.log(this.gender);
  }
}

class Person extends Human {
  constructor() {
    super();
    this.name = 'Max';
    this.gender = 'male';
  }

  printMyName() {
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName(); // Max
person.printGender(); // male

5. Classes, Properties and Methods

We've learned that properties are like "variables attached to classes / objects" and methods are like "functions attached to classes / objects".

// properties
// ES6
constructor() {
  this.myProperty = 'value'
}

// ES7
myProperty = 'value'
// methods
// ES6
myMethod() {...}

// ES7
myMethod = () => {...} // no problem wit the this keyword

Let's update our last example:

class Human {
  gender = 'female';

  printGender = () => {
    console.log(this.gender);
  };
}

class Person extends Human {
  name = 'Max';
  gender = 'male';

  printMyName = () => {
    console.log(this.name);
  };
}

const person = new Person();
person.printMyName(); // Max
person.printGender(); // male

6. The Spread & Rest Operator

...

The spread operator = used to split up array elements OR object properties

// example
const newArray = [...oldArray, 1, 2];
const newObject = { ...oldArray, newProp: 5 };

The rest operator = used to merge a list of function arguments into an array

// example
function sortArgs(...args) {
  return args.sort();
}
// spread operator
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];

console.log(newNumbers); // [1, 2, 3, 4];

// spread operator
const person = {
  name: 'Max',
};

const newPerson = {
  ...person,
  age: 28,
};

console.log(newPerson); // [object Object] { age: 28, name: "Max" }

// rest operator
const filter = (...args) => {
  return args.filter((el) => el === 1);
};

console.log(filter(1, 2, 3)); // [1]

7. Destructuring

Destructuring = easily extract array elements or object properties and store them in variables (≠ than the spread operator).

// array destructuring
const [a, b] = ['Hello', 'Max'];
console.log(a); // Hello
console.log(b); // Max

// object destructuring
const { name } = { name: 'Max', age: 29 };
console.log(name); // Max
console.log(age); // undefined
const numbers = [1, 2, 3];
[num1, , num3] = numbers;
console.log(num1, num3);

8. Reference and Primitive Types Refresher

const number = 1; // primitive type
const num2 = number; // reference type (copy)

console.log(num2);

Objects and Arrays are reference types.

// person is an object stored in memory and in the const person we store a pointer to that place in memory
const person = {
  name: 'Max',
};

// the pointer is copied in secondPerson
const secondPerson = person;

person.name = 'Manu';

console.log(secondPerson); // [object Object] { name: "Manu" }

To make a "deep" copy, we could do:

const person = {
  name: 'Max',
};

const secondPerson = {
  ...person,
};

person.name = 'Manu';

console.log(secondPerson); // [object Object] { name: "Max" }

9. Refreshing Array Functions

const number = [1, 2, 3];

const doubleNumArray = numbers.map((num) => {
  return num * 2;
});

console.log(numbers); // [1, 2, 3]
console.log(doubleNumArray); // [2, 4, 6]