DEV Community: Anwar

primitives vs objects in JAVASCRIPT : Call by sharing

Anwar — Fri, 26 Mar 2021 05:18:23 +0000

Previously in this series, we've discussed how primitives and objects behave when we try to mutate or copy them.
Now in the final article in this series we're going to see how they behave when we pass them to functions.

Recap

First article we talked about mutability, which is changing the properties of something without changing it as a whole and we said that objects are mutable while primitives aren't, here's a quick example to demo what I've just said

Second article was all about copying, when you copy a primitive you copy its value but when you copy an object you copy its reference(its address in memory),here's another quick example:

Moving on to talk about how both primitives and objects behave when we pass them to functions as arguments but first, let's talk about functions.

functions

Starting with a really typical function, the function add

now let's walk through this code to see how javascript is run.
Two main things that a javascript engine does are storing stuff and executing orders, let's see this in action.
The javascript engine reads the code from top to bottom so in our example here the first thing it sees is this:

function add(x , y){
  return x + y;
}

this is called a function declaration, when the engine see
a function declaration it saves all its code inside the global memory and it doesn't execute any of the stuff inside the function because the function hasn't been called yet(remember we're talking about the first 3 lines)

Moving on to line 4 and 5 in which variables num_1 and num_2 respectively are also stored in global memory

Notes:

in the picture above the letter f is short for the function's code
num_1 and num_2 are stored to demo that the engine also saves variables not functions only

execution context

Right now we've done nothing but storing stuff in global memory, on reaching the line add(2,6) the function add starts to execute.
when a function is called, an execution context is created and execution context is a place in which information about the function are stored.
It stores stuff like the function's local variables, at what line the program is at the moment.
so as you see in the following picture the function add has two local variables x and y and they store the numbers we provided when we call the function

currently we're inside the function body, which is the line return x+y; the program calculates the value of x + y which is 2 + 6 in this case and that's equal to 8.
Then the function returns this value(8) and once we return, the function's execution context goes away it vanishes and if we called the function again a new execution context will be created and that's a rule: for every function call a new execution context is created and once we hit a return statement that execution context disappears

Note:
things stored in global memory are available everywhere in our program. On the other hand, local variables are available only inside the function

And that's it for functions in this article, there's one more thing about functions behind the scenes which is the call stack
if you want to learn about it, go watch this video or read this article

Primitives as functions arguments

consider the following example

the question is: will the values of x and language change ?
let's see what the console will tell us

As you can see, nothing has changed that's because when we pass a primitive to a function , we're passing a copy of its value
so num and str have the same values as x and language but they're different variables.

An important thing to note is that the values of num and str are changed and we can see that if we put a console.log inside the function

call by value

when you pass a primitive to a function, its value is copied to the function argument hence the primitive and the argument have the same value but they're two different variables, that's what called call by value .

objects as functions arguments

remember that objects are stored by reference which is the memory address of the object so when you say let obj = {}; you storing the address of {} inside obj.

Now let's see what happens when we pass an object to a function

do you expect obj to change or remain the same ?
well, there's only one way to find out

As our console said, obj does change.
But what if we tried the following:

In this case nothing will change and here's the output to demo that

why is that ?

When you pass an object to a function, you are passing a copy of the reference and you can use that copy to access and modify the object but you can't change the reference using the function

call by sharing

if you pass an object to a function, you can mutate the object inside the function but you can't *reassign * it.
That's called call by sharing, many people say that objects are called by reference that's not right because call by reference means passing the reference itself and hence you can both mutate and reassign the object using the function and that's not the case in javascript.
We're passing a copy of the reference not the reference itself,
it's like primitives when we pass a copy of the value not the value itself.

Hope this makes sense for you, you can read about call by sharing using the following links:

And that's it for this article and the whole series, hope you guys have enjoyed the series !

primitives vs objects in JAVASCRIPT : copying

Anwar — Thu, 11 Mar 2021 17:27:30 +0000

In the previous article we talked about mutability and saw how primitives can't be mutated while objects can.
In this article we're going to see how primitives and objects behave when we try to copy them.

Copying primitives

let's start with something simple, let's create a variable x that has a value of two

let x = 2;

Now if we wanted to represent this variable visually, it's like a box with some value inside of it so here's how it might look(P.S : I'm not a designer 🙃)

Second thing I'd like to do is make a copy of x and log it to the console

y = x;
console.log(y);

and here the result, it works just fine

Now the question is, If we changed the value of x would that affect y ? let's see

x = 100;
console.log(x , y); // what's the output??

The change in x won't affect the value stored in y at all, here's the output if you don't believe me

Our first rule

In the statement let y = x; we've created a new box y and copied the value of x inside it.
We've two independent boxes and that makes sense, if you have two copies of the same book cutting a page form one won't affect the other.
so our first rule is Primitive and its copy are two different variables with the same value

practice time

Try to figure out the output of the following(answered in the comments below, but try to figure it out yourself)

let str = "hello world";
let copy = str;
str.toUpperCase();
console.log(str , copy); // what's the output ?

Copying objects

Objects are stored and copied differently, they're stored and copied by reference

What's a reference ?

It's simply an address in memory, when you initialize some variable (obj for example) and assign it an object you're storing the address of that object in memory and when you try to perform an operation on that object it's like telling Javascript to go to that address and perform some operation.

I like to think about references like I'm looking for {name : "anwar" , age:19} inside the Javascripts engine's memory and the variable obj telling me "hey, the object you're looking for is right over there"

enough with the theoretical talk and let's look at an example

let obj = {name : "anwar" , age:19};
obj.age++;

In this code the variable obj is a reference(address in memory) to {name : "anwar" , age:19} this is how it might look

now the line obj.age++; remember obj is the reference(again, an address in memory) so this statement means : "go to the object at the following address and increment its age property by one"

what happens when you copy an object ?

previously I mentioned that objects are copied by REFERENCE it means that when you copy an object you're copying the reference of the that object, the object itself isn't duplicated.

for example :

let obj = {name : "anwar" , age: 19};
let copy = obj;

this is how it looks

obj and copy are two variable that store references to the same object, they both point to the same object

our second rule

Now if we wanted to access or modify {name : "anwar" , age: 19} we can do that using the variable obj or copy as they're referencing the same object.
so our second rule an object and its copy are references to the exact same object

so if we mutated obj the same change will happen in copy(and vice versa) because they reference the same object

remember, mutating is changing object properties without changing the object as a whole(changing the object as a whole is reassignment)

let obj = {name : "anwar" , age: 19};
let copy = obj;
obj.age++;
console.log(copy); // {name : "anwar" , age: 20}

what if we did the following, what is the output ?

let obj = {name : "anwar" , age: 19};
let copy = obj;
obj = {};
console.log(obj , copy); //??

the output will be {} {name : "anwar" , age: 19} because in the line obj = {}; we're not mutating obj we're making it reference another object (reassigning it)

So remember mutating one copy mutates all copies, reassigning one copy doesn't affect other copies.

comparing objects

Third rule

objects are compared by reference, meaning that objects are equal only if they have the same reference

example:

let arr = [1,2,3];
let arr_2 = [1,2,3];
console.log(arr === arr_2); // false

Javascript compares the references of both objects(arrays are objects) and these two arrays don't have the same address in memory so the result is false

cloning objects

you might want to make a copy of an object that doesn't have the same reference so you can change stuff in one place without affecting other places, that's called object cloning and you can read about it here or here.

And that's it for this article, hope you understand it and find it helpful

primitives vs objects in JAVASCRIPT : mutability

Anwar — Thu, 04 Mar 2021 15:10:15 +0000

Knowing how things behave is really important in programming as it gives a better understanding of the code you write and
it helps fixing bugs easily.

This article is the first of a 3 parts series that explains how primitives and objects behave differently in the context of : mutability , copying(value vs reference) , being passed to functions.

first things first let's define primitives and objects:

primitives are strings , numbers , booleans , null ,
undefined , symbols , and bigInts.
objects are arrays and functions, and of course objects 😀

MUTABILITY

always easier to understand with an example, let's create a string called me and give it the value awesome and an array of five numbers

now let's do some modifications, in me I want the first character to be A and in nums I want the first number to be 0

result :

note that me didn't change at all while the first element in nums became 0 as we wanted

Now for some reason I'll try to update the length property of both me and nums and see if any changes happen.

results :

Again, the string me doesn't correspond to any change while nums works as expected

why is that ?

That's because strings are immutable, meaning that we can only access the string's characters and properties like length but we can't modify them at all.

On the other hand arrays are mutable, we can access and modify array elements and properties.

In fact, all primitives(strings, numbers , booleans , etc) are immutable while all objects are mutable.

You can modify object properties or array elements but you can't modify a string's character and you can't modify a number.

If you want to make an object immutable you can use the built-in method Object.freeze you can read about it here mdn reference

MUTATING VS REASSIGNMENT

An interesting question is:
"How can't we modify the string me while we can say me = "Awesome"; and that'll update the string ? "

well, the statement `me = "Awesome" is called reassignment and that's not the same as mutating

let me explain the difference, think of a variable as a box containing a value, reassigning means throwing the Current value away and replacing it with another one.

while mutating means changing something about the value but without throwing it away.

for example :

CONCLUSION

primitives are immutable
objects are mutable
mutability is not the same as reassignment

And that's it for this article, hope you find it helpful and stay tuned for the rest of this series

One of the most important rules I learned after a year of learning frontend

Anwar — Sun, 10 Jan 2021 03:25:43 +0000

Most of the time when I was writing code, I was subconsciously working according to one concept "If it works, don't touch it" which was really time wasting and a lot of the time frustrating. Now I try to code according to another concept "Think before you code". In this article I'm gonna talk about this concept and why it's really important.

If it works, don't touch it

When you write code as a beginner this is probably how you solve a problem:
"write some stuff then run it , doesn't work ? write more stuff then run it again, maybe copy some snippets from stackoverflow and so on until it works."
Even with css, you probably try different properties on the element and keep trying until you get the desirable result.
I have been there but I discovered that this is not a right way of writing code because most of the time you're not really understanding what your code does, another problem is that you're probably have some lines of code that either redundant or repetitive.

Think before you code

A better approach is by planning things out before writing any code, There two magical tools that'll help you make a good plan these tools are: a pen and a paper.
Say you wanna build a website, spend some time away from your code editor and start ask yourself some questions : "What colors or fonts do I wanna use ?" , "how do I want it to look on desktops? what about mobile ?" , "Do I want to repeat some style ?".
Think deeply about each question and write the answers, draw a basic shape of your layout, believe me this'll save you from repeating yourself and from wasting a lot of the time trying things out waiting for your code to work. Kevin powell has an amazing article about that topic(Creating a website - getting over the anxiety of starting with a blank file)

Applying it to javascript

Take you time understanding the problem and the relation between the input and the output, think about things you need in order to solve the problem, the data type you're dealing with and whether you need an auxiliary data type or not , write some pseudo code.

What if things didn't work after planning?

At this point, start searching to understand why your code isn't working and by searching I mean looking for articles/videos that talk about the topic that's confusing you, take your time searching until you figure out what's wrong this searching process will help you develop your skills and understanding of the language you're learning, and please never copy snippets of code without understanding them.

A Simple introduction to recursion

Anwar — Sun, 01 Nov 2020 13:41:39 +0000

Recursion is one of the topics that confuses people when seeing it for the first time, this article introduces the main idea of recursion in order to make things a little bit clearer and get you up and running with it.

What exactly is recursion ?

It's easier to understand it through an example

Say you were asked to calculate the sum of 13 and 18, most of us thinks about it like this:

since 10 + 10 = 20
and 3 + 8 = 11
so the sum is 20 + 11 = 31

what exactly did we do here ?

instead of calculating the sum right away, we broke
the problem into two small problems of the same type, the difference is that we can easily solve the two small problems.

That's exactly what recursion is all about, it's about breaking a problem into several small problems that are easier to solve.

Enough talking, let's write some code

Now that you (hopefully) understand the main idea behind recursion, let's see how can we implement it.

Let's start by writing a function that counts from a given number n up to 5 in our console, this is done very easily using a loop like this:

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

countTo5(1)

but let's try doing it with recursion (Make sure you read the comment in the code below in order to understand how it works)

function countTo5(n){ 
   if(n === 5) { 
       console.log(n)
       return;
   }
   console.log(n);

   return countTo5(n+1)
}

countTo5(1)
/* 
    first call
    n = 1 
    1===5 ? no 
    console.log(1)
    return countTo5(2)
    -----------------
    second call 
    n = 2
    2===5 ? no 
    console.log(2)
    return countTo5(3)
    -----------------
    third call 
    n = 3
    3===5 ? no 
    console.log(3)
    return countTo5(4)
    ------------------
    forth call 
    n = 4
    4===5 ? no 
    console.log(4)
    return countTo5(5)
    ------------------
    fifth call 
    n = 5
    5===5 ? yes
    console.log(5)
    the function stops
*/

note: it's absolutely better to solve it with loops, recursion is used here for explanation purposes only

Base Case

A loop becomes infinite if we don't have a stopping condition. similar to loops, if recursion doesn't have something that makes it stop it will execute over and over until it causes a stack overflow.

in the example above, our base case was this if statement
if(n === 5) { console.log(n) return; }

In most cases the base case is going to be a conditional statement.

conclusion

recursion is a way of solving problems by breaking it into smaller problems
we can say that recursion is an elegant way of looping
we must have a base case in our recursion or else we'll get stack overflow

Hope this helps guys, this is my first article ever so I'd love to know your opinions about it, hopefully it becomes first of many useful article, here is some further reading and videos

-https://javascript.info/recursion#two-ways-of-thinking

-https://www.youtube.com/watch?v=lMBVwYrmFZQ

-https://www.youtube.com/watch?v=k7-N8R0-KY4

-https://www.freecodecamp.org/news/understanding-recursion-in-javascript/