Essential JavaScript syntax, methods, and concepts. Your quick reference guide to modern JavaScript development with our interactive JavaScript playground.
let name = "John";const age = 30;var oldWay = true;function greet() {return "Hello!";}
const arrow = () => {return "Arrow!";}JavaScript is a versatile, high-level programming language that enables interactive web pages and is an essential part of web applications. It's one of the core technologies of the World Wide Web, alongside HTML and CSS.
Essential JavaScript syntax, methods, and concepts. Your quick reference guide to modern JavaScript development.
let variable = value;Block-scoped variableconst variable = value;Constant variablevar variable = value;Function-scoped variabletypeof variableGet variable typeString, Number, BooleanPrimitive typesnull, undefinedNull and undefined valuesSymbol, BigIntES6+ primitive typesObject, Array, FunctionReference typesfunction name() {}Function declarationconst fn = function() {}Function expressionconst fn = () => {}Arrow functionfunction(a, b = 1) {}Default parametersfunction(...args) {}Rest parametersreturn value;Return statementfn.call(this, args)Call function with contextfn.apply(this, [args])Apply function with arrayarr.push(item)Add to endarr.pop()Remove from endarr.unshift(item)Add to beginningarr.shift()Remove from beginningarr.slice(start, end)Extract portionarr.map(fn)Transform elementsarr.filter(fn)Filter elementsarr.reduce(fn, initial)Reduce to single valuearr.find(fn)Find first matcharr.includes(item)Check if includesconst obj = {key: value}Object literalobj.propertyDot notation accessobj['property']Bracket notation accessdelete obj.propertyDelete propertyObject.keys(obj)Get property namesObject.values(obj)Get property valuesObject.entries(obj)Get key-value pairsObject.assign(target, src)Copy propertiesdocument.getElementById(id)Get element by IDdocument.querySelector(sel)Get first matching elementdocument.querySelectorAll(sel)Get all matching elementselement.textContentGet/set text contentelement.innerHTMLGet/set HTML contentelement.setAttribute(name, val)Set attributeelement.classList.add(class)Add CSS classelement.addEventListener(event, fn)Add event listenerconst {a, b} = objObject destructuringconst [a, b] = arrArray destructuring...arraySpread operator`Hello ${name}`Template literalsclass ClassName {}Class declarationimport {module} from 'file'ES6 importsexport {module}ES6 exportsasync/awaitAsync functionsModern JavaScript (ES6+) includes many powerful features that make development more efficient and code more readable:
Follow these guidelines for clean and maintainable JavaScript code:
