Table of contents
Arrow Function
Default Parameters
Let Scope
Const
Multi-line String
Template String
Exponent Operator
Spread Operator
String Includes()
String startsWith()
String repeat()
Destructuring array
Destructuring object
Object Property Assignment
Object.assign()
Promises with finally
Spread Operator
Destructuring Nested objects
Object function assignment
Object.entries()
Object.keys()
Sorting Array
Sorting Multidimensional Array

JavaScript – ES6 Cheat Sheet

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

Hadie Danker
4 bulan yang lalu
Web Development
JavaScript – ES6 Cheat Sheet
Table of contents
Arrow Function
Default Parameters
Let Scope
Const
Multi-line String
Template String
Exponent Operator
Spread Operator
String Includes()
String startsWith()
String repeat()
Destructuring array
Destructuring object
Object Property Assignment
Object.assign()
Promises with finally
Spread Operator
Destructuring Nested objects
Object function assignment
Object.entries()
Object.keys()
Sorting Array
Sorting Multidimensional Array

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.

JavaScript
TypeScript