1.  (a) Client-side JavaScript extends the core language by supplying objects to control a browser & its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.
2.  (b) Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.

What is JavaScript ?

JavaScript (JS) is a lightweight, interpreted, just-in-time compiled, high-level, prototype-based, dynamic typed, object-oriented programming language, with first-class functions.

TERMINOLOGIES EXPLAINED

Things that JavaScript can do:

1.  (a) Show or hide more information by click of a button
2.  (b) Change color of a button when mouse hovers
3.  (c) Slide through a carousel of images on homepage
4.  (d) Zooming in or zooming out on an image
5.  (e) Displaying a timer or count-down on a website
6.  (f) Playing audio & video in a web page
7.  (g) Displaying animations & Using a drop-down hamburger menu

1.  (a) Developers can use various JavaScript frameworks and libraries
2.  (b) JavaScript front-end frameworks include React, React Native, Angular, and Vue
3.  (c) A few famous examples include Paypal, LinkedIn, Netflix, Uber etc. use JavaScript.

1.  (a) build simple web servers
2.  (b) develop the back-end infrastructure using Node.js

1.  (a) JavaScript library, RevealJS is used to build a web-based slide deck
2.  (b) Examples like slides.com

1.  (a) quadcopters come with a simple OS that makes it possible to install NodeJS.
2.  (b) Which means, you can program a drone

History of JavaScript:

Brendan Eich created the JavaScript in 1995. At that time, web pages could only be static, lacking the capability for dynamic behavior after the page was loaded in the browser.

JavaScript was called LiveScript earlier at Netscape corporation. It became very popular during the dot-com boom.

ECMAScript standard

JavaScript Engines

JavaScript engine is a software component that executes JavaScript code and converts it into computer understandable language. All relevant modern engines use just-in-time compilation for improved performance. JavaScript engines are typically developed by web browser vendors, and every major browser has one.

JavaScript Analogy : English Grammar

Modern Web browser

Getting started with JavaScript is easy: all you need is a modern Web browser.

Install the either one of the prefered browsers like Google Chrome or Firefox Browser

Web Console

The Web Console tool built into browers like Google Chrome / Firefox is useful for experimenting with JavaScript; you can use it in two modes: single-line input mode, and multi-line input mode.

Syntax refers to the structure of the language, which is, what constitutes a correctly-formed program.

Observe the below code:

// Program to add two numbers

// function declaration for adding two numbers
function addNum(num1, num2) {
    let total = 0
    total = num1 + num2
    return (total)
}

let value1 = 0; value2 = 0
value1 = parseInt(prompt('Enter the first number: '))   // Input first number
value2 = parseInt(prompt('Enter the second number: '))  // Input second number

/* 
   Invoking the function addNum() 
   and Printing the Output 
*/ 
console.log(`The sum of ${value1} and ${value2} is ${addNum(value1, value2)}`)            
            

Enter the first number: 24
Enter the second number: 12
The sum of 24 and 12 is 36

This above script illustrates several of the important aspects of JavaScript syntax.
Let's walk through it and discuss some of the syntactical features of JavaScript.

Comments are marked by // or /* */

// Program to add two numbers                               

value1 = parseInt(prompt('Enter the first number: '))   // Input first number

/* 
  Invoking the function addNum() 
  and Printing the Output 
*/ 
                                    

End-of-Line terminates a statement

total = num1 + num2
            

Semicolon can optionally terminate a statement

Sometimes it can be useful to put multiple statements on a single line. This shows in the example, how the semicolon ; familiar in C or Python Language, can be used optionally in JavaScript to put two statements on a single line.

In JavaScript, instructions are called statements and are separated by semicolons ;. A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they must be separated by semicolons.

let value1 = 0; value2 = 0;
          

Functionally, this is entirely equivalent to writing

let value1 = 0
let value2 = 0
          

Block scope represented by { }

In addition, variables declared with let or const can belong to Block scope. This scope created with a pair of curly braces { } (a block).

In the function declaration, the block of code looks:

In programming languages, a block of code is a set of statements that should be treated as a unit.

// function declaration for adding two numbers
function addNum(num1, num2) {
    let total = 0
    total = num1 + num2
    return (total)
}
          

Whitespaces within lines does not matter

White space within lines of JavaScript code does not matter

For example, all three of these expressions are equivalent:

sumNumbers=12+34
sumNumbers = 12 + 34
sumNumbers    =    12    +    34

Abusing this flexibility can lead to issues with code readibility.

Using whitespace effectively can lead to much more readable code, especially in cases where operators follow each other - compare the following two expressions for exponentiating by a negative number:

Observe that second version with spaces much is more easily readable at a single glance.

squareNumber=9**2
// Check the below with SPACES
squareNumber = 9 ** 2
            

Parentheses are for grouping or calling

Two major uses of parentheses. First, they can be used in the typical way to group statements or mathematical operations:

12 * (34 + 56) 
# 1080

Secondly, they can also be used to indicate that a function is being invoked (called).

In the below snippet, the addNum() is used to call the function with two arguments. The function call is indicated by a pair of opening and closing parentheses, with the arguments to the function contained within:

addNum(value1, value2)
            

Some functions can be called with no arguments at all, in which case the opening and closing parentheses still must be used to indicate a function evaluation. An example of this is the toUpperCase() method of string datatype.

The "()" after toUpperCase indicates that the function should be executed, and is required even if no arguments are necessary.

let firstString = 'Skillzam'.toUpperCase()
console.log(firstString)

// SKILLZAM

Inline JavaScript

For Example: The below HTML file contains a <button> tag, which has inline JavaScript handler -
onclick="window.alert('You clicked the button!')"

<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Add inline JavaScript to HTML</title>
</head>
<body>

<!-- Inline JavaScript handlers - onclick="window.alert('You clicked the button!')" -->
<button onclick="window.alert('You clicked the button!')">Click Me</button>

</body>
</html>

Internal JavaScript

For Exmaple: In the below HTML code, the <script>...</script> tag inside the <body> section, contains the JavaScript code to write a text (string) on the webpage:

<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Add internal JavaScript to HTML</title>
</head>
<body>

  <!-- JavaScript code begins here -->
  <script>
      document.write("Example to demo the Internal JavaScript")
  </script>
  <!-- JavaScript code ends here -->

</body>
</html>

External JavaScript

For Example: the below mentioned HTML file contains External JavaScript file "app.js", which is added using <script> tag with src attribute.

<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Add external JavaScript to HTML</title>
  
  <!-- External JavaScript file "app.js" is added 
        using <script> tag with "src" attribute -->    
  <script src="app.js"></script>

</head>
<body>

</body>
</html>

Below JavaScript code is added to external file app.js without adding the <script> tag

document.write("Example to demo the External JavaScript")
 

NOTE: JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript.

Identifiers

Identifiers with special meanings: A few identifiers have a special meaning in some contexts without being reserved words of any kind. They include: arguments, as, async, eval, from, get, of, set

Keywords

NOTE: 16 reserved words in BOLD, have been removed from ECMAScript 5/6 standard.

Variables

// Declare a JavaScript Variable

let $price = 12           // using let
const PI = 3.142          // using const  
var premium = 12500.25    // using var
deductible = 500          // using nothing  

console.log($price)
console.log(PI)
console.log(premium)
console.log(deductible)

12
3.142
12500.25
500

Naming Variable

// Naming Variables & assignment 

let price = 120             // variable names can contain letters
var Price = 24              // price & Price are different as JavaScript is case-sensitive
let interest_rate = 2.25    // '_' is a valid usage in variable name
const QTY = 3               // All-caps is valid usage in variable name   
let acct101 = 'skillzam'    // variable names can contain numbers
var $amount = 200.25        // variable names can contain '$' sign                             
let isGreater = true        // variable names can contain combination of small & capital letters

JavaScript Variable Examples:

// JavaScript Variable Example
// Declare a JavaScript Variable using keywords var, let, const

var num1 = 5;            // Variable name can contain numbers like num1
const num2 = 6;  
let total = num1 + num2; // variable "total" will store value of 11 = ( 5 + 6 )
console.log("The value of total is: " + total)                                     
            

The value of total is: 11

// JavaScript Variable Example
// Variable names can start with "$" symbol like in $price1

const $price1 = 5;
const $price2 = 5;
let totalPrice = $price1 + $price2; 
console.log("The total is: " + totalPrice)

The total is: 10

// JavaScript Variable Example
// Variable names can start with "_" (underscore) symbol like in _name

let _name = "FIFA ";
_name += "World Cup 2022";
console.log(_name)
  

FIFA World Cup 2022

// JavaScript Variable Example
// variable declared without a value will have the value undefined

let salary;
console.log("The salary amount is : " + salary)
    

The salary amount is : undefined

// JavaScript Variable Example
// If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated

const intNum = 3;
const str = "31";           // Numbers within quotes will be treated as strings
let sumUp = str + intNum;   // concatenation of number and string
console.log("Result (sumUp) is : " + sumUp + " and the typeof is : " + typeof(sumUp))

Result (sumUp) is : 313 and the typeof is : string

Variable names with multiple words

1. Camel Case

Variable names where each word, except the first, starts with a capital letter:

let firstName = 'Jack'                                    
            

2. Snake Case

Variable names where each word is separated by an underscore ( _ ) character:

let last_name = 'Sparrow'                           
  

3. Pascal Case

Variable names where each word starts with a capital letter:

var MyFavoriteTeam = 'F C Barcelona'

Ways to declare a JavaScript Variable:

1. - Using var
2. - Using let
3. - Using const
4. - Using nothing

When to use const

Always declare a variable with const when you know that the value should not be changed. Use const when you declare:

Block Scope

// JavaScript "let" Keyword to define variable
// Cannot redclare a block-scoped variable using (let)

let favColor = "BLUE";
let favColor = "BLACK";    // SyntaxError
console.log("Favorite color is : " + favColor)

 
SyntaxError: Identifier 'favColor' has already been declared

Redeclaring Variables

// JavaScript "var" Keyword to define variable
// Redeclaring a variable inside a block will also redeclare the variable outside the block
// var has "NO" block scope

var  goals = 3; // Here goals variable container has the value 3
{  
var goals = 2;  // Here goals variable container has the value 2
}

// Here goals variable container has the value 2
console.log("Number of Goals scored : " + goals) 

Number of Goals scored : 2
              

// JavaScript "let" Keyword to define variable
// Redeclaring a variable with let, in another block, is ALLOWED
// let has block scope

let tax = 30;   // ALLOWED - Here tax variable container has the value 30
{
let tax = 25;   // ALLOWED - Here tax variable container has the value 25
console.log("Within Block scope : " + tax)  // value 25
}
{
let tax = 33;   // ALLOWED - Here tax variable container has the value 33
}
console.log("Outside the Block : " + tax)   // Here tax variable container has the value 30
    

Within Block scope : 25
Outside the Block : 30

Reassigning Variables

// JavaScript "const" Keyword to define variable
// "const" variable cannot be reassigned

try {
  const PI = 3.141592653589793;
  PI = 3.14;      // TypeError 
  console.log(PI);
}
catch (err) {
  console.log(err)
}

TypeError: Assignment to constant variable.
            

JavaScript Hoisting

// JavaScript "let" Keyword to define variable
// With "let" , you CANNOT use a variable before it is declared

// "try" statement allows to define a block to be tested for errors while it is being executed
try {                    
countryName = "India";   // ReferenceError 
let countryName;
console.log(countryName);  
}
// "catch" statement allows  to define a block to be executed, if an error occurs in try block
catch(err) {             
console.log(err)
}

ReferenceError: Cannot access 'countryName' before initialization
            

// JavaScript "const" Keyword to define variable
// Using "const" , before it is declared, is a syntax errror, so code will not run

cityName = "Bengaluru";
const cityName;            // SyntaxError
console.log("City of residence : " + cityName)

SyntaxError: Missing initializer in const declaration
            

1. Arithmetic Operators

They are summarized in the following table:

// addition, subtraction, multiplication

(12 + 34) * (12.3 - 4)   // 381.8

// division, Modulus, Exponentiation

22 / 7                  // 3.142857142857143
22 / 0                  // Infinity
31 % 2                  // 1
2 ** 3                  // 8

// Increment Operator

// Pre Increment
let i = 9
j = ++i        
console.log("i = " + i)
console.log("j = " + j)

// Post Increment
let x = 9
y = x++         
console.log("x = " + x)
console.log("y = " + y)

i = 10
j = 10
x = 10
y = 9

// Decrement Operator 

// Pre Decrement
let a = 9
b = --a        
console.log("a = " + a)
console.log("b = " + b)

// Post Decrement
let p = 9
q = p--         
console.log("p = " + p)
console.log("q = " + q)

a = 8
b = 8
p = 8
q = 9

2. Bitwise Operators

Bitwise operators are summarized in the following table:

// Number.toString(2) function returns the binary version of a specified integer

let num = 8
num.toString(2)     // '1000'

// Bitwise AND

9 & 10              // 8

//   1001 (9 in Binary)
// & 1010 (10 in Binary)
//_______________________
//   1000 (8 in Binary)

// Bitwise OR

9 | 10              // 11

//   1001 (9 in Binary)
// | 1010 (10 in Binary)
//_______________________
//   1011 (11 in Binary)

// Bitwise XOR

9 ^ 10              // 3

//   1001 (9 in Binary)
// ^ 1010 (10 in Binary)
//_______________________
//   0011 (3 in Binary)

// Bitwise << 'Zero fill left shift'

4 << 1           // 8

//    0100 (4 in Binary)
// << 0001 (1 in Binary)
//_______________________
//    1000 (8 in Binary)

// Bitwise >> 'Signed right shift'

4 >> 1           // 2

//    0100 (4 in Binary)
// >> 0001 (1 in Binary)
//_______________________
//    0010 (2 in Binary)

// Bitwise >>> 'Zero fill right shift'

4 >>> 1           // 2

//     0100 (4 in Binary)
// >>> 0001 (1 in Binary)
//_______________________
//     0010 (2 in Binary)

// Bitwise NOT
// JavaScript uses 32 bits signed integers, it will not return 10. It will return -6.
// 00000000000000000000000000000101 (5)
// 11111111111111111111111111111010 (~5 = -6)
// A signed integer uses the leftmost bit as the minus sign

~5                  // 10

// ~ 0101 (5 in Binary)
//_______________________
//   1010 (10 in Binary)

3. Assignment Operators

// Assignment Operator (=) equal

let assignNum = 66
console.log(assignNum)      

// 66

For example, to add 6 to assignNum we write:

assignNum + 6

// 72

// Assignment Operator with addition (+=)

let assignNum = 66
assignNum += 6     // equivalent to assignNum = assignNum + 6
console.log(assignNum)      

// 72

Each one is equivalent to the corresponding operation followed by assignment: that is, for any operator "■" the expression a ■= b is equivalent to a = a ■ b with a slight catch.

// Demo the Add and Assignment Operators 

let num1 = 6,  
    num2 = 2;

num1 += num2     //  num1 = num1 + num2
console.log( "Value of num1 = " + num1)  
        

Value of num1 =  8 

// Demo the Substract and Assignment Operators 

let num1 = 6,  
    num2 = 2;

num1 -= num2     // num1 = num1 - num2
console.log( "Value of num1 = " + num1)              
            

 
Value of num1 =  4

// Demo the Multiple and Assignment Operators 

let num1 = 6,  
    num2 = 2;
  
num1 *= num2     // num1 = num1 * num2
console.log( "Value of num1 = " + num1)            
            

 
Value of num1 =  12
  

// Demo the Divide and Assignment Operators 

let num1 = 22,  
    num2 = 7;

num1 /= num2     // num1 = num1 / num2
console.log( "Value of num1 = " + num1)       
            

 
Value of num1 = 3.142857142857143

// Demo the Exponent and Assignment Operators 

let num1 = 3,  
    num2 = 2;

num1 **= num2     // num1 = num1 ** num2
console.log( "Value of num1 = " + num1)       
            

 
Value of num1 =  9
  

// Demo the Modulus  and Assignment Operators 

let num1 = 7,  
    num2 = 4;

num1 %= num2     // num1 = num1 % num2
console.log( "Value of num1 = ", num1)        
            

 
Value of num1 =  3
  

// Demo the Bitwise AND Assignment Operator 

let num1 = 6,  
    num2 = 13;

num1 &= num2     // num1 = num1 & num2
console.log( "Value of num1 = " + num1)  

//   0110  (6 in binary)  
// & 1101  (13 in binary)  
//  ________  
//   0100 = 4 (In decimal)  
  

 
Value of num1 =  4
  

// Demo the Bitwise OR Assignment Operator

let num1 = 6,  
    num2 = 13;

num1 |= num2    // num1 = num1 | num2
console.log( "Value of num1 = " + num1)  

//   0110  (6 in binary)  
// | 1101  (13 in binary)  
//  ________  
//   1111 = 15 (In decimal)   
            

 
Value of num1 =  15
  

// Demo the Bitwise XOR Assignment Operator

let num1 = 9,  
    num2 = 10;

num1 ^= num2    // num1 = num1 ^ num2
console.log( "Value of num1 = " + num1)  

//   1001 (9 in Binary)
// ^ 1010 (10 in Binary)
//_______________________
//   0011 (3 in Binary)
      

Value of num1 =  3
  

// Demo the Bitwise 'Zero fill LEFT shift' Assignment Operator

let num1 = 4,  
    num2 = 1; 

num1 <<= num2    // num1 = num1 << num2
console.log("Value of num1 = " + num1)  

//    0100 (4 in Binary)
// << 0001 (1 in Binary)
//_______________________
//    1000 (8 in Binary)
            

Value of num1 =  8
  

// Demo the Bitwise 'Signed RIGHT shift' assignment operator

let num1 = 4,  
    num2 = 1; 

num1 >>= num2    // num1 = num1 >> num2
console.log("Value of num1 = " + num1)  

//    0100 (4 in Binary)
// >> 0001 (1 in Binary)
//_______________________
//    0010 (2 in Binary)
            

 
Value of num1 =  2
  

// Demo the Logical AND assignment operator

let num1 = 9,  
    num2 = 10; 

num1 &&= num2    // num1 = num1 && num2
console.log("Value of num1 = " + num1)  

Value of num1 =  10

// Demo the Logical AND assignment operator

let num1 = 9,  
    num2 = 10; 

num1 ||= num2    // num1 = num1 || num2
console.log("Value of num1 = " + num1)  

Value of num1 = 9

// Demo Nullish coalescing assignment operator
// Also called logical nullish assignment operator
// only assigns if a is nullish (null or undefined) (a ??= b)


let num1 = null, // Oberve that num1 is null 
    num2 = 10; 

num1 ??= num2    // num1 = num1 ?? num2
console.log("Value of num1 = " + num1)  

Value of num1 = 10

// Demo Nullish coalescing assignment operator
// On object data structures 

const player = {
  sport : 'hockey',
  country : 'India'
}

// Note that 'name' key is undefined in  'player' object
// player.name = player.name ?? 'Dhanraj Pillay'
player.name ??= 'Dhanraj Pillay'    
console.log("Value of player.name = " + player.name)  

Value of player.name = Dhanraj Pillay

4. Comparison Operators

Comparison operators can be combined with the arithmetic and bitwise operators to express a virtually limitless range of tests for the numbers.

For example, we can check if a number is odd by checking that the modulus with 2 returns 1:

// 13 is odd

13 % 2 == 1         // returns true

// 24 is even

24 % 2 == 0         // returns true 

// Equal and Strict Equal

let num1 = 99,
    num2 = '99';
    
isEqual = (num1 == num2)         // returns true 
console.log(isEqual)            

isStrictEqual = (num1 === num2)  // returns false 
console.log(isStrictEqual)

isNotEqual = (num1 != num2)      // returns false 
console.log(isNotEqual)     

true 
false 
false

We can string-together multiple comparisons to check more complicated relationships:

// string-together multiple comparisons
// Example : check if givenNum is between 9 and 19

let givenNum = 18
9 < givenNum < 19  // true

5. Logical Operators

// logical AND (&&) 

const result1 = true && true;        // t && t returns true
const result2 = false && false;      // f && f returns false
const result3 = false && true;       // f && t returns false
const result4 = false && 6 === 9;    // f && f returns false
const result5 = 'bat' && 'ball';     // t && t returns 'ball'
const result6 = 'false' && 'false'   // t && t returns 'false' 

// logical OR (||) 

const value1 = true || true;         // t || t returns true
const value2 = false || false;       // f || f returns false
const value3 = false || true;        // f || t returns true
const value4 = false || 6 === 9;     // f || f returns false
const value5 = 'bat' || 'ball';      // t || t returns 'bat'
const value6 = 'false' || 'false'    // t || t returns 'false' 

// logical NOT (!) 

const op1 = !true;                   // !t returns false
const op2 = !false;                  // !f returns true
const op3 = !"code";                 // !t returns false
const op4 = !null;                   // !f returns true
const op5 = !undefined;              // !f returns true

// logical AND (&&) Example 

let testNum = 11;
(testNum < 15) && (testNum > 10)     // true

// Logical OR (||) Example 

let testNum = 11;
(testNum > 9) || (testNum % 2 == 0)  // true

// Logical NOT (!)

let testNum = 11;
!(testNum < 7)                      // true

Boolean algebra aficionados might notice that the XOR operator is not included; this can of course be constructed in several ways from a compound statement of the other operators.

Otherwise, a clever trick you can use for XOR of Boolean values is the following:

// (testNum > 1) ^ (testNum < 10)  // return 0 or 1 

let testNum = 11;
(testNum > 1) != (testNum < 10)    // true            

These sorts of Boolean operations will become extremely useful when we begin discussing control flow statements such as conditionals and loops

6. Conditional Operators

SYNTAX : variableName = (condition) ? valueOne : valueTwo

Conditional operator assigns a value to a variable based on some condition (true or false).

1.  (a). Expression consists of three operands: the condition, valueOne and valueTwo.
2.  (b). Evaluation of the condition should result in either true/false or a boolean value.
3.  (c). The true value lies between “?” & “:” and is executed if the condition returns true. Similarly, the false value lies after “:” and is executed if the condition returns false.

// Conditional (Ternary) Operator
// Example to demo voting rights eligibility

let age = 24,               // Actual Age
    eligibleAge = 18,       // Eligible Age  
    votingRights;
    
votingRights = (age > eligibleAge) ? "eligible to vote!" : "NOT eligible to vote!";
console.log("Age of the citizen is " + 
            age + 
            " years. \n" + 
            "Hence, citizen is " + 
            votingRights);

Age of the citizen is 24 years. 
Hence, citizen is eligible to vote!

SYNTAX :
typeof(operand)
typeof operand

Listed below are types returned from typeof operator :

// typeof value returned from a 'integer' operand

const intNum = 123
typeof intNum     

// 'number'

// typeof value returned from a 'decimal' operand

let decimalNum = 3.142
typeof decimalNum    

// 'number'

// typeof value returned from a 'string' operand

let CompanyName = "Workzam"
typeof(CompanyName)                    

// 'string'

// typeof value returned from a 'boolean' operand

let isGreater = true
typeof(isGreater)         

// 'boolean'

    
// typeof value returned from a 'unassigned' operand
                   
let randNum;
typeof(randNum)

// 'undefined'

// typeof value returned from a 'null' operand

let tickerSym = null
typeof(tickerSym)        
  
// 'object'

// typeof value returned from a 'bigint' operand

const largeNumber = 1234567890123456789012345678901234567890n;   
typeof(largeNumber)

// 'bigint'

// typeof value returned from a 'symbol' operand

const player = {
  fname: "Leo",
  lname: "Messi",
  position: "Forward" 
};

let uid = Symbol('uid');
player[uid] = 98765;
typeof(uid)

// 'symbol'

// typeof value returned from a 'function' operand

function printVal () {
  console.log('Hello')
}

typeof printVal
            
// 'function'

// typeof value returned from a 'array' operand

const cricketer = ['Sachin', 'Dhoni', 'Virat']
typeof cricketer

// 'object'

// typeof value returned from a 'object' operand

const player = {
  fname: "Leo",
  lname: "Messi",
  position: "Forward" 
};

typeof player

// 'object'

// JavaScript DataType : number

const x = 5;            
const y = 10.75;
const z = 0;
let value1 = x + y;      // number datatype
let value2 = "string"/x; // NaN - Not a number 
let value3 = x/z;        // Infinity  
console.log("value1 = " + value1 + " and typeof(value1) is " + typeof(value1))
console.log("value2 = " + value2 + " and typeof(value2) is " + typeof(value2))
console.log("value3 = " + value3 + " and typeof(value3) is " + typeof(value3))

value1 = 15.75 and typeof(value1) is number
value2 = NaN and typeof(value2) is number
value3 = Infinity and typeof(value3) is number

// DataType number (integer/decimals) precision

let intNum1 = 999999999999999       // accurate up to 15 digits    
let intNum2 = 9999999999999999      // round-off        
let intNum3 = 1 / 3                 // maximum number of decimals is 17       
console.log(intNum1)
console.log(intNum2)
console.log(intNum3)

999999999999999
10000000000000000
0.3333333333333333

// Number in Exponential notation

let num1 = 12345e10      // exponential notation (e)     
let num2 = 12345e1000    // very large number         
console.log(num1)
console.log(num2)
              

123450000000000
Infinity

// Adding number and string 

let academy = "Skillzam"
const num = 99
let addUp = academy + num    // '+' operand will result in string datatype 
console.log("addUp = " + addUp + " and typeof(addUp) is " + typeof(addUp))

addUp = Skillzam99 and typeof(addUp) is string

NaN (Not a Number)

NaN is a reserved word indicating that a number is not a legal number.

Five different types of operations that return NaN:

// Types of operations that return NaN - Not a Number 

console.log(parseInt("skillzam"))    // NaN
console.log(Number(undefined))       // NaN 
console.log(Math.abs(undefined))     // NaN
console.log(Math.sqrt(-9))           // NaN
console.log(Infinity - Infinity)     // NaN
console.log(9 ** NaN)                // NaN
console.log(9 * "workzam")           // NaN
console.log("".charCodeAt(9))        // NaN
let dTime = new Date("skillzam").getTime()
console.log(dTime)                   // NaN

Infinity or -Infinity

// Infinity or -Infinity

console.log(Infinity);            // Infinity 
console.log(Infinity * 9);        // Infinity 
console.log(Math.pow(9, 999));    // Infinity 
console.log(Math.log(0));         // -Infinity
console.log(9 / Infinity);        // 0 
console.log(9 / 0);               // Infinity
            

// Strings created using Single quotes ('...')

let academy = 'Skillzam'          
console.log(academy)
          

Skillzam

// Strings created using Double quotes ("...") 

let tagLine = "Learn without limits!"    
console.log(tagLine)

Learn without limits!

// Strings created using Backticks (`...`) 

let moreLine = `A CURE platform: 
                - Cross-Skill 
                - Up-Skill
                - Re-Skill 
                - Expert-Skill`

console.log(moreLine)
  

A CURE platform: 
                - Cross-Skill 
                - Up-Skill
                - Re-Skill 
                - Expert-Skill

// Primitive string using String() method without "new" keyword

let techHiring = String('www.' + 'workzam'  + '.com')   // '+' is used for concatenation
console.log("techHiring = " + techHiring)
console.log("typeof(techHiring) is " + typeof(techHiring))

techHiring = www.workzam.com
typeof(techHiring) is string

// string wrapper object using "new" keyword

// String with new returns a string wrapper object
let playerType = new String("Midfielder")        
let player = "Ronaldinho is a " + playerType
console.log("playerType = " + playerType)
console.log("typeof(playerType) is " + typeof(playerType))
console.log("player = " + player)
console.log("typeof(player) is " + typeof(player))

playerType = Midfielder  
typeof(playerType) is object
player = Ronaldinho is a Midfielder 
typeof(player) is string

String {'Midfielder'}
0: "M"
1: "i"
2: "d"
3: "f"
4: "i"
5: "e"
6: "l"
7: "d"
8: "e"
9: "r"
length: 10
[[Prototype]]: String
[[PrimitiveValue]]: "Midfielder"

String Properties

Strings have three important properties:

// String contains characters/symbols  

let strVar01 = "$killzam 2023"
let strVar02 = "ಕನ್ನಡ"
console.log("typeof strVar01 = " + typeof(strVar01))
console.log("typeof strVar02 = " + typeof(strVar02))

typeof strVar01 = string 
typeof strVar02 = string

// Length of a given string using String attribute "length" 
// It returns number of characters contained in a string including SPACES

let strVar03 = ' JAVASCRIPT '    
console.log("Length of strVar03 = " + strVar03.length)

Length of strVar03 = 12

// Strings are immutable

let fruit = "GATES"
fruit[0] = "D"      // Using indexing, to change first charater to "D"    
console.log(fruit)  // No change in the original string value "GATES"

GATES

Escape Characters

// Double quotes inside a string, which is surrounded by double quotes

var sentence = "Camel is called the "ship" of the desert"    // SyntaxError

SyntaxError: Unexpected identifier 'ship'

// Escape character \" to avoid SyntaxError

var sentence = "Camel is called the \"ship\" of the desert"     
console.log(sentence)          

Camel is called the "ship" of the desert

Template literals

1.  (1). multi-line strings
2.  (2). string interpolation with embedded expressions
3.  (3). tagged templates which are special constructs

Multi-line Strings

A string with multi-lines can be created by template Literals using backticks.

// Multi-line strings created using Backticks (`...`) 

let multiLine = `A CURE platform: 
                - Cross-Skill 
                - Up-Skill
                - Re-Skill 
                - Expert-Skill`

console.log(multiLine)
  

A CURE platform: 
                - Cross-Skill 
                - Up-Skill
                - Re-Skill 
                - Expert-Skill

String Interpolation

// String interpolation using single variable placeholders

let name = 'Michael Phelps'
console.log(`${name} is called 'Flying Fish'!`)

Michael Phelps is called 'Flying Fish'!

// String interpolation using multiple variable placeholders

let name = 'Challenger Deep'
let location = 'Mariana Trench'
let txt = `The ${name} in the ${location}, is the deepest part of the ocean.`

console.log(txt)

The Challenger Deep in the Mariana Trench, is the deepest part of the ocean.

// String Interpoltion using expression placeholder
// Solve Quadratic Equation: x**2 - 8x + 15 = 0

const a = 1
const b = -8
const c = 15
const root1 = `Value of root1 = ${(-b + ((b**2 - 4*a*c)**0.5)) / (2*a)}`
const root2 = `Value of root2 = ${(-b - ((b**2 - 4*a*c)**0.5)) / (2*a)}`

console.log("The roots of Quadratic Equation are :")
console.log(root1)
console.log(root2)

The roots of Quadratic Equation are :
Value of root1 = 5
Value of root2 = 3
  

Tagged Templates

// Template literals are also Tagged templates

const championName = 'Garry Kasparov'
const championAge = 22
const isChampion = true;

function tagChampion(strings, champName, champAge) {
    let str0 = strings[0];    // ''
    let str1 = strings[1];    // ' became the youngest ever undisputed World Chess Champion at ' 
    let str2 = strings[2];    // '.' 

    if(isChampion) {
        return `${str0}${champName}${str1}${champAge}${str2}`;
    }
}

// creating tagged template by passing two arguments "championName" & "championAge"
const output = tagChampion`${championName} became the youngest ever undisputed World Chess Champion at ${championAge}.`;

console.log(output);
            

Garry Kasparov became the youngest ever undisputed World Chess Champion at 22.

String concatenation, Indexing & Slicing

Three basic string operations:

String Concatenation

You can combine, or concatenate, two strings using the + operator or or concat() string method.

// String Concatenation using "+" Operator 

let academy;
academy = 'Skill' + 'zam'    // String Concatenation
console.log(academy)
        

Skillzam

// String Concatenation using "concat()" string method

let fname = "Brendan"
let lname = 'Eich'
let fullname = fname.concat(" ", lname)    // String Concatenation
console.log(fullname)
        

Brendan Eich

String Indexing :

// String Indexing 

let rhyme = "Twinkle, Twinkle, Little Star"
rhyme[4]    //returns the character at index position 4

'k'

// Access an index beyond end of string, 
// then JavaScript returns "undefined" 

let rhyme = "Twinkle, Twinkle, Little Star"
rhyme[100]    // returns "undefined" 

undefined

// Reverse Indexing using "at()" method

let river = "Kaveri"
let reverseIndex = river.at(-6)     // allows for negative indexing as well
console.log(reverseIndex)

let beyondIndex = river.at(100)     // returns "undefined"  
console.log(beyondIndex)

K
undefined

String Slicing :

You can extract a portion of a string, called a substring. This substring is called Slice

slice() method:

SYNTAX : slice(start [, end])

// slice() method returns the substring

let city = "Mumbai"
city.slice(0,3)    // returns first three characters in string "Mumbai"

'Mum'

It's important to note that, JavaScript won't raise an Error when you try to slice between boundaries that fall outside the starting or ending boundaries of a string.

// slice() boundaries that fall outside starting or ending 

let city = "Mumbai"
city.slice(0,100)    // returns entire string

'Mumbai'

when you try to get a slice in which the entire range is out of bounds, Instead of raising an error, JavaScript returns the empty string ("").

//  slice() method's entire range is out of bounds

let city = "Mumbai"
city.slice(6,10)        // returns the empty string ''

''

// slice() method with no second arguments

let stadium = "Maracanã"
stadium.slice(4)     // start at position index 4, goes to end of string

'canã'

// slice() method with negative values for start/end argument

let stadium = "Maracanã"
stadium.slice(-8,-4)     // start at 8th position from right, end at 4th from right

'Mara'

// slice() method with no arguments
// copying the entry string

let stadium = "Maracanã"
let newStadium = stadium.slice()     // return entire string
console.log(newStadium)

Maracanã

String Methods

1.  (1). slice() :
   

   returns part of the string from start to end(but not including). If there is no second argument, then slice() goes till the end of the string. slice() also allows for negative values for start and end arguments, which means the position is counted from the string end (i.e. reverse indexing).
   If end parameter is omitted, undefined, or cannot be converted to a number (using Number(end)), or if end >= str.length, slice() extracts to the end of the string.

   SYNTAX : slice(start [, end])




// slice() method returns the substring

let city = "Mumbai"

// returns first three characters in string "Mumbai"
city.slice(0,3)    

OUTPUT

'Mum'

2.  (2). substring() :
   

   returns a new string containing characters of the calling string from (or between) the specified index (or indices). The difference between slice() & substring() is that start and end values less than 0 are treated as 0 in substring().
   If end parameter is omitted, substring() extracts characters to the end of the string.

   SYNTAX : substring(start [, end])




// substring() new string containing characters

let city = "Mumbai"

// returns last three characters in string "Mumbai"
city.substring(3,6)    

OUTPUT

'bai'

3.  (3). substr() :
   

   returns a portion of the string, starting at the specified index and extending for a given number of characters (length) afterwards. The difference between slice() & substr() is that the second parameter specifies the length of the extracted part.
   If length is omitted or undefined, or if start + length >= str.length, substr() extracts characters to the end of the string.

   SYNTAX : substr(start [, length])




// substr() returns a portion of the string

let city = "Newyork"

// returns first three chars in string "Newyork"
city.substr(0,3)    

OUTPUT

'New'

4.  (4). replace() :
   

   returns a new string with one, some, or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced. The original string is left unchanged. By default, the replace() method is case sensitive.

   SYNTAX : replace(pattern, replacement)




// replace() replaces a pattern (string) with another
              
let academy = "Skillzam - Learn without limits!"
academy.replace('-','=>')

OUTPUT

'Skillzam => Learn without limits!'

// replace() replaces a pattern (RegExp) with string
// Regular expressions are written without quotes

let goat = "Ronaldo is the GOAT in football!"

// regular Expression -  /i flag (case-insensitive)
const regex = /ronaldo/i;   
goat = goat.replace(regex, 'Messi');
console.log(goat)

OUTPUT

Messi is the GOAT in football!

5.  (5). replaceAll() :
   

   returns a new string with all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. The original string is left unchanged. If pattern is a regex, then it must have the global /g flag set, or a TypeError is thrown.

   SYNTAX : replaceAll(pattern, replacement)




// replaceAll() replaces a string with string

let iFeel = 'I love cricket. Most popular sport is "cricket".'
iFeel = iFeel.replaceAll("cricket","football");
console.log(iFeel)

OUTPUT

I love football. Most popular sport is "football".

// replaceAll() replaces a RegExp with string
// Regular expressions are written without quotes

let whatIfeel = 'I love cricket. Cricket is a team sport. Most popular sport is "cricket".'

// regular expression - /g flag (global match)
whatIfeel = whatIfeel.replaceAll(/Cricket/g,"Football");    
whatIfeel = whatIfeel.replaceAll(/cricket/g,"football");
console.log(whatIfeel)

OUTPUT

I love football. Football is a team sport. Most popular sport is "football".

6.  (6). toUpperCase() :
   

   returns the calling string value converted to uppercase (the value will be converted to a string if it isn't one). This method does not affect the value of the string itself since JavaScript strings are immutable.

   SYNTAX : toUpperCase()




// toUpperCase() - make string upper-case

const academy = "Skillzam - Learn without limits!"
academy.toUpperCase()

OUTPUT

'SKILLZAM - LEARN WITHOUT LIMITS!'

7.  (7). toLowerCase() :
   

   returns the value of the string converted to lower case. toLowerCase() does not affect the value of the original string itself.

   SYNTAX : toLowerCase()




// toLowerCase() - make string lower-case 

const pangram = "The quick brown FOX jumps over the lazy DOG."
const lowerPangram = pangram.toLowerCase()
console.log(lowerPangram)

OUTPUT

the quick brown fox jumps over the lazy dog.

8.  (8). trim(), trimStart(), trimEnd() :
   

   removes whitespace from both sides of a string and returns a new string, without modifying the original string. To return a new string with whitespace trimmed from just one end, use trimStart() or trimEnd().

   SYNTAX :
   trim()
trimStart()
trimEnd()




// trim() - trimStart() - trimEnd()
// removes whitespace 

let fastestBird = "    Peregrine Falcon is the fastest bird in the world.    "

let trimBird = fastestBird.trim()  // removes whitespace from both sides of string
console.log(`${trimBird}`)

let trimEndBird = fastestBird.trimEnd() // removes whitespace from End of string only 
console.log(`${trimEndBird}`)

fastestBird.trimStart()            // removes whitespace from start of string only

OUTPUT

Peregrine Falcon is the fastest bird in the world.
    Peregrine Falcon is the fastest bird in the world.
'Peregrine Falcon is the fastest bird in the world.    '

9.  (9). padStart(), padEnd() :
   

   pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. In padStart(), padding is applied from the start of the current string. In padEnd(), padding is applied from the end of the current string. The default value for padString parameter is unicode "space" (" ") , character (U+0020).

   SYNTAX :
   padStart(targetLength [, padString])
padEnd(targetLength [, padString])




// padStart() - pads start of the current string

// Demo1 : padStart()
const numStart = '7';
console.log(numStart.padStart(3, '0'));  // string output: 007
 
// Demo2 : padStart() 
const cardNumber = '4321987612346789';
const lastFour = cardNumber.slice(-4);
const cardMask = lastFour.padStart(cardNumber.length, '*');
console.log(cardMask);                  // string output: ************6789

OUTPUT

007
************6789

// padEnd() - pads end of the current string

// Demo1 : padEnd()
const numEnd = '7';
console.log(numEnd.padEnd(3, '0'));  // string output: 700

// Demo2 : padEnd() 
const cellNumber = '7173334444';
const firstThree = cellNumber.slice(0,3);
const cellMask = firstThree.padEnd(cellNumber.length, '*');
console.log(cellMask);               // string output: 717*******

OUTPUT

700
717*******

10.  (10). at() :
    

    returns the character at a specified index (position) in a string. This method allows for positive and negative integers as parameters. Negative integers count back from the last string character.

    SYNTAX : at(index)




// at() - returns the character at a specified Index
// Example of VIN - vehicle identification number

let vin = "1G8MB35B48Y105252"     // 17 charaters VIN 
const countryID = vin.at(0);      // returns character at '0' index position
console.log("Country Code is : " + countryID)

OUTPUT

 
Country Code is : 1

11.  (11). charCodeAt() :
    

    returns the unicode of the character at a specified index in a string. The return value is a integer between 0 and 65535 representing the UTF-16 code unit

    SYNTAX : charCodeAt(index)




// charCodeAt() - returns unicode of character at specified index

let holdingCompany = "Alphabet Inc."    
const utf16 = holdingCompany.charCodeAt(0);     // returns unicode 'A'
console.log(utf16)

OUTPUT

65

12.  (12). split() :
    

    method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.
    There are two arguments separator and limit. separatoris a pattern describing where each split should occur. limit is a non-negative integer specifying a limit on the number of substrings to be included in the array.

    SYNTAX : split(separator [, limit])




// split() - returns the array
// Example 1

let text = 'She sells seashells on the seashore.'

const wordsArray = text.split(' ') // returns array of words
console.log(wordsArray)       
console.log(wordsArray[2])     

OUTPUT

['She', 'sells', 'seashells', 'on', 'the', 'seashore.']
seashells

// split() - returns the array
// Example 2

let text = 'She sells seashells on the seashore.'

const charArray = text.split(''); // returns array of single characters
console.log(charArray) 
console.log(charArray[1])
  

OUTPUT

['S', 'h', 'e', ' ', 's', 'e', 'l', 'l', 's', ' ', 's', 'e', 'a', 's', 'h', 'e', 'l', 'l', 's', ' ', 'o', 'n', ' ', 't', 'h', 'e', ' ', 's', 'e', 'a', 's', 'h', 'o', 'r', 'e', '.']
h

// split() - returns the array
// Example 3

let text = 'She sells seashells on the seashore.'
const newText = text.split();     // returns array with single "text" string
console.log(newText);

OUTPUT

['She sells seashells on the seashore.']

13.  (13). indexOf(), lastIndexOf() :
    

    searches the entire calling string, and returns the index of the first occurrence of the specified substring. If the searchString not found, then the method returns -1. The second argument position is a number, the method returns the first occurrence of the specified substring at an index greater than or equal to the specified number.
    
    lastIndexOf() method returns the index of last occurrence of a specified text in a string. lastIndexOf() return -1 if the text is not found. The lastIndexOf() methods searches backwards (from the end to the beginning), meaning: if the second parameter is position, the search starts at that position index, and searches to the beginning of the string.
    
    The difference between search() and indexOf() is search() does not have second position argument whereas indexOf() cannot take regular expressions as search values.

    SYNTAX :
    indexOf(searchString [, position])
lastIndexOf(searchString [, position])




// indexOf() returns index of first occurrence of specified substring
// NOT specifying the second argument "position" will default to 0

let vibgyor = "violet indigo blue green yellow orange red"

const poistionIndigo = vibgyor.indexOf('indigo')   // 'indigo' is at index 7
console.log("Index position where 'indigo' was found is " + poistionIndigo)
 
const poistionBrown = vibgyor.indexOf('brown')     // 'brown' does not exists
console.log("Index position where 'brown' was found is " + poistionBrown)

OUTPUT

Index position where 'indigo' was found is 7
Index position where 'brown' was found is -1

// indexOf() returns index of occurrence of specified substring
// specifying the second argument "position"

let searchWhale = "The biggest whale in the world is Antarctic blue whale."

// negative position' argument will be assumed as 0 index position
const firstWhale = searchWhale.indexOf('whale',-15)   
console.log("Index position where 'whale' was found is " + firstWhale)
  
// 'position' argument is specified as 17 index position
const secondWhale = searchWhale.indexOf('whale',17)  
console.log("Index position where 'whale' was found is " + secondWhale)

OUTPUT

Index position where 'whale' was found is 12
Index position where 'whale' was found is 49

// lastIndexOf() returns index of last occurrence of specified substring

let searchWhale = "The biggest whale in the world is Antarctic blue whale."

const lastWhale = searchWhale.lastIndexOf('whale', searchWhale.length)    
console.log("Index position of last occurance of 'whale' is " + lastWhale)
  

OUTPUT

Index position of last occurance of 'whale' is 49

14.  (14). search() :
    

    executes a search for a match between a regular expression and String object i.e. this method searches a string or a regular expression in a String Object and returns the position of the match. If not match found, then the method will return -1.
    
    The difference between search() and indexOf() is search() does not have second position argument whereas indexOf() cannot take regular expressions as search values.

    SYNTAX :
    search(searchString)
search(regex)




// search() returns the position of first match of string/RegExp
// Argument passed is a "string"

const academy = "Skillzam - Learn without limits!"
let matchIndex = academy.search('Learn')  // search for first match of 'Learn' 

console.log(`The first match for searchString occurs at index position ${matchIndex}`)

OUTPUT

The first match for searchString occurs at index position 11

// search() returns the position of first match of string/RegExp
// Argument passed is a "Regular Expression"

const academy = "Skillzam - Learn without limits!"

// Any character which is not word or whitespace
const regex = /[^\w\s]/g                

// Search for first match of regex '-'
let matchIndex = academy.search(regex)  
let matchChar = academy[academy.search(regex)]

console.log(`The first match for character "${matchChar}" is at index position ${matchIndex}`)

OUTPUT

The first match for character "-" is at index position 9

15.  (15). includes() :
    

    performs a case-sensitive search to determine whether one string may be found within another string, returning boolean values true or false as appropriate.

    SYNTAX : includes(searchString [, position])




// includes() returns true/false depending on the strind found
// NOT specifying the second argument "position" will default to 0

const rhyme = "Baa, baa, black sheep, have you any wool?"
const isExists = rhyme.includes('baa')   // 'baa' exits and returns true
console.log(isExists)

OUTPUT

true

// includes() returns true/false depending on the strind found
// specifying the second argument "position"

const rhyme = "Baa, baa, black sheep, have you any wool?"

// Check if a string includes "Baa" - start at position 10
let isExists = rhyme.includes('Baa',10)   
console.log(isExists)

OUTPUT

false

16.  (15). startsWith() :
    

    determines whether a string begins with the characters of a specified string, returning boolean values of either true or false as appropriate. If the position argument is not specified, then it will default to 0

    SYNTAX : startsWith(searchString [, position])




// startsWith() returns whether a string begins with the characters

const mountain = "Mount Kilimanjaro is the highest mountain in Africa"
let doesBegin = mountain.startsWith('Mount')
console.log(doesBegin)

OUTPUT

true

// startsWith() returns whether a string begins with the characters
// specifying the second argument "position"

const mountain = "Mount Kilimanjaro is the highest mountain in Africa"

// Check if a string starts with "Kili" - start at position 10
let doesBegin = mountain.startsWith('Kili', 10)    
console.log(doesBegin)   // specify position as '6', it will return true

OUTPUT

false

17.  (16). endsWith() :
    

    determines whether a string ends with the characters of a specified string, returning boolean values of either true or false as appropriate. If the position argument is not specified, then it will default to 0

    SYNTAX : endsWith(searchString [, position])




// endsWith() returns whether a string ends with the characters

const mountain = "Mount Kilimanjaro is the highest mountain in Africa"
let doesEnd = mountain.endsWith('Africa')
console.log(doesEnd)

OUTPUT

true

// endsWith() returns whether a string ends with the characters
// specifying the second argument "position"

const mountain = "Mount Kilimanjaro is the highest mountain in Africa"

// Check if first 32 characters of a string ends with "highest"
let doesEnd = mountain.endsWith('highest', 32)    
console.log(doesEnd)      

OUTPUT

true

18.  (17). raw() :
    

    static method is a tag function of template literals. This is similar to the r prefix in Python, or the @ prefix in C# for string literals. It's used to get the raw string form of template literals — that is, substitutions (e.g. ${amount}) are processed, but escape sequences (e.g. \n) are not.

    SYNTAX :
    raw(strings, ...substitutions)
raw`templateString`




// raw() returns raw string form of a given template literal
// substitutions are processed, but escape sequences are not

const filePath = `C:\Users\Skillzam\Desktop\code\script.js`
console.log(filePath)    // Observer the escape characters being ommited

const scriptPath = String.raw`C:\Users\Skillzam\Desktop\code\script.js`
console.log(`JavaScript file is located at ${scriptPath}`)

OUTPUT

C:UsersSkillzamDesktopcodescript.js
JavaScript file is located at C:\Users\Skillzam\Desktop\code\script.js

Notice the first argument is an object with a raw property, whose value is an array-like object (with a length property and integer indexes) representing the separated strings in the template literal. The rest of the arguments are the substitutions. Since the raw value can be any array-like object, it can even be a string!
For example, 'ABCD' is treated as ['A', 'B', 'C', 'D']. The following is equivalent to `A${0}B${1}C${2}D`

// raw() returns raw string form of a given template literal
// substitutions are processed 

let text = String.raw({ raw: "ABCD" }, 0, 1, 2);  
console.log(text)

OUTPUT

A0B1C2D

19.  (18). repeat() :
    

    constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together. The argument count indicating the number of times to repeat the string.

    SYNTAX : repeat(count)




// repeat() returns a string with a number of copies
// Example 1

let word = 'buz'
let newWord = word + 'z'.repeat(5)
console.log(newWord)

OUTPUT

buzzzzzz

// repeat() returns a string with a number of copies
// Example 2

let website = 'w'.repeat(3).concat('.workzam.com')
console.log(website)

OUTPUT

www.workzam.com

// repeat() returns a string with a number of copies
// Example 3

let academy = 'Skillzam '
academy = academy.repeat(3) 
console.log(academy)

OUTPUT

Skillzam Skillzam Skillzam 

20.  (19). toString() :
    

    returns a string representing the specified string value.

    SYNTAX : toString()




// toString() returns a string representation

// new keyword will create a object from a constructor function (String())
const academyObj = new String('Skillzam'); 
console.log(academyObj);     

const academy = academyObj.toString()
console.log(academy);

OUTPUT

String {'Skillzam'}
Skillzam

21.  (20). valueOf() :
    

    returns the primitive value of a String object.

    SYNTAX : valueOf()




// valueOf() returns the primitive value

const jsObj = new String('JavaScript is everywhere.');
console.log(jsObj);
console.log(jsObj.valueOf());

OUTPUT

String {'JavaScript is everywhere.'}
JavaScript is everywhere.

22.  (21). match() :
    

    method retrieves the result of matching a string against a regular expression i.e it returns an array containing the results of matching a string against a string or a regular expression. If a regular expression does not include the g modifier (global search), match() will return only the first match in the string.

    SYNTAX :
    match(searchString)
match(regex)




// match() return array containing results of matching string
// Argument passed is a "string"
                
let tongueTwister = `Betty Botter bought a bit of butter, 
                     but the bit of butter was bitter, 
                     so Betty Botter bought a bit of better butter, 
                     to make the bit of bitter butter better.`

const matchResult = tongueTwister.match('butter')
console.log(matchResult)

OUTPUT

['butter']

// match() return array containing results of matching Regex
// Argument passed is a "Regex" with 'g' modifier (global search )
                
let tongueTwister = `Betty Botter bought a bit of butter, 
                     but the bit of butter was bitter, 
                     so Betty Botter bought a bit of better butter, 
                     to make the bit of bitter butter better.`

const regex = /butter/g    // regex with g modifier (global search )
const matchResult = tongueTwister.match(regex)
console.log(matchResult)

OUTPUT

['butter', 'butter', 'butter', 'butter']

// match() return array containing results of matching Regex
// Argument passed is a "Regex"  
// using global(g) and ignoreCase(i) flags with match()

let alphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
const regex = /[A-D]/gi        // regex with global & ignoreCase flags
const matchResults = alphabets.match(regex);
console.log(matchResults)

OUTPUT

['A', 'B', 'C', 'D', 'a', 'b', 'c', 'd']

23.  (22). matchAll() :
    

    returns an iterator of all results matching a string against a "string or regular expression" including capturing groups. If the parameter is a regular expression, the global flag g must be set, otherwise a TypeError is thrown.

    SYNTAX :
    matchAll(searchString)
matchAll(regex)




// matchAll() return iterator of all results matching a "string"
// Argument passed is a "string"  
                
let tongueTwister = `Betty Botter bought a bit of butter, 
                     but the bit of butter was bitter, 
                     so Betty Botter bought a bit of better butter, 
                     to make the bit of bitter butter better.`

const iterator = tongueTwister.matchAll("butter")    // string as argument
console.log(iterator)

const resultArray = Array.from(iterator)
console.log(resultArray)

OUTPUT

[object RegExp String Iterator]
[['butter'], ['butter'], ['butter'], ['butter']]

// matchAll() return iterator of all results matching a "regex"
// Argument passed is a "Regex" with 'g' modifier (global search )
                
let tongueTwister = `Betty Botter bought a bit of butter, 
                     but the bit of butter was bitter, 
                     so Betty Botter bought a bit of better butter, 
                     to make the bit of bitter butter better.`

const regex = /butter/g    // regex with g modifier (global search )
const iterator = tongueTwister.matchAll(regex)
console.log(iterator)

const resultArray = Array.from(iterator)
console.log(resultArray)

OUTPUT

[object RegExp String Iterator]
[['butter'], ['butter'], ['butter'], ['butter']]

// Boolean values numeric type

Boolean(2017)              // true
Boolean(-123)              // true
Boolean(2.728281)          // true
Boolean(Infinity)          // true
Boolean(-Infinity)         // true
Boolean(0)                 // false
Boolean(NaN)               // false

// Boolean values for string type

Boolean("Workzam")         // true
Boolean("2023")            // true
Boolean('')                // false

// Boolean values for other values

Boolean(true)              // true  
Boolean([12,24,36])        // true  
Boolean({name: 'Brendan'}) // true  
Boolean([])                // true  
Boolean({})                // true  
Boolean()                  // false
Boolean(false)             // false
Boolean(null)              // false
Boolean(undefined)         // false

Truthy & Falsy values

1.     ➤  false
2.     ➤  0 (zero)
3.     ➤  NaN
4.     ➤  '' (empty string)
5.     ➤  null
6.     ➤  undefined

// Falsy values

Boolean(false)             // false
Boolean(0)                 // false
Boolean(NaN)               // false
Boolean('')                // false
Boolean(null)              // false
Boolean(undefined)         // false

Boolean Methods

1.  (1). toString() :
   

   returns a string of either true or false depending upon the value of the object.

   SYNTAX : toString()




// toString() returns string of either true or false

// new keyword will create a object from a constructor function (Boolean())
const boolAcademyObj = new Boolean('Skillzam'); 
console.log(boolAcademyObj);     

const academy = boolAcademyObj.toString()
console.log(academy)
console.log(typeof(academy))

OUTPUT

Boolean {true}
true
string

2.  (2). valueOf() :
   

   returns the primitive value of a Boolean object.

   SYNTAX : valueOf()




// valueOf() returns the primitive value

const boolworkzamObj = new Boolean('Workzam')
console.log(boolworkzamObj)

const techHire = boolworkzamObj.valueOf()
console.log(techHire)
console.log(typeof(techHire))

OUTPUT

Boolean {true}
true
boolean

// undefined datatype

let studentCount;
typeof(studentCount)

'undefined'

// undefined boolean value

let btc
Boolean(btc)

false

// undefined datatype used in "if"

let premium;
if (typeof(premium) === "undefined") {
  console.log("Premium value not assigned.")
}
typeof(premium)

Premium value not assigned.
'undefined'

// undefined - any variable can be emptied

let price = 200
price = undefined    // NOT recommend doing this
console.log(price)

Premium value not assigned.
'undefined'

// null Datatype

const studentCount = null
console.log(studentCount)
console.log(typeof(studentCount))      // typeof null
console.log(Boolean(studentCount))     // Boolean value of null

null
object
false 

Difference between null and undefined

//null and undefined

typeof null               // "object" (not "null" for legacy reasons)
typeof undefined          // "undefined"
null === undefined        // false
null  == undefined        // true
null === null             // true
null  == null             // true
!null                     // true
isNaN(1 + null)           // false
isNaN(1 + undefined)      // true

//  bigint explained in examples
//  Example 1 

// create bigint variable
const largeNum = 9007199254740992n     // (Number.MAX_SAFE_INTEGER + 1) 
console.log(largeNum)                  // 9007199254740992n
console.log(typeof(largeNum))          // bigint

//  bigint explained in examples
//  Example 2

// typeof Operator
typeof(999n) === 'bigint'              // true
typeof(Object(999n)) === 'object'      // true

//  bigint explained in examples
//  Example 3

// Operators
let bigNum = BigInt(9007199254740992)  // BigInt() : 9007199254740992n
const bigNumPlus = bigNum + 7n         // Addition : 9007199254740999n
const bigNumMinus = bigNum - 7n        // Substract : 9007199254740992n
const bigNumProd = bigNum * 2n         // Multiply : 18014398509481984n
const bigNumBy = 10n / 3n              // Divide : 3n (decimal places are truncated)
const bigNumMod = bigNum % 10n         // Mod : 2n
const bigNumPow = 2n ** 53n            // Power : 9007199254740992n

//  bigint explained in examples
//  Example 4

// Comparisons
9n === 9                // false
9n == 9                 // true
9n > 99                 // false   
9n <= 9                 // true

// Conditionals 
!9n                     // false
!0n                     // true

//  bigint explained in examples
//  Example 5

// Array 
mixedArray = [8, 2n, 0, -6n, 10, 0n]   // BigInt & Number values may be mixed

Bigint Methods

1.  (1). toString() :
   

   returns a string representing this BigInt value in the specified radix (base).

   SYNTAX : toString(radix)

// toString() returns string representing BigInt value
// Without "radix" argument

// number dataype with big Value
const hugeNumber = 1234567890123456789012345678901234567890  
console.log(`hugeNumber value is ${hugeNumber} and datatype is ${typeof(hugeNumber)}`)

// create a bigint object from a constructor function - Bigint()
const bigintNumObj = BigInt(hugeNumber)     
console.log(`bigintNumObj value is ${bigintNumObj} and datatype is ${typeof(bigintNumObj)}`)

// apply toString() method to bigintNumObj
const largeNumber = bigintNumObj.toString()   
console.log(`largeNumber value is ${largeNumber} and datatype is ${typeof(largeNumber)}`)

hugeNumber value is 1.2345678901234568e+39 and datatype is number
bigintNumObj value is 1234567890123456846996462118072609669120 and datatype is bigint
largeNumber value is 1234567890123456846996462118072609669120 and datatype is string

// toString() returns string representing BigInt value
// with "radix" argument

const bigN = 9007199254740991n
bigN.toString(2)   // '11111111111111111111111111111111111111111111111111111'
bigN.toString(10)  // '9007199254740991'
bigN.toString(16)  // '1fffffffffffff'

1.  (2). valueOf() :
   

   returns the wrapped primitive value of a BigInt object.

   SYNTAX : bigIntObj.valueOf()

// valueOf() returns the primitive value

// BigInt variable created by adding 'n' at the end
const largeNum = 1234567890123456789012345678901234567890n   

// Using BigInt() method, BigInt variable created 
const bigNum = BigInt(9007199254740992)   

const largeNumValue = largeNum.valueOf()
const bigNumValue = bigNum.valueOf()

console.log(largeNumValue)          // 1234567890123456789012345678901234567890n
console.log(typeof(largeNumValue))  // bigint
console.log(bigNumValue)            // 9007199254740992n
console.log(typeof(bigNumValue))    // bigint

1234567890123456789012345678901234567890n
bigint
9007199254740992n
bigint

// symbol DataType creation using Symbol() method
// with 'description' argument as 'pid'

const player = {
  fname: "Leo",
  lname: "Messi",
  position: "Forward" }

let pid = Symbol('pid')   // description argument as 'pid'
player[pid] = 98765;
console.log('Player pid using Symbol: ' + player[pid])
console.log('typeof(pid) is ' + typeof(pid))
console.log('Player pid using Object: ' + player.pid)
                        

Player pid using Symbol: 98765
typeof(pid) is symbol
Player pid using Object: undefined

Shared Symbols in global registry

// Symbol.for() method 
 
let aadhar = Symbol.for('aadhar')
let citizenID = Symbol.for('aadhar')

console.log(aadhar)                    // Symbol(aadhar)    
console.log(citizenID)                 // Symbol(aadhar)   
console.log(aadhar === citizenID)      // true
console.log(typeof aadhar)             // symbol
console.log(typeof citizenID)          // symbol
                        

// Symbol.keyFor() method 
  
let keyAadhar = Symbol.keyFor(aadhar)
let keyCitizenID = Symbol.keyFor(citizenID)

console.log(keyAadhar)                // aadhar   
console.log(keyCitizenID)             // aadhar 

Symbol Methods

1.  (1). toString() :
   

   returns a string containing the description of the Symbol.

   SYNTAX : toString()

// toString() returns string containing description of Symbol

Symbol('skill').toString()     // "Symbol(skill)"
Symbol.iterator.toString()     // "Symbol(Symbol.iterator)
Symbol.for('zam').toString()   // "Symbol(zam)"

1.  (2). valueOf() :
   

   method returns the primitive value of a Symbol object.

   SYNTAX : valueOf()

// valueOf() returns the primitive value of Symbol

const symbolSSN = Symbol('ssn')
typeof (symbolSSN)                  // "symbol"
symbolSSN.valueOf()                 // Symbol(ssn)
typeof Object(symbolSSN)            // "object"
typeof Object(symbolSSN).valueOf()  // "symbol"

SYNTAX:
const arrayName = [item1, item2, item2, ...];

// Array Indexing Example

const academy = ['S','K','I','L','L','Z','A','M']
console.log("type of academy array is " + typeof(academy))
console.log("Length of academy array is " + academy.length)
console.log("The element at the '0' index is " + academy[0])

type of academy array is object
Length of academy array is 8
The element at the '0' index is S

// Create array of English Vowels (string)
// using array literals

const vowels = ['a', 'e', 'i', 'o', 'u']
console.log(vowels)

['a', 'e', 'i', 'o', 'u']

// Create array of Fibonacci series (number)
// using array literals

const fibo = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89]
console.log(fibo)

[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89]

// Create array of elements of different datatype

let three = "Three";
const mixData = [];         // creating an empty array

// Adding elements to array
mixData[0] = 'One'          // Array element is a string
mixData[1] = 2              // Array element is a integer
mixData[2] = three          // Array element is a variable
mixData[3] = [4, "five", 6] // Array element is an array
mixData[4] = 7.8            // Array element is a decimal
mixData[5] = {key:9}        // Array element is an object   

console.log(mixData)

['One', 2, 'Three', [4, 'five', 6], 7.8, {key: 9}]

Creating array

Arrays may be created in several ways:

The constructor builds a array whose items are the same and in the same order as iterable's items.

For example
Array('a','b','c') returns ['a', 'b', 'c']

Array(1, 2, 3) returns [1, 2, 3]

If the only argument passed to the Array() constructor, is an integer between 0 and 232 - 1 (inclusive), this returns a new JavaScript array with its length property.
Array(3) returns [,,]

// Creating array using pair of square brackets 
// Example: array of single digit even number

// creating Empty Array 
const arrayOne = []      

// Adding elements/items using index
arrayOne[0] = 6
arrayOne[1] = 28
arrayOne[2] = 496
arrayOne[3] = 8128

console.log(arrayOne)

[6, 28, 496, 8128]

// Creating arrays using different ways
// use of 'new' keyword is optional

const arrayTwo = [[1],[2,3],[4,5,6]]       // array from square brackets, separating items with commas
const arrayThree = new Array("WORKZAM")    // array from single string argument
const arrayFour = new Array(9)             // empty array with length 9 
const arrayFive = "ಅ,ಆ,ಇ,ಈ".split(',')  // array from string method split()
console.log(arrayTwo)
console.log(arrayThree)
console.log(arrayFour)
console.log(arrayFive)
            

[[1],[2,3],[4,5,6]]
['WORKZAM']
[,,,,,,,,]
['ಅ', 'ಆ', 'ಇ', 'ಈ']

Working with array

// Add item to an array 

const shoppingArray = ["tea", "coffee", "milk", "eggs"]
shoppingArray[4] = "honey"
console.log(shoppingArray)

['tea', 'coffee', 'milk', 'eggs', 'honey']

// Modify item in an array

const shoppingArray = ["tea", "coffee", "milk", "eggs", "honey"]
shoppingArray[4] = "bread"     // Change item from 'honey' to 'bread'
console.log(shoppingArray)

['tea', 'coffee', 'milk', 'eggs', 'bread']

// using "delete" remove item from array 

const shoppingArray = ["tea", "coffee", "milk", "eggs", "bread"]
delete shoppingArray[0]            // Remove the last item "honey" in the array
console.log(shoppingArray)
console.log(shoppingArray[0])      // deleted element at index(0) is removed 
console.log(shoppingArray.length)  // no change in length of array 

['tea', 'coffee', 'milk', 'eggs']
undefined
5

// Concatenation of arrays

const letters = ['A','B','C']
const numbers = [1,2,3]
let result = letters + numbers    // Concatenation using '+' operator
console.log(result)
console.log("type of 'result' is " + typeof(result))

A,B,C1,2,3
type of 'result' is string

Nested array

For example: An array inside an array.

// Matrix like structure using arrays

const row1 = [1, 2, 3]
const row2 = [4, 5, 6]
const row3 = [7, 8, 9]

// Nesting of arrays within a array 
const matrixOne = [row1, row2, row3]
console.log(matrixOne)

[[1, 2, 3], [4, 5, 6], [7, 8, 9]]

// Access first list item in matrix array

matrixOne[0]

[1, 2, 3]

// access first element of first array item in matrix array

matrixOne[0][0]

1

(1)  pop()

SYNTAX : pop()

// pop() removes last element of an array

const players = ["Sachin", "Dhoni", "Virat", "Zaheer", "Rahul"];
const popped = players.pop();    // removes last element 'Rahul'
console.log(popped)
console.log(players)
              

Rahul  
['Sachin', 'Dhoni', 'Virat', 'Zaheer']

(2)  push()

SYNTAX : push(element1, element2,...)

// push() adds new items to the end of an array
// push() method with single 'item' as argument

const capitalCities = ["NewDelhi", "NewYork", "London"]
const arraylength = capitalCities.push("Istanbul")
console.log(arraylength)
console.log(capitalCities)

4
['NewDelhi', 'NewYork', 'London', 'Istanbul']

// push() adds new items to the end of an array
// push() method with multiple 'items' as argument
               
const numbers = [12, 24, 45, 67]
const arraylength = numbers.push(78, 89, 91)
console.log(arraylength)
console.log(numbers)

7
[12, 24, 45, 67, 78, 89, 91]

(3)  shift()

SYNTAX : shift()

// shift() removes first element from an array

const players = ["Sachin", "Dhoni", "Virat", "Zaheer", "Rahul"];
const shifted = players.shift(); // removes first element 'Sachin'
console.log(shifted)
console.log(players)

Sachin
['Dhoni', 'Virat', 'Zaheer', 'Rahul']

// shift() removes first element from an array
// shift() method is used in 'while' loop

const players = ['Messi', 'Neymar', 'Ronaldo', 'Benzema']

// every iteration will remove next element from an array, until it is empty
while (typeof (player = players.shift()) !== "undefined") {
  console.log(player)
}

console.log("The 'players' array contains ", players)

Messi
Neymar
Ronaldo
Benzema
The 'players' array contains []

(4)  unshift()

SYNTAX : unshift(element1, element2,...)

// unshift() adds one or more elements to beginning of Array

const healthyFood = ['Avocado', 'Kiwi', 'Moringa']
const arrayLen = healthyFood.unshift('Spinach', 'Kale', 'Collard')
console.log(arrayLen)
console.log(healthyFood)

6
['Spinach', 'Kale', 'Collard', 'Avocado', 'Kiwi', 'Moringa']

(5)  includes()

SYNTAX : includes(element [, fromIndex])

// includes() returns true if an array contains 'element'
// Example contains one argument : 'element'

const fishes = ['Catfish', 'Bass', 'Carp', 'Tuna', 'Salmon']
let isExists = fishes.includes('Carp')    // search for 'Carp'
console.log(isExists)

true 

// includes() returns true if an array contains 'element'
// Example contains two argument : 'element' & 'fromIndex'

const fishes = ['Catfish', 'Bass', 'Carp', 'Tuna', 'Salmon']

// search for 'Tuna' from index position 3
let isExists = fishes.includes('Tuna', 3)    
console.log(isExists)

true 

(6)  indexOf()

SYNTAX : indexOf(element [, fromIndex])

// indexOf() returns first index of the found element else -1
// Example contains one argument : 'element'

const ranNum = [11, 12, 34 ,76, 11, 98]
let searchIndex = ranNum.indexOf(11)
console.log(searchIndex)

0

// indexOf() returns first index of the found element else -1
// Example contains two argument : 'element' & 'fromIndex'

const ranNum = [11, 12, 34 ,76, 11, 98]

// search for 11 from index position 3
let searchIndex = ranNum.indexOf(11, 3)
console.log(searchIndex)

4

(7)  concat()

SYNTAX : concat(value1, value2,...)

// concat() merge two or more arrays and returns a new array

const symOne = ['INR', 'USD', 'EUR']
const symTwo = ['JPY', 'CNY']
const symThree = symOne.concat(symTwo)
console.log("symThree = ", symThree)

// no change to the original arrays
console.log("symOne = ", symOne)
console.log("symTwo = ", symTwo)

symThree =  ['INR', 'USD', 'EUR', 'JPY', 'CNY']
symOne =  ['INR', 'USD', 'EUR']
symTwo =  ['JPY', 'CNY']

// concat() merge two or more arrays and returns a new array
// Example to concatenate array1 with array2 and values 7 & 8

const array1 = [2, 4, 6]
const array2 = [1, 3, 5]

// concatenate array1 with array2 and values 7 & 8
const array3 = array1.concat(array2, 7, 8)
console.log("array3 = ", array3)

// no change to the original arrays
console.log("array1 = ", array1)
console.log("array2 = ", array2)

array3 =  [2, 4, 6, 1, 3, 5, 7, 8]
array1 =  [2, 4, 6]
array2 =  [1, 3, 5]

// concat() merge two or more arrays and returns a new array
// concat() with no arguments

const fruits = ['apples', 'oranges', 'kiwi']
const newArray = fruits.concat()   // creates a shallow copy
console.log("newArray = ", newArray)

newArray =  ['apples', 'oranges', 'kiwi']

(8)  join()

SYNTAX : join([separator])

// join() returns a new string by concatenating elements in an array 

const shopList = ["Tea", "Milk", "Sugar"]

shopList.join()         // 'Tea,Milk,Sugar'
shopList.join(", ")     // 'Tea, Milk, Sugar'
shopList.join(" + ")    // 'Tea + Milk + Sugar'
shopList.join("")       // 'TeaMilkSugar'

// array with one element
['SKILLZAM'].join()     // 'SKILLZAM'

(9)  reverse()

SYNTAX : reverse()

// reverse() method reverses an array 

const colors = ['red', 'green', 'blue', 'orange', 'cyan']
colors.reverse()
console.log(colors)

['cyan', 'orange', 'blue', 'green', 'red']

// reverse() method reverses an array 
// Mutating returned array will mutate original array 

const fibonacci  = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 80]
const newFibo = fibonacci.reverse()
console.log("newFibo = ", newFibo)

// Modify one element of new array 'newFibo'
// original array 'fibonacci' is also modified
newFibo[0] = 89
console.log("newFibo = ", newFibo)
console.log("fibonacci = ", fibonacci) 

newFibo = [80, 55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0]
newFibo = [89, 55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0]
fibonacci = [89, 55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0]

// reverse() method reverses an array 
// NOT mutate the original array

const fibonacci  = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 80]

// spread(...) operator, will create a shallow-copied array
const newFibo = [...fibonacci].reverse()    
console.log("newFibo = ", newFibo)

// Modify one element of new array 'newFibo'
// No change to original array 'fibonacci'
newFibo[0] = 89
console.log("newFibo = ", newFibo)
console.log("fibonacci = ", fibonacci)     

newFibo = [80, 55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0]
newFibo = [89, 55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0]
fibonacci = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 80]

(10)  slice()

SYNTAX : slice([start], [end])

// slice() returns shallow-copied portion of array
// Single optional argument 'start' is used

const dinosaurs = ['Brachiosaurus', 'Patagosaurus', 'Spinosaurus', 'Tyrannosaurus']
const carniDino = dinosaurs.slice(2)
console.log(carniDino)

['Spinosaurus', 'Tyrannosaurus']

// slice() returns shallow-copied portion of array
// Both optional argument 'start' & 'end' are used

const dinosaurs = ['Brachiosaurus', 'Patagosaurus', 'Spinosaurus', 'Tyrannosaurus']
const herbiDino = dinosaurs.slice(0,2)
console.log(herbiDino)

['Brachiosaurus', 'Patagosaurus']

// slice() returns shallow-copied portion of array
// NO optional arguments are used

const dinosaurs = ['Brachiosaurus', 'Patagosaurus', 'Spinosaurus', 'Tyrannosaurus']
const newDino = dinosaurs.slice()    // creates a shallow-copied full array
console.log(newDino)

['Brachiosaurus', 'Patagosaurus', 'Spinosaurus', 'Tyrannosaurus']

(11)  splice()

SYNTAX : splice(start [, deleteCount] [, item1, item2... ])

// splice() changes the contents of an array 
// Using all three arguments with 0 'deleteCount'

const animals = ['Ape', 'Cow', 'Dog', 'Fox']
animals.splice(1, 0, 'Cat')    // Inserts 1 element at index 1
console.log(animals)

['Ape', 'Cat', 'Cow', 'Dog', 'Fox']

// splice() changes the contents of an array 
// Using all three arguments

const animals = ['Ape', 'Cow', 'Dog', 'Fox']

// Replaces 1 element with 1 element at index 3
animals.splice(3, 1, 'Elk')     
console.log(animals)

['Ape', 'Cow', 'Dog', 'Elk']

// splice() changes the contents of an array 
// Using all three arguments

const animals = ['Ape', 'Cow', 'Dog', 'Fox']

// Replaces 1 element with 3 elements at index 3
animals.splice(3, 1, 'Elk', 'Kob', 'Yak')    
console.log(animals)

['Ape', 'Cow', 'Dog', 'Elk', 'Kob', 'Yak']

// splice() changes the contents of an array 
// Using two arguments 'start' & 'deleteCount'

const animals = ['Ape', 'Cow', 'Dog', 'Fox']
animals.splice(3, 1)    // Removes 1 element at index 3   
console.log(animals)

['Ape', 'Cow', 'Dog']

For Example: Consider Football Player Leo Messi's Bio

This player bio example can be represented by a object data structure.

// Object Literal Example:

const playersBio = {
    name: "Leo Messi",
    team: "Paris Saint-Germain",
    position: "Forward",
    height: 170,
    weight: 159,
    birthdate: "24/6/1987",
    age: 35,
    nationality: "Argentina",
    careerHistory: ["Barcelona","PSG","Argentina"], 
    isRetired: false
}

// Objects do not allow duplicate keys

const numbers = {Keyone:1, Keyone:2, Keythree:3}
console.log(numbers)

{Keyone: 2, Keythree: 3}

// Object values can be of any dataType

const students = {
  fName: "Jasmine",    
  lName: "Dsouza",     
  gender: "Female",     // value is string DataType
  age: 20,              // value is number(integer) DataType  
  isGraduate: true,     // value is boolean DataType
  cgpa: 8.4,            // value is number(decimal) DataType 
  favSub: ["Physics","Computers"] // value is array 
}
console.log(students)

{fName: 'Jasmine', lName: 'Dsouza', gender: 'Female', age: 20, isGraduate: true, cgpa: 8.4, favSub: ['Physics', 'Computers', 'History']}

Creating Object

// Creating Object: 'Object Literal'

const fruitCost = { apples:123, oranges:456}    // using key:value pairs
console.log(fruitCost)      

{apples: 123, oranges: 456}

// Creating Object: using new keyword with 
// in-built Object constructor function

const car = new Object()

// Add properties to 'car' object
car.year = 2022
car.make = 'Mahindra'
car.model = 'XUV700'

console.log(car)      

{year: 2022, make: 'Mahindra', model: 'XUV700'}

// Creating Object: using new with 
// user-defined constructor function

// constructor function with 'this' keyword
function Cricketer (name, score) {
  this.fullName = name;
  this.runsScored = score;
}

// Create new Object 'playerOne'
const playerOne = new Cricketer('Virat Kohli', 183)
console.log(playerOne)      
console.log(playerOne.runsScored)      

Cricketer {fullName: 'Virat Kohli', runsScored: 183}
183

// Creating Object: using Object.assign() 
// to create new objects

// Object 'biography'
const biography = {
    name: "Cristiano Ronaldo",
    team: "Manchester United",
    position: "Forward",
    height: 187,
    weight: 183,
    birthdate: "5/2/1985",
    age: 37
}

// Object 'playerHist'
const playerHist = {
    nationality: "Portugal",
    careerHistory: ["ManU","Juventus","Real Madrid"], 
    isRetired: false
}

// Create new Object 'PlayerBio' using Object.assign()
const PlayerBio = Object.assign({}, biography, playerHist)

console.log(PlayerBio)      
console.log(PlayerBio.name)      

{name: 'Cristiano Ronaldo', team: 'Manchester United', position: 'Forward', height: 187, weight: 183, birthdate: "5/2/1985", age: 37, nationality: "Portugal", careerHistory: ["ManU","Juventus","Real Madrid"], isRetired: false }
Cristiano Ronaldo

// Creating Object: using class to create objects

// class created with constructor function
class Employee {
  constructor(name, location) {
    this.fullname = name
    this.city = location
  }
}

// Create new object
const empOne = new Employee('Fred Silva', 'Rio de Janeiro') 

console.log(empOne.fullname) 
console.log(empOne.city) 
console.log(empOne) 

Fred Silva
Rio de Janeiro
Employee {fullname: 'Fred Silva', city: 'Rio de Janeiro'}

Working with Object

Almost "everything" is an object in JavaScript. All values, except primitives, are objects.

Access the properties of an object by referring to its key, inside square brackets.

// Accessing the items of a Object
// Using key inside square brackets

const students = {
    fName: "Jasmine",    
    lName: "Dsouza",     
    gender: "Female",     
    age: 20,                
    isGraduate: true,     
    cgpa: 8.4,            
    favSub: ["Physics","Computers","History"]  
}

firstname = students['fName']
favSubject = students['favSub'][0]
console.log(firstname + ' loves ' + favSubject + '!')

Jasmine loves Physics!
  

Access the properties of an object by referring to its key, using dot(.).

// Accessing the items of a Object
// Using object name & key seperated by dot(.)

const students = {
  fName: "Jasmine",    
  lName: "Dsouza",     
  gender: "Female",     
  age: 20,                
  isGraduate: true,     
  cgpa: 8.4,            
  favSub: ["Physics","Computers","History"]  
}

firstname = students.fName
scoreCGPA = students.cgpa
console.log(firstname + ' scored ' + scoreCGPA + '!')

Jasmine scored 8.4!

Adding new properties of an object by giving it a value.

// Adding new properties to the Object 

const vehicle = {
  year: 2021,
  make: 'Mahindra'
}

// add new porperty - model: 'XUV700'
vehicle.model = "XUV700"   
console.log(vehicle)

{year: 2021, make: 'Mahindra', model: 'XUV700'}

Change/Modify the value of a specific property of an object, by referring to its key name.

// Change value of a specific property of an object

const users = {
fname: 'Guido',
lname: 'van Rossum',
email: 'guido@junkmail.com'
}

// Change 'email' property value
users['email'] = 'guido@example.com'   
console.log(users)

{fname: 'Guido', lname: 'van Rossum', email: 'guido@example.com'}

Computed properties of an object using square brackets [] in an object literal, when creating an object.

// Computed properties of an object

let brand = 'Samsung';

const mobile = {
  [brand]: 25000,    // 'Samsung' property key is taken from variable 'brand'
  year: 2022
}

console.log(mobile)

{Samsung: 25000, year: 2022}

Deleting a properties of an object by using delete keyword.

// Deleting a properties from the object 

const vehicle = {
  year: 2021,
  make: 'Mahindra',
  model: 'XUV700'
}

delete vehicle.model  // same as: delete vehicle['model']
console.log(vehicle)

{year: 2021, make: 'Mahindra'}

in Keyword is used to determine, if a specified key is present in an object. For any a non-existing property, in operator just returns undefined.

// Check if a key exists 'in' the object 

const users = {
fname: 'Guido',
lname: 'van Rossum',
email: 'guido@example.com'
}

isEmailExists = 'email' in users
console.log(isEmailExists)
  

true

Static Methods in Object:

// Object - static methods 
// Object.entries(), Object.keys(), Object.values()

const employee = {
  empName: "Javid Khan",
  designation: "Software Developer",
  city: "Paris",
  zip: 70123
}

const allItems = Object.entries(employee)
console.log(allItems)

const allKeys = Object.keys(employee)
console.log(allKeys)

const allValues = Object.values(employee)
console.log(allValues)

[['empName', 'Javid Khan'], ['designation', 'Software Developer'], ['city', 'Paris'], ['zip', 70123] ]
['empName', 'designation', 'city', 'zip']
['Javid Khan', 'Software Developer', 'Paris', 70123]

Nested Objects

JavaScript data structures support nesting. This means we can have data structures within data structures. For object, property values in an object can be another object. You can access nested objects using the dot (.) notation or the bracket [] notation
For example: An object containing another object.

// Nested Object : Example 1

const team = {
  player1: {
      name: 'Leo Messi',
      position: 'Forward'
  },

  player2: {
      name: 'Andres Iniesta',
      position: 'Midfield'
  },

  player3: {
      name: 'Xavi Hernandez',
      position: 'Midfield'
  }
}

team['player1']['name']

'Leo Messi'

// Nested Object : Example 2

const player1 = {
  name: 'Leo Messi',
  position: 'Forward'
}

const player2 = {
    name: 'Andres Iniesta',
    position: 'Midfield'
}

const player3 = {
    name: 'Xavi Hernandez',
    position: 'Midfield'
}

const team = {
    player1 : player1,
    player2 : player2,
    player3 : player3
}

team['player1']

{name: 'Leo Messi', position: 'Forward'}

Object Methods

1.  (1). hasOwnProperty() :
   

   method returns a boolean indicating whether the object has the specified property as its own property, as opposed to inheriting it.
   The argument property is the String name or Symbol of the property to test.

   SYNTAX : hasOwnProperty(property)




// hasOwnProperty() returns whether object has property

const player = {
  name: 'Leo Messi',
  position: 'Forward'
}

player.hasOwnProperty('position')  // returns true

OUTPUT

true 

2.  (2). toString() :
   

   method returns a string representing the object.
   This method is meant to be overridden by derived objects for custom type conversion logic.

   SYNTAX : toString()




// toString() returns string representing the object

function Player(name, position) {
  this.name = name
  this.position = position
}

const player1 = new Player('Leo Messi', 'Forward')

Player.prototype.toString = function playerToString() {
  return `${this.name} plays as ${this.position}`;
}

console.log(player1.toString())

OUTPUT

Leo Messi plays as Forward

3.  (3). valueOf() :
   

   method of Object converts the this value to an object. This method is meant to be overridden by derived objects for custom type conversion logic.

   SYNTAX : valueOf()




// valueOf() methods 
// Example : Area of a circle

function SquareRad(num) {
  this.square = num * num
}

SquareRad.prototype.valueOf = function() {
  return this.square;
}

const radiusObj = new SquareRad(5)
console.log("Area of circle = " + 3.142 * radiusObj )

OUTPUT

Area of circle = 78.55

Simple if statement

Example of Simple if statement:

// Simple 'if' statement

let num1 = 24,
    num2 = 12;

// 'if' condition is true, hence the block will be executed
if (num1 > num2) {
  console.log(`num1(${num1}) is greater than num2(${num2})`)
}        

// if condition is false, hence "if" block will NOT be executed
if (num2 > num1) {
  console.log(`num2(${num2}) is greater than num1(${num1})`)
}                         
                

num1(24) is greater than num2(12)

if...else statement

// 'if...else' statement

let num1 = 36,
    num2 = 48;

// if condition is false, hence "if" block will NOT be executed
// hence, else block will be executed    
if (num1 > num2) {
  console.log(`num1(${num1}) is greater than num2(${num2})`)
}    
else {
  console.log(`num1(${num1}) is lesser than num2(${num2})`)
}    

num1(36) is lesser than num2(48)

Nested if statement

// Nested "if/else" statement       

let ranNum = 28

// if condition is true, hence "if" block will be executed
if (ranNum == 28 || ranNum <= 30) {

  // if condition is true, hence nested "if" block will be executed
  if (ranNum < 30) {
    console.log('ranNum is smaller than 30')
  } 

  // if condition is false, hence nested "if" block will NOT be executed               
  if (ranNum < 15) {
    console.log('ranNum is smaller than 15')
  }               
}

// never executes else block
else {
  console.log('ranNum is larger than 30')
}

ranNum is smaller than 30

if...else if...else ladder statement

// if...else if...else ladder statement

let givenNum = 100

// if condition is false, hence "if" block will NOT be executed
if (givenNum == 25) {
  console.log('givenNum is 25')
}            

// if condition is false, hence "else if" block will NOT be executed
else if (givenNum == 50) {
  console.log('givenNum is 50')  
}          
      
// if condition is false, hence "else if" block will NOT be executed
else if (givenNum == 75) {
  console.log('givenNum is 75')
}          
    
// if condition is true, hence "else if" block will be executed 
else if (givenNum == 100) {
  console.log('givenNum is 100')
}         
    
// never executes else block 
else {
  console.log('givenNum is INVALID')
}                             
            

givenNum is 100

switch statement

// switch statement 
// Example: Based on billing rate, decide salay of employee

const billRate = 40

switch (billRate) {
  case 25:
    console.log("Salary paid per month = 80000");
    break;  
  case 40:
  case 45:
    console.log("Salary paid per month = 125000");
    break;   
  case 60:
    console.log("Salary paid per month = 190000");
    break; 
  case 90:
    console.log("Salary paid per month = 300000");
    break; 
  default:
    console.log("He/She is unbillable resource.");
}

Salary paid per month = 125000

Shorthand if statement

// Shorthand "if" statement

let weightOne = 225, 
    weightTwo = 125;

if (weightOne > weightTwo) console.log("weightOne is heavier")
console.log("***End of Code***")
                

weightOne is heavier
***End of Code***

Shorthand if...else or "Ternary" operator

// Shorthand "if...else" statement
//  “Question mark” or "Ternary" operator

let num1 = 144, 
    num2 = 169;

// (condition) ? (If 'true') : (If 'false')   
(num1 > num2) ? console.log("num1 is largest") :  console.log("num2 is largest") 
                        

num2 is largest
  

[1]. while Loop

// while loop to print numbers : 1 to 5

let i = 1

while (i < 6) {
  console.log(i)
  i += 1   // remember to increment i, or else loop will continue forever
}
  

0
1
2
3
4
5

// Nested "while" loop

let j = 0,
    i = 1,
    str = '';

while (i <= 5) {
  j = 1
  while (j <= i) {
    str += (j + ' ')
    j += 1
  }
  str += "\n";
  i += 1
}
console.log(str)

1 
1 2 
1 2 3 
1 2 3 4 
1 2 3 4 5 

[2]. do while Loop

SYNTAX:

  do {
    // Block of code to be executed
  }
  while (condition);
          

// do while loop Example 

let counter = 1

do {
  console.log(counter)
  counter++
} while (counter <= 3)

1
2
3

[3]. for Loop

SYNTAX:

    for (expression1; expression2; expression3) {
      // Block of code to be executed  
    }
              

When a for loop executes, the following ordered steps occurs:

1.   (1). Initializing expression expression1, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
2.   (2). Condition expression expression2 is evaluated. If the value of condition is true, the loop statements execute. Otherwise, the for loop terminates. (If the condition expression is omitted entirely, the condition is assumed to be true.)
3.   (3). Block of code within curly braces {} executes multiple statements.
4.   (4). Increment expression expression3, if any, is executed.
5.   (5). Control returns to Step (2) i.e. condition expression expression2 is evaluated.

// for loop     
// Example : Adding all single digit numbers as elements of an array 

const numArray = []    // create empty array
let singleDigit,
    index = 0;

for (singleDigit = 0; singleDigit <= 9; singleDigit += 1) {
  numArray[index] = singleDigit
  index++
}
console.log(`The "numArray" contains = [${numArray}]`)



/****************************************************/
// Tracing 'for' loop in the above example
//
// 1st: singleDigit=0; true; o/p: 0 added to the array
// 2nd: singleDigit=1; true; o/p: 1 added to the array
// 3rd: singleDigit=2; true; o/p: 2 added to the array
// ....
// .... continue adding to the array
// ....
// 9th: singleDigit=8; true; o/p: 8 added to the array
// 10th:singleDigit=9; true: o/p: 9 added to the array
// 11th:singleDigit=10; false; exit the for loop
//
// The "numArray" contains = [0,1,2,3,4,5,6,7,8,9]
/*****************************************************/

 
The "numArray" contains = [0,1,2,3,4,5,6,7,8,9]

// for loop 
// Example : Find sum of all number in an array 

let evenNum = [22, 44, 66];    // array length = 3
let sumNum = 0;
for (let x = 0; x < evenNum.length; x++) {
  sumNum = sumNum + evenNum[x];
}
console.log(`Sum of all the number in an array = ${sumNum}`)
 


/*****************************************************/
// Tracing 'for' loop in the above example
//
// 1st: x = 0; true; sumNum = 0 + 22 = 22
// 2nd: x = 1; true; sumNum = 22 + 44 = 66
// 3rd: x = 2; true; sumNum = 66 + 66 = 132
// 4th: x = 3; false; Exit the 'for' loop
//
// Sum of all the number in an array =   132 
/*****************************************************/

 
Sum of all the number in an array = 132

// Nested "for" loop example

for (let p = 1; p <= 2; p++) {  //p:  1,2 
    console.log(`p is: ${p}`)  
    for (let q = 1; q < 4; q++) {   //q: 1,2,3
        console.log(`    q is: ${q}`)
    }
}


/*****************************************************/ 
// Tracing Nested 'for' loop in the above example
//
// Outer for loop - 1st of p: p = 1; true; o/p: p is:1
// 1st of q: q = 1; true; o/p: q is:1
// 2nd of q: q = 2; true; o/p: q is:2
// 3rd of q: q = 3; true; o/p: q is:3
// 4th of q: q = 4; false; Exit the inner q loop
// Outer for loop - 2nd of p: p = 2; true; o/p: p is:2
// 1st of q: q = 1; true; o/p: q is:1
// 2nd of q: q = 2; true; o/p: q is:2
// 3rd of q: q = 3; true; o/p: q is:3
// 4th of q: q = 4; false; Exit the inner q loop
// Outer for loop - 3rd of p: p = 3; false; Exit the outer p loop
//
/*****************************************************/        

p is: 1
    q is: 1
    q is: 2
    q is: 3
p is: 2
    q is: 1
    q is: 2
    q is: 3

// "for" loop : Iterate multi-dimension array using "for" loop 
// Example : Print the country name and Flag colors

const arrFlags = [  
    ["INDIA","Orange","White","Green"],  
    ["GERMANY","Black","Red","Yellow"],  
    ["RUSSIA","White","Red","Blue"],
    ["COLOMBIA","Yellow","Blue","Red"],
    ["EGYPT","Red","White","Black"]  
]

for (let a = 0; a < arrFlags.length; a++) {     // arrFlags.length = 5
    let flagRow = arrFlags[a];  
    console.log(flagRow[0] + " Flag Colors");  
    for (let b = 1; b < flagRow.length ; b++) { // flagRow.length = 4
        console.log(flagRow[b]);
    }
}


/*****************************************************/
// Tracing nested 'for' loop in the above example
//
// Outer for loop - 1st of a: a = 0; true; flagRow = ["INDIA","Orange","White","Green"] ; O/P: INDIA Flag Colors
// 1st of b: b = 1; true : O/P: Orange
// 2nd of b: b = 2; true : O/P: White
// 3rd of b: b = 3; true : O/P: Green
// 4th of b: b = 4; false  Exit the inner b loop
// Outer for loop - 2nd of a: a = 1; true; flagRow = ["GERMANY","Black","Red","Yellow"] ; O/P: GERMANY Flag Colors
// 1st of b: b = 1; true : O/P: Black
// 2nd of b: b = 2; true : O/P: Red
// 3rd of b: b = 3; true : O/P: Yellow
// 4th of b: b = 4; false  Exit the inner b loop
// ... continue 
//
/*****************************************************/

INDIA Flag Colors
Orange
White
Green
GERMANY Flag Colors
Black
Red
Yellow
RUSSIA Flag Colors
White
Red
Blue
COLOMBIA Flag Colors
Yellow
Blue
Red
EGYPT Flag Colors
Red
White
Black

[4]. for...of Loop

SYNTAX:

  for (variable of iterable) {
    // Block of code to be executed
  }

// "for .. of" loop iterating arrays 
// Example : Sum of all the number in an array

let total = 0;
let arrayNum = [10, 20, 30, 40]

for (let n of arrayNum) {  
    total = total + n;  
}
console.log(`Sum of all the number in an array = ${total}`)


/*****************************************************/
// Tracing 'for...of' loop in the above example
//
// 1st : n = 10; total = 0 + 10 = 10
// 2nd : n = 20; total = 10 + 20 = 30
// 3rd : n = 30; total = 30 + 30 = 60
// 4th : n = 40; total = 60 + 40 = 100
// No more values in the array, hence exit the for loop
//
// Sum of all the number in an array = 100
/*****************************************************/

Sum of all the number in an array = 100

// "for .. of" loop iterating strings 
// Example : convert string into an array of characters

const charArray = []
let charIndex = 0

for (let singleChar of "SKILLZAM") {
    charArray[charIndex] = singleChar;
    charIndex++;
}
console.log(`The "charArray" contains = [${charArray}]`)


/******************************************************/
// Tracing 'for...of' loop in the above example
//
// 1st: singleChar = S; o/p: S is added to the array
// 2nd: singleChar = K; o/p: K is added to the array
// 3rd: singleChar = I; o/p: I is added to the array
// 4th: singleChar = L; o/p: L is added to the array
// 5th: singleChar = L; o/p: L is added to the array
// 6th: singleChar = Z; o/p: Z is added to the array
// 7th: singleChar = A; o/p: A is added to the array
// 8th: singleChar = M; o/p: M is added to the array
// No more charaters in the string "SKILLZAM", 
// hence exit the for loop
//
// The "charArray" contains =  [S,K,I,L,L,Z,A,M]
/*****************************************************/
        

The "charArray" contains = [S,K,I,L,L,Z,A,M]

// "for .. of" loop iterating Object 
// Example : Iterate values in Object - turn data into an array

let gTotal = 0

const goalScores = {
    Messi:     44,
    Ronaldo:   43,
    Diogo:     43,
    Robert:    39,
    Turpel:    37,
    Suarez:    36,
    Salah:     35,
    Griezmann: 35,
    Cifuente:  34,
    Kane:      33
}

// Using Object constructor, create array of 'values'
let goals = Object.values(goalScores)

// goals = [44,43,43,39,37,36,35,35,34,33]
for (let goal of goals) {
    gTotal += goal;    
}

console.log(`The array of object values is = [${goals}]`)
console.log(`Total goals scored by top 10 players in the year 2018: ${gTotal}`)

The array of object values is = [44,43,43,39,37,36,35,35,34,33]
Total goals scored by top 10 players in the year 2018: 379

[5]. for...in Loop

SYNTAX:

  for (key in object) {
    // Block of code to be executed
  } 

// "for .. in" loop 
// Example : Use "for .. in" loop to iterate Object literals

let str = ""

const car = {
  year: 2022, 
  make: 'Mahindra', 
  model: 'XUV700'
}

for (let item in car) {
  str += car[item]
  str += ' '
}

console.log(str)             

2022 Mahindra XUV700 

// "for .. in" loop 
// Example : Use "for .. in" loop to iterate Object literals

const bioMessi = {
    name: "Leo Messi",
    team: "PSG",
    position: "Forward",
    height: 170,
    weight: 159,
    birthdate: "24/6/1987",
    age: 35,
    country: "Argentina",
    careerHist: ["PSG","FCB","Argentina"], 
    isRetired: false
}

for (let bio in bioMessi) {
    console.log(`${bio.toUpperCase()} is ${bioMessi[bio]}`);
}

 
/**************************************************************************************************/
// Tracing for loop
//
// 1st: bio = name;        bioMessi[bio] = Leo Messi; o/p: NAME is Leo Messi
// 2nd: bio = team;        bioMessi[bio] = PSG;       o/p: TEAM is PSG
// 3rd: bio = position;    bioMessi[bio] = Forward;   o/p: POSITION is Forward
// 4th: bio = height;      bioMessi[bio] = 170;       o/p: HEIGHT is 170
// 5th: bio = weight;      bioMessi[bio] = 159;       o/p: WEIGHT is 159
// 6th: bio = birthdate;   bioMessi[bio] = 24/6/1987; o/p: BIRTHDATE is 24/6/1987
// 7th: bio = age;         bioMessi[bio] = 35;        o/p: AGE is 35
// 8th: bio = country;     bioMessi[bio] = Argentina; o/p: COUNTRY is Argentina
// 9th: bio = careerHist;  bioMessi[bio] = PSG,FCB,Argentina; o/p: CAREERHIST is PSG,FCB,Argentina
// 10th: bio = isRetired;  bioMessi[bio] = false;    o/p: ISRETIRED is false
// No more name:value pair exists in the object literal, hence exit the for loop
//
/**************************************************************************************************/       
                

NAME is Leo Messi
TEAM is PSG
POSITION is Forward
HEIGHT is 170
WEIGHT is 159
BIRTHDATE is 24/6/1987
AGE is 35
COUNTRY is Argentina
CAREERHIST is PSG,Barcelona,Argentina
ISRETIRED is false

break statement

Example of using break statement for a less trivial task. This loop will fill a list with all Fibonacci numbers up to a certain value:

// "break" statement for printing Fibonacci numbers 

let a = 0, 
    b = 1,
    n,
    maxNum = 100,
    index = 0;
const listFibo = [];

while (true) {
  listFibo[index] = a;
  index++;
  n = a + b;
  a = b;
  b = n;
  if (a > maxNum) {
    break;    // usuage of break statement to exit the loop
  }
}

console.log(listFibo)

[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89]

continue statement

Example of using continue to print a string of odd numbers. In this case, the result could be accomplished just as well with an if...else statement, but sometimes the continue statement can be a more convenient way to express the idea you have in mind:

// "continue" statement for printing ODD numbers

const numArray = [1,2,3,4,5,6,7,8,9,10]
let str = "";

for (let num in numArray) {
  // if the remainder of num / 2 is 0, skip the rest of current loop
  if (num % 2 == 0) {
        continue;
  }
  str += num + ' '
}
console.log(str)

1 3 5 7 9

label statement

SYNTAX:

  label:
    statements

// label statement Example 

let total = 0, 
    i = 1;

whileloop1: while (true) {
    i = 1;  
    whileloop2: while (i < 3) {
      total += i;
        if (total > 3) {  
            break whileloop1;  // break using 'label' statement
        }
        console.log("total = " + total);
        i++;
    }
}

total = 1
total = 3

Function definition

To create a function, we can use a function definition/declaration.

A function definition (also called function declaration, or function statement ) consists of :

For example, the following code defines a simple function named createFullName :

// Function definition or declaration Example 

function createFullName() {
  let fname = "Brendan",
      lname = "Eich",
      fullname = fname + " " + lname;
      
  console.log(fullname)
}

Function invoking

Defining a function does not execute it. Defining it names the function and specifies what to do when the function is called.

// Function definition/invoking Example 

// function definition or declaration
function createFullName() {
  let fname = "Brendan",
      lname = "Eich",
      fullname = fname + " " + lname;
      
  console.log(fullname)
}

// function invoking / calling
createFullName()    

Brendan Eich

Function Arguments & Parameters

What is the difference between return and console.log() ?

The return keyword allows you to actually save the result of the output of a function as a variable.
The console.log() function simply displays the output to web console, but doesn't save it for future use. console.log() doesn't return any value, as it returns undefined

// function Parameters & Arguments

// Two Parameters (fname & lname) used in function declaration
function createFullName(fname, lname) {   
  let fullname = fname + " " + lname
  return fullname     // function returns a value
}

let firstName = "Brendan",
    lastName = "Eich";

// Two Arguments used in function invoking   
let funcReturn = createFullName(firstName, lastName)           
console.log(funcReturn)

Brendan Eich

Default parameters

// Default function Parameter values

function playerClub(club = "no one") {
  console.log(`I play for ${club}.`)
}

playerClub("Barcelona")
playerClub()           // default parameter is set 
playerClub("Al-Nassr")
  

I play for Barcelona.
I play for no one.
I play for Al-Nassr.

// Default function Parameter values

function ask_ok(place, retries=3, reminder='Please try again!') {
  while (true) {
    let city = prompt(place);
    if (city === 'Bengaluru' || city === 'Hyderabad' || city === 'Chennai') {
      return true
    }
    if (city === 'Kanpur' || city === 'Surat') {
      return false
    }
    retries = retries - 1;
    if (retries < 0) {
      console.log('invalid user response')
    }  
    console.log(reminder)
  }
}
        
// function invoking using only mandatory argument        
ask_ok('Enter the capital city: ')

Enter the capital city: Hyderabad
true

Recursion Function

Suppose we want to find the factorial of 5, then it will goes as below:

0! = 1
1! = 1 x 0! = 1 x 1 = 1
2! = 2 x 1! = 2 x 1 = 2
3! = 3 x 2! = 3 x 2 = 6
4! = 4 x 3! = 4 x 6 = 24
5! = 5 x 4! = 5 x 24 = 120

// Function recursion example

function factorial(num) {
  let result = 0;
  if (num === 1) {
    return 1;
  } else {
    result = num * factorial(num-1);
    return result;
  }
}

let randNum = 5,
    funcRtn = factorial(randNum);

console.log(`The factorial of ${randNum} is ${funcRtn}`)

The factorial of 5 is 120

Nested Function

// Nested Function Example  

function indiaWorldCup() {
    const runScored = [317,350,322,301];
    function announceScores() {
        let matchNum = 1;
        function scoreBoard() {
            for (let run of runScored) {
                console.log(`${matchNum} : Team India scored ${run} runs.`);
                matchNum++;
            }
        }
        scoreBoard();
    }
    announceScores();
}
indiaWorldCup();

1 : Team India scored 317 runs.
2 : Team India scored 350 runs.
3 : Team India scored 322 runs.
4 : Team India scored 301 runs.