JavaScript – ES6 Cheat Sheet

Sedikit catatan dari contoh penggunaan sehari-hari code javascript dengan standard ES6,

Arrow Function

js
1
const sum = (a,b) => a + b;
2
    console.log(sum(2,6)) // prints 8

Default Parameters

js
1
function print(a = 5) {
2
       console.log(a)
3
    }
4
    
5
    print() // prints 5
6
    print(22) // prints 22

Let Scope

js
1
let a = 3
2
    if (true) {
3
      let a = 5
4
      console.log(a) // prints 5
5
    }
6
    console.log(a) // prints 3

Const

js
1
// can be assigned only once
2
    const a = 55
3
    a = 44 // throws an error

Multi-line String

js
1
console.log(
2
      `This is a
3
      multi-line string`
4
    )

Template String

js
1
const names = "World"
2
    const message = `Hello ${names}`
3
    console.log(message)
4
    
5
    // prints "Hello World"

Exponent Operator

js
1
const byte = 2 ** 8
2
    
3
    // expected result = 256
4
    
5
    // Same as: Math.pow(2, 8)

Spread Operator

js
1
/* Ini sama dengan `array_merge($arr1,$arr2)` pada php */
2

3
    const a = [ 1, 2 ]
4
    const b = [ 3, 4 ]
5
    const c = [ ...a, ...b ]
6
    
7
    console.log(c) 
8
    
9
    // [1, 2, 3, 4]

String Includes()

js
1
console.log('Dankdev'.includes('s'))
2
    
3
    // prints true
4
    
5
    console.log('Dankdev'.includes('m'))
6
    
7
    // prints false
8
    
9
    
10
    
11
    // includes() method ini case sensitive, contohnya 
12
    console.log('Dankdev'.includes('E'))
13
    
14
    // prints false
15
    
16
    console.log('Dankdev'.includes('D'))
17
    // prints true

String startsWith()

js
1
console.log('Dankedev'.includes('Da'))
2
    
3
    // prints true
4
    
5
    console.log('Dankedev'.includes('an'))
6
    
7
    // prints false

String repeat()

js
1
console.log('ha'.repeat(3))
2
    
3
    // prints "hahaha"

Destructuring array

js
1
let [a,b] = [3,7];
2
    
3
    console.log(a); // 3
4
    console.log(b); // 7

Destructuring object

js
1
let obj = {
2
      a: 77,
3
      b: 66
4
    };
5
    
6
    let { a,b } = obj;
7
    
8
    console.log(a); // 77
9
    console.log(b); // 66

Object Property Assignment

js
1
const a = 2
2
    const b = 5
3
    
4
    const obj = { a, b }
5
    
6
    // Before es6:
7
    // obj = { a: a, b:b }
8
    
9
    console.log(obj)
10
    
11
    // prints { a:2, b:5 }

Object.assign()

js
1
const obj1 = { a: 1 }
2
    const obj2 = { b: 2 }
3
    
4
    const obj3 = Object.assign({},
5
          obj1, obj2)
6
    
7
    console.log(obj3)
8
    // { a: 1, b: 2 }

Promises with finally

js
1
Promise
2
    
3
     .then((result) => { ... })
4
     .catch((error) => { ... })
5
     .finally(() => { /* logic independent of success/error */ })
6
    
7
     /* The handler is called when the promise is fulfilled or rejected. */
8
    
9
    //biasa dipakai saat menggunakan async dan await pada saat kita melakukan request dengan fetch atau ketika menggunakan axios

Spread Operator

js
1
const a = {
2
      firstName: "Hadie",
3
      lastName: "Danker",
4
    }
5
    
6
    const b = {
7
       ...a,
8
      lastName: "Abu Arsy",
9
      canSing: true,
10
    }
11
    
12
    console.log(a)
13
    
14
    //{firstName: "Haddide", lastName: "Danker"}
15
    
16
    
17
    console.log(b)
18
    
19
    /* {firstName: "Hadie", lastName: "Abu Arsy",
20
       canSign: true} */
21
    
22
    // cara ampuh untuk memodifikasi object tanpa harus mempengaruhi object aslinya

Destructuring Nested objects

js
1
const Person = {
2
      name: "Hadie Danker",
3
      age: 17, // :)
4
      sex: "male",
5
      maritalstatus: "single",
6
      address: {
7
      country: "ID",
8
      state: "South Sumatrea",
9
      city: "OKU",
10
      pincode: "123456",
11
     },
12
    };
13
    
14
    const { address: { state, pincode }, name } = Person;
15
    
16
    console.log(name, state, pincode)
17
    
18
    // Hadie Danker South Sumatera 123456
19
    
20
    console.log(city) // ReferenceError

Object function assignment

js
1
const obj = {
2
      a: 5,
3
      b() {
4
      
5
     console.log('b')
6
    
7
     }
8
    }
9
    
10
    obj.b() // prints "b"

Object.entries()

Looping object as array entries

js
1
const obj = {
2
      firstName: "Hadie",
3
      lastName: "anker",
4
      age: 17,
5
      country: "Indonesia",
6
    };
7
    
8
    const entries = Object.entries(obj);
9
    
10
    console.log(entries)
11
    
12
    /* prints [
13
    
14
       ['firstName', 'Hadie'],
15
       ['lastName', 'Danker'],
16
       ['age', 23],
17
       ['country', 'Indonesia']
18
    
19
      ];
20
    
21
    */

Object.keys()

Looping object as array keys

js
1
const obj = {
2
      firstName: "Hadie",
3
      lastName: "Danker",
4
      age: 17,
5
      country: "Indonesia",
6
    };
7
    
8
    const keys = Object.keys(obj);
9
    
10
    console.log(keys);
11
    
12
    /* prints [
13
    'firstName',
14
    'lastName',
15
    'age',
16
    'country'
17
      ];
18
    
19
    */

Sorting Array

js
1
// Sorting Ascending
2
    const arr = [40, 100, 1, 5, 25, 10];
3
    arr.sort((a,b) => a - b)
4
    
5
    console.log(arr)
6
    /*
7
    [
8
        100,
9
        40,
10
        25,
11
        10,
12
        5,
13
        1
14
    ]
15
    */
16
    
17
    
18
    // Sorting Descending
19
    arr.sort((a,b) => b - a)

Sorting Multidimensional Array

js
1
const Categories = [
2
    		{
3
    			id:10,
4
    			name:'PHP'
5
    		},
6
    		{
7
    			id:5,
8
    			name:'JavaScript'
9
    		},
10
    		{
11
    			id:30,
12
    			name:'Go'
13
    		},
14
    	]
15
    	
16
    	// Sorting Ascending
17
    	Categories.sort( (a,b) => a.id - b.id);
18
    	
19
    	console.log(Categories);
20
    	
21
    	
22
    	//Sorting Descending
23
    
24
    	Categories.sort( (a,b) => b.id - a.id);
25
    
26
    	console.log(Categories);

Demikian catatan singkat tentang cheatset code javascript dengan standard es6 yang biasa saya gunakan. Semoga bermanfaat.