JavaScript for C# Developers – Differences between JavaScript Dynamic Syntax and C#

Home > Blogs > Developer Visual Studio / ASP.NET > JavaScript for C# Developers – Differences between JavaScript Dynamic Syntax and C#

JavaScript for C# Developers – Differences between JavaScript Dynamic Syntax and C#

Like This Blog 3 Dan Wahlin
Added by May 14, 2015

This is an excerpt of a webinar by Dan Wahlin – JavaScript for C# Developers that was conducted at Interface Technical Training on September 14, 2014.

JavaScript Webinar link image of Dan Wahlin at Interface Technical Training

You can watch the entire webinar at JavaScript for C# Developers webinar

Dan Wahlin teaches Web Development and .NET Visual Studio classes at Interface Technical

Dan’s instructor-led training includes JavaScript, AngularJS, jQuery, Node.js, HTML5, ASP.NET MVC, C#, and C# design patterns. Dan’s classes can be attended in Phoenix, AZ or online with Remote Live.


Webinar Transcription:

Now we talked about some of the key similarities of C# and JavaScript Key concepts of C# and JavaScript Syntax and you can see some of the fundamental concepts like Methods, Loops, Conditionals, and Variables. They are very similar between languages. If you currently work in C#, you are not going to struggle learning the syntax of JavaScript.

In this post, I’ll demonstrate some differences in JavaScript and C# where people tend to struggle.

Key Defenses between JavaScript and C#

  • JavaScript is a dynamic language!
  • Variables are not strongly-typed
  • No native support for namespaces and classes (until ES6)
  • Only 2 levels of variable scope (until ES6)
  • Equality comparisons can be tricky
  • Functions are objects by default

First, JavaScript is a totally dynamic language. There is no compiler which is a little bit of a bummer if you’re used to getting the error notifications as you compile. You have to go and do what I did earlier Key concepts of C# and JavaScript Syntax and go into Chrome Developer Tools or IE Developer Tools, to figure out any JavaScript errors.

Another way that it JavaScript differs from C# is with JavaScript, you don’t have the same types of system. In fact, you don’t have types like int, float or double. You do have the concept of them, but you don’t have the same exact data types.

In fact, you always use “var,” as you’re defining your variables. Whereas with C#, we’re used to strongly typed applications. Also, there’s absolutely no native support currently for Namespaces or Classes. That’s a little bit of a bummer, I will admit if you are coming in from the C# world, and we’re all used to building components if you will, classes that we can build into objects and re‑use those. JavaScript doesn’t need it, we have that through ECMAScript 5, which is the current version that most browsers support. But ECMAScript 6, which we’ll demonstrate in another post, does support that concept of reusable code. There are a lot of cool things you can do with ECMAScript 6.

There is only two levels of Variable Scope in JavaScript unlike three levels in C#. In C#, we’re used to the Class Level, and then we have the Method Level, then we have the Block Level. In JavaScript, by default, we have only two levels. (Until ECMAScript 6 is released)

You have variables that are global and you have function level. But if you define something like in the loop or if statement block, that is not actually a scoped definition. We can actually step on another definition that is outside of that to watch out in the JavaScript.

One of the biggest kind of “Sharks in the water,” is the Equality Comparisons. We’ll show some demos of the features later.

With C# you can use the double equals ( = = ) and it just automatically compares if they are equal or not. You’ll see in JavaScript that it gets a little tricky, and there’s something else that I am going to show you here that you can use. I’ll actually recommend you use when you are writing JavaScript.

Finally functions in the C#, don’t stand on their by themselves. Functions are always in classes or structures or something in C#. Well in JavaScript, functions can totally stand on their own. They’re actually objects. We will be talking about that as well.

JavaScript Data Types

Primary TypesComposite TypesSpecial Types
StingObjectNull
NumberArrayUndefined
Boolean

Let’s look and the data types, I mentioned that with JavaScript, we don’t have the different data types, or at least the robust nature of the data types we have in C#.

What we have is Primary, Composite and some Special Types.

Primary Types

The Primary Types are pretty familiar with as C# developers. We have strings. We do have numbers. But if you’ll notice, numbers are not really broken down into small, double, float, long, short and that type of thing. It is just the number. Primary types can have decimals, they can be whole numbers, that really just depends.

Boolean’s; We do have the ability to numerically evaluate a Boolean in JavaScript, unlike C# where true is true and false is false and there is no numeric equivalent per se.

Composite Types

In JavaScript, zero (0) is a false, a one (1) is true like several other developer languages. We also have object which is the base granddaddy of them all at the top of the hierarchy, very similar to C# in that regard.

We have Arrays, we showed list in a previous post Key concepts of C# and JavaScript Syntax.

Special Types

In Special Types we also have null, which everybody is used too in the C#. But we have this other one, it is called Undefined which we’ll look at later in this post.

Instead of just checking that something is Null, you’ll often check if it is null or is it Undefined. I will show you some short cut ways that we can actually do that.

Demo Image Learn JavaScript for C# Developers

In this demo we’ll look at a few of these key language differences in C# and how they manifest themselves in JavaScript.

First half, we start with Equality.

Equality in Visual Studio key language Differences Learn JavaScript for C# Developers

In C#, If I was to say, “Hey, does 5 equal 5 in this example?” You would probably say, “Of course not.” Well, in JavaScript it depends. With JavaScript, if I were to code like this:

Equality example in JavaScript Learn JavaScript for C# Developers

If age equals other age, with the normal double equals that we are used to for quality in C#. That actually will evaluate to true. That is a little bit shocking at first, if you’re brand new to JavaScript.

Well, that is not how it should be, at least in C#. But JavaScript will do some coercion. It will actually try to convert so that the data types can be compared. Technically 5 in quotes ‘ ‘  is equal to 5 here.

Equality Code Example language Differences Learn JavaScript for C# Developers

One other difference to point out is, if you’ll notice I used the single quotes ‘  ‘  like a character in C#.

In JavaScript, I can just as easily have done this with single or I could use double quotes “”.

Equality double quotes “” example code Learn JavaScript for C# Developers

Either way, it works. A lot of people (including myself) like the single quotes in JavaScript. That’s a pretty big jump if you are doing C# for the last five to ten years and are making the switch.

I mentioned undefined or null. You’ll notice address is not a signed value. If we actually to run this code right and we try to log the value of address, all it does is update the little bit of div at the top.

Equality Output div code language Differences Learn JavaScript for C# Developers

When I run this. It will show the output but the address is undefined, it doesn’t have a value.

Equality address undefined code example Learn JavaScript for C# Developers

It’s not null, it’s undefined.

Learn JavaScript for C# Developers

That’s also different compared to C# because we don’t have an undefined in that rule.

Street however is null, it is a null pointer in memory. I’ll run this little page.

C# Code view Differences Learn JavaScript for C# Developers

It’s not really impressive output, but you’ll see it’s true that quoted ‘5’ == 5

Equality Double = = and Triple equals === example Learn JavaScript for C# Developers

If we use the double quotes.

Here’s the trick I want to show you. It’s false if we use the triple equals ( = = = ).

Equality Triple Equal Example === Learn JavaScript for C# Developers

I don’t like languages that coheres my type to make them equal to each other. You want to stick with the triple equals in almost any app you do. It is little bit hard to remember that, if you are coming from C# world, but that’s a big deal.

Also, you’ll notice that address is not null, it’s actually returning that it’s undefined.

Undefined Value Example - Learn JavaScript for C# Developers

That’s because it hasn’t been assigned a value yet, vs street, you can see is null that will be used to in C#. That would be one example of some of the differences.

 

Scope

You” notice I have a variable in JavaScript called “age”.

Scope Example Code in Visual Studio - Learn JavaScript for C# Developers

If we do an Alert, the alert is like a message box that pops up. It is going to show it is 55. But notice in this loop, I am defining a new “age” and using that “age” to actually loop through and then riding out age.

Loopfunction JavaScript code example - Learn JavaScript for C# Developers

Well, that’s going to be function scope, so we have global scope and function scope here.

Global Scope vs Functional Scope - Learn JavaScript for C# Developers

Then down here at the bottom, you’ll notice I’m doing a block.

LoopBack Function Block example code - Learn JavaScript for C# Developers

Just four loops standing on its own. I am also redefining “age” as 0.

Now the question is what’s that going to affect? Is it going to affect the top Global Scope age? Or is it going to affect the Function Scope?

Let’s run it and let’s see.

We should get a three or so message boxes. You will see the first time it ran, global age was 55.

Showing Alert in Browser - Learn JavaScript for C# Developers

That’s what we would expect that would be correct. We’ll click “ok” and then, the internal one in the function, when it gets done looping, it was 5.

Showing Alert in Browser 2 - Learn JavaScript for C# Developers

I would expect that. But notice the last one, it should have written out 55. Instead, it wrote 5.

Scope in JavaScript Browser - Learn JavaScript for C# Developers

The reason is we over-load the value by doing “Var age” because there is no block level scope in JavaScript.

Var Age Example code - Learn JavaScript for C# Developers

Now, you’re going to see that it’s going to change in ECMAScript 6. There’s a new keyword they are going to introduce called, “Let,” and that will make the age scope only to the block.

Let LoopFunction Example - Learn JavaScript for C# Developers

ECMAScript 6 will help with some of the problems with the scoping. But, that’s not quite ready for prime-time yet. That’s another difference that you’ll need to know about is the scoping in JavaScript.

Another big difference in Functions can totally stand on their own in the JavaScript world. Whereas in C#, you have to put your methods inside of your Class.

C# code example of loopFunction - Learn JavaScript for C# Developers

Well functions in JavaScript are actually objects. This little function definition for a person, you can think of that as like a class. Normally, add under that class, a property called name and assign it to Jane Doe.

Now I can move up that person, just like its regular class.

Create Instance of Object - Learn JavaScript for C# Developers

That’s definitely unique compared to the C# type of approach because we are used to classes and you move up to the class.

Because we don’t have classes in JavaScript, you can substitute this function approach because functions are objects. There is a lot of interesting things you can do. This would just write out Jane Doe, if we are to run this one.

Inheritance

The last and big difference between C# and JavaScript is inheritance. Because we don’t have classes and inheritance like Java or C#, we have to use what’s built into the language, and it is called prototypal inheritance.

JavaScript Supports Prototypal Inheritance - Learn JavaScript for C# Developers

There is a prototype property that every object can hear it from the base object in JavaScript. You’ll notice in this case, we have an object called base.

Learn JavaScript for C# Developers

It is a blueprint, it is like our class, if you will. Then off base, I am going to go to the prototype, that’s inherited from an object in JavaScript. I am going to add a log function that just does an alert when it’s run.

Now, let’s say that I have a child that needs to inherit the functionality from base and what we really want to do is, when the child is run, we call log. What will happen is, it will first look at the child and ask, “Do you have a log function?” If you do, it will call him. If you don’t, it will then walk up the hierarchy which we are going to create in the next line of code and say “Do you have a log function?”

What we are going to do is to a have a child and we are going to assign to the child’s prototype, the new base.

New Base Code Example - Learn JavaScript for C# Developers

Really, that’s going to make the prototype of the base object available here to our child.

Function Alert Add code example - Learn JavaScript for C# Developers

After that, we are going to attach our own little add method. What is interesting here is, down in this code, when I call c.log after I move up the child, that’s going to look first in the child’s prototype and the local stuff and say “Do you have a log?”

Find New Log code- Learn JavaScript for C# Developers

It’s not going to find it. What it is going to do is, it’s going to walk up the prototype chain until it finds a prototype in a parent that has the log and then it would find this guy and then, it would run the function.

Unlike the “add” that you see in this example above, that actually would come in and just call the child’s add that’s on the child’s prototype itself.

 

Inheritance is totally different. This is one of the current ways that you can enable prototypal inheritance. ECMAScript 6 will be changing everything.

That’s a quick example of the few of the key differences and certainly there will be more I can cover, but that will get you thinking about how C# matches up.

Videos You May Like

A Simple Introduction to Cisco CML2

0 3877 0

Mark Jacob, Cisco Instructor, presents an introduction to Cisco Modeling Labs 2.0 or CML2.0, an upgrade to Cisco’s VIRL Personal Edition. Mark demonstrates Terminal Emulator access to console, as well as console access from within the CML2.0 product. Hello, I’m Mark Jacob, a Cisco Instructor and Network Instructor at Interface Technical Training. I’ve been using … Continue reading A Simple Introduction to Cisco CML2

Creating Dynamic DNS in Network Environments

0 638 1

This content is from our CompTIA Network + Video Certification Training Course. Start training today! In this video, CompTIA Network + instructor Rick Trader teaches how to create Dynamic DNS zones in Network Environments. Video Transcription: Now that we’ve installed DNS, we’ve created our DNS zones, the next step is now, how do we produce those … Continue reading Creating Dynamic DNS in Network Environments

Government Edition – Encrypting a USB Flash Drive in Windows 10

0 276 2

In this video, Security Instructor Mike Danseglio demonstrates how to use BitLocker in Window 10 to secure files on a USB Flash drive that adhere to stricter data protection requirements as found inside Government entities. BitLocker 2-day instructor-led training is now available at Interface: BITLOCK: Planning and Deploying BitLocker Drive Encryption Training Video Transcription: Hi. … Continue reading Government Edition – Encrypting a USB Flash Drive in Windows 10

Write a Comment

See what people are saying...

  1. Pingback: JavaScript for C# Developers – Key concepts of C# and JavaScript Syntax | Dinesh Ram Kali.

  2. Pingback: ECMAScript 6 – The Future of JavaScript for C# Developers

  3. Pingback: JavaScript for C# Developers – The Key concepts of Syntax

Share your thoughts...

Please fill out the comment form below to post a reply.