lifelong learner — urip iku urup, currently working on accenture.

Konsep Dasar Utama yang Harus di Kuasai oleh Programmer Javascript Frontend dan Backend

0
Degananda.com -

javascript_thumbSebagai seorang developer javascript, baik itu pada sisi frontend atapun backend, Terdapat 11 konsep dasar javascript yang harus diketahui dan di implementasikan dan di fahami dengan baik.

Dengan memahami dan mengimplementasikan 11 konsep ini, maka proses pendalaman mengenai javascript akan jauh lebih mudah karena 11 ni adalah konsep fundamental (dasar)

11 Konsep ini merupakan konsep yang mendasar dari bahasa pemrograman javascript yang meliputi konsep fungsionalitas hingga strukturisasi program javascript. Biasannya, developer pemula tidak 100% memahami ke-11 konsep tersebut.


11 Konsep dan Skill Utama yang Harus di Kuasai oleh Programmer Javascript

Konsep Dasar 1 – IIFE

IIFE merupakan singkatan dari Immediately Invoked Function Expresion. Yakni suatu fungsi yang akan dieksekusi langsung setelah fungsi tersebut dibuat pada memori. Variabel yang didefinisikan pada fungsi tersebut tidak akan diakses dari tempat lain. Konsep ini mengacu pada design pattern (pola desain) dari Self Execution Anonymous Function.

(() => {
    console.log("Hello world")
})();

pada contoh kode diatas, fungsi tersebut akan dieksekusi secara langsung saat program dijalankan. Ini dikarenakan terdapat syntax untuk melakukan proses instansiasi (). Variabel yang didefinisikan pada fungsi IIFE diatas tidak akan dapat diakses diluar bracketnya.

(()=>{
    var nama = "degananda ferdian";
    console.log("Hello world, nama saya " + nama);
})();
console.log(nama);

variable nama tidak akan didapat dipanggil diluar bracket. Sehingga kode diatas akan menghasilkan error reference not defined

ReferenceError: nama is not defined

terdapat dua bentuk penulisan IIFE lain. Pertama adalah menggunakan operator function serta tanda kurung (parantheses) sebagai pengganti dari fungsi arrow ( () => )

(function() {
console.log("Hello world")
})();

atau cara lainnya adalah menggunakan fungsi IIFE tersebut dalam suatu variabel.

var helloWorld = function(){
var nama = "degananda ferdian priyambada";
return nama;
}();
console.log(helloWorld);

pada intinnya konsep Immediately Invoked Function Expression (IIFE) ini memiliki dua buah aturan

  1. variabel yang didefinisikan pada fungsi IIFE (diantara dua bracket{}) tidak akan dapat diakses secara global.
  2. syntax paranthesis ( () ), memungkinkan fungsi tersebut akan dieksekusi setelah fungsi itu dibuat.

Konsep 2 – Struktur MVC

contoh struktur MVC.jpg
contoh struktur folder dengan pola desain MVC – model view controller

layaknya pada bahasa pemrograman lainnya seperti java, C++ dan lain sebagainnya. Kini javascript juga memiliki kemampuan untuk menggunakan struktur MVC (Model, view dan controller). Superset dari javascript yakni typescript juga memiliki kemampuan tersebut.

MVC mengatur kode menjadi beberapa layer seperti data (model) , view dan logic (controller). Setiap layer akan di simpan pada file yang berbeda.

sangat disarankan untuk selalu menggunakan konsep MVC ini. Baik itu pada project berskala kecil hingga project berskala besar karena nantinnya semakin berkembangnya project tersebut, maka akan diperlukan tambahan develeper yang membantu pengerjaanya. Konsep MVC akan memudahkan develoepr lain untuk memahami struktur tersebut karena MVC adalah struktur standar yang ada pada dunia pemrograman.

Konsep 3 – Closure

Closure adalah konsep yang memungkinkan suatu statement atau kode yang berada dalam suatu fungsi tertentu (Inner function) untuk dapat menggunakan variabel yang berada diluar fungsi tersebut.

const namaSaya  = (nama) => {
return "nama saya " +  nama;
}
const hello  = namaSaya("degananda ferdian");
console.log(hello);

variabel namaSaya merupakan sebuah fungsi yang menerima satu parameter bernama “nama“. Parameter nama ini sebenarnya adalah parameter yang dimiliki oleh fungsi namaSaya. Namun, parameter nama ini masih dapat digunakan oleh fungsi maupun variabel lainnya.

Sehingga, nilai parameter dalam suatu fungsi dapat diubah oleh fungsi maupun variabel lainnya tanpa mengubah proses yang ada dalam fungsi yang dipanggil tersebut. Inilah yang disebut dengan closure. Dalam hal ini, nilai parameter nama diubah oelh variabel hello.

Konsep 4 – Async/await

Beberapa fungsi javascript bekerja secara asynchronous. Yang berarti proses tersebut tidak akan menunggu proses lainnya.

 
var fetch = require('node-fetch');
const getHttp = fetch('https://degannada.com'); // proses-1
console.log(getHttp); // proses-2
console.log("degananda ferdian"); // proses-3

Sebagai contoh diatas, terdapat tiga baris kode (abaikan baris pertama karena hanya instansiasi untuk memanggil library node-fetch.

  1. proses pertama untuk melakukan fetching terhadap website degananda.com
  2. proses kedua mencoba menampilkan respon dari proses fetching tersebut
  3. proses ketiga akan menampilkan kalimat hello world pada konsol.

fungsi fetch() yang dipanggil pada baris pertama merupakan suatu fungsi asynchronous. Sehingga, proses pada proses kedua dan ketiga tidak perlu menunggu proses pada baris pertama selesai. Atau mudahnya, ketiga proses tersebut berjalan secara paralel.

konsep async await ini sangat penting untuk developer javascript, karena async/await diperlukan untuk mengelola callback atau biasa disebut sebagai callback hell, serta untuk menjaga urutan dari proses yang di inginkan.

promise_pending_async_without_wait.jpg

Hal ini mengakibatkan proses dibaris kedua akan menghasilkan nilai promise<pending>. Karena mencoba menampilkan variabel yang masih belum memiliki nilai. Ingat bahwa proses fetch() pada baris pertama masih berlangsung.

var fetch = require('node-fetch');
async function  demonstrateAsyncAwait(){
console.log("test");
const getHttp = await fetch('https://degananda.com');
console.log(getHttp);
console.log("degananda ferdian");
}
demonstrateAsyncAwait();

Untuk menyelesaikan masalah ini maka diperlukan async/await. Tambahkan syntax await pada proses fetch(). Hal ini akan membuat proses pada proses ke dua dan tiga akan dilakukan setelah proses pada baris 1 (fetch () ) selesai.

promise_pending_async_with_await.jpg
await pada fungsi async membuat nodejs tidak akan mengeksekusi baris setelahnya sampai baris tersebut selesai melakukan pemrosesan.

await hanya dapat digunakan pada fungsi yang menggunakan async.

proses dua tidak perlu menggunakan await untuk membuat proses ketiga (console.log(degananda ferdian)) menunggu proses kedua dikarenakan pada proses kedua(console.log()) bukan merupakan fungsi async.

Konsep 5 – Scope

terdapat dua jenis scope pada javscript.

  • local scope
  • global scope

local scope

merupakan scope yang membuat variabel/fungsi hanya dapat diakses pada fungsi yang sama.

 
function namaSaya(){
const nama = "degananda ferdian"; // local variabel
console.log(nama);
}
console.log(nama); // akan menghasilkan error, karena nama adalah local scope.

variabel nama pada kode diatas adalah local variabel. Sehingga variabel ini memiliki jenis scope berupa local scope. Variabel nama hanya dapat dipanggil didalam fungsi tersebut. Jika mencoba memanggil variabel nama diluar fungsi namaaSaya() maka akan menghasilkan error : undefined(referenceError : nama is not defined)

global scope

Merupakan kebalikan dari local scope, yakni aksesibilitas dari variabel atau fungsi yang dapat dipanggil dari mana saja. Tidak peduli asal dari fungsi/variabel tersebut.

const nama = "degananda ferdian"; // global
function namaSaya(){
console.log(nama);
}
console.log(nama); // tidak menghasilkan error. nama adalah global variabel

variabel nama pada kode diatas merupakan global variabel sehingga aksesabilitas variabel tersebut berjenis global scope. Sehingga, variabel nama dapat dipanggil diluar fungsi namaSaya().

Konsep 6 – value atau reference type

pada saat suatu variabel diberikan sebuah nilai, maka nilai ini akan memiliki dua jenis yaitu value(nilai sesungguhnya) ataukan hanya sebuah “reference” / referensi.

var umurSaya = 26; // nilai 26 adalah actual value
var umurDega = umurSaya; // nilai umurSaya adalah referensi karena mereferensikan ke variabel umur saya

nilai pada variabel namaSaya (26) adalah nilai sesungguhnya atau nilai asli(value) dari tipe data primitive (number) pada javascript. Tetapi, pada lain sisi, nilai umurSaya pada variabel umurDega adalah suatu referensi/reference karena nilai  umurSaya tersebut hanya mereferensikan pada variabel umurSaya.

Konsep 7 – call back

seperti pada terjemahan aslinnya, callback adalah respon dari suatu fungsi yang telah selesai di eksekusi. Respon ini dapat berupa pemanggilan fungsi lain ataupun juga dapat berupa fungsi-fungsi javascript lainnya.

var fetch = require('node-fetch');
async function getHttp() {
return new Promise(
(resolve, reject) => {
const tempData =  fetch('https://degananda.com');
resolve(tempData);
}
)
}
async function demonstrateAsyncCallBack(){
const myDeganandaData = await getHttp().then(() => {
namaSaya(); // callback
})
}
function namaSaya(){
console.log('degananda ferdina priyambada');
}
demonstrateAsyncCallBack();

fungsi namaSaya() akan dipanggil oleh fungsi demonstrateAsyncCallback setelah fungsi getHttp() telah selesai dieksekusi. Inilah yang disebut sebagai callback. callback ini didefinisikan pada bracket yang terdapat pada fungsi then() di variabel myDeganandaData.

Konsep 8 & 9  – Prototype and Class

fungsi yang cukup penting pada javascript. Prototype adalah syntax javascript yang dapat digunakan untuk membuat kelas / class. Pada superset javascript yakni typescript dan di ES6 tidak perlu lagi menggunakan fungsi prototype ini saat membuat class. Cukup menggunakan syntax class.

konsep pembuatan class ini sangat penting untuk dikuasai terutama setelah ES6 di implementasikan. Karena class adalah dasar dari suatu struktur MVC yang merupakan standar di industri pengembangan software (software development)

pembuatan class dengan fungsi prototype di javascript (sebelum ES6)

function Person(nama, umur) {
// inisiasi class pada fungsi Person()
this.nama = nama;
this.umur = umur;
}
Person.prototype.nasionalisme = "Indonesia"; // menambahkan property pada kelas person layaknya "seperti inheritance"
var dega = new Person("dega", 26);
console.log(dega.nasionalisme); // property nasionalisme akan ditambahkan.

pembuatan class dan property pada ES6.

class Person {
constructor(nama,age){
this.nama = nama;
this.age = age;
}
}
var dega = new Person('dega', 25);
dega.nationality = "indonesia";
console.log(dega.nationality);

Konsep 10 – Destructing

sesuai dengan terjemahannya destructing bararti konsep untuk mengektrak nilai suatu properti disuatu object.

Metode 1 Destructing – memanggil nama property tersebut

 
var person = {
nama : "dega",
age : 25
}
console.log(person.nama); // property nama dapat dengan langsung dipanggil dari nama variabel tersebut

Metode 1 Destructing – mengekstrak setiap property pada variabel

metode kedua ini adalah metode yang paling bersih karena setiap property pada object akan disimpan pada dua property berbeda divarabel lainnya.

var person = {
nama : "dega",
age : 25
}
var { nama, age} = person;
console.log(nama);
console.log(age);

Konsep 11 – Manipulasi object dan array

konsep ini berfokus pada manipulasi suatu object. Mulai dari iterasi , kombinasi dan menghilangkan object itu sendiri,

var angka = [1,2,3,4,5];
// iterasi
angka.forEach((val) =>{
console.log(val);
})
// kombinasi
angka2 = [6,7,8,9,10];
angka3 = angka+angka2;  // kombinasi angka dan angka2 sebagai string
angka4 = [angka2+angka]; // kombinasi angka  dan angka 2 sebagai array
console.log(angka3);
console.log(angka4);
// menghilangkan
angka4 = [];
console.log(angka4);

kode diatas menjelaskan bagaimana suatu array di iterasi, kombinasi dan di hilangkan. Hal ini juga sama berlaku pada suatu object, yang membedakan hanya saja object (non array) tidak dapat dilakukan iterasi.

var person = {
nama : "dega",
age : 26
}
var person1={
nasionalisme : "indonesia"
}
var personFull = {...person, ...person1};
console.log(personFull);

perhatikan syntax “…” yang digunakan untuk melakukan kombinasi. Syntax “…” diperlukan agar hanya propertyn dari object person dan person1 digabungkan tanpa memasukan nama dari object-object bawaan tersebut.

kombinasi_object.jpg

 

(Visited 20 times, 1 visits today)
Please follow and like us:

Leave a Reply