Journey of a C# developer into Javascript

Journey of a C# developer
into Javascript
Massimo Franciosa

Permit me to introduce myself
- From Napoli, Italy
- Software Developer since 2008
- Worked for several companies between Italy & UK
- Optima Italia
- Webuild
- Prama (AsianD8, AsianBride)
- Sporting Index
- Reading Room

Might be useful for...
- Backend developers that occasionally work on Javascript code
- People that can already write in Javascript but never studied it
- might also be useful for frontenders that want to understand differences the
other way round (difference from JavaScript to C#)

WON’T be useful for...
- people already savvy in JavaScript and and in C#
- someone that want to learn JavaScript coding best practices. the code here is
just for explainatory purposes!

Ever wondered why?
function Somefunction(){
var that = this;
...
}

Look at this code… c#
public class Example
{
class Foo
{
private string _value = "a";
public string GetValue()
{
return this._value;
}
}
public void ExampleMainFunction()
{
Foo foo = new Foo();
Func<string> funcRef = foo.GetValue;
string result1 = funcRef();
string result2 = foo.GetValue();
}
}

Look at this code… c#
public class Example
{
class Foo
{
private string _value = "a";
public string GetValue()
{
return this._value;
}
}
public void ExampleMainFunction()
{
Foo foo = new Foo();
Func<string> funcRef = foo.GetValue;
string result1 = funcRef();
string result2 = foo.GetValue();
}
}
result1 == “a”
result2 == “a”

Look at this code… JavaScript
var foo = {
value : 'a',
getResult: function() {
return this.value;
}
};
function exampleMainFunction() {
var funcRef = foo.getResult;
var result1 = funcRef();
var result2 = foo.getResult();
console.log(result1);
}

var foo = {
value : 'a',
return this.value;
}
};
}
result1 == “a”
result2 == “a”

var foo = {
value : 'a',
return this.value;
}
};
}
result1 == undefined
result2 == “a”

Consider it as an additional parameter!
var foo = {
value : 'a',
getResult: function(this) { //just explainatory, is NOT VALID Javascript!!!
return this.value;
}
};
var result1 = funcRef(); //calls like getResult(window);
var result2 = foo.getResult(); //calls like getResult(foo);
}

Bottom line
- “this” could be a DIFFERENT object from the one where is defined.
- you can even set the value of “this” programmatically! (using the “apply”
function)
- can trick many developers (especially when we are dealing with callbacks)

Part 2: new operator
Javascript doesn't have a (natively) concept of classes, so why having a new
keyword?

in C#
you can use the new keyword ONLY for some specific methods called
constructors: those are functions that have the following restrictions:
1. Got the same name as the Class that contains the function
2. Cannot be static
3. Cannot return any value
but what's the real reason to use a constructor?

in C#
initialize an object with some specific properties and methods.
In c# those members are described inside the definition of a class.
When you call a constructor of a specific class you are doing just that: create an
object with the same exact members defined in the class definition.

in JavaScript
In Javascript we cannot (natively) define classes, but we can take advantage of
the fact that is a weakly typed language.
This allows us to describe those members inside a function.

in JavaScript
to make a very loose comparison,
a function can act as both a Class and a Constructor at the same time.

new operator in JavaScript
function Example() {
this.intMember = 1;
this.stringMember = 'abc';
this.funcMember = function(addThisToIntMember) {
this.intMember = this.intMember + addThisToIntMember;
}
}
var example = new Example();

what happens when call a function with “new”
1. a object is created (this);
2. all the members described in the prototype property of the called function are
copied to the new object
3. returns “this” (if there are no other return statements);

Quick Test
function Foo() {
var that = this;
this.value = ‘a’;
function retValueFunc() { return this.value; };
function retThatValueFunc() { return that.value; }
return { retValue : retValueFunc, retThatValue : retThatValueFunc };
}
var foo = new Foo();
var result1 = foo.retValue();
var result2 = foo.retThatValue();

Quick Test
function Foo() {
var that = this;
this.value = ‘a’;
function retValueFunc() { return this.value; };
function retThatValueFunc() { return that.value; }
return { retValue : retValueFunc, retThatValue : retThatValueFunc };
}
var foo = new Foo();
var result1 = foo.retValue();
var result2 = foo.retThatValue();
result1 == undefined
result2 == “a”

Part 3: variable hoisting & undefined value

- the scope of a variable in javascript is in fact just related to the function where
is declared and NOT to the block.
- that’s because of a mechanism called HOISTING that makes Javascript treat
all var declarations as if they were indicated at the top of the function
- use “let” instead!!!!

function example() {
if(true) {
var aaa = 5;
}
console.log(aaa);
}
has similar behaviour to..

function example() {
var aaa;
if(true) {
aaa = 5;
}
console.log(aaa);
}
...this code

- in c# there is no concept of UNDEFINED value
- UNDEFINED !== null
- NULL means “I don’t have a value”
- UNDEFINED means “I don’t know what value I got, or even if I got a value!”

in C#
int i;
Object o;
even without declaration
we know that
i == 0
o == null
(default values)

in C#
var a;
doesn’t compile at all!
(Implicitly-typed variables
must be initialized)
c# doesn’t have a concept of
undefined value

in JavaScript
var a;
a is undefined.
anything that doesn’t
exists is undefined and no
exceptions are raised at
compile time

in C#
classical inheritance allows us to reuse some code on multiple classes. this
means that each object of a particular class has all the properties declared in itself
plus the members of its superclass.

in C#
class SuperClass
{
public int Number { get;set;}
public int ReturnTwice()
{
return this.Number * 2;
}
}
class SubClass : SuperClass
{
public int ReturnSquare()
{
return this.Number * this.Number;
}
}

in JavaScript
- as we already know, in Javascript to recreate a behaviour similar to classes we are
using functions.
- each function has a specific member called prototype. the value of the prototype can be
any object.
- this object is cloned inside a private member (called _proto_) that is part of any object
in Javascript.

in JavaScript
.
Function
+ prototype creates using
new operator
Object
- __proto__ (cloned from
prototype)

in JavaScript
Assuming i want the property of the object named “ccc” of “ObjectA”
ObjectA
- __proto__ = ObjectB
+ aaa = 1
Is it contained in ObjectA? nope.
ObjectB
- __proto__ = ObjectC
+ bbb = 2
ObjectC
- __proto__ = null
+ ccc= 3

in JavaScript
ObjectA
+ aaa = 1
Is it contained in ObjectB? nope.
ObjectB
+ bbb = 2
ObjectC
- __proto__ = null
+ ccc= 3

in JavaScript
ObjectA
+ aaa = 1
Is it contained in ObjectC? yes.
ObjectB
+ bbb = 2
ObjectC
- __proto__ = null
+ ccc= 3

in JavaScript
function SuperClass() {
this.numb = 3;
this.returnTwice = function() {
return this.numb * 2;
}
}
function SubClass() {
this.returnSquare = function() {
return this.numb * this.numb;
}
}
SubClass.prototype = new SuperClass();
var one = new SubClass();
one.returnSquare();
one.returnTwice();
one.numb;
one.toString();
one.aaaaaaa;

in JavaScript
this.numb = 3;
}
}
}
}
one.returnSquare();
one.returnTwice();
one.numb;
one.toString();
one.aaaaaaa;
returnSquare is
part of the
object, returns 9

in JavaScript
this.numb = 3;
}
}
}
}
one.returnSquare();
one.returnTwice();
one.numb;
one.toString();
one.aaaaaaa;
returnTwice and
numb are not part
of the object, but
part of the object
contained in
__proto__

in JavaScript
this.numb = 3;
}
}
}
}
one.returnSquare();
one.returnTwice();
one.numb;
one.toString();
one.aaaaaaa;
toString() is part of the
__proto__'s __proto__
member, which is
Object.prototype (the
main base class).
returns [object Object]

in JavaScript
this.numb = 3;
}
}
}
}
one.returnSquare();
one.returnTwice();
one.numb;
one.toString();
one.aaaaaaa;
aaaaaaa does not
exists in anyone of
the chained
__proto__
members. returns
undefined

in JavaScript
- a main difference is that superclasses are immutable on classical inheritance,
but variable on prototypal inheritance.
- nothing stops us to replace the prototype of a function with another one. in
this case, only the new instances of the object will have the new methods and
members. old ones will continue to have the older subclasses.

Journey of a C# developer into Javascript

Journey of a C# developer into Javascript

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Journey of a C# developer into Javascript

Semelhante a Journey of a C# developer into Javascript (20)

Último

Último (20)

Journey of a C# developer into Javascript