Lanjutan Topik Belajar Javascript
Belajar Javascript Lanjutan dari Dasar – function hal yang umum digunakan di dalam javascript untuk membuat sebuah program sebagai potongan kode yang dapat digunakan kembali dengan mudah. Tidak perlu menuliskan kembali kode tersebut, yang mana function bisa dibuat kode dan dikumpulkan yang nanti digunakan lebih awal atau sering digunakan sesuai dengan kebutuhan. Function dapat diambil kapan saja. Berapa proses tersebut bisa sering digunakan lebih mudahnya anda definisikan function dibandingkan dengan menuliskan ulang function tersebut.
Daftar Isi Konten
+++++ Function+++++
Misal membuat beberapa kali dengan melempar dadu dengan menggunakan pembulatan kebawah dengan let
lempar dadu = Math.floor(Math.random() *6) +1;
console.log (lempar dadu);
mencoba membuat khusus function untuk melempar dadu
Function LemparDadu(){
console.log (Math.floor(Math.random() *6) +1;);
}Untuk mendefiniskan menggunakan keyword dan menjalankan function
Function namaFungsi (){
//lakukan proses yang ingin dijalankan ketika fungsi tersebut dipanggil
}
function nyanyi(){
console.log ('cek...');
console.log ('do,re, mi');
}untuk memanggil fungsi dengan cara memanggil definisi namanya dengan menambahkan ()
contohnya sebagai berikut:
nyanyi()
++++++++ Parameter dan Argumen++++
Keduanya hampir sama akan tetapi tidak sama dan keduanya ada dalam function contohnya
function greet(name: disebut dengan parameter){
console.log ('Hi, ${name}');
}
greet('Jason: adalah argumennya')
function selamatPagi(name){
console.log ('halo, ${name}. Selamat pagi');
}
selamatPagi('Andi');++++ Multipel Parameter dan Argumen
argument dan paramaeter bisa ditambahkan sebanyak mungkin, dan keduanya adalah inputan
function jumlahkan (a,b){
const total = a + b ;
console.log (total);
}
jumlahkan(2,3);++++ Return +++++
Statement return ini digunakan untuk mengakhiri sebuah proses dalam fungsi dan akan memberikan nilai yang telah didefiniskan saat fungsi tersebut dipanggil
untuk menyimpan function pada variabel bisa menggunakan return
function jumlahkan (a + b){
const total = a + b ;
console.log (total);
return total;
}
jumlahkan(2,3);sehingga bisa dipanggil dengan menggunakan variabel
const hasil = jumlahkan (1,2); console.log (hasil);
function jumlahkan ( a + b){
if ( typeof a !== 'number' || typeof b !=='number'){
return false;
}
return a + b;
}+++++ Scope ++++
scope memiliki nilai bisa diakses variable yang sesuai dengan lokasi yang dimiliki atau yang dideklarasikan apakah di dalam function ataupun diluar function contohnya jika mendefinisikan sebuah fungsi dengan nama Redhat
let linux = 'RedHat'
function easyLinux (){
let linux = 'Debian'
linux; //Debian
}
linux; //RedHat
++++ Blocked Scope Variabel +++
untuk melakukan blocked wilayah cakupannya bisa langsung
let tinggi = 8;
if (tinggi > 5) {
let lebar = 10;
// console.log (lebar);
}
// console.log (tinggi);
console.log (lebar);scope yang bisa dipanggil adalah yang ada di dalam kurung kurawal, untuk yang diluar tidak bisa definisikan
const dan let dedefinisikan di dalam kurung kurawal dan tidak bisa dipanggil diluar
Namun jika menggunakan Var maka bisa dipanggil diluar berbahaya jika seandainya dipanggil bisa difenisikan ditempat lain dan tidak ada blocking scope dan lebih disarankan dengan const dan let
+++++ Lexical Scope +++++
function lamarKerja (){
const jabatan = ' programer'
function lebihDalam(){
function orangDalam(){
let kenalan = 'Orang dalam bisa memasukan ${jabatan}';
console.log (kenalan);
}
orangDalam()
}
lebihDalam();
}+++++ Function Expression +++++
function perpangkatan(){
return nilai * nilai ;
}
let hasil = perpangkatan (5);
const hasilPerpangkatan = function (nilai){
return nilai * nilai;
}
hasilPerpangkatan(10);
const hasilPerpangkatan = function (nilai, pembanding){
return nilai * pembanding;
}
hasilPerpangkatan(10,2);+++++Function sebagai argument+++++
function duaKali(func){
func()
func()
}
Function LemparDadu(){
const hasil = Math.floor( Math.random() * 6) + 1;
console.log (hasil);
}
duaKali(LemparDadu);++++ Function Bernilai balik Function +++
Melakukan return dalam function yang akan disimpan dalam suatu variabel
Function hasilnyaAdalahFunction () {
const rand = Math.random();
if ( rand > 0.10){
return function (){
console.log ('Selamat, angkanya lebih besar');
};
} else {
return function (){
console.log ('maaf, mungkin bisa coba lagi');
}
}
}
const hasil = hasilnyaAdalahFunction();
hasil()++++ Definisi Sebuah Method +++
Methode adalah suatu function, yang bisa diberikan argumen, paramater, atau nilai (object property)
kapan dibuat sebuah metode dalam sebuah objek? prperti yang dimiliki sebuah function Math. memiliki properti sebagai contoh metodenya adalah Random
function myFun (){ //function
console.log ('Hi');
return 'helo';
}
const myMath = { //object
perkalian: function (x,y) { //method
return x * y;
}
}+++ this +++
this adalah sebuah keyword untuk memanggil suatu properti pada object yang sama untuk mendapatkan nilai
const saya ={
nama : 'topik',
hobi : 'nulis',
kenalan: function (){
return 'hi, saya $(this.nama}. Hobi saya ${this.hobi}'
}
}+++ Try and Catch adalah Penyelamat +++
dua blok yang berbeda yang mana try proses yang digunakan untuk mencoba program logik, jika ada yang salah catch akan melakukan pesan erornya.
try {
saya.kenalan()
} catch(eror) {
console.log ('eror!!');
}
saya.kenalan ();
console.log ('setelah ada proses try and catch');+++ Foreach Method ++++
forEach dapat digunakan untuk callback function yang berarti dapat memanggil sebuah fungsi sebanyak jumlah dari ellemnt array yang dimiliki
const angka = [ 1,2,3,4,5,6,7,8,9]
function print (element){
console.log (element);
}
print (angka [2]);
print (angka [8]);masalahnya hanya kita panggil satu PermissionStatus. kita bisa memanggil banyak dengan menggunakan keyword foreach
angka.foreach (print);
Masalahnya bukan ini yang akan dipraktekan melainkan langsung menggunakan kode function tersebut
const angka = [ 1,2,3,4,5,6,7,8,9]
angka.forEach (function (el)){
if( el % 2 === 0) {
console.log (el);
}
};apakah angka diatas dalam array bisa habis dibagi dua dengan menggunakan fungsi diatas atau bisa disebut dengan call back function
const animes = [
{
title : ' Naruto',
rating : 90,
},
{
title : ' Dargon Balls',
rating : 80,
},
{
title : ' One Pieces',
rating : 70,
},
{
title : ' Ipin Upin',
rating : 60,
}
];
animes.forEach (function(anime)) {
console.log ('${anime.title} - ${anime.rating}');
}++++ Map Method ++++
Nilai baliknya adalah array baru yang sudah dimodifikasi melalui call bak function dari suatu array
const expression = [ 'rofl', 'lol', 'omg', 'ttyl']
const capExpression = expression.map ( function(exprs)){
return exprs.toUpperCase();
};
const angka = [ 1,2,3,4,5,6,7,8,9]
const angkaDouble = angka.map (function(num)){
return num * 2;
};++++ Arrow Function ++++
=> //ini adalah arrow function
// const perpangkatan = (x) => {
// return x * x;
// }
// function perpangkatan (x){
// return x * x;
// };
// const hasil = perpangkatan(5)
Ada juga dengan memakai
const hasil = perpangkatan (x){
return x * x;
};
const perpangkatan = (x) => {
return x * x;
}++++ Return Secara Implisit Dari Arrow Function ++++
untuk mendapatkan suatu nilai tidak usah memakai keyword return bisa saja menghapus return bisa menghasilkan nilai namun harus mengubah kurung kurawal dengan menggunakan tanda kurung Khususnya untuk mengeksekusi satu baris saja atau dengan kalimat yang lebih pendek dan lebih jauh sederhana. Berbeda dengan sintak yang lebih panjang bisa menggunakan kurung kurawal
const add = (a,b) => a + b atau juga bisa menggunakan tanda kurung biasa const random = () => ( Math.floor( Math.random()* 2) );
++++ Memahami Settimeout Dan Setinterval ++++
Settimeout Dan Setinterval merupakan sebuah call back function yang bukan berasal dari Array, fungsinya untuk memberikan waktu jeda dan melakukan perulangan setiap waktu yang ditentukan
setTimeout (() => {
//proses
}, 3000) //proses akan dieksekusi setiap 3 detikSetinterval (() => {
// proses
}, 2000) // akan melakukan proses secara berulang setiap 2 detikcontohnya
console.log (' halo...');
setTimeout (() => {
console.log ('masih disana gak?');
}, 5000);Setinterval (() =>{
console.log (math.random())
},2000);+++ Memiilh Data Tertentu Di Dalam Array Dengan Filter Method ++++
filter adalah suatu function yang akan mengembalikan nilai array lagi yang sudah dimanipulasi sesuai dengan kriteria yang ditetapkan misalnya
const angka =[ 1,2,3,4,5,6,7,8,9]
const ganjil = angka.filter (n =>{
return n % 2 === 1; // jika nilai n merupangkan angka ganjil maka
//callback function akan membuat array baru berisi angka ganjil dari kondisi diatas // [1,3,5,7,9]
})Bisa dimanfaatkan untuk memfilter sebuah anime dengan ratting yang bagus
const animes = [
{
title : ' Naruto',
rating : 90,
year : 2010,
},
{
title : ' Dargon Balls',
rating : 80,
year : 2011,
},
{
title : ' One Pieces',
rating : 70,
year : 2017,
},
{
title : ' Ipin Upin',
rating : 60,
year: 2020,
}
];const animeBagus = anime.filter ((animes) => anime.rating >= 85); const animeBaru = anime.filter((anime) => anime.year >= 2010);
Bisa menggunakan proses mapping setelah membuat filter
const judulAnimeBagus = animeBagus.map ((anime) => anime.title );
Bisa juga digabung dengan cara sebagai berikut
const judulAnimeBagus = anime.filter ((animes) => anime.rating >= 85) .map animeBagus.map ((anime) => anime.title );
++++ Menentukan Benar Atau Salah Pada Array Dengan Every Dan Some Method +++
every adalah suatu metodh yang akan mengembalikan nilai Boolean, true pada saat seluruh nilai yang ada pada suatu array memiliki kriteria yang StorageManager, false jika sebaliknya
const kataKata = [ 'kita', 'kamu', 'saya']
kata.every (kata => {
return kata.length ==== 4
}) //true
const examScore = [ 80,85,79,83,90,93,77];
const isGraduate = examScore.every ((score) => score >= 75)Jika some methode mirip dengan every akan tetapi lebih fleksible. Hasilnya akan true jika salah isi dari array memiliki kriteria yang sama. Dan hasilnya akan false jika sama selain tidak ada yang sesuai dengan kriteria.Ada
const kataKata = [ 'kita', 'kamu', 'saya']
kata.some(kata => {
return kata.length ==== 4
}) //true
const animes = [
{
title : ' Naruto',
rating : 90,
year : 2010,
},
{
title : ' Dargon Balls',
rating : 80,
year : 2011,
},
{
title : ' One Pieces',
rating : 70,
year : 2017,
},
{
title : ' Ipin Upin',
rating : 60,
year: 2020,
},
{
title : ' Hunter X Hunter',
rating : 65,
year: 2015,
}
];
const isAnimeListNew = anime.some ((anime) anime => anime.year > 2010);+++ Mendapatkan suatu nilai sesuai dengan kondisi dari sebuah array dengan reduce
Reduce melakukan proses sebanyak element miliki suatu array, nilai baliknya adalah single value
const subtotal = [ 1500, 20000, 4000, 1900,32000];
const total = subtotal.reduce ((currentTotal, SingleSubtotal) => {
return currentTotal + SingleSubtotal
})const examScore = [80, 85, 79, 83, 90, 93, 77];
const total = examScore.reduce((total, singleScore) => {
return total + singleScore;
});+++ Object This di dalam Arrow Function Mengarah pada Object Global Windows +++
const person = {
firstName : 'Topik',
lastName : 'Nugroho',
fullName : function (){
return '${this.firstName} ${this.lastName}';
},
};++++ Mengatur Default Value Pada Function
Default Value Parameter merupakan nilau yang digunakan saat fungsi dipanggil tapi tidak diberi nilai argumen yang diperlukan
function lemparDadu (sisi){
return Math.floor ((Math.random) * sisi ) + 1;
}function sapa(name ='user', msg ='selamat 'Bekerja){
console.log ('${name} ${msg}');}
++++ Spread operator pada Function +++
mengubah suatu array atau object atau bahkan string menjadi deret parameter untuk function
const angka = [ 1,2,3,4] Math.max (angka); //nan Math.max (...angka); menggunakan spread operator dengan menambah array atau objeknya dengan menambah titik tiga kali diawal
+++ Menggabungkan Nilai Array Dengan Array Lagi +++
merge array dengan spread operator atau menggabungkan suau array dengan array lagi dengan array lagi dengan memanfaatkan spreed operator
const angka = [ 1,2,3,4,5,6,7,8,9] const nama =['Andi', 'budi', 'caca', 'dedi', 'erna', 'fafa'] const campuran = [...angka, ...nama]
+++ Menggabungkan Property Object Dengan Object Lainnya +++
bisa menggunakan spread operator bedanya dengan array yaitu dengan menggunakan kurung kurawal
const user = {
nama : 'Topik',
email : '[email protected]'
}
const credential ={
password: 'password'
token: 'ujgdkah48i5o6'
}
const userBaru = [...user, ...credential]+++ Rest param +++
males ketik parameter yang panjang banget? pake aja spread operator
function sumAll (...nums){
let total = 0
for (let n of nums) total += n
return total
}
const sumAll = (...nums) =>{
return nums.reduce ((el) => total + el);
};+++ Bongkar Element Array Ke Masing-Masing Variabel Dengan Mudah-+++
Destructing atau unboxing versi array.
const peserta : ['Andi', 'budi', 'caca', 'dedi', 'erna', 'fafa'] const [ gold, silver, bronze, ...peserta] = nama;
+++ Bongkar Juga Properti Object Ke Masing-Masing Variabel +++
Destructing atau unboxing dari versi object
const user = {
nama : 'Topik',
email : '[email protected]'
}
const {nama,email} = user;++++++ Bongkar Properti Object Bisa Dilakukan Di Dalam Function ++++
destructing juga dapat digunakan untuk parameter pada function
const user = {
nama : 'Topik',
email : '[email protected]'
role: 'admin'
}
const userAndRole = ({nama,role}) => {
return '$nama $role';
};Penutup
Semoga dengan sedikit belajar tentang javascript lanjutan ini anda bisa mendapatkan secercah ilmu sehingga dapat anda gunakan nantinya. Kalau request tentang video akan kami sampaikan selepas nanti kami sudah belajar dan lulus terlebih dahulu menjadi sarjana program teknik informatika.
Tinggalkan Balasan