The modern, native way to deep clone an object is using structuredClone().
const original = { name: "Dev", details: { age: 25 } };
const clone = structuredClone(original);
.map() returns a new array without modifying the original array. .forEach() simply loops over items and returns undefined.
const doubled = nums.map(n => n * 2); // returns array nums.forEach(n => console.log(n)); // returns undefined
A closure is the combination of a function bundled together with references to its surrounding state (the lexical environment). It allows an inner function to access variables from an outer function even after the outer function has finished executing.
The value of this depends on how a function is called. In a method, it refers to the owner object. Alone or in a function, it refers to the global object (or undefined in strict mode). Arrow functions do not have their own this; they inherit it from the surrounding scope.
== (loose equality) performs type coercion before comparing two values, meaning it tries to convert them to a common type. === (strict equality) compares both the value and the type without conversion.
5 == '5' // true 5 === '5' // false
The easiest layout methods are Flexbox or CSS Grid applied to the wrapper container:
/* Method 1: Flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* Method 2: Grid */
.container {
display: grid;
place-items: center;
}
The CSS box model is a container that wraps around every HTML element. It consists of: Content, Padding (space around content), Border (goes around padding), and Margin (space outside the border).
position: relative; positions an element relative to its normal position in the document flow. position: absolute; removes the element from the document flow and positions it relative to its closest parent element that has a position value other than static.
It forces padding and borders to be included in the element's total width and height calculations, preventing sizes from breaking layouts when padding is applied.
* { box-sizing: border-box; }
Semantic elements clearly describe their meaning to both the browser and the developer (e.g., <header>, <article>, <footer>) instead of using generic layout elements like <div>.
Data attributes allow you to store extra, custom information directly inside standard HTML elements without using non-standard tags. They can easily be accessed via JavaScript using element.dataset.
List comprehensions provide a concise way to create lists out of existing sequences or iterables.
# Traditional approach
squares = []
for x in range(10):
squares.append(x**2)
# List comprehension approach
squares = [x**2 for x in range(10)]
The primary difference is that **Lists** are mutable (can be changed after creation) and defined with brackets [], while **Tuples** are immutable (cannot be altered) and defined with parentheses ().
*args allows a function to accept any number of positional arguments. **kwargs allows a function to accept any number of keyword (named) arguments.
git fetch only downloads new data from a remote repository but does not integrate it into your working files. git pull performs a git fetch and immediately runs a git merge to update your local branch.
If you want to undo the commit but keep your changes safe in your workspace, use:
git reset --soft HEAD~1
To completely destroy the commit and lose all uncommitted changes, use:
git reset --hard HEAD~1
INNER JOIN returns rows only when there is a match in both tables. LEFT JOIN returns all rows from the left table, along with matching rows from the right table (filling with NULL if no match exists).
An index is a performance-tuning structure that helps the database search data inside tables much faster. Think of it like an index at the back of a physical book.