<commit_before>---
layout: post
title:  "Tricky JS Interview Questions Part 2"
tagline: "Assignment by reference"
date:   2018-01-4 17:50:00
categories: main
tags:
- Javascript
---

Hello all, this is the second part of my **Tricky JS Interview Questions** series.
You can read part 1 **here**. 

Just like I told you on the previous post, the questions from these series are intended to trick the interviewees a little bit but these are no more than simple questions involving the core concepts of Javascript. 

I've asked today's question to several people, juniors and seniors alike and most of the times they have failed it.

## What can we expect from the interviewee by asking this question? 

We expect that the interviewee knows the concept of **assignment by reference**, when does it happen and how it differs from **assigment by value**. 

Let's start!

-----

## What does the following console.log print?

{% highlight javascript %}

var a = ['Hello']
var b = ['Hello']

console.log(a === b)

{% endhighlight %}

So, what is it then? 
I have almost always received a **true** as an answer. When I ask why, the most common explanations have been something like "*because both a and b are the same*" or "*because both a and b have the same contents and both are the same type*".

The problem is that this is actually **false**. The first reason why this is **false** is because even tho both arrays have the same content, they are two independent objects which are also stored in different spots in memory ---arrays are objects in Javascript---.

The other and definitive reason is because what is assigned to `a` and `b` is not the arrays per se, but a reference to where these arrays are stored in memory. As both arrays are stored in separate spots in memory, both `a` and `b` will have different references assigned to them. This is called **assignment by reference** and happens when we are assigning any kind of object to a variable ---objects, arrays and functions---.

So when we do `a === b` we are comparing if both `a` and `b` have the same value and the same type, and this fails cause `a` holds a different value ---the reference--- than `b`.

Confused? Let's explain this a little further.

## What is the difference between assignment by value and assignment by reference and when do they happen? 

This is actually another question I usually ask in the interviews.

The key definitions for these two concepts are not something specific to Javascript but to other programming languages too but I'll explain this from the Javascript perspective.

In short terms, **assigment by value** happens when we assign any **[Primitive][primitivesLink]{:target="_blank"}**
 to a variable. This variable will hold the actual value it has been assigned with.  For instance:

{% highlight javascript %}

var a = 1;
var b = 'Hello';
var c = true

{% endhighlight %}

Here, the variables `a`, `b` and `c` hold the values of `1`, `'Hello'` and `true` respectivelly ---those values are primitives---. 
Another example would be the following:<commit_msg>More on Tricky 2<commit_after>---
layout: post
title:  "Tricky JS Interview Questions Part 2"
tagline: "Assignment by reference"
date:   2018-01-4 17:50:00
categories: main
tags:
- Javascript
---

Hello all, this is the second part of my **Tricky JS Interview Questions** series.
You can read part 1 **here**. 

Just like I told you on the previous post, the questions from these series are intended to trick the interviewees a little bit but these are no more than simple questions involving the core concepts of Javascript. 

I've asked today's question to several people, juniors and seniors alike and most of the times they have failed it.

## What can we expect from the interviewee by asking this question? 

We expect that the interviewee knows the concept of **assignment by reference**, when does it happen and how it differs from **assigment by value**. 

Let's start!

-----

## What does the following console.log print?

{% highlight javascript %}

var a = ['Hello']
var b = ['Hello']

console.log(a === b)

{% endhighlight %}

So, what is it then? 
I have almost always received a **true** as an answer. When I ask why, the most common explanations have been something like "*because both a and b are the same*" or "*because both a and b have the same contents and both are the same type*".

The problem is that this is actually **false**. The first reason why this is **false** is because even tho both arrays have the same content, they are two independent objects which are also stored in different spots in memory ---arrays are objects in Javascript---.

The other and definitive reason is because what is assigned to `a` and `b` is not the arrays per se, but a reference to where these arrays are stored in memory. As both arrays are stored in separate spots in memory, both `a` and `b` will have different references assigned to them. This is called **assignment by reference** and happens when we are assigning any kind of object to a variable ---objects, arrays and functions---.

So when we do `a === b` we are comparing if both `a` and `b` have the same value and the same type, and this fails cause `a` holds a different value than `b` ---a different reference---.

Confused? Let's explain this a little further.

## What is assignment by reference?

**Assignment by reference** happens when we assign an object to a variable. The variable won't hold the object per se but a reference to where this object lives in memory. The reference tho, is no more than a simple value, like an address. 

This differs from **assignment by value** which happens when we assign a **[Primitive][primitivesLink]{:target="_blank"}**
to a variable. This variable will hold a copy of the actual value it has been assigned with.

For example:

{% highlight javascript %}

var a = 1;
var b = 'Hello';
var c = true

var d = { name: 'José' }

{% endhighlight %}

Here, the variables `a`, `b` and `c` hold the values of `1`, `'Hello'` and `true` respectivelly ---those values are primitives--- but variable `d` has a reference to the memory location where the object with name 'José' is actually stored. 

## Why does it only happens when assigning objects?

Things are gonna get a little bit confusing here. The following Stack Overflow's **[answer][stackAnswer]{:target="_blank"}** explains this very good:

> Javascript is always pass by value, but when a variable refers to an object (including arrays), the "value" is a reference to the object.

The thing is, Javascript variables will always hold a **Primitive** value and no more than that. So, when assigning objects, a reference is assigned instead. That reference is actually a **Primitive** value. 

A good way to see this would be the following example:

{% highlight javascript %}

var a = { name: 'José' }
var b = a;

{% endhighlight %}

What happens there is that variable `a` will have the reference to the object with name José. Variable `b` will have a copy of that reference ---assignment by value---.

So, can we say **assignment by reference** does not exist at all? 

We could say that, but it's still easier to understand both concepts if we separate them.

-----

## What is the difference between assignment by value and assignment by reference and when do they happen? 

This is actually another question I usually ask in the interviews.

The key definitions for these two concepts are not something specific to Javascript but to other programming languages too but I'll explain this from the Javascript perspective.

In short terms, **assigment by value** happens when we assign any **[Primitive][primitivesLink]{:target="_blank"}**
 to a variable. This variable will hold the actual value it has been assigned with.  For instance:

{% highlight javascript %}

var a = 1;
var b = 'Hello';
var c = true

{% endhighlight %}

Here, the variables `a`, `b` and `c` hold the values of `1`, `'Hello'` and `true` respectivelly ---those values are primitives---. 
Another example would be the following:
{'fraction_non_alphanumeric': 0.08041827461720404, 'fraction_numerical': 0.004606000248972986, 'mean_word_length': 4.075173720783323, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 4, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7573720', 'n_tokens_mistral': 2166, 'n_tokens_neox': 2012, 'n_words': 1272}