DEV Community: J Mohammed khalif

Javascript object reference and how to compare objects by values

J Mohammed khalif — Wed, 19 Oct 2022 14:16:42 +0000

Objects in JavaScript are important data types. While everything in JavaScript is an object i.e. have methods, programmer defined Objects in JavaScript are special data type representing real world objects like in many other programming languages. Such objects are standalone entities with properties of key value pairs. A property's value can be a function and such property is termed as a method. Objects make up a lot of JavaScript's programming paradigm. Explaining objects from scratch is beyond the scope of this blog, you can refer to MDN's explanation on objects
Comparing primitives is quite straightforward and different from comparing objects. The key difference which we will look at in code is, primitives are copied and stored by whole value whereas objects are copied and stored by 'Reference'. Let's see below what that means programmatically ,

const string1 = 'Hello world'
let string2 = string1
console.log(string1 === string2) //true

//for objects
const person1 = {
name : 'jay',
age : 30,
nationality : Kenyan
}
const person2 = {
name : 'jay',
age : 30,
nationality : Kenyan
}

//lets compare the two objects
console.log(person1 === person2) //false

The above code shows how comparing primitives is straightforward as the whole string1 value is copied into string2 and as a result we got the console log a true Boolean value. However, we got a false result in the console for comparing the two objects(person1 and person2) despite having the exact same properties. This is because, objects are stored and copied by reference rather than values. Lets prove that in a code below

const person1 = {
name : 'jay',
age : 30,
nationality : Kenyan
}
let person2 = person1
console.log(person1 === person2) //true

In the code above we got the console log true Boolean value ref, this is a prove that objects are copied by reference. By declaring and assigning properties to the first object(person1), we created an object reference which is the properties and by assigning person1 to person2, we just told the compiler to point the person2 object to person1 reference. To further prove this , let try to mutate person1's name by mutating person2's name.

const person1 = {
name : 'jay',
age : 30,
nationality : Kenyan
}
let person2 = person1
//change person2's name
person2.name = 'mohamed'

//console log person1's name
console.log(person1.name) //mohamed

In the above code we see how the two objects are pointing to one reference and either of the objects can be used change the references.
This is a crucial concept in JavaScript and is important in very many ways. It doesn't limit developer's flexibility and javascript has a special method to compare objects by values in some situations where developers may need to. Its through the use of JSON.stringify method. This method converts the objects properties to JSON strings and compares the properties as strings. Here is an example,

const person1 = {
name : 'jay',
age : 30,
nationality : Kenyan
}
const person2 = {
name : 'jay',
age : 30,
nationality : Kenyan
}

console.log(JSON.stringify(person1) === JSON.stringify(person2)) //true

Null safety explained.

J Mohammed khalif — Thu, 13 Oct 2022 22:54:20 +0000

The Dart language has recently been on the rise due to the exploding popularity of its child framework- flutter. The language has a unique feature called null safety and I bet you must have heard about it if you ever tried to learn dart. As a javascript developer, I was fascinated by the feature and kinda felt guilty of suffering painful runtime errors when building the code for production. The null safety was introduced to Dart in its 2.0 version. I strongly believe that necessity is the mother of invention, before the introduction of the null safety in Dart, flutter developers had to write a lot of if statements checking if variables had a null value or not. A lot of apps crashed due to variables having unexpected null values. It was really a nightmare and the dart lang maintainers had to come up with a solution and boom THE NULL SAFETY. Null safety simply applies one principle: variables cannot be null at the time of initialization by default unless you explicitly assign them to be nullable. Developers love clarity and thrive in strict environments. Every developer would rather suffer on the code editor than on the build/deployment terminal. You may need a variable to be null, for example, when building an App that fetches data from a backend API asynchronously, you will need the variable to initially be null as it awaits its promise to resolve. The null safety allows the variable to be nullable that is, its value be null until its reassigned or compiled just as null if at all it makes sense in your use case. Null safety reduces a lot of runtime errors and saves us from debugging hell.

//variables are assigned as nullable by putting a question mark after the type annotation

String? name; //nullable
String name; //error , non-nullable variables cannot be null

Sometimes, you may need to have a variable assigned its value later in the program execution flow rather than at the time of initialization. Dart has a solution for that too. The late keyword is used to indicate that the variable is non-nullable and declared without a value with the hope of having its value assigned later in the program. Here is an example;

//non-nullable but initialized without a value

late String name;
print(name);  // error -  the late variable is unassigned at this point

//assign a value 
name = 'Jay';
print(name); // jay

Write an algorithm that takes an array and moves all of the zeros to the end, preserving the order of the other elements.

J Mohammed khalif — Tue, 20 Sep 2022 17:40:49 +0000

Arrays in Javascript are an important data structure alongside objects. As a javascript developer you will use arrays in almost every project that involves grouping/storing data. Arrays are the backbones of javascript data structure, from being able to store any data type to storing arrays inside other arrays i.e multidimensional arrays. We could write about arrays forever and never be out of more words to explain its importance.
To keep it short and precise, lets dive directly to this blogs aim. I love practicing to solve algorithms in and I have seen a question on an algorithm that that takes an array and moves all of the zeros to the end, preserving the order of the other elements. and here is how i solved

function moveZeros(arr) {

//filter out array elements whose values are zero. make sure to use deep comparison operator otherwise false will be refered as a zero, use filter method and this returns a new array of elements with value zero
  let newArr =  arr.filter ( el => el === 0)

//filter out the elements whose values are not zero                    
  let anotherArr = arr.filter (el => el !== 0)

//merge the two arrays using concat method. and to preserve order make sure the array with values zero be passed after the other array
  let finalArr = anotherArr.concat(newArr)

//finally return the final array
return finalArr
}

this can be achieved in one liner but for explanations I decided to keep it longer.
Thanks for reading this blog post. I would personally recommend codewars.

How to learn any framework easily?

J Mohammed khalif — Fri, 12 Aug 2022 13:29:00 +0000

well, every developer has tried in their life to learn a programming framework. Frameworks make programmers' lives easier by abstracting away some programming complexities that would otherwise need a lot of lines of code. With lots of frameworks in existence and many introduced frequently, programmers often need to learn new frameworks for new projects or work requirements. Here are a few tips I think could help fellow programmers learn frameworks faster and easily.

Frameworks are guidelines
-Think of frameworks as guidelines to achieve a solution through the use of a programming language. I agree to unpopular opinion that learning a framework is harder than learning a new programming language. programming languages are more flexible than frameworks which are developed with strict design pattern. However, frameworks are easy to master since they provide known and fixed guidelines

learn the programming language the framework is based on

By learning the programming language the framework is based on rather than straightly jumping into the framework saves more time and banging heads on desks for trying to do what you don't know. It is not a prerequisite to master the underlying programming language and an intermediate understanding of the programming language is considered enough.

learn how frameworks work under the hood
As we stated earlier in the introduction, frameworks abstract away complexities. It is critical to understand the underlying functionalities of the framework. This is useful when debugging, debugging an error you don't understand costs you more effort and time.

practice solving problems with the framework concepts
The best way to learn is to practice, this builds your confidence on the understanding of the concept and affirms your ability to apply the concept to solve real world problems. It is not a must to develop full blown advanced application with the framework as you can get there with time, experience and necessity.

Frameworks are great and boost the productivity of developers.