JavaScript is a versatile and powerful programming language that is mostly used to create and manage dynamic content on websites. It enables interactive web elements like animations, form validations, and real-time updates. JavaScript is a client-side language, which means it runs in the user’s browser; however, it may also be used on the server-side in environments such as Node.JS.
Variables in JavaScript are containers for storing data values.
They can hold different types of data, including primitive types (numbers, strings, booleans) and complex types (arrays, objects, functions).
(a) var
Scope: Function-scoped or globally scoped if declared outside a function.
Hoisting: Declarations are hoisted to the top of their scope, allowing you to use the variable before its declaration in the code.
(b) let
Scope: Block-scoped, meaning it is only accessible within the block ({}) where it is defined.
Hoisting: Declarations are not hoisted in the same way as var. Accessing the variable before its declaration results in a ReferenceError.
(c) const
Scope: Block-scoped, similar to let.
Immutability: Variables declared with const cannot be reassigned after initialization. However, if the variable holds an object or array, the contents can still be modified
Key Points:
var: Function-scoped, hoisted, and allows redeclaration.
let: Block-scoped, not hoisted, and does not allow redeclaration within the same block.
const: Block-scoped, not hoisted, and does not allow reassignment (but allows modification of object/array contents).
let name = "User1"; // 'let' declares a block-scoped variable that can be reassigned
const age = 30; // 'const' declares a block-scoped variable that cannot be reassigned
var isStudent = true; // 'var' declares a function-scoped variable
JavaScript has several data types that can be categorized into two main groups: primitive and non-primitive (or reference) types.
Primitive data types:
String: Represents textual data. Example: “Hello, World!”
Number: Represents both integer and floating-point numbers. Example: 42, 3.14
Boolean: Represents a logical entity and can have two values: true or false.
Null: Represents the intentional absence of any object value.
Undefined: Represents an uninitialized variable or a missing value.
Symbol: Represents a unique and immutable value, often used as object property keys (introduced in ES6).
Non-Primitive data types:
Object: Represents a collection of properties, where each property is an association between a key and a value. Objects can hold any combination of primitive values, other objects, arrays, or functions.
Example:
let name = "User1"; // String
let age = 30; // Number
let isStudent = true; // Boolean
let person = { name: "User1", age: 30 }; // Object
let hobbies = ["reading", "coding"]; // Array (special type of object)
let noValue = null; // Null
let notAssigned; // Undefined
A function in JavaScript is a block of code designed to perform a specific task.
Structure of a Function:
Declaration:
Defined using the function keyword.
function greet(name) { /* code */ }
Placeholders for values passed into the function.
Allows the function to operate with different inputs.Contains the code that defines what the function does.
Enclosed in curly braces {}.
return a + b; in function add(a, b) { return a + b; }
Invoked using the function name followed by parentheses.
Arguments can be passed inside the parentheses.
greet("User1"); // Calls greet function
let result = add(5, 3); // Calls add function
Organization: Helps structure code into logical blocks.
Reusability: Allows code to be reused without duplication.
Modularity: Breaks down complex tasks into smaller, manageable pieces.
Definition:
Arrow functions provide a more concise syntax for writing function expressions in JavaScript.
Introduced in ES6, they differ from traditional functions in their handling of ‘this’
Basic Arrow Function:
Regular Function Expression:
const add = function(a, b) {
return a + b;
};
Parentheses around the parameter can be omitted if there is only one parameter.
const square = x => x * x;
console.log(square(5)); // Output: 25
Use curly braces {} and an explicit return statement for functions with multiple statements or when returning an object.
const multiply = (a, b) => {
const result = a * b;
return result;
};
console.log(multiply(2, 3)); // Output: 6
this:
Arrow functions do not have their own this context.
They inherit this from the surrounding scope where they are defined.
Example of ‘this’ Binding:
function Counter() {
this.value = 0;
// Traditional function expression
setInterval(function() {
this.value++;
console.log(this.value); // 'this' refers to the global object or undefined in strict mode
}, 1000);
// Arrow function
setInterval(() => {
this.value++;
console.log(this.value); // 'this' refers to the Counter instance
}, 1000);
}
new Counter();
In JavaScript, == and === are comparison operators used to check if two values are equal, but they do so in different ways:
== (Loose Equality): This operator checks for equality after performing type conversion (also known as type coercion) if necessary. It converts the values to a common type before comparing them.
=== (Strict Equality): This operator checks for equality without performing type conversion. It compares both the value and the type of the operands.
console.log(5 == "5"); // true (because "5" is converted to the number 5 before comparison)
console.log(5 === "5"); // false (because the types are different: number vs. string)
Definition:
An array in JavaScript is a data structure that stores multiple values in a single variable.
Arrays can contain various types of data, including numbers, strings, objects, and even other arrays.
Arrays are zero-indexed, meaning the index of the first element is 0, the second element is 1, and so on.
let fruits = ["apple", "banana", "cherry"];
this:
Arrow functions do not have their own this context.
They inherit this from the surrounding scope where they are defined.
Example of ‘this’ Binding:
this:
Arrow functions do not have their own this context.
They inherit this from the surrounding scope where they are defined.
Example of ‘this’ Binding: