DEV Community: ikbal arslan

Javascript Equality Check

ikbal arslan — Mon, 27 May 2024 18:58:19 +0000

In javascript equality sign= is used for assigning variables so we use something different to check equality.

In javascript, we have three ways to check equality:

double equals ==
triple equals ===
Object.is()

== (double equals)

Double equals will allow coercion
this is the algorithm for double equals:
1 - if types are the same do the rest of the calculations with triple equals
2 - null and undefined are equal to each other.
3 - if any side is reference type call ToPrimitive()
4 - if we have two different primitive types convert both of them to numbers then do the equality check.

Since double equals allow coercion it allows some corner cases as well

for example

[] == ![] // true

For not dealing with corner cases we shouldn't use these with double equals:

don't use 0,"", " "
don't use reference types
don't compare with a boolean

If the types are equal it will send it to triple equals anyway

=== (triple equals)

It doesn't allow coercion. first, it checks the types if the types are equal it will check values then it will check equality.

1 === "1" //Since the types are not equal its false

Object.is()

It behaves the same as the triple-equals operator except NaN and +0 and -0.



1 === 1; // true
Object.is(1, 1); // true

+0 === -0; // true
Object.is(+0, -0); // false

NaN === NaN; // false
Object.is(NaN, NaN); // true

Javascript Coercion Corner Cases

ikbal arslan — Mon, 27 May 2024 18:22:39 +0000

Like any other language, JavaScript also has some corner cases, so it is a good idea to learn them. today I want to show you a corner case about auto coercion.

1 < 2 < 3 // true

In this code the answer is true. but how let's check it step by step.

step 1 -> (1 < 2) < 3  
step 2 -> (true) < 3
step 3 -> 1 < 3 // true

In this case, the answer becomes true by chance.
let's check another one

3 > 2 > 1; // false

Mathematically this should be true but the execution says it is false lets check the code step by step

step 1 -> (3 > 2) > 1
step 2 -> (true) > 1
step 3 -> 1 > 1 // one is not bigger than one so should be false

Whenever you do any calculation please keep in mind the auto coercion. because math and code do not always say the same thing

Javascript Boxing and Unboxing

ikbal arslan — Mon, 27 May 2024 18:03:59 +0000

Boxing

Javascript primitive data types are not an object so it shouldn't have methods and properties right?

Did you know that number and string primitive values can act like reference types so we can use methods and properties with them?

By default when we run the javascript objects inside of the __proto__ and we can use them in our code.
some of the objects inside are String and Number

Whenever we want to use methods or properties on primitive types:

if the type is a string it will wrap it with the String object from proto
if the type is a number it will wrap it with the Number object from the proto

This is called auto-boxing, think of the objects as a big box and we put primitive types as small boxes inside of the objects so we can use all the methods and properties.

For some reason, we can use methods and properties with primitive types. The reason is called boxing and it is automatically applied to primitive types.



var car = "ford";

console.log(car);
car.length // 4

In this case, the type of the car is a string which is a primitive type
in the console.log(car) everything will be normal.
but in the next line we are using a method that only reference types have so behind the scenes javascript will put this variable inside of the String object from proto so we can access to the methods.

UnBoxing



{a : 4} > {a : 5}

In this case, when we want to compare two objects we can't do that. we can only compare primitive types.

To do this calculation we need to convert them to the primitive types. for this, we have a method which is ToPrimitive(). it will call this method default to convert them to primitive types.

So behind the scenes, the calculation will be like this



ToPrimitive({a:4}) > ToPrimitive({a:5})  //false

Since we are converting reference types to primitive types that called un-boxing.

Javascript Working Mechanism

ikbal arslan — Mon, 27 May 2024 16:13:35 +0000

when the javascript engine starts executing the code it does :

executing code line by line
store the data after executing

and it knows the order of executions via call stack. at the bottom of the call stack, there is always a global execution context that will stay.

Running the code is also known as Execution Context

as an example let's analyze this code

while executing this code by order:

- in the memory create a variable and name it a after that set 12 as the value.
- in the memory create a variable and name it square after that set a function definition as a value
- in the memory create a variable and name it sum after that set a function definition as a value
- call the sum 
     - push sum on top of the call stack
     - get the function definition from the global memory
     - create a brand new execution context for sum.

 - create a local memory for the execution context
 - create a variable in the local memory and name it twoSquare until finding the value set null as a value
 - call the square function:
     - push the square function on top of the call stack
     - get the function definition from global memory
     - create a new execution context for square

     - return the value 4 as a result of the function and set it to the twoSquare value 
     - remove(pop) the square function from the call stack
     - The square execution context will be destroyed by the garbage collector.


- get the value of the variable a from the global variable 
- calculate the execution context and return the value 16 as a result of the function 
- remove the function sum from the call stack 
- garbage collector will destroy the execution context for function sum

- then console log hello
- end the global execution context

Javascript Memory Management

ikbal arslan — Sun, 26 May 2024 22:07:42 +0000

When the javascript engine starts executing the code it will store variables inside of the memory. for storing data, runtime uses two different memory:

Stack memory
Heap memory

Javascript only can communicate with stack memory.

Before explaining the differences around these memories I should explain the data types in javascript. In javascript, we have two different data types:

Primitive types: primitive types stored directly in the stack
- String, Number, Boolean, Null, Undefined, Symbol, BigInt

Reference types: Stored in the heap and accessed by reference from Stack
- Arrays, Functions, Objects

For maximum optimization in the memory space javascript engine uses something called garbage collector. it will clean the value immediately when a value is not reachable via a variable(label).

Javascript Engine

ikbal arslan — Sun, 26 May 2024 21:08:52 +0000

JavaScript is not directly understood by computers but the browsers have an inbuilt JavaScript engine which helps to convert our JavaScript program into computer-understandable language. So whenever someone talks about running code they are talking about a javascript engine.

Javascript is a dynamic language so we expect it to be slow but it is pretty fast the reason is all the modern runtimes use something called JIT(just in time compile) because of that it is pretty fast.

Here is a list of the javascript engines in some popular browsers:

V8 (Chrome)
Chakra (Internet Explorer)
Spider Monkey (Firefox)
Javascript Core Webkit (Safari)

As an example, I will explain the workflow inside of the V8 engine:
for optimizing they use two compilers

- baseline compiler ( V8 uses Ignition): it is regular compiler that generates machine code.

- optimizing compiler (V8 uses turbofan): saves the type information for "hot" functions

Since javascript is a dynamic typing language we don't know the types when a user enters. so the compiler needs to find the types each time.

For optimization, we use an optimizing compiler which does:

Re-compile: (if it is hot or used a lot) "hot" functions with type information from previous execution
De-optimize: since javascript dynamically typed language, when the type changes remove it.

If we don't change the types optimizing compiler can remember the types for the same functions so the code can be faster

so if we let the optimizing compiler do its job and don't change the types our code will be much faster.

Javascript's Single Threaded Nature

ikbal arslan — Sun, 26 May 2024 14:56:09 +0000

Javascript is a single-threaded language let's see what that means.

When the javascript engine starts executing the code it does that synchronously. In this kind of execution, the program is executed line by line, one line at a time. doesn't move to the next line without finishing the execution of the current line.

It can do only one thing at a time

Let's say, you asked for burgers in the restaurant. while you are waiting for your burger you don't do anything else. You start doing other stuff after you get the burger.

var a = 5;
var b = 10;

function sum(a,b){
   return a + b
}

sum()

console.log("hello")

In the code above when we call the function sum we can't move to the console log line until the execution of the sum is done.

There is one way to make the javascript multi-threaded which is with setting up workers. But it doesn't come as default as a developer you should set it up to have multiple execution contexts at the same time.

Dynamic Typed Language v.s. Static Typed Language

ikbal arslan — Sun, 26 May 2024 12:54:09 +0000

The programming itself depends on one thing which is values.

We use values by storing them in the memory, accessing it, and editing it. To access these values we need to put a label on it so whenever we need to use that value we can just basically call it by using the label.


int number = 23

For example in this case we store the value which is 23 in the memory with a label which is a number. int is just saying to program create a new label.

While we are storing values in the CPU's (the microchip) memory we need to know the type of the value so we can store the value in the correct place. the types can be whole numbers, even numbers, texts, or big objects which has other values stored inside.

So now we want to store some data in the memory but how we will know where to store this? We need to know the type of the value.

To know the type of data we have two options:

the label itself can store the type of data (static)
the value can store the type of data (dynamic)

Static Programming Languages

In static programming languages when we are creating a label we need to give it a type as well for example in C++ which is a static language. When you want to store some data.


int label1 = 3

string label2 = "hello world"

While we are creating label1 we put int keyword upfront which represents a type. it says label1 can only store integers(whole numbers) in it.

In static languages the labels have type values in them because of that when the compiler converts the code to assembly it only checks the label to get type info to know where to store the values.

Dynamic Programming Languages

In dynamic programming languages when we are creating a label we don't need to specify the type info the value itself will store the type info for example in Javascript which is a dynamic language. When we want to store some data.


var label1 = 3

var label2 = "hello world"

For creating a new variable we always used var keyword because var keyword doesn't store type info it is just responsible for creating a label in this case, label1 and label2 don't have a type.

However, the compiler needs the type value to store data in the correct places. for that every time before storing data it will check the value get type info from it and then convert it to the assembly language.

In the Programming world labels are called variables

How about speed?

Since we need to check the value every single time in the compiling, the compiler needs to work more compared to static languages.
Because of that, we can say static languages are faster to compile. compared to dynamic languages right?

Dynamic typing languages are pretty fast but how?

as an example, I will explain the working mechanism of The V8 Javascript Engine
when the engine starts the execution it will use two things to make it faster:
-JIT(Just in Time Compilation)
-using two compilers instead of one

JIT
with using JIT the engine immediately will convert the javascript code to machine-understandable code. on the way line by line.

Two Compiler
engine uses one normal compiler and one optimizing compiler. Optimizing the compiler will save the type data in the memory for most used functions. so if we call the same function again it won't waste time checking types every time(if the types are the same)

I have explained more details about Javascript engines in this article

here are some resources to dive deeper into this topic:

this StackOverflow discussion is pretty informative.
Scala’s author has a good StackOverflow answer on why the compiler is so slow.
benhoyt's blog post
this presentation from JSconf

In this article, I have explained the differences between dynamic and static languages. If you have any questions feel free to leave a comment. I will be happy to answer them.

Code is for Humans not for Computers

ikbal arslan — Sat, 25 May 2024 21:11:34 +0000

When I started learning programming the first rule I learned was "if it works don't touch it "Then I just realized that %70 of our time spent coding is spent reading the code. That first rule looks like has some issues.

A couple of days ago I watched a presentation related to this topic and the content in it was opposite what the first rule says. Here is a brief overview.

If you don't know why your code works, you have no hope of fixing it when it breaks.

When you don't understand how the code works and need to fix it.

An idea will come which is it'd be faster if I just rewrote it. This will fix the problem but if any more bug exists in the code base again since you don't understand the code base you need to rewrite it again and again.

This slows down the development progress. because of that most of the code bases are rewritten hundreds of times. if your code has to be rewritten to be fixed. improved, or extended, you failed. the only way to ensure your code survives is to make sure it's readable.

The problem is we are writing our code primarily for the computer. Not for humans but instead the code should communicate ideas with other people. Readability directly impacts your ability, and that of everyone else, to do their job.

Readability isn't just a good idea or nice to have. it's the whole point.

The one thing we will always be better at than the computer is empathetic communication with other people.

I am leaving the link for the presentation here it is worth checking it out.