0% found this document useful (0 votes)
4 views10 pages

JavaScript Core Concepts

JavaScript is a high-level, interpreted programming language essential for web interactivity, featuring client-side execution, dynamic typing, and asynchronous programming capabilities. Key concepts include data types, functions, scopes, and the event loop, with common uses in web and server-side development. The document also covers advanced topics like closures, promises, and the module pattern.

Uploaded by

Md. Suhel Mia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views10 pages

JavaScript Core Concepts

JavaScript is a high-level, interpreted programming language essential for web interactivity, featuring client-side execution, dynamic typing, and asynchronous programming capabilities. Key concepts include data types, functions, scopes, and the event loop, with common uses in web and server-side development. The document also covers advanced topics like closures, promises, and the module pattern.

Uploaded by

Md. Suhel Mia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

JavaScript Core Concepts

JavaScript is a high-level, interpreted programming language primarily used to make


web pages interactive. It is one of the core technologies of the World Wide Web,
alongside HTML and CSS.

Key Features:

• Client-side: Runs in the browser (e.g., form validation, DOM manipulation).

• Dynamically typed: No need to define variable types.

• Event-driven: Reacts to user interactions like clicks or keyboard input.

• Asynchronous: Supports non-blocking operations using callbacks, promises, and


async/await.

• Prototype-based: Uses prototypal inheritance instead of classical OOP.

Common Uses:

• Creating dynamic UI behavior in web pages

• Building web applications (React, Angular, Vue)

• Server-side development using Node.js

• Game and mobile app development

1.1 Lexical Structure


The basic syntax rules of JavaScript.
Includes:

• Case Sensitivity → let x ≠ let X

• Comments → // Single-line or /* */ Multi-line

• Semicolons → Optional but recommended (let x = 5;)

• Whitespace → Ignored (except in strings like "Hello World")

1.2 Expressions
A piece of code that produces a value.
Examples:

5+5 // 10 (arithmetic)

"Hello" + "JS" // "HelloJS" (string concatenation)


x === y // true/false (comparison)

1.3 Data Types


Two main categories:

• Primitive Types (immutable): string, number, boolean, null, undefined, symbol,


bigint

• Non-Primitive (Reference Types): object, array, function

Note: typeof null returns "object" (a well-known JS quirk).

1.4 Classes
Blueprint for creating objects using the class keyword.

class Person {

constructor(name) {

this.name = name;

greet() {

return `Hello, ${this.name}`;

const john = new Person("John");

john.greet(); // "Hello, John"

1.5 Variables

• var → Function-scoped, hoisted. Avoid in modern JS.

• let → Block-scoped, can be reassigned.

• const → Block-scoped, cannot be reassigned.

var x = 10;

let y = 20;

const z = 30;
1.6 Functions
Reusable blocks of code.
Function Declaration vs Expression:

function sayHi() { return "Hi!"; } // Declaration

const sayHi = function() { return "Hi!"; }; // Expression

Also supports:

• Default Parameters: function greet(name = "Guest") {...}

• Rest Parameters: function sum(...nums) {...}

1.7 this Keyword


Refers to the object that is executing the current function. Value depends on how the
function is called.

const person = {

name: "Alice",

greet: function() {

console.log(this.name); // "Alice"

};

person.greet();

1.8 Arrow Functions


Shorter syntax, inherits this from the parent scope.

const add = (a, b) => a + b;

const greet = () => "Hello!";

1.9 Loops
Used to execute code repeatedly.

• for → Best for known iterations.

• while → Runs while condition is true.

• for...of → For iterating over arrays.

• for...in → For iterating over object keys.


for (let i = 0; i < 5; i++) console.log(i);

while (x < 10) x++;

for (const num of [1, 2, 3]) console.log(num);

1.10 Scopes

• Global Scope → Accessible everywhere.

• Function Scope → Inside a function (var).

• Block Scope → Inside {} (let, const).

if (true) {

let x = 10; // Block-scoped

var y = 20; // Function-scoped

console.log(y); // 20

console.log(x); // Error

1.11 Arrays
Ordered lists with powerful methods:

const nums = [1, 2, 3];

nums.push(4); // [1, 2, 3, 4]

nums.map(num => num * 2); // [2, 4, 6]

Also supports find(), filter(), reduce(), includes(), flat().

1.12 Template Literals


Strings with embedded variables using backticks:

const name = "Bob";

console.log(`Hello, ${name}!`); // "Hello, Bob!"

2. Asynchronous Programming

2.1 Callbacks
A function passed to another function to be executed later.
function fetchData(callback) {

setTimeout(() => callback("Data received!"), 1000);

fetchData(data => console.log(data));

2.2 Timers

• setTimeout() → Executes once after delay.

• setInterval() → Executes repeatedly at intervals.

setTimeout(() => console.log("Hello"), 2000);

setInterval(() => console.log("Tick"), 1000);

2.3 Promises
An object representing the eventual result of an async operation.
States: pending, fulfilled, rejected.

const promise = new Promise((resolve, reject) => {

setTimeout(() => resolve("Success!"), 1000);

});

promise.then(result => console.log(result));

Also supports:

• Promise.all()

• Promise.race()

2.4 Async & Await


Syntax sugar over Promises for cleaner code.

async function fetchData() {

const res = await fetch('https://api.example.com');

const data = await res.json();

return data;

Use try-catch for error handling.


3. Core Concepts

3.1 Closures
A closure is a function that remembers variables from its outer scope even after the
outer function has returned.

function outer() {

let x = 10;

function inner() {

console.log(x); // Remembers x

return inner;

const closureFn = outer();

closureFn(); // 10

3.2 The Event Loop


JS handles async code using the Event Loop.

• Call Stack: Executes sync code

• Callback Queue: Stores async tasks

• Microtask Queue: Promises (executed before macrotasks)

• Event Loop: Transfers tasks to the stack when it's empty

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");

// Output: Start → End → Promise → Timeout

Basics
1️⃣ What are the different data types in JavaScript?

• Primitive Types: string, number, boolean, null, undefined, symbol, bigint

• Non-Primitive Types: object, array, function

2️⃣ Explain let, const, and var.

• var: Function-scoped, hoisted.

• let: Block-scoped, can be reassigned.

• const: Block-scoped, cannot be reassigned.

3️⃣ What is hoisting?

• JavaScript moves declarations (not initializations) to the top of the scope. var is hoisted
with undefined; let and const are hoisted but not initialized.

4️⃣ Difference between == and ===.

• ==: Loose equality (performs type coercion)

• ===: Strict equality (no type coercion)

5️⃣ What is a closure?

• A function that remembers variables from its outer scope even after the outer function
has finished executing.

6️⃣ Explain scope & types of scope.

• Global Scope: Accessible everywhere

• Function Scope: Inside a function (var)

• Block Scope: Inside {} (let, const)

7️⃣ What is the event loop?

• It handles asynchronous code by moving tasks from the callback queue or microtask
queue to the call stack when it is empty.

8️⃣ What are template literals?

• Strings wrapped in backticks (``) that allow embedded expressions using ${}.

9️⃣ What are arrow functions?

• Shorter syntax for functions that do not have their own this binding.

Explain the difference between null and undefined.


• null: Intentional absence of value

• undefined: Variable declared but not assigned

Arrays & Objects

1️⃣1️⃣ How do you clone an object?

• Shallow copy: Object.assign({}, obj) or {...obj}

• Deep copy: JSON.parse(JSON.stringify(obj)) or using structuredClone()

1️⃣2️⃣ Explain array methods: map, filter, reduce.

• map(): Transforms each element and returns a new array

• filter(): Filters elements based on a condition

• reduce(): Reduces array to a single value

1️⃣3️⃣ What is destructuring?

• Extracting values from arrays or properties from objects into variables.

1️⃣4️⃣ How to merge two arrays?

• [...arr1️, ...arr2️] or arr1️.concat(arr2️)

1️⃣5️⃣ What is the spread operator?

• ... used to expand arrays or objects

1️⃣6️⃣ What is the difference between shallow and deep copy?

• Shallow: Copies top-level properties only

• Deep: Recursively copies all nested structures

1️⃣7️⃣ Explain rest parameters.

• ... syntax used to group remaining arguments into an array

1️⃣8️⃣ How do you check if a key exists in an object?

• 'key' in obj or obj.hasOwnProperty('key')

1️⃣9️⃣ What is optional chaining?

• ?. safely accesses deeply nested properties without throwing errors if null/undefined

2️⃣0️⃣ What is Object.freeze()?

• Prevents modification of existing properties or adding new ones to an object


Functions & Execution

2️⃣1️⃣ Difference between function declaration & expression.

• Declaration is hoisted, expression is not

2️⃣2️⃣ What are IIFEs?

• Immediately Invoked Function Expressions: runs immediately after being defined

2️⃣3️⃣ What is debounce vs throttle?

• Debounce: delays execution until after a pause

• Throttle: limits execution to once per interval

2️⃣4️⃣ What is currying?

• Transforming a function with multiple arguments into a sequence of functions with one
argument

2️⃣5️⃣ What is memoization?

• Caching the results of function calls to improve performance

2️⃣6️⃣ Explain call(), apply(), and bind().

• call(): Calls function with specified this and arguments

• apply(): Same as call but with arguments as an array

• bind(): Returns a new function with this bound

2️⃣7️⃣ What is the “this” keyword?

• Refers to the object that is executing the current function

2️⃣8️⃣ How does prototypal inheritance work?

• Objects can inherit properties/methods from another object via prototype chain

2️⃣9️⃣ Explain async/await.

• Syntactic sugar over Promises, allows writing async code like synchronous

3️⃣0️⃣ What is promise chaining?

• Linking multiple .then() calls to handle asynchronous steps sequentially

Advanced Concepts

3️⃣1️⃣ What are generators?


• Functions that can be paused and resumed using function* and yield

3️⃣2️⃣ What is the difference between synchronous and asynchronous code?

• Synchronous: Executes line by line

• Asynchronous: Can run tasks in the background without blocking

3️⃣3️⃣ What are web workers?

• Run scripts in background threads to keep the main thread free

3️⃣4️⃣ What is the module pattern?

• Design pattern that encapsulates code using closures and returns public APIs

3️⃣5️⃣ What is event delegation?

• Technique of using a single event listener on a parent to handle events from its children

You might also like