Lab 5: JavaScript dan AJAX

Pemrograman Berbasis Platform (CSGE602022) Teknik Js dalam ITE

Tujuan Pembelajaran​

Setelah menyelesaikan tutorial ini, jika anda adalah mahasiswa diharapkan untuk mengerti:

• Penggunaan fungsi JavaScript pada front-end development
• Penggunaan dasar JavaScript
• Penggunaan AJAX

Pengenalan JavaScript​

Apa itu JavaScript?​

JavaScript merupakan bahasa pemrograman multi-paradigma tingkat tinggi lintas platform (cross platform high-level multi-paradigm programming language). Sifat multi-paradigma membuat JavaScript mendukung konsep object-oriented programming,imperative programming, dan functional programming. JavaScript sendiri merupakan implementasi dari ECMAScript, yang merupakan inti dari bahasa JavaScript. Beberapa implementasi lain dari ECMAScript yang mirip dengan JavaScript antara lain JScript (Microsoft) dan ActionScript (Adobe).

JavaScript, bersama dengan HTML dan CSS, menjadi tiga teknologi utama yang dipakai pada pengembangan web. Keuntungan menggunakan JavaScript dalam pengembangan web, pada dasarnya, antara lain JavaScript dapat memanipulasi halaman web secara dinamis dan memberikan interaksi lebih kepada pengguna. Oleh karena itu, hampir semua situs web modern saat ini menggunakan JavaScript dalam halaman web mereka untuk memberikan pengalaman terbaik kepada pengguna. Beberapa contoh hal yang dapat kita lakukan dengan menggunakan JavaScript antara lain menampilkan informasi berdasarkan waktu, mengenali jenis browser pengguna, melakukan validasi form atau data, membuat cookies (bukan kue, tapicookies), mengganti styling dan CSS suatu element secara dinamis, dan lain-lain.

Pada pengembangan web umumnya kode JavaScript digunakan pada client-side suatu web (Client-side JavaScript) namun beberapa jenis kode JavaScript saat ini digunakan pada server-sidesuatu web (Server-side JavaScript) seperti node.js. Istilah client-sidemenunjukkan bahwa kode JavaScript akan dieksekusi atau dijalankan pada browser pengguna, bukan pada server situs web. Hal ini berarti kompleksitas kode JavaScript tidak akan memengaruhi performa server situs web tersebut namun memengaruhi performa browser dan komputer; semakin kompleks kode JavaScript, maka semakin banyak memori komputer yang dikonsumsi oleh browser.

Pada mata kuliah PBP, kita hanya akan fokus kepada kode client-sideJavaScript.

Bagaimana tahapan JavaScript dieksekusi oleh browser?​

Perhatikan diagram berikut.

Setelah browser mengunduh halaman HTML web maka tepat dimana tag <script></script>berada, browser akan melihat tag script tersebut, apakah tag tersebut berisi kode embeddedJavaScript atau merujuk file eksternal JavaScript. Jika merujuk pada file eksternal JavaScript, maka browser akan mengunduh file tersebut terlebih dahulu.

Cara penulisan JavaScript

Cara penulisan JavaScript bisa dilakukan dengan embedded JavaScript atau external JavaScript. Kode JavaScript dapat didefinisikan atau dituliskan secara embedded pada file HTML maupun secara terpisah pada file tersendiri. Jika ditulis dalam file terpisah dari HTML, ekstensi file yang digunakan untuk file JavaScript adalah .js. Berikut contoh beberapa pendefinisian dari JavaScript.

JavaScript dapat diletakkan pada head atau body dari halaman HTML. Selain itu, kode JavaScriptHARUS dimasukkan di antara tag <script> dan </script>. Anda dapat meletakkan lebih dari satutag script yang berisi JavaScript pada suatu file HTML.

Embedded JavaScript pada HTML

index.html

<script type="text/JavaScript">
  alert("Hello World!");
</script>

External JavaScript pada HTML

index.html

<script type="text/JavaScript" src="js/script.js"></script>

js/script.js

alert("Hello World!");

Pada file eksternal JavaScript, tag <script> tidak perlu lagi ditambahkan.

Memisahkan JavaScript pada file tersendiri dapat memberikan beberapa keuntungan seperti kode dapat digunakan di file HTML lain, kode JavaScript dan HTML tidak bercampur sehingga lebih fokus saat mengembangkan aplikasi, serta mempercepat loading halaman. File .js biasanya akan di-cache oleh browser sehingga jika kita membuka halaman yang sama dan tidak ada perubahan pada file .js, maka browser tidak akan meminta file .js tersebut kepada server lagi, namun akan menggunakan file dari cache yang sudah disimpan sebelumnya.

Eksekusi JavaScript​

Setelah JavaScript sudah terunduh dengan sempurna, maka browser akan langsung mulai mengeksekusi kode JavaScript. Jika kode tersebut BUKAN merupakan event-triggered, maka kode langsung dieksekusi. Jika kode tersebut merupakan event-triggered, maka kode tersebut hanya akan dieksekusi jika event yang didefinisikan terpicu (triggered).

// langsung dieksekusi
alert("Hello World");

// langsung dieksekusi
var obj = document.getElementById("object");
// langsung dieksekusi, menambahkan event handler onclick untuk element object
obj.onclick = function () {
  // hanya dieksekusi jika element 'object' di klik
  alert("You just click the object!");
};

Sintaks JavaScript​

Variabel

Mendefinisikan variabel pada JavaScript cukup mudah. Contohnya seperti berikut.

var example = 0; // var example merupakan sebuah bilangan
var example = "example"; // var example merupakan sebuah string
var example = true; // var example merupakan sebuah boolean

JavaScript dapat menampung banyak tipe data; mulai dari string, integer, hingga object sekalipun. Berbeda dengan Java yang penandaan tipe datanya dibedakan dengan head variable (contoh ingin membuat variabel dengan tipe data int, maka sintaknya seperti int x = 9), JavaScript mempunyai ciri khas loosely typedatau dynamic language, yakni kalian tidak perlu menuliskan tipe data pada head variable dan JavaScript nantinya akan secara otomatis membaca tipe data kalian berdasarkan standar yang ada (seperti pada contoh diatas).

Ada beberapa aturan dalam pemilihan indentifiers atau nama variabel dalam JavaScript. Karakter pertama HARUS merupakan alfabet, underscore ( _), atau karakter dollar ($). Selain itu, JavaScript identifiers bersifat case sensitive.

String Concatenation

Dalam JavaScript, kita juga dapat menyambungkan string dengan string lainnya seperti pada Java.

var str1 = "PBP" + " " + "Fun";
var str2 = "PBP";
var str3 = "Fun";
var str4 = str2 + " " + str3;
var str5 = "Fun";
var str6 = `PBP ${str5}`;  // Memiliki hasil yang sama seperti "PBP" + " " + str5

JavaScript Scope​

Variabel Lokal

Variabel yang didefinisikan dalam fungsi bersifat lokal, sehingga hanya dapat diakses oleh kode didalam fungsi tersebut.

// kode diluar fungsi thisFunction() tidak dapat mengakses variabel courseName
function thisFunction() {
  var courseName = "PBP";
  // kode di dalam fungsi ini dapat mengakses variabel courseName
}

Variabel Global

Variabel yang didefinisikan DI LUAR fungsi bersifat global dan dapat diakses oleh kode lain dalam file JavaScript tersebut.

var courseName = "PBP";
function thisFunction() {
  // kode di dalam fungsi ini dapat mengakses variabel courseName
}

Auto Global Variable

Value yang di-assign pada variabel yang belum dideklarasikan otomatis menjadi global variablewalaupun variabel tersebut berada di dalam suatu fungsi.

thisFunction(); // function thisFunction() perlu dipanggil terlebih dahulu
console.log(courseName); // print "PBP" pada JavaScript console
function thisFunction() {
  courseName = "PBP";
}

Mengakses Variabel Global dari HTML

Anda dapat mengakses variabel yang berada dalam file JavaScript pada file HTML yang mengunduh file JavaScript tersebut.

...
<input type="text" onclick="this.value=courseName" />
...

...
var courseName = "PBP";
...

Function dan Event​

Function adalah sekumpulan grup dari kode-kode yang bisa dipanggil dimanapun pada bagian kode program (mirip dengan methodpada Java). Hal ini mengurangi redundansi kode yang ada (mengurangi kode-kode yang dapat sama berulang-ulang). Selain itu, function pada JavaScript sangat berguna untuk memudahkan elemen pemanggilan secara dinamis. Function dapat dipanggil sesama function) dan dapat juga dipanggil karena _event(akan dijelaskan di bawah). Sebagai contoh, berikut kode yang terdapat pada index.html.

...
<input type="button" value="magicButton" id="magicButton" onclick="hooray();" />
...

Kemudian berikut adalah kode pada javascript.js.

...
function hooray(){
    alert("Yahoo!");
}
...

Apabila magicButton ditekan, maka fungsi onclick akan menjalankan function hooray()pada javascript.js, lalu muncul alert sesuai yang sudah di-assign sebelumnya.

Kode onclick sebenarnya adalah salah satu contoh kemampuan JavaScript yang disebut event. Event adalah kemampuan JavaScript untuk membuat sebuah situs web dinamis. Maksud dari onclick adalah penanda apa yang akan dilakukan JavaScript jika elemen tersebut ditekan. Selain itu, event biasanya diberikan sebuah fungsi yang berguna sebagai perintah-perintah untuk JavaScript. Selain itu, banyak contoh-contoh event lainnya seperti onchange, onmouseover, onmouseout, dan lain sebagainya yang bisa kalian baca pada tautanini.

JavaScript HTML & CSS DOM​

HTML DOM

HTML DOM (Document Object Model) adalah standar bagaimana mengubah, mengambil, dan menghapus HTML elements. HTML DOM dapat diakses melalui JavaScript atau dengan bahasa pemrograman lainnya. Detail lengkapnya dapat dilihat di sini.

Berikut contoh implementasinya.

...     
<div>
  <p onclick="myFunction()" id="demo">Example of HTML DOM</p>
      
</div>
...

...
    function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
    }
...

CSS DOM

Sama dengan HTML DOM, CSS DOM dapat mengubah CSS secara dinamis melalui JavaScript. Detail lengkapnya dapat dilihat di sini.

Berikut adalah contohnya.

index.html

...
<p id="blueText" onclick="changeColor()">Click me v2</p>
...

javascript.js

...
function changeColor(){
    document.getElementById("blueText").style.color="blue";
}
...

Pengenalan AJAX​

AJAX merupakan singkatan dari Asynchronous JavaScript And XML.

AJAX bukanlah sebuah bahasa pemrograman. AJAX menggunakan browser untuk meminta data dari web server dan JavaScript serta HTML DOM untuk menampilkan data. AJAX dapat menggunakan XML untuk mengirim data tetapi dapat juga menggunakan teks ataupun JSON. AJAX membuat halaman web memperbarui data secara asinkronus dengan mengirimkan data ke server di balik layar, artinya kita dapat memperbarui sebagian elemen data pada halaman tanpa harus me-reload keseluruhan halaman.

Berikut ini adalah cara kerja AJAX.

1. Sebuah event terjadi pada halaman web (contohnya tombol submit data ditekan)
2. Sebuah XMLHttpRequestobject dibuat oleh JavaScript
3. XMLHttpRequest objectmengirimkan request ke server
4. Server memproses requesttersebut
5. Server mengembalikan response kembali kepada halaman web
6. Response dibaca oleh JavaScript
7. Aksi berikutnya akan dipicu oleh JavaScript sesuai dengan langkah yang dibuat (contohnya memperbarui data di halaman tersebut)

Anda bisa menggunakan jQueryuntuk melakukan AJAX. JQuery adalah library JavaScript yang dibuat untuk mempermudah akses ke beberapa Core API yang disediakan oleh browser. Berikut ini adalah contoh penggunaan JQuery dalam melakukan pemanggilan AJAX.

Selain itu, kalian juga dapat melakukan AJAX di browser modern dengan menggunakan fungsi fetch() yang diberikan oleh JavaScript. Penggunaan fetch() untuk melakukan pemanggilan AJAX dapat dilihat di tautan berikut ini: https://www.w3schools.com/jsref/api_fetch.asp

Tutorial​

Anda diminta untuk menambahkan fungsionalitas AJAX ke projek wishlist yang sudah dibuat pada Tutorial 1.

•  Buatlah templat baru bernama wishlist_ajax.htmldengan isi yang sama seperti wishlist.html
•  Buat view baru yang mengarah ke halaman wishlist_ajax.html. Tambahkan pula path/wishlist/ajax untuk mengakses view tersebut.
•  Implementasikan AJAX pada halaman wishlist_ajax.html
  •  Lakukan pengambilan seluruh data wishlistdengan menggunakan AJAX GET. Anda dapat menggunakan endpoint JSON yang telah dibuat pada Lab 2 sebagai sumber data.
  •  Buatlah form untuk menambahkan BarangWishlist dengan menggunakan AJAX POST di page yang sama dengan wishlist_ajax.html.
    •  Buatlah view baru yang menerima data dari form dan menambahkan BarangWishlist baru ke database.
    •  Tambahkan path/wishlist/ajax/submit yang mengarah ke view yang telah Anda buat.
    •  Gunakan jQueryatau fetch() untuk melakukan submisi data form secara asinkronus ke pathyang telah dibuat.
    •  Lakukan refreshBarangWishlist pada tabel secara asinkronus untuk menampilkan barang yang ditambahkan tanpa reload seluruh halaman.

Extra Information: Web Storage​

Dengan penyimpanan lokal, aplikasi web dapat menyimpan data secara lokal dalam browser pengguna. Hal ini berguna apabila anda menggunakan framework front-end seperti React ataupun Vue, karena kemampuan penggunaan cookies pada framework-framework tersebut terbatas. Sebelum HTML5, data aplikasi harus disimpan dalam cookies (termasuk dalam setiap permintaan server). Penyimpanan lokal bersifat lebih aman dan sejumlah besar data dapat disimpan secara lokal tanpa mempengaruhi kinerja situs web. Tidak seperti cookies, batas penyimpanan jauh lebih besar (setidaknya 5MB) dan informasi yang disimpan tidak pernah ditransfer ke server. Penyimpanan lokal adalah per asal (per domain dan protocol). Semua halaman (dari satu asal) dapat menyimpan dan mengakses data yang sama.

Terdapat 2 cara menyimpan data menggunakan web storage.

• window.localStorage - menyimpan data tanpa tanggal kadaluarsa

• window.sessionStorage - menyimpan data untuk satu session (data hilang ketika tab browser ditutup)

localStorage Object

Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.

Berikut adalah contoh implementasinya.

index.html

...
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>
  Close the browser tab (or window), and try again,
  and the counter will continue to count (is not reset).
</p>
...

javascript.js

...
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
...

Apabila halaman tersebut dijalankan, ketika tombol ditekan maka terhitung jumlah click akan bertambah. Ketika browser ditutup dan kita membuka kembali halaman sebelumnya, dapat dilihat bahwa perhitungan jumlah clickakan dilanjutkan dari yang sebelumnya.

sessionStorage Object

Objek sessionStorage bekerja dengan cara yang mirip dengan localStorage (untuk mencoba sessionStorage, silakan gunakan kode sebelumnya namun ganti objek localStoragedengan sessionStorage). Namun apabila browser ditutup dan halaman sebelumnya dibuka kembali, click count akan dimulai kembali dari 0.

Untuk membaca lebih lanut mengenai HTML5 WebStorage, silakan baca referensi berikut:HTML5 WebStorage.

Referensi​

1. JavaScript
2. jQuery
3. PBP-2017 Lab 6
4. PBP-2021 Lab 5
5. TheCatAPI

Sedangkan untuk arti dari 11

11 Konsep JavaScript Yang Harus Diketahui Setiap Pengembang Web untuk Meningkatkan Keterampilan Mereka

Tidak ada cara untuk menguasai JavaScript tanpa mengetahui konsep-konsep ini.

Setiap pengembang JavaScript harus memahami konsep dasar dari bahasa yang kompleks ini.

Konsep di bawah ini tidak semuanya, tetapi ini adalah konsep dasar umum yang perlu Anda ketahui untuk mengambil langkah maju.

Mari selami lebih dalam.

1. IIFE

Ini adalah singkatan dari Immediately Invoked Function Expression. Ini adalah fungsi yang dipanggil segera setelah dibuat.

Ini adalah fungsi yang dipanggil segera setelah dibuat.

(() => console.log(‘Hello world’))();

Saat kode dijalankan, konsol akan segera mencatat Hello world .

Alasan menggunakan IIFE adalah untuk melindungi aksesibilitas variabel. Variabel yang ditentukan dalam IIFE tidak dapat diakses dari luar. Itulah cara menulis kode yang dapat dipelihara dan mencegah sumber Anda menjadi berantakan.

2. MVC Structure

Tidak hanya di JavaScript, tetapi struktur ini digunakan di hampir semua bahasa pemrograman. Jauh dari nama MVC, itu adalah konsep populer untuk mengatur kode Anda ke dalam lapisan yang berbeda seperti data, tampilan, dan logika dan memperlakukannya secara terpisah.

Sebagai sebuah proyek yang menjadi besar, Anda memerlukan struktur untuk memperbesarnya tanpa meletakkan kepala Anda ke dinding. MVC adalah salah satu yang terbaik untuk diikuti sejak awal untuk rencana jangka panjang. Di beberapa titik di masa mendatang saat menambahkan fitur baru atau menyelidiki bug, Anda akan berterima kasih kepada diri sendiri karena telah meluangkan waktu untuk mengimplementasikan MVC di masa lalu.

3. Closure

Kami menggunakan konsep ini ketika berbicara tentang fungsi dalam yang selalu memiliki akses ke variabel dan parameter dari fungsi luarnya, bahkan setelah fungsi luar kembali.

Closure memungkinkan Anda memberikan aksesibilitas ke data di dalam fungsi tanpa mengubahnya secara langsung. Dengan cara ini, Anda dapat melindungi kode Anda sambil memberi orang lain kemampuan untuk memperluasnya. Terutama saat Anda perpustakaan umum.

const sayHelloTo = name => {
  let message = ‘Hello ‘ + name;
  return () => console.log(message);
}const sayHelloToAmy = sayHelloTo(‘Amy’);
sayHelloToAmy(); // Hello Amy

4. Async/await

Async / await memungkinkan Anda untuk bekerja dengan pemrosesan asinkron. Anda biasanya termasuk dalam tugas asynchronous saat berurusan dengan API panggilan. Data harus diambil sepenuhnya sebelum muncul di tampilan.

Apa yang membuat saya puas dengan menggunakan async / await adalah saya bisa menyingkirkan callback. Jika Anda seperti saya, Anda tidak suka kode bersarang. Itu membuat kode Anda jelek dan kurang dapat dipelihara.

Lihat contoh di bawah untuk penggunaan async / await:

const displayData = async () => {
  const data = await fetch(‘https://api.github.com/repositories');
  const jsonData = await data.json();
  console.log(jsonData);
};displayData();

5. Scope

Ada dua jenis cakupan di JavaScript. Ruang lingkup lokal dan global. Anda dapat membayangkan ruang lingkup variabel adalah sapi yang diikat ke tiang dengan tali. Ia hanya bisa bergerak dalam area terbatas, tergantung dari panjang talinya.

Dengan metafora tersebut, variabel lokalnya seperti sapi yang diikat dengan tali pendek dan yang global seperti sapi tanpa tali sama sekali.

Sebagai contoh:

// Global scope
const globalCow = ‘global cow’;const showCow = () => {
  const localCow = ‘local cow’;
  return globalCow;
};const clonedCow = globalCow;const mixedCow = globalCow + localCow; // error: Uncaught ReferenceError: localCow is not defined

Seperti yang Anda lihat, variabel globalCow dapat digunakan di mana saja bahkan dalam konteks lokal fungsi showCow . Tetapi Anda tidak dapat menggunakan variabel localCow di luar fungsi showCow karena itu didefinisikan secara lokal.

6. Value vs Reference Types

Saat Anda menetapkan nilai ke variabel, tidak sesederhana itu untuk hanya menetapkan nilai. Anda perlu memahami apakah itu nilai atau referensi aktual, jika tidak, Anda mungkin mengubah nilai secara tidak sengaja.

Ceritanya mudah jika Anda menetapkan tipe primitif seperti string, angka, atau boolean. Itu adalah nilai-nilai aktual.

Sedikit lebih kompleks jika Anda menetapkan objek, array, atau fungsi. Kali ini, variabel tidak akan menyimpan nilai sebenarnya tetapi mengacu pada nilai aktual di memori.

Contoh:

let num1 = 1;
let num2 = num1;// Changing num2’s value does not change num1’s value
num2 = 4;
console.log(num1); // 1
console.log(num2); // 4let arr1 = [‘Amy’, ‘John’];
let arr2 = arr1;// Changing elements’ value in arr2 leads to changing elements’ value in arr1
arr2[0] = ‘Jane’;
console.log(arr1); // [“Jane”, “John”]
console.log(arr2); // [“Jane”, “John”]

7. Callback

Dalam JavaScript, fungsi panggilan balik adalah fungsi yang dijalankan setelah fungsi lain dipanggil. Anda dapat meneruskan fungsi callback sebagai parameter ke fungsi lain.

Jadi mengapa kami menggunakan panggilan balik? Biasanya, kode yang kita tulis berjalan secara berurutan dari atas ke bawah. Namun, dalam beberapa kasus, ada tugas yang harus diselesaikan sebelum menjalankan tugas lainnya. Ini adalah saat callback berguna.

const fetchUsers = callback => {
  setTimeout(() => {
    let response = ‘[{name: “Amy”}, {name: “John”}]’;
    callback(response);
  }, 500);
};const showUsers = users => console.log(users);
fetchUsers(showUsers);

Pada contoh di atas, kita memanggil fungsi fetchUsers dan meneruskan fungsi callback showUsers sebagai parameter. Ketika semua data terisi penuh, showUsers akan menampilkannya di layar.

8. Prototype

Setiap kali kita membuat fungsi atau objek di JavaScript, properti prototipe akan ditambahkan di dalamnya. Prototipe adalah objek yang terkait dengan fungsi dan objek secara default, di mana kita dapat melampirkan properti tambahan yang dapat diwarisi oleh objek lain.

Contoh:

function Person() {
  this.name = ‘Amy’;
  this.age = 28;
}Person.prototype.job = ‘Programmer’;
Person.prototype.showName = function() {
  console.log(‘My name is ‘ + this.name);
}let person = new Person();
person.showName(); // My name is Amy

9. Class

Sebelum ES6, tidak ada kelas dalam JavaScript. Anda hanya dapat mendekati konsep kelas serupa secara fungsional.

function Book(title) {
  this.title = title;
}Book.prototype.showTitle = function() {
  console.log(this.title);
};let book = new Book(‘JavaScript’);
book.showTitle(); // JavaScript

Di ES6, Anda dapat membuat kelas yang sebenarnya seperti latar belakang bahasa berbasis kelas:

class Book {
  constructor(title) {
    this.title = title;
  }  showBook() {
    console.log(this.title);
  }
}let book = new Book(‘ES6’);
book.showBook();

Ini nyaman karena menyatukan beberapa cara membuat kelas menjadi satu.

10. Destructing

Ini cara yang bersih untuk mengekstrak properti dari objek .

Penggunaan dasar:

const person = {
  name: ‘Amy’,
  age: 28
};let { name, age } = person;
console.log(name); // Amy
console.log(age); // 28

Anda dapat mempertahankan variabel tetap sama dengan nama properti seperti di atas atau menentukan yang baru:

let { name: newName, age: newAge } = person;console.log(newName); // Amy
console.log(newAge); // 28

11. Spread Operator

Yang ini akan memberi Anda akses ke bagian dalam objek yang dapat berulang. Cukup bicara, ini adalah cara cepat dan ringkas untuk menambahkan item ke array, menggabungkan objek, atau menarik item individu keluar dari array lalu meneruskannya ke fungsi.

// Combining Arrays
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = […arr1, …arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]// Combining Objects
let obj1 = {
  name: ‘Amy’,
  age: 28
};let obj2 = {
  job: ‘programmer’
};let obj3 = { …obj1, …obj2 };console.log(obj3); // {name: “Amy”, age: 28, job: “programmer”}// Spreading out an array and pass it to a function
const sum = (…arr) => {
  const length = arr.length;
  let sum = 0;  for (let i = 0; i < length; i++) {
    sum += arr[i];
  }  return sum;
};let arr = [3, 5, 3, 2, 1];
console.log(sum(…arr)); // 14
console.log(sum(3, 5, 4, 1)); // 13

Kesimpulan

Apakah Anda memahami sepenuhnya semua konsep di atas? Jika tidak, inilah saatnya untuk memeriksa semuanya dan bersiaplah untuk membawa keterampilan Anda ke tingkat berikutnya.

Apakah saya melewatkan sesuatu? Silakan tinggalkan komentar untuk memberi tahu saya.

Selamat, Anda telah menyelesaikan tutorial 5 + 11 JS terakhir! Jangan lupa melakukan add, commit, push dengan git.