- Number
- String
- Boolean
- Null
- Undifined
- Symbol (fitur yang akan datang)
- Object (collection data)
urutan 6 pertama merupakan tipe data primitif
yaitu mengisi value variable menggunakan backtick.
- 0
- string kosong ("") atau ('')
- null
- Undifined
- NaN
yaitu digunakan untuk mengakumulasikan atau mengurangi nilai berdasarkan elemen di dalam array.
yaitu fungsi yang memanggil fungsi lainnya untuk mengeksekusi sebuah program.
adalah fungsi yang dideklarasikan di dalam variable. Biasanya menggunakan keyword const
untuk deklarasi variable-nya. Fungsi ini juga tidak bisa di hoisting
seperti di fungsi deklarasi.
adalah fungsi yang tidak memiliki nama.
syntax function javascript terbaru dari ES6 dengan menggunakan () =>.
Menghilangkan keyword function
. Contoh :
const rectangleArea = (width, height) => {
let area = width * height;
return area;
};
JavaScript arrow function bisa diringkas dengan menggunakan satu line saja. Contoh:
const squareNum = (num) => num * num;
Mempunyai banyak variable global bisa menyebabkan beberapa masalah dalam program. Dengan demikian scope pollution adalah ketika kita memiliki banyak global variable yang ada di global namespace atau ketika kita menggunakan ulang variable di berbagai cakupan.
Untuk penulisan scope terbaik dalam javascript bisa menggunakan block scope atau contoh seperti program berikut:
const logVisibleLightWaves = () => {
let lightWaves = 'Moonlight';
let region = 'The Arctic';
if (region === 'The Arctic') {
let lightWaves = 'Northern Lights';
console.log(lightWaves);
}
console.log(lightWaves);
};
logVisibleLightWaves();
}
Walaupun kita menggunakan block scope, kita masih mendapatkan Scope Pollution karena menggunakan kembali variable yang sama sebanyak 2 kali. Dengan demikian lebih baik menggunakan variable di dalam block.
Ada kalanya kita menuliskan nama function dengan karakter yang banyak, untuk memudahkan kita fungsi bisa ditampung lagi dalam satu variable, contoh:
const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
for(let i = 1; i <= 1000000; i++) {
if ( (2 + 2) != 4) {
console.log('Something has gone very wrong :( ');
}
}
}
const is2p2 = checkThatTwoPlusTwoEqualsFourAMillionTimes;
is2p2();
Code diatas menjelaskan bahwa function checkThatTwoPlusTwoEqualsFourAMillionTimes()
disimpan di variable is2p2
, sehingga dalam pemanggilan fungsi tidak perlu ribet.
Pada suatu saat kita pun bakal menjumpai bahwa kita lupa dengan nama fungsi yang telah kita buat dan disimpan ke suatu varible, untuk itu kita memerlukan method name function untuk mengecek nama dari fungsi tersebut, contoh:
console.log(is2p2.name);
fungsi callback adalah fungsi yang diteruskan sebagai argumen ke fungsi lain.
forEach method mengambil argument fungsi callback. Return value forEach akan selalu berbentuk undefined
. Penulisan syntax forEach akan lebih baik menggunakan ES6, tetapi masih bisa juga menggunakan fungsi declarasi yang biasa, contoh penulisan syntax:
const groceries = ['brown sugar', 'salt', 'walnuts', 'milk'];
// contoh 1
groceries.forEach(function(groceryItem) {
console.log(' - ' + groceryItem);
});
// contoh 2
groceries.forEach(groceryItem => console.log(groceryItem));
// contoh 3
function printGrocery(element){
console.log(element);
}
groceries.forEach(printGrocery);
map()
method akan menghasilkan array baru ketika map()
dipanggil akan dibutuhkan suatu argument di dalam fungsi callback. Cara kerja map()
sama seperti forEach()
, yang membedakan nya adalah .map()
mengembalikan array baru. Contoh penulisan syntax:
const numbers = [1, 2, 3, 4, 5];
const bigNumbers = numbers.map(number => {
return number * 10;
});
console.log(numbers); // Output: [1, 2, 3, 4, 5]
console.log(bigNumbers) // Output: [10, 20, 30, 40, 50]
Membuat array baru dengan semua elemen yang bernilai true yang telah diimplementasikan oleh fungsi yang disediakan. Contoh syntax
const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door'];
const shortWords = words.filter(words => {
return words.length <= 5;
})
console.log(shortWords);
// output: [ 'chair', 'music', 'brick', 'pen', 'door' ]
Kode diatas berisi perintah untuk menampilkan element dalam array words
yang jumlah length
nya lebih kecil sama dengan 5.
Akan mengembalikan index element pertama yang bernilai true pada fungsi callback. Contoh syntax:
const jumbledNums = [123, 25, 78, 5, 9];
const lessThanTen = jumbledNums.findIndex(num => {
return num < 10;
});
console.log(lessThanTen);
// Output: 3
Kode menghasilkan output 3 karena index pertama yang bernilai true dalam function diatas adalah index ke-3.
Method .reduce()
mengembalikan nilai tunggal setelah iterasi melalui elemen-elemen array, sehingga mengurangi array. Contoh syntax:
const nomer = [1, 2, 4, 5, 10];
const summedNomer = nomer.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
console.log(summedNomer); // Output: 22
Bisa juga ditambahkan dengan bilangan tertentu seperti berikut:
const nomer = [1, 2, 4, 5, 10];
const summedNomer = nomer.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 100); // <- paramater kedua untuk dijumlahkan 100
console.log(summedNomer); // Output: 122
Metode some () menguji apakah setidaknya satu elemen dalam array bernilai true yang dilaksanakan oleh fungsi yang disediakan. Ini mengembalikan nilai Boolean. Contoh syntax:
const uhuy = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];
const missing = words.some((uhuy) => {
return uhuy.length < 6;
});
console.log(missing); // Output: true
Kode diatas menghasilkan true
karena salah satu element dari array uhuy
ada yang memiliki panjang kurang dari 6 karakter.
Method ini sama seperti some()
tetapi jika disalah satu element ada yang bernilai false
maka akan mengembalikan nilai false
. Contoh syntax:
const isBelowThresHold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 49, 29, 10, 13];
console.log(array1.every(isBelowThresHold)); // Output: false
Kode diatas akan menghasilkan boolean false
karena disalah satu element array isBelowThresHold
ada yang bernilai false
dalam function-nya.
Ini berarti ketika kita mem pass
variabel yang diassign ke object dan ke fungsi sebagai argument, komputer menerjemahkan nama parameter sebagai menunjuk ke ruang di memori yang memegang object itu. Akibatnya, fungsi yang mengubah properti objek sebenarnya bermutasi objek secara permanen (bahkan ketika objek ditugaskan ke variabel const).
Untuk me-looping object bisa menggunakan for...in
. Contoh syntax:
let uhuy = {
crew: {
captain: {
name: 'Lily',
degree: 'Computer Engineering',
cheerTeam() {
console.log('You got this!')
}
},
'chief officer': {
name: 'Dan',
degree: 'Aerospace Engineering',
agree() {
console.log('I agree, captain!')
}
},
}
};
for (let crewMember in uhuy.crew) {
console.log(`${crewMember}: ${uhuy.crew[crewMember].degree}`)
}
// Output:
// captain: Computer Engineering
// chief officer: Aerospace Engineering
// medic: Physics
// translator: Conservation Science
Untuk menggunakan this
keyword dalam arrow function di object sangat tidak disarankan karena arrow function pada dasarnya sudah mengandung this
. Dengan demikian this
yang menggunakan arrow function akan menghasilkan nilai undefined
. Contoh syntax:
const cat = {
dietType: 'carnivore',
makeSound() {
console.log('Miauww');
},
diet: () => {
console.log(this.dietType);
}
}
cat.diet(); // undefined
Biasanya delevoper JavaScript menamai property dengan awalan underscore (_
) yang berarti property tidak harus diubah. Berikut contoh syntax-nya:
const robot = {
_energyLevel: 100,
recharge() {
this._energyLevel += 30;
console.log(`Recharged! Energy is currently at ${this._energyLevel}%.`)
}
};
console.log(robot.recharge());
Getters adalah metode yang mendapatkan dan mengembalikan properti internal pada suatu object. Tetapi mereka dapat melakukan lebih dari sekedar mengambil nilai property. Contoh syntax:
const person = {
_firstName: 'Fenti',
_lastName: 'Rahmawati',
get fullName() {
if (this._firstName && this._lastName) {
return `${this._lastName} ${this._firstName}`;
} else {
return 'Missing a first name or a last name.';
}
}
}
console.log(person.fullName); // Output: Rahmawati Fenti
Seiring dengan metode getters
, kita juga bisa membuat metode setter
yang menetapkan nilai properti yang ada dalam suatu objek. Contoh syntax:
const robot = {
_model: '1E78V2',
_energyLevel: 100,
_numOfSensors: 15,
get numOfSensors(){
if(typeof this._numOfSensors === 'number'){
return this._numOfSensors;
} else {
return 'Sensors are currently down.'
}
},
set numOfSensors(num){
if (typeof num === 'number' && num >= 0) {
this._numOfSensors = num;
} else {
console.log('Pass in a number that is greater than or equal to 0');
}
}
};
robot.numOfSensors = 100;
console.log(robot.numOfSensors); // Output: 100
Dengan factory function kita bisa membuat banyak instance object dengan cepat. Contoh syntax:
const monsterFactory = (name, age, energySource, catchPhrase) => {
return {
name: name,
age: age,
energySource: energySource,
scare() {
console.log(catchPhrase);
}
}
}
const herScare = monsterFactory('Fenti', 21, 'Be Loved', 'aaaaa!');
herScare.scare() // Output: aaaaa!
Kita bisa mempersingkat penulisan factory function dengan metode property value shorthand. Berikut contoh syntax-nya:
const myPassion = (jobs, hobby) => {
return {
jobs,
hobby
}
};
const myDataPassion = myPassion('backend', 'soccer');
console.log(myDataPassion.hobby); // Output: soccer
Teknik ini digunakan untuk memanggil value dari object dengan cara shorthand.
const vampire = {
name: 'Dracula',
residence: 'Transylvania',
preferences: {
day: 'stay inside',
night: 'satisfy appetite',
morning: {early: 'hahaha', atEight: 'huhuhu'}
}
};
const { residence } = vampire;
console.log(residence); // Output: Transylvania
const { early } = vampire.preferences.morning;
console.log(early); // Output: hahaha
Untuk mengambil key dan dijadikan array. Contoh syntax:
const myWish = {
role: 'Programmer',
expert: 'JavaScript',
degree: 'Backend Web Developer',
minSalary: 10000000,
hasOwnHome: true,
};
const myGirlKeys = Object.keys(myGirl);
console.log(myGirlKeys) // Output: [ 'role', 'expert', 'degree', 'minSalary', 'hasOwnHome' ]
Untuk menampilkan key dan value dan dijadikan array. Contoh syntax:
const object1 = {
a: 'somestring',
b: 42
};
const antrian = Object.entries(object1);
console.log(antrian); // Output: [ [ 'a', 'somestring' ], [ 'b', 42 ] ]
untuk menambah key dan value dari suatu object. Contoh syntax:
const object1 = {
a: 'somestring',
b: 42
};
const newRobot = Object.assign(object1, {
laserBlaster: true,
voiceRecognition: true
})
console.log(newRobot); // Output: { a: 'somestring', b: 42, laserBlaster: true, voiceRecognition: true }
Adalah sebuah tool yang memungkinkan developer bisa membuat object yang sama dengan cepat. Contoh penulisan:
class Dog {
constructor(name) { // custructor
this._name = name;
this._behavior = 0;
}
get name() { // getter method
return this._name;
}
get behavior() { // getter method
return this._behavior;
}
incrementBehavior() { // method
this._behavior++;
}
}
const halley = new Dog('Halley'); // instance
console.log(halley.name); // Output: Halley
console.log(halley.behavior); // Output: 0
halley.incrementBehavior();
console.log(halley.behavior); // Output: 0
Ada beberapa bagian dari class yang perlu diketahui, yaitu:
constructor
yaitu method yang harus dipanggil setiap membuat instance baru dalam class. Setiap parameter harus menggunakan keywordthis
.instance
yaitu sebuah object yang berisi nama property dan method class tersebut. Tetapi dengan nilai value yang unique.methods
yaitu perilaku atau fungsi yang bisa dilakukan oleh class tersebut.
Untuk contoh penulisan bisa dilihat di contoh syntax diatas yang sudah diberi keterangan.
Menurunkan class, terdiri dari parent class
dan child class
. Parent class merupakan class yang inti dan child class merupakan class yang diturunkan. Berikut syntax penulisannya:
// => parent class
class HospitalEmployee {
constructor(name) {
this._name = name;
this._remainingVacationDays = 20;
}
get name() {
return this._name;
}
get remainingVacationDays() {
return this._remainingVacationDays;
}
takeVacationDays(daysOff) {
this._remainingVacationDays -= daysOff;
}
}
// => child class
class Nurse extends HospitalEmployee {
constructor(name, certifications) {
super(name);
this._certifications = certifications;
}
get certifications() {
return this._certifications;
}
addCertification(newCertification) {
this._certifications.push(newCertification);
}
}
const nurseOlynyk = new Nurse('Olynyk', ['Trauma', 'Pediatrics']);
console.log(nurseOlynyk);
nurseOlynyk.takeVacationDays(5);
console.log(nurseOlynyk.remainingVacationDays);
nurseOlynyk.addCertification('Genetics');
console.log(nurseOlynyk.certifications);
Dalam inheritance ada 2 keyword yang wajib yaitu :
extends
, keyword ini bertugas membuat method yang ada di parent class ke dalam child class.super
, untuk memanggil constructor parent class, dalam contoh code diatassuper(name)
berarti mengambil argumentname
dariHospitalEmployee
(parent class) keNurse
(child class).
NOTICE: super
wajib dipanggil di awal construction.
Adalah methods yang hanya bisa dijalankan diparent classnya dan tidak perlu untuk menginstance class nya. Contoh syntax:
class ClubSepakbola {
constructor(name) {
this._name = name;
this._behavior = 0;
}
static generateName() {
const names = ['Arema', 'Persib', 'Persija', 'Persebaya', 'Bali United'];
const randomNumber = Math.floor(Math.random() * 5);
return names[randomNumber];
}
get name() {
return this._name;
}
}
console.log(ClubSepakbola.generateName()); // output: random club sepakbola
const pelatihClub = new ClubSepakbola('Rene Alberts'); // instance
// console.log(pelatihClub.generateName()); // will output error
adalah library javascript untuk mengubah syntax ES6 ke ES5 agar bisa dijalankan di browser yang tidak compatibel dengan ES6.
Langkah-langkah install babel, sebelumnya buat dulu folder src, dan masukkan file main.js
yang berisi syntax ES6, berikut perintahnya:
npm install babel-cli
npm install babel-preset-env
npm run build
Setelah 3 perintah tersebut dijalankan, cek apakah ada folder /lib
dan berisikan file main.js
, file tersebut merupakan syntax ES5-nya.
Perintah npm init
untuk setup project JavaScript ketika menjalankan npm run build, akan menghasilak json file dengan nama package.json
yang berisikan informasi tentang project yang telah disetup menggunakan npm init
. Lalu bisa menggunakan perintah yang sama.
Untuk menspesifikasikan javascript version dan versi lainnya. Buat file .babelrc
dengan perintah: touch .babelrc
Setelah itu isi file .babelrc
tersebut dengan teks berikut:
{
"presets": ["env"]
}
Ketika babel dijalankan ia akan menentukan versi javascript yang telah diinisialisasi. Untuk perintah ["env"]
ia akan menginstruksikan babel untuk mengconvert ES6 ke ES5.
Ini adalah langkah terakhir untuk mengkonvert ES6 ke ES5, kita butuh package.json
untuk melakukan converting. Di dalam package.json
ada property yang bernama scripts
yang menampung sebuah object untuk menspesifikasikan command line shortcuts. Kira kira seperti ini:
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}, ...
Untuk mensetting babel kita perlu menambahkan beberapa baris perintah menjadi seperti berikut:
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
}
Setelah melakukan installasi, initialize, dan menambah script build, sekarang babel siap untuk dieksekusi. Kita hanya perlu menjalankan perintah npm run build
Javascript modules sering digunakan untuk export program yang akan digunakan oleh program lain.
// contoh 1
let Airplane = {};
Airplane.myAirplane = "StarJet";
module.exports = Airplane;
// contoh 2
module.exports = {
myAirplane: "CloudJet",
displayAirplane: function() {
return this.myAirplane;
}
};
const Airplane = require('./1-airplane.js');
function displayAirplane() {
console.log(Airplane.myAirplane);
}
displayAirplane();