Skip to content

Latest commit

 

History

History
335 lines (265 loc) · 5.72 KB

README.md

File metadata and controls

335 lines (265 loc) · 5.72 KB
Raw

Installation

Exécutez un simple npm install

Exécution

Exécutez un npm test

Ouvrez 2 onglets :

Documentation

Modules

File1.js

export function test() {
  console.log('test');
}

function privateFunc() {
  console.log('private');
}

export var a = 3;

export default function() {
  console.log('export default from File1');
}


File2.js

import { test as myTest, a } from 'File1.js';
import func from 'File1.js';
// import { privateFunc } from 'File1.js' -> erreur la fonction n'a pas été exportée

// test() -> error: test is not defined
myTest(); // affiche 'test'
console.log(a); // affiche 3
func(); // affiche 'export default from File1'

Const / Let

if (true) {
  const a = 3;
  console.log(a); // 3
  // on ne peut écrire : a = 4; 
}

console.log(a); // undefined

for(let i of [1, 2, 3, 4]) {
	...
}
console.log(i); // undefined

Destructuring

Tableau

const arr = [3, 10, 5];
const [a, ,b] = arr;

console.log(a); // 3
console.log(b); // 5


Valeur par défaut

const arr = [3, 10, 7];
const [a, ,b = 5] = arr;
const [c, d = 6] = [11];

console.log(a); // 3
console.log(b); // 7
console.log(c); // 11
console.log(d); // 6


Référence une autre variable

const arr = [3, 10, 5];
const [a, ,b = a] = arr;

console.log(a); // 3
console.log(b); // 3


Avec des objets

const obj= {
  name: 'john'
  age: 10
};
const { name } = obj;

console.log(name); // john
const obj= {
  name: 'john'
  age: 10
};
const { name: s } = obj;

console.log(name); // undefined
console.log(s); // john
const obj= {
  name: 'john',
  age: 10
};

function printName({ name }) {
  console.log(name);
}
printName(obj); // john
function printName({ name, age = 5 }) {
  console.log(name + ' ' + age);
}
printName({ name: 'john' }); // john 5

Spread

...[1, 2, 3] permet de transformer [1, 2, 3] en 1, 2, 3

const arr = [1, 2, 3];

function func(a, b, c) {
  return a + b + c;
}

console.log(func(...arr)); // 6
// func(...[1, 2, 3]) équivaut à func(1, 2, 3)


Concaténation de tableaux

const arr1 = [1, 2];
const arr2 = [4, 5];

const arr3 = [...arr1, 3, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5]

...{a: 1,b: 4} permet de transformer {a: 1,b: 4} en a: 1,b: 4

const obj1 = {a: 1, b: 4};
const obj2 = {...obj1, c: 2};
console.log(obj2); // {a: 1, b: 4, c: 2}

const obj3 = {...obj1, a: 2};
console.log(obj2); // {a: 2, b: 4}

Rest

function func(...args) {
  return args;
}
  
func(1, 2, 3, 4); // [1, 2, 3, 4];
function func(a, ...args) {
  console.log(a); // 1
  console.log(args); // [2, 3, 4]
}
  
func(1, 2, 3, 4);

Destructuring and Rest

const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
const obj = {a: 2, b: 4, c: 10};
const {b, ...rest} = obj;
console.log(b); // 4
console.log(rest); // {a: 2, c: 10}

This

  • Dans le contexte global (et dans un navigateur)
this === window // true
  • En tant que méthode d'un objet, this fait référence à l'objet (qui est lui-même propriétaire de la méthode)
var obj = {
  a: 2,
  func: function() {
    return this.a;
  }
};

obj.func() === 2; // true

La valeur de `this' dépend du contexte d'exécution de la fonction

var obj = {
  a: 2,
  func: function() {
	return this.a;
  }
};

const fn = obj.func;
fn(); // false

Arrow function

Une seule instruction (pas besoin du mot-clé return) :

const func = () => "foo";
func(); // retourne "foo"

Sur plusieurs lignes avec des crochets :

const func2 = (param) => {
  const foo = `foo`;
  return foo + param;
};

En tant que paramètre d'une fonction (avec un seul argument, pas besoin de parenthèses)

const arr = [1,2,3].forEach(i => i * 2);
console.log(arr); // [2, 4, 6]

Les arrow functions ne définisse pas la notion de this, ainsi dans une arrow function this fait référence au contexte englobant

The this value inside an arrow function is the same as the this value outside of it.

const a = {
  c: 5,
  fn: () => this.c
};

console.log(a.fn()); // undefined
const a = {
  c: 5,
  fn: function(){ return this.c; }
};

console.log(a.fn()); // 5

Seul le mot-cléfunction définit un nouveau contexte d'exécution. Pour déterminer la valeur de this, il faut regarder dans quel contexte la fonction a été appelée.

Attention à l'utilisation de this dans les arrow functions

Classes

class Employee {
  constructor(name, firstName) {
    this.name= name;
    this.firstName= firstName;
  }

  get fullName() {
    return this.firstName + ' ' + this.name
  }

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

const e = new Employee ('smith', 'john');
console.log(e.name); // smith
console.log(e.fullName); // john smith
e.printName(); // smith

Possibilité d'écrire les getters/setters avec get et set

Autres

  • Paramètres par défaut
function fn(a = 0, b = 1) {
  return a + b;
}

fn(3, 4); // ????
fn(3); // ????
fn(); // ????

// l'équivalent avec arrow function
const fn = (a = 0, b = 0) => a + b;
function fn(str, nb = str.length) {
  return str + '!'.repeat(nb);
}

fn('test', 6); // ????
fn('test'); // ????

// l'équivalent avec arrow function
const fn = (str, nb = str.length) => str + '!'.repeat(nb);