DEV Community: Syafiq Rizky Fauzi

aku idn

Syafiq Rizky Fauzi — Thu, 03 Oct 2024 12:57:01 +0000

#[computed]
public function index()
{
   return modelJenjang::paginate(5);
}

Apa itu Higher Order Function ?

Syafiq Rizky Fauzi — Sat, 19 Mar 2022 02:06:30 +0000

Bismillah,

Halo teman-teman semua, kembali lagi dengan saya Syafiq. Di sini saya ingin menuliskan apa yang telah saya pelajari tentang EcmaScript 6. Saya ingin mendokumentasikan hasil belajar saya di platform ini

Pada artikel ini saya ingin membicarakan sesuatu lagi di ES6, yaitu sesuatu yang bernama Higher Order Function. Mari kita bahas satu per satu.

Menurut https://eloquentjavascript.net higher order function adalah function yang beroperasi pada function yang lain. Baik itu digunakan dalam argument maupun sebagai return value

Di dalam javascript sebuah function di definisikan sebagai sebuah object https://sitepoint.com

Dibawah adalah sebuah contoh sederhana serta penjelasan tentang higher order function di dalam sebuah codingan javascript.


//Function yang berisi sebuah function == Higher order function

function kerjakanTugas(mataKuliah, selesai){
        console.log(`Mulai mengerjakan tugas ${mataKuliah}...`);
        selesai();
    }

// Function sebagai argument pada sebuah function == callback
function selesai(){
        alert(`Selesai mengerjakan tugas !`);
    }

//Dipanggil
kerjakanTugas(`Pemprograman Web`, selesai);

Kenapa kita perlu untuk membuat sebuah higher order function ?

Ada beberapa alasan kenapa kita harus membuat sebuah higher order function di codingan kita, diantaranya :

Abstraksi

Yaitu membuat sebuah code menjadi lebih sederhana

Karena ketika kita membuat sebuah function artinya kita telah menyembunyikan sebuah kerumitan

Semakin besar sebuah program, semakin tinggi kompleksitasnya, semakin membingungkan programmernya*
https://eloquentjavascript.net


 //simple namun tidak dinamis

    for(let i = 0; i < 10; i++){
        console.log(i)
    }

    //Agak rumit namun dinamis

    function repeatLog(n){
        for(let i = 0; i < n; i++){
        console.log(i)
        }
    }

    repeatLog(10);

    function repeat(n, action){
        for(let i = 0; i < n; i++){
        action(i)
        }
    }

    repeat(10, console.log);
    repeat(10, alert);

Ketika kita menggunakan paradigma Functional programming ini dengan benar itu akan membuat program kita lebih efektif, aman serta efisien

Mungkin catatan tentang higher order function cukup segitu.
Terima kasih buat yang sudah baca :)

Template Literals || ES6

Syafiq Rizky Fauzi — Thu, 06 Jan 2022 07:14:00 +0000

Bismillah,

Hello all friends, back again with me Syafiq. Here I want to write down what I have learned about EcmaScript 6. I want to document my learning results in this platform

In this article I want to talk about something new again in ES6, namely something called Template Literals. Let's discuss them one by one.

What is Template Literals ?

So before there was a literal template in javascript developers found it difficult to combine a string and a string or commonly called string concatination using the primitive way, namely using the (+) sign, take a look at the example below:

// Prior to ES6 string concatenation in Js using operator (+)
// example
const user = {
    firstName: "Syafiq",
    lastName: " Rizky",
    age: 18
}

console.log("Name : " + user.firstName + "" + user.lastName + ", Age : " + user.age);

See how complicated it is to write that way?

Indeed, if it is only a little value, it is easy for us to write it, but if it is long then it will make us complicated ourselves as developers. So in ES6 came a simple but powerful way to overcome this, namely with a function called template literals.

Maybe you ask what is template literals?

Template literals is a new function in ES6 where we can insert an expression into a string. Let's compare how fast and effective it is when we write code using template literals or primitive ways.

Let's see the difference in the code below

// Prior to ES6 string concatenation in Js using operator (+)
// example
const user = {
    firstName: "Syafiq",
    lastName: " Rizky Fauzi",
    age: 18
}

console.log("Name : " + user.firstName + "" + user.lastName + ", age : " + user.age);

// template Literal || ES6
// Using backtick(``) to shorten string concatenation
const userNew = {
    firstName: "Syafiq",
    lastName: " Rizky Fauzi",
    age: 18
}

console.log(`Name : ${userNew.firstName} ${userNew.lastName}, age ${userNew.age}`);

Now, there is a very big difference between string concatination using the primitive method and the modern method. When we use the modern method, it looks cleaner code and easier to read, whereas if we use the primitive method it is quite difficult to read.

Then what should I use in my coding?

For that I give you the choice to choose the primitive or modern way, it's up to you. But my suggestion is to use template literals because in addition to making our code cleaner, it certainly saves writing code to be shorter but denser.

Hope it helps!

Like this post ?

You can follow me, like and share this article
You can also follow my github account : Syafiq's github

Thank for reading !

Variabels Declaration || ES6

Syafiq Rizky Fauzi — Sat, 01 Jan 2022 00:59:28 +0000

Bismillah,

Hello all friends, My name is Syafiq person who enthusiastic about web programming. Here I want to write down what I have learned about EcmaScript 6. I want to document my learning results in this dev.to.

1. var

In this article, I want to talk about how to declare variables in EcmaScript 6. Okay, let's start…
We know before the ES6 update when we will declare a variable we use the var keyword but there are many problems when we use var for example when hoisting in javascript. Maybe you ask what is hosting? hoisting is lifting a var variable to the top when it will be executed even though we declare it below it. Confused ? Let's explain with the code below:

function makeIceCream(isCold) {
    // var iceCream; => if you use var then the variable will be stored above first
    // before execution
    if (isCold) {
        var iceCream = "this is chocolate ice Cream";
    } else {
        var iceCream = "this is grape ice Cream";
    }

    return iceCream;
}

console.log(makeTea(false));

Shouldn't this produce an error? but why does it display the output "This is grape ice cream" ? because of the hoisting earlier. Behind the scenes the javascript creates var iceCream = false; above the if and that's what is called hoisting friends. It's a little tricky to understand the concept of hoisting, especially for me, a beginner, but with the example above, I hope you can understand. And because hoisting is not a lot of programmers who have difficulty understanding the hoisting, so to overcome this problem in ES6 a new variable declaration is made, namely let & const.

After discussing about the var variable and its hoisting, let's move on to declaring the latest version of variables in ES6, using let & const

2. Let

What is let in javascript ? let in javascript is a new variable declaration syntax that is in the ES6 version. Let's go straight to learning how to make this let useful in our program? see the code below :

function getIceCreams() {
    iceCream = "this is chocolate ice cream";
    console.log(iceCream);
    let iceCream;
}

function getIceCream() {
    let iceCream;
    iceCream = "this is chocolate ice cream";
    console.log(iceCream);
}

// outputnya 

getIceCreams();
// ReferenceError: iceCream is not defined
getIceCream();
// this is chocolate ice cream

The question is why the code that **getIceCreams() **produces an error while the code that **getIceCream() **does not produce an error? yes the problem lies in whether the let variable is placed under or not, that's the problem. Have a look at the program where the let iceCream is above or under the variable declaration? Although it looks simple but can cause bugs if we do not understand this well.

3. const

Then what is const ? const is similar to let but the difference is that it cannot be changed again after we give it a value, meaning that the value in const absolutely cannot be changed, whereas let can be changed freely by us. For example as below

// Let
let name = "syafiq";
name = "Rizky Fauzi";

// Const
const age = 19;
age = 20;

console.log(name);
// name Rizky Fauzi
console.log(umur);
// TypeError: Assignment to constant variable.

Variables that use let we can change while variables that use const after we provide a value we can't change it anymore

So which one to use between let and const ? The difference between the two variable declarations lies in whether or not the contents of our variables can be changed.
Let => is used if you want to update the variable value again and again(not default)
const=> is used if you don't want to update the value of the variable(default)

Hope that helps!

Like the post?

Follow me on github : @syafiq1331

Thank for reading !