Select Page

What is in javascript – Advanced Javascript Tutorial

Written by Quadrum Lee


In this article, we’re going to talk on the topic of  What is in javascript. So we will discuss all high-level javascript concepts every front-end developers should know. This article will be useful for both beginners and advanced js developers.

Let’s start with JavaScript syntax.

01. JavaScript syntax

JavaScript Syntax Mean? – Set of rules are defined in JavaScript, how the program will be written and interpreted by the browser.

JavaScript syntaxes are loosely based when compared to Java and it is kind of subset of java syntax. (But java and javascript are 2 different things)

(i) First javaScript code – You can use JavaScript statements inside the <script></script> tags in HTML web page. <script> tags will alert the browser to start the interpreting all statements with those tags.

<script language ="javascript" type ="text/javascript">
   Some of your JavaScript statements
</script>

* Language – Do not need to use this attribute and this was deprecated for a long time. Used to specify the scripting language (JavaScript vs VBScript) you use and its default value will be javascript.

* Type – If use XHTML 1.0 or HTML 4.01 and omit type, it will consider as invalid.

In HTML 5, there is only one scripting language on the web and allows us to use <script></script>

    (ii) WhiteSpace & Line breaks – Since JavaScript ignores spaces, tabs, and newlines, you can use them in your program to format and indent the code. It makes your code consistent and increases the readability as well.

    (iii) JavaScript Variables – Hold the data value and you can change it any time. It uses var keyword to declare a variable and it must have a unique name. Use equal to (=) operator to assign a value to a variable.

    var numberVar = 21441; // variable stores numeric value
    
    var stringVar = 'two';  // variable stores string value
    
    var unAssignedVar;  // declared a variable without assigning a value
    

    (iv) Semicolons are optional – Like C, C++ and Java, statements in javaScript are normally followed by a semicolon character but you can omit the semicolon of each javascript statement are written on a separate line.

    You can omit semicolons here,

    varfirst = 1000
    varSecond = 200
    

    You must use semicolons when formatted single line,

    var1 = 10; var2 = 20;
    

    (v) Case sensitivity – JavaScript is case sensitive and you mush aware of this. keywords used in the js, identifiers and function names should be written with a consistent capitalization of letters.

    (vi) JavaScript Operators  – JavaScript uses + - * / to compute the values. Those operators as Arithmetic.

    (54 -34 + 36) * 100
    

    JavaScript uses  =  to assign values and we called it assignment operators.

    (54 -34 + 36) * 100
    

    (vii) Comments in JavaScript – 

    * All the text between // and the end of the line will be ignored by JavaScript.
    * All the text between /* and */ will be ignored

    (Viii)  Dollar sign($) and Underscore(_) in JavaScript

    Both dollar sign and underscore characters are javaScript identifiers, and they can identify an object same way other names would. (Objects – variables, properties, functions, events, and objects )

    ($)Dollar sign –  There is nothing special about $ sign in javaScript but it simply valid javaScript identifier. This was intended to use some machine-generated variables such as $10001.

    (_) Underscore sign –  Using underscore at the beginning of the identifier is a good underscore convention to use for things that are sort of private.

    02. JavaScript Operators

    Same as in other languages, operators perform one or more data values and produce the result. We can categorize the javaScript operators as follows,

    1. Arithmetic Operators
    2. Comparison Operators
    3. Assignment Operators
    4. Logical Operators
    5. Conditional Operators

    1. Arithmetic Operators

    + operator - Use to add 2 numeric values

    var firrstVar = 10; secondVar = 20;
    
    firstVar + secondVar // returns 30
    
    - operator - Subtract a right value from left value

    var firrstVar = 10; secondVar = 20;
    
    firstVar - secondVar // returns -10
    
    * operator - Mulitple 2 values

    var firrstVar = 10; secondVar = 20;
    
    firstVar * secondVar // returns 200
    
    / operator - Divide left value by right value.

    var firrstVar = 10; secondVar = 20;
    
    firstVar + secondVar // returns 0.5
    
    % operator -This is a modulus operator and returns the remainder of 2 values

    var firrstVar = 10; secondVar = 23;
    
    secondVar % firrstVar // returns 3
    
    ++ operator - Use to increment the value by 1

    var firrstVar = 10;
    
    firrstVar++; // returns 11
    
    -- operator - Use to decrement the value by 1

    var firrstVar = 10;
    
    firrstVar-- // returns 9
    

    2. Comparison Operators

    == operator - Compare only 2 values and it doesn't consider the type.

    var firrstVar = 10; secondVar = "10";
    
    firrstVar == secondVar; // returns true
    
    === operator - Compare both values and types.

    var firrstVar = 10; secondVar = "10";
    
    firrstVar === secondVar; // returns false
    
    != operator - Check the inequality of two values.

    var firrstVar = 10; secondVar = 10;
    
    firrstVar != secondVar; // returns false
    
    Returns true only if right side value is greater than left side value

    var firrstVar = 100; secondVar = 50;
    
    firrstVar > secondVar; // returns true
    
    Returns true only if right side value is less than left side value

    var firrstVar = 100; secondVar = 1000; 
    
    firrstVar < secondVar; // returns true

    03. JavaScript Objects

     There are non-primitive data types in javascript (Number, String, Boolean, null, undefined and symbol) but objects are non-primitive data types. It simply likes other variables but the only difference is that the javascript object can hold multiple values such as properties and method.

    04. JavaScript Function

    The JavaScript function is a piece of code designed to perform a particular task and a handy way to write the same code multiple times. It is started to execute when invokes it. function invocation will be happed in the following ways,

     

    • When an event occurs (User press the button).
    • Invoke within the code.
    • Invoke automatically (self invoke)

     

    1. Arguments (or parameters) – Parameters are listed inside the function parentheses () and it acts similar to variable inside the function. You can call the parameter for variable inside the function definition and the actual value you pass to the function is arguments.

    Click here to See the example

    function nameOfFunction(parameter1, parameter2, parameter3) {
      // javascript code 
    }
    
    nameOfFunction(arg1, arg2, arg3);
    

    2. Function Expression – In JavaScript, we can assign a function to variable explicitly and no matter how the function is defined. Variable store the return value of the function and you can call it without using parentheses.

    Click here to See the example

    function nameOfFunction(parameter1, parameter2) {
      return parameter1 + parameter2;
    }
    
    const value = nameOfFunction(34, 53);
    

    3. Function Hoisting – Hoist means to raise or lift.  JavaScript refers to variables and function declarations that are lift or raised to the top of your code.

    It means you can reference them before they are declared because they are raised to the top and javaScript engine knows they exist. It will not give you an error. When you try to reference those variables or in the case of a function declaration, it will be able to find that function and invoke it. So that’s basically what hoisting is.

    I have a simple function and 3 console.log statements. The first one logs the temp variable and it is declared at the bottom of the function. Finally, I invoke the function before declare it.

    Click here to See the example

    hoisting();
    
    function hoisting() {
      console.log(temp);
      console.log("Temp will print as undefined");
    }
    

    4. “this” inside function – This is one of the features that confuses a lot of developers. So in this part, I will explain it in more detail. Simply, this reference the object that is executing the current function. I’ll show it in a very simple rule of thumb, If that function is part of an object we call the function and method right? if the function is a method in an object, this reference that objects itself.

    method -> obj

    Otherwise, if that function is a regular function which means it’s not part of an object this reference is the global object which is the window object in browsers and global in a node.  Confuse right? Let’s look at a few examples.

     

    function -> global (window,  global)

     

    Example 1
    I start with a video object and it has a title property and play() method. I log this keyword in play() method and call the play() method in video object as video.play().
    Click here to See the example 1

    const video = {
    	title: 'Name of the tilte',
      play() {
      	console.log(this);
      }
    }
    
    video.play();
    

    Result –

    ExplanationWe got the video object as a result of the above example. play() is a method in the video object and this reference video object itself. For the same object, we can add a method later in this object and we’ll get the same result. Let’s do it in the next example.

    Example 2 –
    I add a stop() method to the same object and console log this inside the function. Call video.stop() method and once again we’re going to see the video object on the console.

    Click here to See the example 2

    const video = {
    	title: 'Name of the tilte',
      play() {
      	console.log(this);
      }
    }
    
    videoObject.play();
    

    Result –

    5. Arrow function – This is another way to define a function in a javaScript that came with ES6 version of JavaScript. I’m going to be comparing them and contrasting them with the normal function syntax that you all already know. So let’s get started with some examples. Following here, I have an example of normal function and the same function converted to arrow function below it.

    Click here to See the example 1

    // Normal Function
    function add(first, second) {
    	return first + second;
    }
    
    // Arrow Function
    const add2 = (first, second) => {
    	return first + second;
    }
    

    Now add and add2 are both the exact same function. Just one uses the arrow syntax and the other uses a normal function syntax. We can go even further to reduce this code slightly more as below.

    Click here to See the example 2

    const add2 = (first, second) =>  first + second
    

    So we completely removed return and curly braces and put everything on one line.  If you do like this, everything after the arrow is assumed to be returned.

    6. Function Binding – This is mainly used if you want to get the same value of this from the function. By default, this case is handled by arrow function and need to use bind() method for normal regular function. Now let see the example of regular function without binding,

     

    Example 1I have an object temp and it has 2 properties X and Y . Now I use this X and Y value of an object in the function findCordinate() without using any arguments or parameters.

    Click here to See the example 1

    const temp = {
      x: 23,
      y: 98
    }
    
    function findCordinate() {
      console.log(this.x + ' ' + this.y);
    }
    
    findCordinate();
    

    Result –

    Explanation – It gives undefined for both values of the above example because of it actually binding to the window object. If you print this inside the function and you’ll get the global window object but we wanted to print the values of the object we created. Let’s do it with the bind() method.

    Basically it is done by 2 steps,

    1. Bind the object to a function.
    2. Reference it using this.
    Click here to See the example 2

    const temp = {
      x: 23,
      y: 98
    }
    
    function findCordinate() {
      console.log(this.x + ' ' + this.y);
    }
    
    let func = findCordinate.bind(temp);
    
    func();
    

    Result –

    6. Higher-order functions – This is the major concept in functional programming. Higher-order functions are the function takes another function as an argument and returns a function as an output. The common application of higher-order function is the callback and there are several methods in javascript that allows us to pass a function that will be used as a part of that method. Array methods are a great example.

     

    In this article, we’ll take look at the sort() method and see the following example. I have an array and it contains some animal names start with upper case or lower case letters. Then I sorted the array and see the result.

    Click here to See the example 1

    var array = ['Dog', 'cat', 'Cow', 'rabbit', 'Deer', 'Snake'];
    
    array.sort();
    
    console.log(array);
    

    Result –

    Explanation If we look at the above example, we will see it sorted but notice how the sort is taking place. Uppercase letters are coming before lowercase letters so it’s not really an alphabetical order.

    In sort(), you can pass in an argument and the argument which you pass in is a function. Therefore sort() is a higher-order function. It has been built to perform its operation with a function that we can pass in. So we could pass in a function here, the function we pass it needs to be able to receive two values and then it compares those values. So it’s a comparison function. It receives those 2 values of arguments and determines which should appear first.

     

    • If the function returns a negative number the first argument will appear before the second.
    • if the function returns a positive number the second argument will appear first.
    • if the function returns a zero it means the 2 arguments are equal. So it doesn’t matter which appears first.

     

    Let’s fix the above sorting issue for the words starts with upper case and lower case letters. So inside the sort method, pass the anonymous function and write operation to determine which order to put the item from the array

    Click here to See the example 2

    var array = ['Dog', 'cat', 'Cow', 'rabbit', 'Deer', 'Snake'];
    
    array.sort(function(firstWord, secondWord) {
      let lowerCaseFirst = firstWord.toLowerCase();
      let lowerCaseSecond = secondWord.toLowerCase();
      
      if (lowerCaseFirst < lowerCaseSecond) return -1;
      if (lowerCaseFirst > lowerCaseSecond) return 1;
      
      return 0;
    
    });
    
    console.log(array);
    

     

    Result –

    05. JavaScript Frameworks

    Let say you want to build the website or web apps according to your client’s requirement. Now let assume it’s like a building a house. So you could start to build the house from scratch without any components, but it takes more time and doesn’t make a lot of sense. 

    Coding in javaScript is also similar to it. There are certain common features in every website and it makes more sense to apply from a template. That’s where javascript frameworks come into play. I listed down here are some popular and widely used frameworks reflecting to the latest js trend.

     

    1. Vue js – Front-end library to help you build JavaScript applications. Vue js is more robust than something like jQuery since it gives you specific recommended patterns for code organization. Although used a lot of useful concepts from angular, react, jQuery and others. It’s usually not found in the wild by itself. You’ll see it used with lots of other libraries and combined to make sort of a framework an alternative to react angular and others

     

    2. React js – react is an open-source front end JavaScript library and it is used to building user interfaces. There are 2 key points in this definition.

    The first one is that react is a JavaScript library and it is not a framework. It is focused on doing one thing and doing that one thing really well. building user interfaces is the second part. So react does not focus on the other aspects of your application like routing or HTTP requests and It is responsible only for building rich user interfaces.

    Now if that raises a concern as to how you would handle routing HTTP and other functionalities. You don’t have to worry about it. react has a rich ecosystem and plays really well with other libraries and is more than capable of building full-fledged web applications

     

    3. Angular js – it’s a full-featured JavaScript framework built and maintained by Google and it’s used for building front-end web applications or building the front end of a full-stack app.

    For a long time back in 2010, angular js was released which is still available today but it’s a totally different framework in all features when they built angular version 2. They decided to do a full rewrite of the framework and now on version 7. However, version 2 through 7 are the same framework and there have just been some minor updates.

     

    Summary of above JavaScript frameworks

    Now as far as popularity, react is in first place in terms of the number of jobs but angular is still very relevant it’s still thriving especially in the world of big business and enterprise I don’t think it’s going anywhere anytime soon and even though it may not be the most popular it’s still one of the big three which are react vue and angular

     

    0 Comments

    Submit a Comment

    Your email address will not be published. Required fields are marked *

    Related Articles

    Binary Search Algorithm with Example | Data structures

    Binary Search Algorithm with Example | Data structuresG, 0 Comments Binary search will take less time than the linear search. The one pre-request of binary search- Array should be sorted. If the data is not sorted in the array, you cannot apply a binary...

    React Interview Questions with Answers- (2020)

    React Interview Questions with Answers- (2020)G, 0 Comments  Follow me on Medium In this article, we're going to talk all react interview questions with answers and will be useful for the people who get readying or for the interviews or want to improve the...

    Stay Up to Date With The Latest News & Updates

    Join Our Newsletter

    Follow Us