DEV Community: Azrul Aziz

Using @ts-check in regular JavaScript project

Azrul Aziz — Wed, 10 Feb 2021 18:13:18 +0000

Been diving deep into typescript recently so I figured I'd write some of the things that i find easy to play around with while exploring more about typescript. @ts-check is a good starting point.

What is @ts-check and why you should use it in your regular JavaScript files?

If you're using vs code as your editor you can get the benefit of type checking & error reporting even though your project is not written in typescript.

ts-check is a great feature we can take advantage of when working with regular JavaScript project because this tool will automatically analyze our files and help us catch mistakes during development. When we add ts-check to our files, typescript is activated on top of our JavaScript file and it will help look for errors and then notify us if there are issues within our code.

The easiest way to add ts-check to our code is by simply adding //@ts-check on the first line of our file.

// @ts-check

Here's an example of how it works: The code example below is not using ts-check and it is deliberately littered with errors.

let number = 1

const change = () => {
    number = 'test'
    addNumber()
}

for (let i = 0; i < number; i++) {
    nunber += i
}

number.map(num => console.log(num))

There's a lot of obvious error in the code above but our code editor is not showing it to us. It may be easy to go line by line and spot these errors in this small code example but imagine if we're working within a large codebase and we're under pressure to deliver a task, its normal to overlook simple error like this. Lots of time will be wasted because we will only discover much of these errors during runtime.

Modify the same code above a little bit by adding @ts-check:

// @ts-check
let number = 1

const change = () => {
    number = 'test' // Type 'string' is not assignable to type 'number'
    addNumber() // Cannot find name 'addNumber'.
}

for (let i = 0; i < number; i++) {
    nunber += i // Cannot find name 'nunber'. Did you mean 'number'?
}

number.map(num => console.log(num)) // Property 'map' does not exist on type 'number'.

By just adding @ts-check on the first line as shown above, our code editor will highlight every single line of code that contains an error without us having to run the code beforehand.

The good thing about this is that it will not just highlight which line is problematic. If we hover over the highlighted line, we'll get an explanation about the error so we can see what actually causes the problem.

The advantage of using @ts-check:

It help us check variety of errors such as normal typo, missing properties, invalid usage of method and many others.
It saves us a lot of time from scratching our heads looking for errors in our code.
It makes our code more robust by making sure we're not writing code that aren't making sense.
We don't need to migrate our project to typescript to benefit from this.

Using ts-check is a good way to start if you're not currently using typescript but planning to use it in the future. Its a great little tool that we can use without having to change any settings.

Checkout this link for more info on how to integrate ts-check in your project:
https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript

Scope

Azrul Aziz — Thu, 11 Jul 2019 08:55:54 +0000

Scope and some other things that I always forgot what is it about so I decided to write it down and hopefully it sticks in my brain.

Scope one-liner definition:

Scope is a rule that determines where a variable can be found and how it can be used.

Scope & Lexical Environment

Lexical environment plays a big part in determining a function scope and its outer environment.
Lexical environment basically means the place where the code physically sits. Its about where the code is written and what surrounds it.

Consider this:

function a() {
    let num = 1;
    b()
}

function b() {
    console.log(num) // 0
}

let num = 0;
a()

What will happen when b is invoked? It will log 0 as the value of num. This is because b sits on the global scope. It does not have any other outer environment. So it goes straight to global to look for a variable that does not exist within its own scope.

The outer environment of a function depends on where the functions sits lexically or in other word, where it is physically written.

Lets see an example:

function a() {
    let name = 'lily';

    function b() {
        console.log(name) // lily
    }

    b()
}

let name = 'zahra';
a()

Here b sits physically inside a. When b try to log the variable name, it doesnt found it in its own scope so it will refer to its lexical outer environment which is a. There it will found the variable name and use that instead.

Scope & Execution Context

Another way to think about scope is by looking at which execution context created or initialized the function. In the code above, b does not exist before the execution context for a starts. In contrast, a was created in the global execution context. The execution context determines where a function was created thus it automatically becomes that function's outer environment.

Block Scope

Block scope only applies when a variable is declared using let or const. Whenever a variable is declared inside a pair of curly braces, it will create a new scope for that variable.

let num = 2;
if (true) {
    let num = 1;
    console.log(num) // 1
}
console.log(num) // 2

In the code above, there are two variable defined with the same name but both holds different values. This is possible with block scoping only if we use let or const. If we use var instead, the first variable will be overwritten:

var num = 2;
if (true) {
    var num = 1;
    console.log(num) // 1
}
console.log(num) // 1

In essence, a variable can be on the global scope, function scope or the block scope. It is all determined by where it is created or where it physically sits.

React: useCallback hooks simple explanation

Azrul Aziz — Mon, 17 Jun 2019 03:26:26 +0000

useCallback(function, [dependecies])

useCallback is one of the new features introduced in the react hooks API. Personally the name is quite confusing because callback is usually referred to asynchronous functions, the function that we invoke whenever a certain operation has finished. useCallback however is used for a different purpose.

So what does it do? According to React official docs, it Returns a memoized callback. In simpler words, it returns a cached version of a function. Basically this hook is mainly use for performance reason (memory-wise).
How does it do that? lets see an example:

const [height, setHeight] = useState(100)
const [age, setAge] = useState(3)

const handleSetHeight = () => setHeight(height + 10)
const handleSetAge = () => setAge(age + 1)

We setup two useState hooks & declare two functions to handle state changes. This seems normal. The issue here is that everytime we invoke a function and re-render happens, a new instance of both of these functions will be created. Even if we invoke only one function, the instance of the other function will also be created. Imagine if there are more functions, how many instance have to be created during each re-render. Its redundant & causes performance issues.

useCallback helps in solving this issue. It will cache/memoized function that we pass to it. For example, lets rewrite both function above like this:

const handleSetHeight = useCallback(() => setHeight(height + 10), [height])
const handleSetAge = useCallback(() => setAge(age + 1), [age])

By doing this, whenever we invoke a function and re-render happens, a new function instance will only be created for that particular function that is being invoked. No new instance is created for the other function. The second argument passed to useCallback, the dependecies array plays a major part. A new function instance will only be generated if any value of the variable inside that array changes between re-rendering. If nothing changes, useCallback will just return the cached version of the function instance.

Basically this is what useCallback hook is used for. To prevent unnecessary operation and improve performance.

JavaScript: So class is a function?

Azrul Aziz — Thu, 13 Jun 2019 01:56:28 +0000

I have written a lot of class component using React. But I have never really understood class.
In this short post I will explore what class is fundamentally.

Lets go ahead & see one way to declare a class:

class User {}

Here we use a class declaration to declare a class called User. So what is class? is it a function? or is it an object? Lets test:

typeof(User) // "function"

Well class is actually a function!
If its a function, lets try to invoke it and see what happens.

User() //TypeError: class constructors must be invoked with |new|

Eror! What happened? Initially we saw that class is a function, but when we tried to execute it like a normal function, it throws an error saying class constructors must be invoked with |new|.

Classes are "special functions"

According to MDN Classes are "special functions". I went to look for more info and learned that class is actually used as a constructor function. A constructor function is a function that is used to construct an object. That's why the console throws an error about needing the new keyword. In order to invoke a constructor function, we must use the new keyword.

Lets see an example:

const lily = new User()

typeof(lily) // "object"

console.log(lily) // Object {}

We invoked the class using the new keyword and assign it to a variable named lily. When we evaluate the typeof lily, we got object as the result. The result from logging the value also returns an object. As mentioned above, constructor function generates an object.

Im only scratching the surface here. In the future post I will explore even further on what goes inside class and why to use class when we can just use a normal function as a constructor function to construct an object.

JavaScript: By Value Versus By Reference

Azrul Aziz — Sat, 25 May 2019 18:47:57 +0000

Why is knowing this topic important?

To understand what really happen when we assign values to a variable
To avoid potential bugs from occuring

In JavaScript, when we declare a variable and assign values to it, the underlying JavaScript engine will evaluate
the type of the given value and decide on how to put that value in the memory. There are two ways on how JavaScript put
that value into memory: by value & by reference.

By Value

First we need to know that all primitive type in JavaScript will be copied by value.
Primitive type in JavaScript are:

String
Number
Boolean
null
undefined

So what does "by value" mean? 😕 Lets review this example:

// Declare a variable and pass a primitive value to it
let favoriteBand = "Underoath"

// Create another variable and pass favoriteBand as the value
let sameButDifferent  = favoriteBand

// Log the result
console.log(favoriteBand) // "Underoath"
console.log(sameButDifferent) // "Underoath"

First we declared a variable called favoriteBand and passes the string "Underoath" as its value which is a primitive type.
When we do this, JavaScript creates a new memory location for this variable's value.
Then, we declared another variable called sameButDifferent and passes the variable favoriteBand as its value.
When we log both variable, they both returns the string "Underoath" as their value.

Its important to note here that even though both variable logs the same outcome, both of them sits in completely different memory location. When we declared the variable sameButDifferent, the JavaScript engine creates a totally separate memory location for this variable's value to sit on.

Now if we try to change one value from any variable:

// Reassign the value for the variable favoriteBand
let favoriteBand = "Saosin"

console.log(favoriteBand) // "Saosin"
console.log(sameButDifferent) // "Underoath"

We can see it does not reflect the other because both of them are essentially not the same. So, if we declare a variable and set its value to be number, boolean or any primitive type, this "by value" rule will apply to them.

By Reference

In contrast, all Objects in JavaScript will be copied by reference.

Objects in JavaScript includes:

Object (obviously)
Array
Function

Lets see what "by reference" means. Consider the example below:

// Declare a variable and assign an object to it
let firstAlbum = {
    single: 'In Division'
}

// Create another variable and pass firstAlbum as the value
let secondAlbum = firstAlbum

// Log the result
console.log(firstAlbum) // {single: 'In Division'}
console.log(secondAlbum) // {single: 'In Division'}

Lets go through this code. First we declared a variable called firstAlbum and passes an
object to it. The JavaScript engine now will create a new memory location for this object
to sit on.
Then we declared another variable secondAlbum and passes the variable firstAlbum
as its value. Now JavaScript will see that the value we pass to secondAlbum contains an object that already exist in the memory.
Instead of creating a new memory location, It will simply point this variable to the same object
created for variable firstAlbum.

Now lets change one value of a property inside that object:

// reassign a value inside the Object
secondAlbum.single = 'Paperlung'

// log the result
console.log(firstAlbum) // {single: 'Paperlung'}
console.log(secondAlbum) // {single: 'Paperlung'}

When we log the variables, it shows that the changes is reflected on both variable even if we only make
the change on a single variable. This is because they both are essentially the same object and refer to the same memory location.

Here's another example:

// Pass object as parameters
function changeSingle(obj) {
    obj.single = 'Seven Years';
}

// Call the function
changeSingle(firstAlbum);

// log the result for both variables
console.log(firstAlbum); // {single: 'Seven Years'}
console.log(secondAlbum); // {single: 'Seven Years'}

We pass the object as a parameter inside a function, then we change a value of a property inside that object.
That change is reflected on both variables because we are still changing the same object.

Lastly, lets assign the variable firstAlbum with a completely new object:

// reassign a new object to the firstAlbum variable
firstAlbum = {
    producer: "Mark Goldman"
}

// log the result for both variables
console.log(firstAlbum); // {producer: 'Mark Goldman'}
console.log(secondAlbum); // {single: 'Seven Years'}

Now JavaScript sees that a new object is created so it will assign another memory location specifically for this object. This same rule applies to functions and arrays.

To simplify, whenever we create a primitive type and pass it around it will always create a new value inside the memory. When we create an object and pass it around, it will always refer to the same memory location if it already exist.