× back

Basics of JS

How website's Front-End works (Client-Side)?

There are three pilars of Front-End that we must know and that are:

  1. HTML/HTML 5
    • HTML stands for Hyper Text Markup Language.
    • HTML is the standard markup language for creating Webpages.
    • HTML describes the structure of a Web page.
  2. CSS/CSS 3
    • CSS stands for Cascading Style Sheets.
    • CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
    • With CSS, you can control the color, font, the size of Basics of JS etc.
  3. JavaScript
    • JavaScript is Basics of JS-based programming language used both on the client-side and server-side that allows you to make web pages interactive.
    • JavaScript improves the user experience of the web page by converting it from a static page into an interactive one.

Values and variables in JavaScript

                   
      Name     Value
       ↑         ↑
       |         |
       |         |
var myName = "Vinod";
      |
      |
      ↓
   Variable (key)
                   
               
                   
var myName = "Vinod";
var myAge = 26;
console.log(myName);
console.log(myAge);

Naming Varaibles: Rules and Best practices

  • The first character must be a letter or an underscore (_) or an dollar ($). You can't use a number as the first character.
  • The rest of the variable name can include any letter, any number, or the underscore. Can't use any otehr characters, including spaces.
  • Variable names are case sensitive.
  • No limit to the length of the varible name.
  • You can't use one of the JavaScripts's reserved words as a variable name.

Data Types in JavaScript

Six Data types that are primitives:

typeof operator is used to know the data type of value or variable passed.

                        
var myName = "Vinod";
var myAge = 26;
var iAmThapa = true;
// typeof operator
console.log(typeof(myName));
console.log(typeof(myAge));
console.log(typeof(iAmThapa));

Output ↓

                   
string
number
boolean

Challenge

Guess the Output

  • 10 + "20"
  • 9 - "5"
  • "Java" + "Script"
  • " " + " "
  • " " + 0
  • "Vinod" - "Thapa"
  • true + true
  • true + false
  • false + true
  • false - true

1. Interview question

Difference between null and undefined?

  • null is assigned by the user to a variable.
  • when any value is not assigned to a variable it becomes undefined.
  • undefined is a data type while null is not.
  • typeof null is object (bug) while typeof undefined variable is 'undefined'.

What is NaN?

  • When one string is subtracted from another string the output is NaN.
  • NaN is a property of the global object.
  • In other words, it is a variable in global scope.
  • The initial value of NaN is Not-A-Number.
  • isNaN is method using which we can check if a variable or a value is number or not.
                       
var myPhoneNumber = 9876543210;
var myName = "thapa technical";

console.log(isNaN(myPhoneNumber));
// this method can be used for checking if user is entering numeric value or not.
console.log(isNaN(myName));
if(isNaN(myPhoneNumber))
{
    console.log("Please enter a valid phone number");
}

Challenge

  • NaN === NaN
  • Number.NaN === NaN
  • isNaN(NaN)
  • isNaN(Number.NaN)
  • Number.isNaN(NaN)

Expressions and operators

                   
         Operand
            ↑
            |
console.log(5 + 20);
              |
              ↓
            operator
// 20 is also Operand

Types of operator is JS

  1. Assignment operators
  2. Arithmetic operators
  3. Comparison operators
  4. Logical operators
  5. String operators
  6. Conditional (ternary) operator

Assignment operator

  • An assignment opertor assigns a value to its left operand based on the value of its right operand.
  • The simple assignment operator is equal (=).
                                     
var x = 5;
var y = 5;

// console.log("is both the x and y are equal or not : " + x == y); // give wrong output (false)

// using new method of ES6
console.log(`is both the x and y are equal : %{x == y}`);

Arithmetic operators

  • An arithmetic operator takes numerical values (either literals or variables) as their operands and return a single numerical value.
                       
console.log(3 + 3);
console.log(10 - 5);
console.log(20 / 5);
console.log(5 + 6);
console.log("Remainder operator : " + 81 % 8);

Increment and decrement operator

  • Operator: x++ and ++x or x-- or --x.
  • If used postfix, with operator after operand (for example, x++), the increment operator increments and returns the value before incrementing.
  • If used prefix, with operator before operand (for example, ++x), the increment operator increments and returns the value after incrementing.
                                     
var num = 15;
var newNum = num++;
console.log(num); // 16
console.log(newNum); // 15
  • Postfix increment operator means the expression is evaluated first using the original value of the variable and then the variale is incremented(increased).
                                      
var num = 15;
var newNum = ++num;
console.log(num); // 16
console.log(newNum); // 16
  • Prefix increment operator means the variable is incremented first and then the expression is evaluated using the new value of the variable.
  • Same with decrement operator.

Comparison operator

  • A comparision operator compares its operands and returns a logical value based on whether the comparision is true or false.
                       
var a = 30; 
var b = 10;

// Equal (==)
console.log(a == b); // false 

// Not equal (!=)
console.log(a != b); // true

// Greater than (>)
console.log(a > b); // true 

// Greater than or equal (>=)
console.log(a < b);

// less than (<)
console.log(a < b); // false 

// less than or equal 
console.log(a <= b); // false

Logical operators

  • Logical operatos are typically used with boolean (logical) values.
  • When they are used they return a Boolean value.
  • Logical AND (&&)
    • The logical AND (&&) operator (logical conjunction) for a set of operands is true if and only if all the operands are true.
  • Logical OR (||)
    • The logical OR (||) (logical disjunction) for a set of operands is true if and only is one or more of its operands is true.
  • Logical NOT (!)
    • The logical NOT (!) operator (logical complement, negation) takes truth to falsity and vice versa.
                                          
var a = 30;
var b = -20;

// Logical AND (&&)
console.log(a > b &&  b > 0); // false

// logical OR (||)
console.log(a > b || b > 0); // true

// logical NOT (!)
console.log(!(a > b || b > 0)); // false

String Concatenation (operator)

  • The concatenation operato (+) concatenates two string values together, returning another string that is the union of the two operand strings.
                           
console.log("Hello World"); // Hello World
console.log("Hello" + " World"); // Hello World
var myName = "Vinod";
console.log(myName + " Thapa"); // Vinod Thapa

Challenge 3

1- What will be the output of 3**3?

  • This basically means 33
  • Known as exponentiation operator (**)
                       
console.log(3**3); // 9

2- What will be the output, when we add a number and a string?

                       
console.log(5 + "thapa"); // 5thapa

3- Write a program to swap two numbers?

                       
                        var a = 5;
                        var b = 10;

                        var temp = a;
                        a = b;
                        b = temp;
                         
                        console.log("The value of a is : " + a);
                        console.log("The value of b is : " + b);

4- Write a program to swap two numbers without using third variable?

                                        
var a = 5;
var b = 10;

a = a + b;
b = a - b;
a = a - b;
console.log("The value of a is : " + a);
console.log("The value of b is : " + b);

Interview questions

What is the difference between == and ===?

                       
var num1 = 5; // number 
var num2 = '5'; // string 
console.log(num1 == num2); // true
console.log(num1 === num2); // false
  • == checks only the value while === checks operand's data type also.