Skip to content

JavaScript documentation, concepts, challenges, tools, and much more.

Notifications You must be signed in to change notification settings

marcelosperalta/docs_javascript

Repository files navigation

JavaScript logo

JavaScript is high-level, often just-in-time compiled and multi-paradigm. It has dynamic typing, prototype-based object-orientation and first-class functions.

‡️ Table of Contents


πŸ” Glossary

term definition
Case or letter case Is the difference between uppercase letters and lowercase letters. e.g. camelCase or CamelCase, snake_case, kebab-case or spinal-case.
Closures A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
Currying In mathematics and computer science, currying is the technique of converting a function that takes multiple arguments into a sequence of functions that each takes a single argument. For example, currying a function f that takes three arguments creates three functions:x = f(a, b, c) becomes: h = g(a), i = h(b), x = i(c).
new Operator The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
Hoisting JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.
Object Literals An object literal is a comma-separated list of name-value pairs inside of curly braces.
Property accessors Property accessors provide access to an object's properties by using the dot notation or the bracket notation.
Regular Expressions Are used in programming languages to match parts of strings. You create patterns to help you do that matching.
Template Literals Template literals are literals delimited with backticks (`), allowing embedded expressions called substitutions.

πŸ‘ Common Practices

  • Immutable values and mutable values

    A common practice when naming constants is to use all uppercase letters, with words separated by an underscore.

    It is common for developers to use uppercase variable identifiers for immutable values and lowercase or camelCase for mutable values (objects and arrays).

  • Const

    Some developers prefer to assign all their variables using const by default, unless they know they will need to reassign the value. Only in that case, they use let.

    However, it is important to understand that objects (including arrays and functions) assigned to a variable using const are still mutable. Using the const declaration only prevents reassignment of the variable identifier.


πŸ“˜ Concepts


πŸ”’ Security


πŸ“– Design Patterns


πŸ’¨ Quick Reference

Built-in objects - List

String, Array, Object, Function

String Properties Array Properties Object Properties Function Properties
length length constructor length
- [@@unscopable] - name
String Methods Array Methods Object Methods Function Methods
[@@iterator]() [@@iterator]() assign() apply()
charAt() get Array[@@species] create() bind()
charCodeAt() concat() defineProperties() call()
codePointAt() copyWithin() defineProperty() toString()
concat() entries() entries() -
endsWith() every() freeze() -
fromCharCode() fill() fromEntries() -
fromCodePoint() filter() getOwnPropertyDescriptor() -
includes() find() getOwnPropertyDescriptors() -
indexOf() findIndex() getOwnPropertyNames() -
lastIndexOf() flat() getOwnPropertySymbols() -
localeCompare() flatMap() getPrototypeOf() -
match() forEach() hasOwnProperty() -
matchAll() from() is() -
normalize() includes() isExtensible() -
padEnd() indexOf() isFrozen() -
padStart() isArray() isPrototypeOf() -
raw() join() isSealed() -
repeat() keys() keys() -
replace() lastIndexOf() preventExtensions() -
replaceAll() map() propertyIsEnumerable() -
search() of() seal() -
slice() pop() setPrototypeOf() -
split() push() toLocaleString() -
startsWith() reduce() toString() -
substring() reduceRight() valueOf() -
toLocaleLowerCase() reverse() values() -
toLocaleUpperCase() shift() - -
toLowerCase() slice() - -
toString() some() - -
toUpperCase() sort() - -
trim() splice() - -
trimEnd() toLocaleString() - -
trimStart() toString() - -
valueOf() unshift() - -
- values() - -

Built-in objects - Short Description

String

strings are immutable

String Properties description
String length The length property of a String object contains the length of the string, in UTF-16 code units. length is a read-only data property of string instances.
String Methods description example
String.prototype[@@iterator] Returns a new iterator object that iterates over the code points of a String value, returning each code point as a String value.
String.prototype.charAt() Returns a new string consisting of the single UTF-16 code unit located at the specified offset into the string.
String.prototype.charCodeAt() Returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index.
String.prototype.codePointAt() Returns a non-negative integer that is
the UTF-16 code point value.
String.prototype.concat() Concatenates the string arguments to the calling string
and returns a new string.
String.prototype.endsWith() Determines whether a string ends with the characters of a specified string, returning true or false as appropriate.
String.fromCharCode() Returns a string created from the specified sequence of UTF-16 code units.
String.fromCodePoint() Returns a string created by using the specified sequence of code points.
String.prototype.includes() Determines whether one string may be found within another string, returning true or false as appropriate. examples
String.prototype.indexOf() Returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.
String.prototype.lastIndexOf() Returns the index within the calling String object of the last occurrence of the specified value, searching backwards from fromIndex. Returns -1 if the value is not found.
String.prototype.localeCompare() Returns a number indicating whether a reference string comes before, or after, or is the same as the given string in sort order.
String.prototype.match() Retrieves the result of matching a string against a regular expression.
String.prototype.matchAll() Returns an iterator of all results matching a string against a regular expression, including capturing groups.
String.prototype.normalize() Returns the Unicode Normalization Form of the string.
String.prototype.padEnd() Pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end of the current string.
String.prototype.padStart() Pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start of the current string.
String.raw() Is a tag function of template literals. This is similar to the r prefix in Python, or the @ prefix in C# for string literals. (But it is not identical; see explanations in this issue.) It's used to get the raw string form of template literals, that is, substitutions (e.g. ${foo}) are processed, but escapes (e.g. \n) are not.
String.prototype.repeat() Constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.
String.prototype.replace() Returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced. The original string is left unchanged.
String.prototype.replaceAll() Returns a new string with all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. The original string is left unchanged.
String.prototype.search() Executes a search for a match between a regular expression and this String object.
String.prototype.slice() Extracts a section of a string and returns it as a new string, without modifying the original string.
String.prototype.split() Divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.
String.prototype.startsWith() Determines whether a string begins with the characters of a specified string, returning true or false as appropriate.
String.prototype.substring() Returns the part of the string between the start and end indexes, or to the end of the string.
String.prototype.toLocaleLowerCase() Returns the calling string value converted to lower case, according to any locale-specific case mappings.
String.prototype.toLocaleUpperCase() Returns the calling string value converted to upper case, according to any locale-specific case mappings.
String.prototype.toLowerCase() Returns the calling string value converted to lower case.
String.prototype.toString() Returns a string representing the specified object.
String.prototype.toUpperCase() Returns the calling string value converted to uppercase (the value will be converted to a string if it isn't one).
String.prototype.trim() Removes whitespace from both ends of a string. Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters (LF, CR, etc.).
String.prototype.trimEnd() Removes whitespace from the end of a string. trimRight() is an alias of this method.
String.prototype.trimStart() Removes whitespace from the beginning of a string. trimLeft() is an alias of this method.
String.prototype.valueOf() Returns the primitive value of a String object.
String methods that change and do not change the original object
Method Change Do Not Change
[@@iterator]() ---------- returns a new iterator object
charAt() ---------- returns a new string
charCodeAt() ---------- returns an integer between 0 and 65535
codePointAt() ---------- returns a non-negative integer
concat() ---------- returns a new string
endsWith() ---------- returns true or false as appropriate
String.fromCharCode() ---------- returns a string created from the specified sequence of UTF-16 code units
String.fromCodePoint() ---------- returns a string created by using the specified sequence of code points
includes() ---------- returns true or false as appropriate
indexOf() ---------- returns -1 if the value is not found
lastIndexOf() ---------- returns -1 if the value is not found
localeCompare() ---------- returns a number indicating whether a reference string comes before, or after, or is the same as the given string in sort order
match() ---------- retrieves the result of matching a string against a regular expression
matchAll() ---------- returns an iterator of all results matching a string against a regular expression
normalize() ---------- returns the Unicode Normalization Form of the string
padEnd() ---------- pads the current string with a given string so that the resulting string reaches a given length
padStart() ---------- pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length
String.raw() ---------- the raw string form of a given template literal
repeat() ---------- constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together
replace() ---------- returns a new string with some or all matches of a pattern replaced by a replacement
replaceAll() ---------- returns a new string with all matches of a pattern replaced by a replacement
search() ---------- the index of the first match between the regular expression and the given string, or -1 if no match was found
slice() ---------- extracts a section of a string and returns it as a new string, without modifying the original string
split() ---------- returns an array of strings, split at each point where the separator occurs in the given string
startsWith() ---------- returns true or false as appropriate
substring() ---------- returns the part of the string between the start and end indexes, or to the end of the string
toLocaleLowerCase() ---------- returns a new string representing the calling string converted to lower case, according to any locale-specific case mappings
toLocaleUpperCase() ---------- returns a new string representing the calling string converted to upper case, according to any locale-specific case mappings
toLowerCase() ---------- returns a new string representing the calling string converted to lower case
toUpperCase() ---------- returns a new string representing the calling string converted to upper case
trim() ---------- returns a new string representing str stripped of whitespace from both its beginning and end
trimEnd() ---------- returns a new string representing str stripped of whitespace from its end (right side)
trimStart() ---------- returns a new string representing str stripped of whitespace from its beginning (left side).
valueOf() ---------- returns a string representing the primitive value of a given String object
toString() The String object overrides the toString() method of the Object object ----------

Array

Array Properties description
Array.prototype[@@unscopables] The @@unscopable symbol property contains property names that were not included in the ECMAScript standard prior to the ES2015 version. These properties are excluded from with statement bindings.
Array.prototype.length The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.
Array Methods description
Array.prototype[@@iterator]() The @@iterator method is part of The iterable protocol, that defines how to synchronously iterate over a sequence of values.
get Array[@@species] The Array[@@species] accessor property returns the Array constructor.
Array.prototype.concat() Is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
Array.prototype.copyWithin() Shallow copies part of an array to another location in the same array and returns it without modifying its length.
Array.prototype.entries() Returns a new Array Iterator object that contains the key/value pairs for each index in the array.
Array.prototype.every() Tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
Array.prototype.fill() Changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.
Array.prototype.filter() Creates a new array with all elements that pass the test implemented by the provided function.
Array.prototype.find() Returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
Array.prototype.findIndex() Returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.
Array.prototype.flat() Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
Array.prototype.flatMap() Returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level. It is identical to a map() followed by a flat() of depth 1, but slightly more efficient than calling those two methods separately.
Array.prototype.forEach() Executes a provided function once for each array element.
Array.from() Creates a new, shallow-copied Array instance from an array-like or iterable object.
Array.prototype.includes() Determines whether an array includes a certain value among its entries, returning true or false as appropriate.
Array.prototype.indexOf() Returns the first index at which a given element can be found in the array, or -1 if it is not present.
Array.isArray() Determines whether the passed value is an Array.
Array.prototype.join() Creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.
Array.prototype.keys() Returns a new Array Iterator object that contains the keys for each index in the array.
Array.prototype.lastIndexOf() Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.
Array.prototype.map() Creates a new array populated with the results of calling a provided function on every element in the calling array.
Array.of() Creates a new Array instance from a variable number of arguments, regardless of number or type of the arguments.
Array.prototype.pop() Removes the last element from an array and returns that element. This method changes the length of the array.
Array.prototype.push() Adds one or more elements to the end of an array and returns the new length of the array.
Array.prototype.reduce() Executes a user-supplied β€œreducer” callback function on each element of the array, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
Array.prototype.reduceRight() Applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.
Array.prototype.reverse() Reverses an array in place. The first array element becomes the last, and the last array element becomes the first.
Array.prototype.shift() Removes the first element from an array and returns that removed element. This method changes the length of the array.
Array.prototype.slice() Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
Array.prototype.some() Tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.
Array.prototype.sort() Sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.
Array.prototype.splice() Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, see slice().
Array.prototype.toLocaleString() Returns a string representing the elements of the array. The elements are converted to Strings using their toLocaleString methods and these Strings are separated by a locale-specific String (such as a comma β€œ,”).
Array.prototype.toString() Returns a string representing the specified array and its elements.
Array.prototype.unshift() Adds one or more elements to the beginning of an array and returns the new length of the array.
Array.prototype.values() Returns a new array iterator object that contains the values for each index in the array.

arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.

Array methods that change (mutate) and do not change (not mutate) the original array
Method Mutate / Not Mutate (avoiding side effects)
filter() Not Mutate
map() Not Mutate
slice() Not Mutate
concat() Not Mutate
push() Mutate
splice() Mutate
sort() Mutate

Object

Object Properties description
Object.prototype.constructor Returns a reference to the Object constructor function that created the instance object. Note that the value of this property is a reference to the function itself, not a string containing the function's name.
Object Methods description
Object.assign() Copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.
Object.create() Creates a new object, using an existing object as the prototype of the newly created object.
Object.defineProperties() Defines new or modifies existing properties directly on an object, returning the object.
Object.defineProperty() Defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
Object.entries() Returns an array of a given object's own enumerable string-keyed property [key, value] pairs. This is the same as iterating with a for...in loop, except that a for...in loop enumerates properties in the prototype chain as well.
Object.freeze() Freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.
Object.fromEntries() Transforms a list of key-value pairs into an object.
Object.getOwnPropertyDescriptor() Returns an object describing the configuration of a specific property on a given object (that is, one directly present on an object and not in the object's prototype chain). The object returned is mutable but mutating it has no effect on the original property's configuration.
Object.getOwnPropertyDescriptors() Returns all own property descriptors of a given
Object.getOwnPropertyNames() Returns an array of all properties (including non-enumerable properties except for those which use Symbol) found directly in a given object.
Object.getOwnPropertySymbols() Returns an array of all symbol properties found directly upon a given object.
Object.getPrototypeOf() Returns the prototype (i.e. the value of the internal [[Prototype]] property) of the specified object.
Object.prototype.hasOwnProperty() Returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it).
Object.is() Determines whether two values are the same value.
Object.isExtensible() Determines if an object is extensible (whether it can have new properties added to it).
Object.isFrozen() Determines if an object is frozen.
Object.prototype.isPrototypeOf() Checks if an object exists in another object's prototype chain.
Object.isSealed() Determines if an object is sealed.
Object.keys() Returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.
Object.preventExtensions() Prevents new properties from ever being added to an object (i.e. prevents future extensions to the object).
Object.prototype.propertyIsEnumerable() Returns a Boolean indicating whether the specified property is enumerable and is the object's own property.
Object.seal() Seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed as long as they are writable.
Object.setPrototypeOf() Sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null.
Object.prototype.toLocaleString() Returns a string representing the object. This method is meant to be overridden by derived objects for locale-specific purposes.
Object.prototype.toString() Returns a string representing the object.
Object.prototype.valueOf() Returns the primitive value of the specified object.
Object.values() Returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop. (The only difference is that a for...in loop enumerates properties in the prototype chain as well.)

Function

Function Properties description
Function.length Indicates the number of parameters expected by the function.
Function.name A Function object's read-only name property indicates the function's name as specified when it was created, or it may be either anonymous or '' (an empty string) for functions created anonymously.
Function Methods description
Function.prototype.apply() Calls a function with a given this value, and arguments provided as an array (or an array-like object).
Function.prototype.bind() Creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Function.prototype.call() Calls a function with a given this value and arguments provided individually.
Function.prototype.toString() Returns a string representing the source code of the function.

JSON

JSON Methods description
JSON.parse() Parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.
JSON.stringify() Converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

Statements & Declarations - Short Description

Statement description flow diagram
do...while Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once. link
for Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop. link
for...in Iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties. -----

πŸ”¦ Debug (Debugging)

Tool

Method / Operator

Item Type Description
console.log() method outputs a message to the web console
typeof operator returns a string indicating the type of the unevaluated operand

🧰 Tools

Source Code Editor

Online Source Code Editor

Online Developer Environment

Static Program/Code Analysis (Linter / Lint) (Quality)

Source-to-source compiler (Transcompiler / Transpiler)

Module Bundler

Regular expression (regex or regexp or rational expression)

Data Interchange

Data visualization

Static Typing

Internationalization and localization

API documentation generator

List of APIs

Local Storage API

Fake / Mock REST API

Fake / Mock GraphQL API

Query Language for APIs

Realtime Web Applications

Functional Library

Testing (end-to-end tests, integration tests, and unit tests)

CSS-in-JS

Managing projects with multiple packages

State management libraries


πŸ“š Tutorials

πŸ“– MDN


πŸŽ“ Courses

English

🏫 FreeCodeCamp

🏫 Fireship


Portuguese

🏫 Cod3r Cursos


❓ Challenges


πŸ“Ί YouTube

English
Portuguese

πŸ“° Articles


πŸ“• Books


🚨 Topics

Browsers extension development