ABICOMP12: Javascript

Showing posts with label Javascript. Show all posts

Contoh Destructuring Object dalam Javascript

Destructuring merupakan fitur pada ES6 yang mempermudahkan untuk mengolah nilai dari array maupun properti dari object pada javascript. Destructure ini sering sekali kita gunakan baik ketika development di client side maupun server. Selanjutnya kita akan lebih mengenal “apa itu destructuring object”.

destructuring object pada ES6 sintaks menggunakan objek literal { } di sisi kiri dari operasi assignment.


const profile = {

    firstName: "John",

    lastName: "Doe",

    age: 18

}

 

const {firstName, lastName, age} = profile;

 

console.log(firstName, lastName, age);

 

/* output:

John Doe 18

*/

Pada contoh di atas tanda kurung kurawal { } merepresentasikan objek yang akan didestruksikan. Di dalamnya terdapat firstName, lastName, dan age yang merupakan variabel di mana kita menyimpan nilai properti dari objek profile. Kita juga perlu perhatikan penamaan variabel-variabelnya. Pastikan penamaannya sama seperti yang dimiliki oleh properti objeknya. Melalui nama variabel inilah nilai-nilai properti objek akan dimasukkan secara otomatis. Sehingga variabel firstName akan berisikan nilai profile.firstName, lastName akan berisikan nilai profile.lastName, begitu juga dengan variabel age akan berisikan nilai profile.age.

Dalam destructuring object, kita bisa menspesifikasikan salah satu nilai yang ingin kita desktruksikan. Sehingga kita tidak perlu membuat variabel sebanyak properti yang dimiliki objeknya. contohnya:


const {lastName} = profile;

Destructuring Assignment

Pada contoh sebelumnya kita melakukan destructuring object pada deklarasi variabel, namun pada kasus tertentu mungkin kita perlu melakukannya pada variabel yang sudah dideklarasikan. Atau kita ingin mengubah nilainya dengan nilai properti di objek.

Dalam kasus tersebut, kita bisa melakukannya dengan seperti ini:


const profile = {

    firstName: "John",

    lastName: "Doe",

    age: 18

}

 

let firstName = "Dimas";

let age = 20;

 

// menginisialisasi nilai baru melalui object destruction

({firstName, age} = profile);

 

console.log(firstName);

console.log(age);

 

/* output:

John

18

*/

Saat melakukan destructuring assignment kita perlu menuliskan destructuring object di dalam tanda kurung. Jika tidak dituliskan di dalamnya, tanda buka kurung kurawal akan membuat JavaScript mengira kita membuat block statement, dan block statement tentu tidak bisa berada pada sisi kiri assignment.


// tidak bisa karena JavaScript mengira kita membuat block statement

// block statement tidak bisa berada pada sisi kiri assignment

{firstName, age} = profile;

Nah inilah fungsinya tanda kurung. Ia akan memberitahu JavaScript bahwa tanda kurawal yang di dalamnya bukan sebuah block statement, melainkan sebuah expression. Sehingga assignment dapat dilakukan.


({firstName, age} = profile);

Default Values

Ketika kita mendestruksikan objek dan kita menetapkan variabel dengan nama yang bukan merupakan properti dari objek, maka nilai dari variabel tersebut menjadi undefined. Contohnya:


const profile = {

    firstName: "John",

    lastName: "Doe",

    age: 18

}

 

 

const {firstName, age, isMale} = profile;

 

console.log(firstName)

console.log(age)

console.log(isMale)

 

/* output:

John

18

undefined

*/

Alternatifnya, kita bisa secara opsional mendefinisikan nilai default pada properti tertentu jika tidak ditemukan. Untuk melakukanya tambahkan tanda assignment (=) setelah nama variabel dan tentukan nilai defaultnya seperti ini:


const profile = {

    firstName: "John",

    lastName: "Doe",

    age: 18

}

 

 

const {firstName, age, isMale = false} = profile;

 

console.log(firstName)

console.log(age)

console.log(isMale)

 

/* output:

John

18

false

*/

Ketika menambahkan default value, jika properti tidak ditemukan nilai default akan diterapkan pada variabel.

Assigning to Different Local Variable Names

Sampai saat ini kita tahu bahwa untuk mendekstruksikan objek pada variabel lokal kita perlu menyeragamkan penamaan lokal variabel dengan properti objeknya. Namun sebenarnya dalam mendestruksikan objek kita bisa menggunakan penamaan variabel lokal yang berbeda. ES6 menyediakan sintaks tambahan yang membuat kita dapat melakukan hal tersebut. Penulisannya mirip seperti ketika kita membuat properti beserta nilainya pada objek.

Contohnya seperti ini:


const profile = {

    firstName: "John",

    lastName: "Doe",

    age: 18

}

 

const {firstName: localFirstName, lastName: localLastName, age: localAge} = profile;

 

console.log(localFirstName);

console.log(localLastName);

console.log(localAge);

 

 

/* output:

John

Doe

18

*/

Javascript

Contoh Dasar Ajax Menggunakan XMLHttpRequest

Chino 0

XMLHttpRequest (HRX) merupakan objek yang tersedia pada browser yang digunakan untuk membuat HTTP Requests menggunakan JavaScript. Karena namanya kita mungkin beranggapan bahwa XHR hanya mendukung format data XML, tetapi nyatanya saat ini XHR dapat digunakan oleh banyak format, bukan hanya XML.

Walaupun sekarang terdapat cara yang lebih modern yaitu menggunakan fetch, namun masih ada kok beberapa developer yang menggunakan XHR dalam melakukan HTTP Request. Alasannya karena alasan dukungan browser tua atau suatu fitur yang tidak bisa fetch lakukan seperti tracking upload progress.

Basic Usage

XMLHttpRequest dapat berjalan secara synchronous maupun asynchronous. Namun kebanyakan kasus HTTP Request sebaiknya asynchronous.

Contoh penggunaan dasar dari XMLHttpRequest adalah seperti ini:

Langkah awal untuk menggunakan XMLHttpRequest adalah dengan membuat instance baru dari objek XMLHttpRequest seperti ini:


const xhr = new XMLHttpRequest();

Lalu pada instance dari objek tersebut (xhr) kita tentukan callback function ketika request berhasil (onload) dan ketika request gagal (onerror).


xhr.onload = function () {

    console.log(this.responseText);

}

xhr.onerror = function () {

    console.log("Ups something error")

}

Di dalam callback function tersebut, nilai dari this merupakan XHR objek. Sehingga this.responseText akan memiliki nilai response (dalam bentuk text) dari server. Ingat karena pada callback function tersebut nilai this merupakan XHR objek, kita tidak dapat menggunakan gaya arrow function dalam menuliskan callback function-nya.


xhr.onload =  () => {

    // akan menyebabkan error, karena arrow function tidak memiliki this.

    console.log(this.responseText);

}

Selanjutnya kita tentukan HTTP Method dan URL yang dituju dengan menggunakan method .open()


xhr.open("GET", "https://api-to-call.com/endpoint");

Nah, langkah akhir adalah mengirimkan request yang sudah kita konfigurasi di atas menggunakan method .send().


xhr.send();

Sehingga seluruh kode dalam penggunaan dasar dari XMLHttpRequest dengan contoh target url berikut https://web-server-book-dicoding.appspot.com/list adalah seperti ini:


const xhr = new XMLHttpRequest();

 

xhr.onload = function () {

 console.log(this.responseText)

}

xhr.onerror = function () {

 console.log("Ups something error")

}

 

xhr.open("GET", "https://web-server-book-dicoding.appspot.com/list");

xhr.send();

Coba Anda copy dan paste kode di atas dan jalankan pada console devTools. Jika request berhasil, Anda akan mendapatkan data dalam bentuk JSON String. Data tersebut bisa Anda olah menjadi JavaScript objek dengan mengubahnya menggunakan method JSON.parse().


JSON.parse(this.responseText)

Anda juga bisa mencoba menjalankan potongan kode di atas pada repl.it melalui tautan berikut: https://repl.it/@dicodingacademy/163-06-AJAX-XHR-basic?lite=true

Header and Body Request using XHR

Sebelumnya kita sudah belajar bagaimana cara menggunakan dasar XMLHttpRequest dalam membuat sebuah GET Request. Lalu bagaimana jika kita ingin menggunakan method POST dan menetapkan properti pada Header ? Lalu bagaimana cara mengirimkan data pada body HTTP Request? Yuk kita bahas permasalahan tersebut satu per satu.

Set Header Property

Dalam menggunakan Web API tidak selamanya kita hanya menggunakan GET request saja, terutama ketika request yang kita inginkan bertujuan mengubah atau menambahkan data. Web API biasanya meminta kita untuk melakukannya dengan method POST atau PUT. Tak jarang juga Web API meminta kita untuk menetapkan properti tertentu pada request header untuk menunjukkan credential yang kita miliki. Request tersebut sudah pernah kita coba ya menggunakan Postman. Tapi bagaimana ya caranya jika menggunakan XHR?

Untuk menetapkan properti pada request header, Anda dapat gunakan method setRequestHeader() pada instance XMLHttpRequest setelah menetapkan method .open(). Method tersebut menerima dua parameter. Parameter pertama merupakan nama properti dan parameter yang kedua adalah nilai yang akan ditetapkan pada properti tersebut. Sehingga untuk menetapkan properti Content-Type dengan nilai application/json pada request kita dapat melakukannya dengan cara:


const xhr = new XMLHttpRequest();

 

xhr.onload = function() {

 console.log(this.responseText);

}

 

xhr.onerror = function() {

 console.log("Ups something error");

}

 

xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");

 

// menambahkan properti pada header request

xhr.setRequestHeader("Content-Type", "application/json");

Kita dapat menetapkan properti pada request header sebanyak yang kita perlukan


const xhr = new XMLHttpRequest();

 

xhr.onload = function() {

 console.log(this.responseText);

}

 

xhr.onerror = function() {

 console.log("Ups something error");

}

 

xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");

 

// menambahkan properti pada header request

xhr.setRequestHeader("Content-Type", "application/json");

xhr.setRequestHeader("X-Auth-Token", "12345")

Cukup mudah bukan?

Set Data to Body Request

Lalu untuk menetapkan data pada body request, lakukanlah pada method .send() dari instance XMLHttpRequest. Contohnya untuk mengirimkan data JSON String pada body request, begini caranya:


const xhr = new XMLHttpRequest();

 

xhr.onload = function() {

 console.log(this.responseText);

}

 

xhr.onerror = function() {

 console.log("Ups something error");

}

 

xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");

 

// menambahkan properti pada header request

xhr.setRequestHeader("Content-Type", "application/json");

xhr.setRequestHeader("X-Auth-Token", "12345")

 

const book = {

 id: 10,

 title: "Edensor",

 author: "Andrea Hirata"

}

 

xhr.send(JSON.stringify(book));

Sebenarnya tidak hanya JSON format yang dapat dikirimkan melalui body, pada situs MDN menyebutkan bahwa kita dapat mengirimkan dokumen yang sudah ter-serialized sebelum dikirim, atau data lain yang terdaftar pada Fetch spec seperti Blob, BufferSource, FormData, URLSeachParam, ReadableStream atau USVString object.

Contoh kode di atas dapat Anda temukan pada tautan berikut https://repl.it/@dicodingacademy/163-06-AJAX-XHR-Header-and-Body?lite=true. Anda bisa coba lakukan POST Request dengan menjalankan potongan kode tersebut

Hasil Akhir Cek :
https://github.com/dicodingacademy/a163-bfwd-labs/tree/302-dicoding-books-xhr

Abicomp12 Download Software