JS Beginner – EligoCS

Master JavaScript From Basics to Advanced Programming Skills.

Explore the fundamentals and advanced concepts of JavaScript with our comprehensive and hands-on online course for web development mastery.

Start Your Test Now Dear learners, Are you interested in assessing your progress? Request your mentor to give you access and start your Test.

“Explore the fundamentals of JavaScript programming with our comprehensive course. Learn to create interactive web applications, manipulate the DOM, and master essential JavaScript concepts for dynamic development.”

Learn JS Basic

1. JS Syntax :

JavaScript (JS) syntax refers to the set of rules defining how programs written in JavaScript are structured. Key syntax elements include variables, data types, operators, control flow statements (if, else, switch), loops (for, while, do-while), functions, objects, and more.

HTML

// JavaScript Syntax Example

 let greeting = "Hello,"; 
 let name = "John"; 
 let message = greeting + " " + name + "!";      console.log(message);

OUTPUT

Hello, John!

2. Variables in JS: variables are used to store and represent data. Here’s an overview of how variables work in JavaScript:

Declaration and Assignment:

Use the let, const, or var keyword to declare a variable.

HTML

  let age;    // Declaration
  age = 25;   // Assignment

Variable Types:

JavaScript has dynamic typing, meaning variables can hold values of any data type.
Common data types include numbers, strings, booleans, objects, arrays, and more.

HTML

   let name = "John";    // String 
   let age = 25;     // Number 
   let isStudent = true;   // Boolean

OUTPUT

 Name: John 
 Age: 25 
 Is Student: true

Variable Naming Rules:

Variable names can include letters, numbers, underscores, and dollar signs.
They must begin with a letter, underscore, or dollar sign (not a number).
Variable names are case-sensitive.

HTML

   let firstName = "John";
   let _count = 10;
   let $price = 25.99;

OUTPUT

 John 
 10 
 25.99

Constants:

Use const to declare constants, which cannot be reassigned.

Scope:

Variables have either global or function scope.
let and const are block-scoped, while var is function-scoped.

Hoisting:

Variable declarations are hoisted to the top of their scope, but not their assignments.

HTML

const PI = 3.14;

if (true) {

let localVar = “I am local”;

var globalVar = “I am global”;

}

console.log(globalVar); // Works

console.log(localVar); // ReferenceError: localVar is not defined

console.log(x); // undefined var x = 5;

OUTPUT

 I am global
 ReferenceError: localVar is not defined 
 undefined

Single-Line Comments:

Denoted by //.
Everything following // on the same line is treated as a comment.

Multi-Line Comments:

Enclosed between /* and */.
Can span multiple lines.

HTML

 /* This is a multi-line comment.
 It provides additional information 
about the code. */
let name = "John"; // Variable to store the name
 function greet() { // Function to greet the user

console.log("Hello, " + name + "!"); } greet();
// Calling the greet function

OUTPUT

Hello, John!

Operators in JS :

JavaScript includes a variety of operators that allow you to perform operations on values. Here are some of the key operators in JavaScript:

1. Arithmetic Operators:

Perform basic mathematical operations.

HTML

     let a = 10;
    let b = 5;

    let addition = a + b; // 15
    let subtraction = a - b; // 5
    let multiplication = a * b; // 50
    let division = a / b; // 2
   let modulus = a % b; // 0
   let exponentiation = a ** b; // 100000

OUTPUT

 Addition: 15
 Subtraction: 5
 Multiplication: 50
 Division: 2 
 Modulus: 0
 Exponentiation: 100000

2. Comparison Operators:

Compare values and return a Boolean result.

HTML

     let x = 10;
    let y = 5;

    console.log(x > y); // true
   console.log(x < y); // false   
     console.log(x >= y); // true
      console.log(x <= y); // false
      console.log(x === y); // false
      console.log(x !== y); // true

OUTPUT

 true
 false 
 true 
 false
 false 
 true

3. Logical Operators:

Combine or manipulate Boolean values.

HTML

      let isTrue = true;
       let isFalse = false;

      console.log(isTrue && isFalse); // false (AND)
     console.log(isTrue || isFalse); // true (OR)
      console.log(!isTrue); // false (NOT)

OUTPUT

 false
 true
 false

4. Assignment Operators:

Assign values to variables.

HTML

   let c = 10;

c += 5; // Equivalent to c = c + 5;
console.log(c); // 15

c *= 2; // Equivalent to c = c * 2;
console.log(c); // 30

OUTPUT

15 
30

5. Unary Operators:

Operate on a single operand.

HTML

let num = 5;

console.log(-num); // -5 (negation)
console.log(++num); // 6 (pre-increment)
console.log(num–); // 6 (post-decrement)

OUTPUT

-5 
 6 
 6

6. Ternary Operator (Conditional Operator):

Provides a concise way to write a simple if...else statement.

HTML

let age = 20;
let eligibility = (age >= 18) ? “Eligible” : “Not Eligible”;

console.log(eligibility); // Eligible

OUTPUT

Eligible

7. Bitwise Operators:

Perform bitwise operations on integer values.

HTML

let binaryA = 5; // Binary representation: 101
let binaryB = 3; // Binary representation: 011

console.log(binaryA & binaryB); // 1 (Bitwise AND)
console.log(binaryA | binaryB); // 7 (Bitwise OR)
console.log(binaryA ^ binaryB); // 6 (Bitwise XOR)

OUTPUT

1 (Bitwise AND)
 7 (Bitwise OR)
 6 (Bitwise XOR)

Learn About Array in JS :

Arrays in JavaScript are used to store and organize multiple values within a single variable. Arrays can hold various data types, including numbers, strings, objects, or even other arrays. Here’s an overview of working with arrays in JavaScript:

Creating Arrays:

HTML

// Creating an empty array
let emptyArray = [];

// Creating an array with values
let colors = ["red", "green", "blue"];
let numbers = [1, 2, 3, 4, 5];
let mixedArray = [1, "two", true, { key: "value" }];

// Creating an array with the Array constructor
let newArray = new Array("apple", "banana", "orange");

OUTPUT

 [] 
 ["red", "green", "blue"]
 [1, 2, 3, 4, 5] 
 [1, "two", true, { key: "value" }] 
 ["apple", "banana", "orange"]

Accessing Array Elements:

HTML

let fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "orange"

OUTPUT

apple
banana
orange

Modifying Array Elements :

HTML

let numbers = [1, 2, 3, 4, 5];

numbers[2] = 10; // Modify an element
numbers.push(6); // Add an element to the end
numbers.pop(); // Remove the last element

OUTPUT

[1, 2, 3, 4, 5]

[1, 2, 10, 4, 5]

[1, 2, 10, 4, 5, 6]

[1, 2, 10, 4, 5]

Array Methods :

HTML

let colors = ["red", "green", "blue"];

console.log(colors.length); // 3 (length of the array)

colors.push("yellow"); // Add an element to the end
colors.unshift("purple"); // Add an element to the beginning

colors.pop(); // Remove the last element
colors.shift(); // Remove the first element

let slicedColors = colors.slice(1, 3); // Extract a portion of the array
let removedColors = colors.splice(1, 2); // Remove elements from the array

OUTPUT

3 (length of the array)
["red", "green", "blue", "yellow"]
["purple", "red", "green", "blue", "yellow"]
["purple", "red", "green", "blue"]
["red", "green", "blue"]
["green", "blue"]
["green", "blue"]
Output after splice: ["red"]

Iterating Through Arrays and Multidimensional Arrays :

HTML

let fruits = ["apple", "banana", "orange"];

// Using a for loop
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// Using forEach method
fruits.forEach(function (fruit) {
  console.log(fruit);
});


let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // Accessing an element (6)

OUTPUT

apple
banana 
orange

6

Array Methods :

JavaScript provides several built-in methods that can be used to manipulate arrays. Here are some commonly used array methods:

1. `push()`

Adds one or more elements to the end of an array.

HTML

let fruits = ["apple", "banana"];
fruits.push("orange", "grape");
// Result: ["apple", "banana", "orange", "grape"]

OUTPUT

["apple", "banana", "orange", "grape"]

2. `pop()`

Removes the last element from an array.

HTML

let fruits = ["apple", "banana", "orange"];
fruits.pop();
// Result: ["apple", "banana"]

OUTPUT

["apple", "banana"]

3. `unshift()`

Adds one or more elements to the beginning of an array.

HTML

let fruits = ["banana", "orange"];
fruits.unshift("apple", "grape");
// Result: ["apple", "grape", "banana", "orange"]

OUTPUT

 ["apple", "grape", "banana", "orange"]

4. `shift()`

Removes the first element from an array.

5. `slice()`

Returns a shallow copy of a portion of an array.

6. `splice()`

Changes the contents of an array by removing or replacing existing elements.

HTML

let fruits = ["apple", "grape", "banana", "orange"];
fruits.shift();
// Result: ["grape", "banana", "orange"]

let numbers = [1, 2, 3, 4, 5];
let slicedNumbers = numbers.slice(1, 4);
// Result: [2, 3, 4]

let fruits = ["apple", "orange", "banana"];
fruits.splice(1, 1, "grape", "kiwi");
// Result: ["apple", "grape", "kiwi", "banana"]

OUTPUT

 ["grape", "banana", "orange"]

[2, 3, 4]

[“apple”, “grape”, “kiwi”, “banana”]

7. `concat()`

Combines two or more arrays.

8. `indexOf()`

Returns the first index at which a given element can be found in the array.

9. `forEach()`

Executes a provided function once for each array element.

10. `map()`

Creates a new array with the results of calling a provided function on every element.

HTML

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "broccoli"];
let combined = fruits.concat(vegetables);
// Result: ["apple", "banana", "carrot", "broccoli"]

let fruits = ["apple", "banana", "orange"];
let index = fruits.indexOf("banana");
// Result: 1

let numbers = [1, 2, 3];
numbers.forEach(function (num) {
  console.log(num * 2);
});
// Output: 2, 4, 6


let numbers = [1, 2, 3];
let doubled = numbers.map(function (num) {
  return num * 2;
});
// Result: [2, 4, 6]

OUTPUT

2 4 6

Objects in js : objects are a fundamental data type that allows you to store and organize data using key-value pairs. Each key in an object is a string or symbol, and each key is associated with a value. Objects are versatile and can represent complex structures.

Creating Objects:

Object Literal:
- The simplest way to create an object is using an object literal.

HTML

          let person = { 
             name: "John", age: 30,
            isStudent: false, };

OUTPUT

 John 
 30 
 false

Using the new Operator:

You can use the new operator with the Object constructor.

HTML

    let person = new Object();
     person.name = "John";
     person.age = 30;
     person.isStudent = false;

OUTPUT

{ name: 'John', age: 30, isStudent: false }

Accessing Object Properties:

HTML

     let person = {
  name: "John",
  age: 30,
  isStudent: false,
};

    console.log(person.name); // "John"
        console.log(person["age"]); // 30

OUTPUT

John 
30

Modifying Object Properties :

HTML

      let person = {
  name: "John",
  age: 30,
  isStudent: false,
};

      person.age = 31; // Modify a property
      person.city = "New York"; // Add a new property
        delete person.isStudent; // Remove a property

OUTPUT

{
     name: "John", 
     age: 31, 
     city: "New York"
 }

Object Methods :

HTML

   let person = {
  name: "John",
  age: 30,
  greet: function () {
    console.log("Hello, my name is " + this.name);
  },
  };
  person.greet(); // "Hello, my name is John"

OUTPUT

Hello, my name is John

Nested Objects:

HTML

 let person = {
  name: "John",
  address: {
    city: "New York",
    zip: "10001",
  },
   };
   console.log(person.address.city); // "New York"

OUTPUT

New York

Object Iteration:

HTML

let person = {
  name: "John",
  age: 30,
  isStudent: false,
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

OUTPUT

 name: John
 age: 30 
 isStudent: false

JSON (JavaScript Object Notation)

JavaScript objects can be represented as JSON strings, facilitating data exchange.

HTML

   let person = {
  name: "John",
  age: 30,
  isStudent: false,
   };

     let jsonPerson = JSON.stringify(person);
   console.log(jsonPerson);

OUTPUT

{"name":"John","age":30,"isStudent":false}

Learn About DataTypes in JS :

JavaScript supports several data types that can be categorized into two main categories: primitive data types and object data types. Here’s an overview of the data types in JavaScript along with examples:

1. Primitive Data Types:

a. Number:

Represents numeric values.

HTML

let num = 42;
let floatNum = 3.14;

b. String:

Represents textual data.

HTML

let name = "John";
let message = 'Hello, World!';

c. Boolean:

Represents a logical entity and can have two values: true or false.

HTML

let isTrue = true;
let isFalse = false;

d. Undefined:

Represents an uninitialized variable or object property.

e. Null:

Represents the intentional absence of any object value.

f. Symbol:

Represents a unique identifier.

HTML

let undefinedVar;

let nullVar = null;

let symbol1 = Symbol("key");
let symbol2 = Symbol("key");

OUTPUT

 undefined 
 null
 false

2. Object Data Types:

a. Object:

Represents a collection of key-value pairs.

HTML

let person = {
  name: "John",
  age: 30,
  isStudent: false,
};

OUTPUT

{ name: 'John', age: 30, isStudent: false }

b. Array:

Represents an ordered list of values.

HTML

let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];

OUTPUT

 [1, 2, 3, 4, 5]
 ["apple", "banana", "orange"]

c. Function:

Represents a reusable block of code.

HTML

function add(a, b) {
  return a + b;
}

3. Special Data Types:

a. NaN (Not a Number):

Represents a value that is not a legal number.

HTML

let result = "abc" * 2; // NaN

b. infinity:

Represents positive infinity.

c. -ve infinity:

Represents negative infinity.

HTML

let positiveInfinity = Infinity;

let negativeInfinity = -Infinity;

Checking Data Types:

a. `typeof` Operator:

Used to check the data type of a variable.

b. `instanceof` Operator:

Used to check if an object is an instance of a particular class or constructor.

HTML

let num = 42;
console.log(typeof num); // "number"

let fruits = ["apple", "banana", "orange"];
console.log(fruits instanceof Array); // true

Dear learners, Are you interested in assessing your progress?
Request your mentor to give you access and start your test.

Master JavaScript From Basics to Advanced Programming Skills.

Learn JS Basic

1. JS Syntax :

HTML

OUTPUT

Declaration and Assignment:

HTML

Variable Types:

HTML

OUTPUT

Variable Naming Rules:

HTML

OUTPUT

Constants:

Scope:

Hoisting:

HTML

OUTPUT

HTML

OUTPUT

Operators in JS :

JavaScript includes a variety of operators that allow you to perform operations on values. Here are some of the key operators in JavaScript:

1. Arithmetic Operators:

HTML

OUTPUT

2. Comparison Operators:

HTML

OUTPUT

3. Logical Operators:

HTML

OUTPUT

4. Assignment Operators:

HTML

OUTPUT

5. Unary Operators:

HTML

OUTPUT

6. Ternary Operator (Conditional Operator):

HTML

OUTPUT

7. Bitwise Operators:

HTML

OUTPUT

Learn About Array in JS :

Creating Arrays:

HTML

OUTPUT

Accessing Array Elements:

HTML

OUTPUT

Modifying Array Elements :

HTML

OUTPUT

Array Methods :

HTML

OUTPUT

Iterating Through Arrays and Multidimensional Arrays :

HTML

OUTPUT

Array Methods :

1. push()

HTML

OUTPUT

2. pop()

HTML

OUTPUT

3. unshift()

HTML

OUTPUT

4. shift()

5. slice()

6. splice()

HTML

OUTPUT

7. concat()

8. indexOf()

9. forEach()

10. map()

HTML

OUTPUT

1. `push()`

2. `pop()`

3. `unshift()`

4. `shift()`

5. `slice()`

6. `splice()`

7. `concat()`

8. `indexOf()`

9. `forEach()`

10. `map()`

a. `typeof` Operator:

b. `instanceof` Operator: