Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
ES6 (ECMAScript 2015) brought massive improvements to JavaScript. Every year since, new features are added. These modern features make code cleaner, shorter, and easier to read!
// var has function scope
var name = 'Alice';
var name = 'Bob'; // Can redeclare!
if (true) {
var age = 25;
}
console.log(age); // 25 - leaks out!
// Hoisting confusion
console.log(x); // undefined
var x = 10;// let has block scope
let name = 'Alice';
// let name = 'Bob'; // Error!
if (true) {
let age = 25;
}
// console.log(age); // Error - not accessible!
// const for constants
const PI = 3.14;
// PI = 3.15; // Error - can't reassign!// Traditional function
const add = function(a, b) {
return a + b;
};
// Array methods
const numbers = [1, 2, 3];
const doubled = numbers.map(function(n) {
return n * 2;
});// Arrow function
const add = (a, b) => {
return a + b;
};
// Or even shorter!
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);const name = 'Alice'; const age = 25; // Messy concatenation const message = 'Hello, ' + name + '! You are ' + age + ' years old.'; // Multi-line strings const html = '<div>\n' + ' <h1>Title</h1>\n' + '</div>';
const name = 'Alice';
const age = 25;
// Clean interpolation
const message = `Hello, ${name}! You are ${age} years old.`;
// Multi-line strings (no \n needed!)
const html = `<div>
<h1>Title</h1>
</div>`;• Can be reassigned
• Block-scoped (only exists within {} braces)
• No hoisting confusion
• Cannot be redeclared in same scope
• Cannot be reassigned (reference is constant)
• Block-scoped
• Object/array contents can still be modified
• Must be initialized when declared
• Shorter syntax
• Implicit return for single expressions
• Lexical this binding
• No arguments object
• Set default values for parameters
• Cleaner than OR operator workaround
• Can use expressions
• Parameters evaluated at call time
• Collect remaining arguments into array
• Replaces arguments object
• Must be last parameter
• Real array with all methods
• Expand arrays/objects
• Copy arrays/objects easily
• Merge arrays/objects
• Pass array as function arguments
• Extract values by position
• Skip unwanted values
• Swap variables easily
• Works with iterables
• Extract properties by name
• Rename during extraction
• Set default values
• Nested destructuring
• String interpolation with ${}
• Multi-line strings
• Embed expressions
• Tagged templates
• Shorthand property names
• Shorthand method definitions
• Computed property names
• Cleaner object creation
• Constructor method
• Instance methods
• Static methods
• Cleaner than prototypes
• extends keyword
• super() for parent constructor
• Method overriding
• Single inheritance
• get keyword
• set keyword
• Computed properties
• Validation on set
• Better than callbacks
• then/catch/finally chains
• Promise.all/race/allSettled
• Avoids callback hell
• Write async code like sync
• async keyword for functions
• await pauses execution
• try/catch for errors
• Pausable functions
• yield keyword
• Iterator protocol
• Lazy evaluation
• export const/function/class
• Multiple exports per file
• Import with {} braces
• Can rename on import
• export default
• One per file
• Import without {}
• Name on import is flexible
• import * as Name
• Rename imports (as)
• Dynamic imports (lazy loading)
• Side-effect imports
• Code organization
• Reusability
• Dependency management
• Tree-shaking (dead code elimination)
• Unique identifiers
• Private-like properties
• Well-known symbols
• Iterator protocol
• Iterate over values
• Works with arrays, strings, Maps
• Custom iterators
• Cleaner than for...in
• Map: key-value pairs (any type)
• Set: unique values collection
• Better than plain objects
• WeakMap & WeakSet variants
• Intercept object operations
• Custom behavior for gets/sets
• Validation and logging
• Vue 3 reactivity uses Proxy
• find/findIndex
• includes
• Array.from
• flat/flatMap (ES2019)
• startsWith/endsWith
• includes
• repeat
• padStart/padEnd
let - block-scoped variableconst - constant (can't reassign)=>...args[a, b] = arr...arr`${x}`class Personextendsasync/await.then()/.catch()import/exportPrefer const, use let when needed. Never use var!
Shorter syntax: (x) => x * 2 instead of function
Extract values easily: [a, b] = array or { x, y } = obj
Use backticks: `Hello $${name}` for string interpolation