Here's a brief overview of important JavaScript concepts, along with sample code snippets for each:
1. Hoisting
Hoisting refers to JavaScript's behavior of moving declarations (variables and functions) to the top of their scope before code execution.
console.log(a); // undefined due to hoisting
var a = 5;
2. Single Threaded
JavaScript runs in a single thread, meaning it can only execute one task at a time.
3. Synchronous
Synchronous code is executed line by line, with each operation blocking the next one until it completes.
console.log("First");
console.log("Second");
4. Function Invocation
This is the process of calling or executing a function.
function greet() {
console.log("Hello");
}
greet(); // Function invocation
5. Variable Environment
The context in which variables are stored and accessed, typically inside a scope (global, function, or block).
6. Scope
Scope determines the visibility and lifetime of variables and functions. In JavaScript, there are function scope, block scope, and global scope.
if (true) {
let x = 5; // Block scope
}
console.log(x); // Error: x is not defined
7. Asynchronous
Asynchronous code allows other operations to continue while waiting for a task to complete.
setTimeout(() => {
console.log("Asynchronous");
}, 1000);
8. How This Happens Inside JS Engine?
JavaScript's event loop handles asynchronous operations. The call stack executes synchronous code, while the event loop waits for tasks in the callback queue.
9. Dynamic Typing
In JavaScript, variable types are determined at runtime, allowing flexibility in assigning different types to the same variable.
let data = 42;
data = "Now a string"; // No error
10. Operators
Operators in JavaScript include arithmetic, comparison, logical, etc.
let sum = 10 + 5; // Arithmetic
let isEqual = 10 === 10; // Comparison
11. Operator Precedence
This defines the order in which operations are executed.
let result = 2 + 3 * 4; // 14, because * has higher precedence than +
12. Associativity
Associativity determines the direction in which operators are evaluated.
let result = 10 - 5 - 2; // Left-associative, evaluated as (10 - 5) - 2
13. Coercion
JavaScript automatically converts types when required.
let result = '5' - 2; // '5' is coerced into a number, result is 3
14. Namespace
A way to organize code by grouping related variables and functions.
let MyApp = {
name: "My Application",
version: 1.0
};
15. First-Class Function (FCF)
Functions in JavaScript can be treated as variables and passed around as arguments or returned from other functions.
function sayHello() {
return "Hello";
}
let greet = sayHello; // First-class function
16. Expression
An expression is any valid unit of code that resolves to a value.
let sum = 5 + 10; // The expression `5 + 10` evaluates to 15
17. Executing Function Created on the Fly
Anonymous functions are created and executed instantly.
(function() {
console.log("Executed on the fly");
})();
18. Mutate
To modify an object or variable's properties.
let obj = { name: "Alice" };
obj.name = "Bob"; // Mutating the object
19. Arguments
arguments is an array-like object in functions that contains all the arguments passed.
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3)); // 6
20. Whitespace
Whitespace (spaces, tabs, newlines) is ignored in JavaScript code for the most part.
21. Closure
A closure is a function that remembers and accesses variables from its outer scope, even after that scope has closed.
function outer() {
let x = 10;
return function inner() {
console.log(x);
};
}
const closureFunc = outer();
closureFunc(); // Outputs 10
22. Factory
A function that returns objects.
function createPerson(name, age) {
return { name, age };
}
const person = createPerson("John", 30);
23. Callback Function
A function passed as an argument to another function and executed later.
function fetchData(callback) {
setTimeout(() => {
callback("Data fetched");
}, 1000);
}
fetchData((message) => console.log(message));
24. Function Currying
Currying transforms a function that takes multiple arguments into a series of functions, each taking one argument.
function add(a) {
return function(b) {
return a + b;
};
}
let add5 = add(5);
console.log(add5(3)); // 8
25. Inheritance
Inheritance allows one object to acquire properties and methods of another.
class Animal {
speak() {
console.log("Animal speaks");
}
}
class Dog extends Animal {
bark() {
console.log("Dog barks");
}
}
26. Function Constructors
A way to create objects in JavaScript using constructor functions.
function Person(name, age) {
this.name = name;
this.age = age;
}
const john = new Person("John", 30);
27. Polyfill
A polyfill is code that provides functionality for older browsers that don't natively support newer features.
if (!Array.prototype.includes) {
Array.prototype.includes = function(element) {
return this.indexOf(element) !== -1;
};
}
28. Syntactic Sugar
Syntactic sugar refers to language features that don't add new functionality but make the code easier to read and write.
// Arrow function is syntactic sugar for writing function expressions
const add = (a, b) => a + b;
If you are looking for a resource where you can learn Javascript. Summarized version of Understanding the Weird Parts is highly recommended.