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.

Strat 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 More About JS

1.  Problems  with var  :

  • the var keyword is used for variable declaration. However, there are some issues and limitations associated with using var, which have led to the introduction of let and const in modern JavaScript. Here are some problems with var:

  • Function Scope:

    1. Variables declared with var are function-scoped, not block-scoped. This means that a variable declared inside a block (like an if statement or a loop) is visible throughout the entire function.

HTML

function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // Outputs: 10
}

OUTPUT

10

Hoisting:

  • Variables declared with var are hoisted to the top of their scope. This means that you can use a variable before it is declared, but it will be initialized with undefined.

HTML

console.log(y); // Outputs: undefined
var y = 5;

OUTPUT

undefined

No Re-declaration Restriction:

  • Variables declared with var can be re-declared within the same scope without any error.

HTML

var z = 10;
var z = 20; // No error

OUTPUT

20

Global Object Property:

  • When a variable is declared outside any function or block, it becomes a property of the global object (window in browsers). This can lead to unintentional global variables and potential naming conflicts.

HTML

var globalVar = "I'm global";
console.log(window.globalVar); // Outputs: "I'm global"

OUTPUT

I'm global"
Let’s Discuss about ‘let ‘ and ‘const’ :
  • In JavaScript, let and const are block-scoped declarations introduced with ECMAScript 6 (ES6). They provide more predictable behavior compared to the older var declaration. Here’s a breakdown of when to use let or const:
let:
  1. Block Scope:
    • Variables declared with let have block-level scope. This means they are only accessible within the block (enclosed by curly braces) where they are defined.

HTML

if (true) {
    let x = 10;
    console.log(x); // Outputs: 10
}
console.log(x); // ReferenceError: x is not defined

OUTPUT

 10
 ReferenceError: x is not defined

Reassignment:

  • Variables declared with let can be reassigned.

HTML

 let count = 5;
count = 10; // Valid

OUTPUT

10

const:

  • Block Scope:

    • Like let, variables declared with const also have block-level scope.

HTML

if (true) {
    const y = 20;
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

OUTPUT

 20
 ReferenceError: x is not defined

No Reassignment:

  • Variables declared with const cannot be reassigned.

HTML

const pi = 3.14;
pi = 3; // TypeError: Assignment to constant variable

Must be Initialized:

  • A variable declared with const must be initialized at the time of declaration.

HTML

const z; // SyntaxError: Missing initializer in const declaration

No Redeclaration:

  • Just like let, you cannot redeclare the same variable in the same scope using const.

HTML

const x = 5;
const x = 10; // SyntaxError: Identifier 'x' has already been declared

OUTPUT

Uncaught SyntaxError: Identifier 'x' has already been declared

What are arrow Functions?

Concise Syntax:

Arrow functions provide a more concise syntax, especially for simple one-liner functions.

Implicit Return:

If the arrow function has only one statement, the curly braces and the return keyword can be omitted. The expression after the arrow (=>) is implicitly returned.

No Binding of this:

Arrow functions do not bind their own this value. They inherit this from the enclosing scope. This behavior can be advantageous in certain situations, especially when dealing with callbacks or event handlers.

HTML

function Counter() {
    this.count = 0;

    // Traditional function expression with explicit binding
    setInterval(function() {
        this.count++;
        console.log(this.count); // Outputs: NaN
    }.bind(this), 1000);

    // Arrow function with implicit binding
    setInterval(() => {
        this.count++;
        console.log(this.count); // Outputs: 1, 2, 3, ...
    }, 1000);
}

const counter = new Counter();

OUTPUT

NaN
1
2
3
...

No arguments Object:

  • Arrow functions do not have their own arguments object. Instead, they inherit it from the enclosing scope.

HTML

function traditionalFunction() {
    console.log(arguments); // Outputs: [1, 2, 3]
}

const arrowFunction = () => {
    console.log(arguments); // ReferenceError: arguments is not defined
};

traditionalFunction(1, 2, 3);
arrowFunction(1, 2, 3); // Throws an error

OUTPUT

[1, 2, 3]
Template literal & multi line strings:
  • Template Literals:

HTML

const a = 5;
const b = 10;

// Expressions inside template literals
const result = `The sum of ${a} and ${b} is ${a + b}.`;

// Multi-line strings using template literals
const multiLine = `
  This is a
  multi-line
  string.
`;

console.log(result);
// Outputs: The sum of 5 and 10 is 15.

console.log(multiLine);
/*
Outputs:
  This is a
  multi-line
  string.
*/

OUTPUT

This is a
multi-line
string.
Multi-line Strings (without Template Literals):
Before template literals were introduced, creating multi-line strings involved concatenation or using escape characters:

HTML

const multiLineEscape = "This is a\n\
multi-line\n\
string.";

console.log(multiLineEscape);
/*
Outputs:
  This is a
  multi-line
  string.
*/

OUTPUT

This is a
multi-line
string.
Destructuring  Arrays :
  • Destructuring assignment is a feature in JavaScript that allows you to extract values from arrays or objects and assign them to variables in a more concise and expressive way.

Basic Array Destructuring:

HTML

// Original array
const numbers = [1, 2, 3, 4, 5];

// Destructuring assignment
const [first, second, third] = numbers;

console.log(first);  // Outputs: 1
console.log(second); // Outputs: 2
console.log(third);  // Outputs: 3

OUTPUT

 1
 2
 3

Skipping Elements:

HTML

 // Original array
const fruits = ["apple", "orange", "banana", "grape"];

// Destructuring assignment with skipped elements
const [firstFruit, , thirdFruit] = fruits;

console.log(firstFruit);  // Outputs: "apple"
console.log(thirdFruit);  // Outputs: "banana"

OUTPUT

 apple
 banana

Rest Parameter:

HTML

// Original array
const colors = ["red", "green", "blue", "yellow", "purple"];

// Destructuring assignment with the rest parameter
const [firstColor, ...restColors] = colors;

console.log(firstColor);   // Outputs: "red"
console.log(restColors);   // Outputs: ["green", "blue", "yellow", "purple"]

OUTPUT

 red
 ["green", "blue", "yellow", "purple"]
Default Values:

HTML

// Original array
const car = ["Toyota", "Camry"];

// Destructuring assignment with default values
const [brand, model, year = 2022] = car;

console.log(brand); // Outputs: "Toyota"
console.log(model); // Outputs: "Camry"
console.log(year);  // Outputs: 2022 (default value)

OUTPUT

 Toyota
 Camry
 2022
Swapping Values:

HTML

let a = 5;
let b = 10;

// Swapping values using array destructuring
[a, b] = [b, a];

console.log(a); // Outputs: 10
console.log(b); // Outputs: 5

OUTPUT

 10
 5

Destructuring  Objects :

  • Destructuring is a feature in JavaScript that allows you to extract values from objects or arrays and assign them to variables in a more concise and readable way. In the context of objects, object destructuring enables you to unpack properties from objects into separate variables.

HTML

// Object to be destructured
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  address: {
    city: "New York",
    country: "USA",
  },
};

// Destructuring assignment
const { firstName, lastName, age, address: { city, country } } = person;

// Using the extracted values
console.log(firstName); // Outputs: John
console.log(lastName);  // Outputs: Doe
console.log(age);       // Outputs: 30
console.log(city);      // Outputs: New York
console.log(country);   // Outputs: USA

OUTPUT

John
Doe
30
New York
USA
Modules & Modularity :
  • In JavaScript, modularity refers to the practice of organizing code into separate, reusable, and independent modules. A module is a self-contained unit of code that encapsulates related functionality, variables, and/or classes. This approach is crucial for maintaining clean, scalable, and maintainable codebases.

Native ES6 Modules:

Exporting from a Module:

HTML

// myModule.js

// Named export
export const myFunction = () => {
  console.log("This is a function from myModule");
};

// Default export
const myVariable = 42;
export default myVariable;

OUTPUT

This is a function from myModule
42
Importing in another Module:

HTML

// main.js

// Named import
import { myFunction } from './myModule';

// Default import
import myVariable from './myModule';

myFunction(); // Outputs: This is a function from myModule
console.log(myVariable); // Outputs: 42

OUTPUT

This is a function from myModule
42
Exporting and Importing All :

HTML

// myModule.js

const internalFunction = () => {
  console.log("Internal function");
};

export { internalFunction };

// main.js

import * as myModule from './myModule';

myModule.internalFunction(); // Outputs: Internal function

OUTPUT

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

© Track Itinerary. Powered By : EligoCS All rights reserved.