Introduction :
JavaScript is world's most well liked programming language for front-end development. It adds interactivity to the web site. For example, when user clicks on button or any element on web page, you want some output. This includes searching, sorting, alert, redirection, showing details etc. That thing can't be done by HTML and CSS.
Here, JavaScript comes into the picture.
JavaScript is a scripting language.
Programming language vs Scripting language :
Primary difference between scripting language and programming language is in their execution. If you are somewhat familiar with programming then you may know that when we write code (code that is human readable, ex. C, C++, Python, JavaScript etc.), it is converted into machine code (code that is machine readable, ex. binary code (00000101)) internally because computers understand only binary. That conversion is done by compiler or interpreter. Compiler links different code files into programs that gives .exe file (executable file) and finally program runs.
Programming languages use a compiler to convert human readable code into machine code while scripting languages use an interpreter.
Interpreter vs Compiler
Interpreter translates just one line of code into machine code at a time. Compiler first scans entire program and then coverts whole of it into machine code.
An Interpreter doesn't generate any intermediary code therefore, it's memory efficient. A Compiler always generate an intermediary object code therefore, memory inefficient.
Programming language like C, C++, Java, C# use compilers while Python, JavaScript, Ruby etc. use interpreters.
JavaScript is open source and cross-platform language (enables developer to develop cross-platform software which can be run on all or most systems with little or no modification.)
Top companies that use JavaScript
Now,
Some of the great organizations that uses JavaScript are..
1. Microsoft
You might be not aware about it but Microsoft relies on JavaScript quite a lot.
Now, they have accepted NodeJS a whole lot else. They utterly support NodeJS on Azure cloud platform.
2. Netflix
Like everyone, initially Netflix was using Java for everything. They too ran into trouble with time required to develop, complexity of code and it's size.
Over time, they switch from their traditional way to cloud and started using JavaScript. That helped to speed up the things and the rest is history!
Today, large portion of Netflix is running with JavaScript.
3. Google
You're probably aware that Google uses JavaScript. It's kind of hard to miss.
Yes, JavaScript is everywhere. Google's search results springs up as user types with JavaScript. Gmail web client is also powered by JavaScript. Google docs is too rely on JavaScript.
4. Facebook
If you want to predict how much Facebook is involved in JavaScript development, try to disable JavaScript in your web browser and use Facebook. You'll be unable to even login!
5. Uber
Uber need to handle bunch of data in real time. Millions of requests of customer, track driver's location, track rider's location. It needs to optimally sort data and match rider as fast as possible.
All this stuff is handled by JavaScript strength.
Another Examples are Instagram, Reddit, LinkedIn, PayPal, eBay, Walmart, Slack, Airbnb, Stack, Vox media etc.
These are only few examples. but there are a lot more. Major of the web runs on JavaScript. It would be a bit harder to find a company or a software that doesn't use JS at all.
Now, we have understood usage and importance of it, Let's thrive into it.
Editors to write JavaScript Code :
You can use any editor to run JS code. Sublime Text, Brackets, Atom, Comodo Edit, Vim, Visual Studio Code or even Notepad++ or Notepad. You just need to give extension .js while saving the file.
JavaScript Syntax :
Syntax in programming means set of rules that determines how program is constructed. For example, if you know C language, you may know that how to declare variable, how to write loops etc. in C.
Declare variable in JavaScript :
var a
var a, b
var a,b,c,d
Assign values to variables
var a = 5 // assign value at the time of initialization
var a
a = 5 // first initialize variable then assign value
var a=5, b=7; // assign value at the time of initialization (more than one variable in single line)
var a, b
a=5; b=7 // first initialize variable then assign value (more than one variable in single line)
Perform Operations on Variables :
var e = a + b;
var f = a/b;
JavaScript Values :
It defines two types of values :
- Fixed values (Literals and Constants)
- Variable values (Variables)
Before 2015, JavaScript had only var. After release of ES6 or ECMAScript 2015, second major revision of JS, let and const were introduced.
These two keywords provides Block scoped variables and constants in JS. Before ES6, JS had only two scopes : Global Scope and Functional Scope.
Comments :
Comments are used in programming language for explanation of code i.e. what's this code for?
They are ignored by compilers and interpreters.
Single-line comments :
Start with // and end with //
Example :
// declare var x and assign value = 10
var x =10
Multi-line comments :
Start with /* and end with */
/*The below code will declare a varible x and
assign value of 10 to it in web page */
var x = 10
Identifiers :
Identifiers are names that is given to the variables, functions, keywords and labels.
First character must be a letter, an underscore (_), or a dollar sign ($).
Example :
var abc, // correct
var _ab // correct
var $ab // correct
var a2 // correct
var 2a // Incorrect
Moreover, you should not use any JS keyword as variable name
Example,
var boolean // Incorrect
var while // Incorrect
Hyphens:
Hyphens are not allowed as identifier because it is reserved for subtractions.
Example:
First-name, last-name // incorrect
Character Set :
JS follows Unicode character set.
Unicode includes almost all characters, punctuations, and symbols in the world.
To make understanding deeper, Take a look at Unicode character set.
Case Sensitivity :
JavaScript is case-sensitive. It means Value and value convey different meanings in JS. This should be taken care while declaring variables, function names etc.
Example :
try to execute following code :
var Value ;
value = 6;
alert(Value)
you will get undefined in alert box. This is because we have assigned 6 to the value, Value is still undefined.
Semicolons are optional.
JavaScript statements are generally followed by semicolons, like C,C++ and Java to sustain compatibility. However, you can omit it if each statement is on separate line.
Example,
var a = "John"
var b = "Joy"
However, when formatted in single line, you must use semicolon.
Example :
var a = "John"; var b ="Joy"
Placement in HTML file :
There are four ways :
- Script in <head> ... </head> section.
- Script in <body> ...</body> section.
- Script in <body> ...</body> section and <head> ... </head> sections.
- Script in external file and include in <head> ... </head> section.
If you are writing JavaScript code in body tag, insert it just before the body tag ends.
Because HTML document executes from top to bottom. If you write it at starting of body tag or in between, your script run before your HTML document body is not loaded fully. So you will get error in console.
If you are writing JavaScript code in external file, use src attribute to specify file name in html document.
E. g. <script src="MyScript.js></script>
Data Types :
It has many data types like number, string, objects etc.
Concept of Data Types
Data type is a primitive concept in programming.
Example:
var a = 100 + "John".
Well, it doesn't make sense to add 100 to a string "John".
Output will be:
100john
It means JS treat it as "100" + "John"
Note : while adding a number and a string, JS treats number as a string.
Execution will be from left to right
Example :
var a = 100 + "John". // Output : 100John
var a = "John" + 100 // Output : John100
var a = 100 + 20 + "John" // Output : 120John
var a = "John" +100 + 20 // Output : John10020
as first operand is string, all operand is treated as string
JavaScript types are dynamic.
Same variable can be used to hold different data type.
Example :
var a // a is undefined.
var a =10 // a is number
var a = "John" // a is string.
Strings
Strings can be written in single quotes or double quotes.
Example :
var product1= "iPad"
var product2 = 'refrigerator'
You can use quotes inside quotes like this :
var statement1 = "My name is 'Bella' ";
//Single quotes inside double quotes
var statement2 = 'My name is "Bella" ';
//Double quotes inside single quotes
var statement3 = "My name is "Bella" " //Incorrect
This is Incorrect , because computer consider quotes starting before Bella as closing quotes of quotes at the beginning of statement.
var statement4 = 'My name is 'Bella' ' //Incorrect
This is too incorrect due to above reason.
Numbers
Numbers can be written with or without decimals.
Example
var n = 100.00 // With decimal
var n =100 // Without decimal
Extra large numbers can be written with scientific notation
Example
var y = 123e5 // 12300000
var z = 123e-5 //0.00123
Booleans
Booleans are used for conditional testing.
Example
var a = 8
var b = 8
var c = 8.5
a = = b // returns true
a = = c // returns false
Arrays :
Arrays are written with square brackets
Example :
var array= ["Mobile Phone", "iPad", "Laptop", 6, 2.5]
Objects
Objects are written with curly braces
Example
var book = { title : "Two States ", author : "Chetan Bhagat" , genre : "Fiction" , publisher : "Rupa publication Pvt. Ltd. " }
Here book is the Object.
It has four properties : title, author, genre, publisher
typeof operator
Used to determine type of JS variable.
Example.
typeof "Bella" // returns string
typeof "" // returns string
typeof 324 // returns number
typeof 3.24 //returns number
Undefined
variable without value has the value undefined
Example :
var product
typeof product //returns undefined
variable can be emptied by assigning value undefined. Here type will also be undefined
example
var product = undefined // value is undefined.
typeof product // type is undefined
Empty values
var product = "" // here value is ""
typeof product // returns string
Note : empty value is completely unrelated with undefined. It's totally different.
Null
In JS, Null means nothing.
Surprisingly, data type of null in JS is an object.
Example :
var product ;
product = null
typeof product // returns object
Note: you can consider it as bug in JS that typeof null is an object. Ideally, It should be null.
Undefined Vs Null
They are same in value but different in type.
Example :
var a = 100 // a is number
var a = "100" // a is string
here, a and b has the same value but their data type is different.
same way is undefined and null.
typeof undefined // returns undefined
typeof null // returns object
Data type of Array
typeof operator returns object for an array because in JavaScript arrays are objects
Example :
var array = [4,5,12,78.36]
typeof array // returns object
These are some basics of JS. We will dig deeper in JavaScript concepts Next time.
Stay tuned!
Thanks.
