JavaScript Lists
A random collection of different lists related to the JavaScript language.
Primitives
Primitive | Literals |
---|---|
bigint | 1n , 0xFn , 0o7n , 0b1n |
boolean | true , false |
null | null |
number | 1 , 1.2 , 0xF , 0o7 , 0b1 , 1e2 , 1e-2 |
string | 'string' , "string" , `string` |
symbol | none |
undefined | none (though accessible via global undefined ) |
Be on the look out for the upcoming BigDecimal.
Object Literals
Object | Literals |
---|---|
Object | { key0: value0, key1: value1, keyN: valueN } |
Array | [ value0, value1, valueN ] |
RegExp | /expression/flags |
Primitive Objects
Object Type | Constructor | Conversion |
---|---|---|
BigInt | No | Yes |
Boolean | Yes | Yes |
Number | Yes | Yes |
String | Yes | Yes |
Symbol | No | No |
BigInt vs. Number
Where value
in the examples represents a BigInt or Number value.
BigInt | Number | |
---|---|---|
Constructor | No | Yes |
Exponential Notation | No | Yes |
Supports Decimal Values | No | Yes |
Supported in JSON | No | Yes |
typeof value |
'bigint' | 'number' |
Object.is(value, -value) where value is 0 |
true | false |
1 + value (or other arithmetic operatation) |
Error | Number |
1n + value (or other arithmetic operatation) |
BigInt | Error |
1 ^ value (or other bitwise operatation) |
Error | Number |
1n ^ value (or other bitwise operatation) |
BigInt | Error |
+value |
Error | Number |
Math.round(value) (or other Math operation) |
Error | Number |
Array index in methods (e.g. array.slice(value) ) |
Error | Yes |
Identifiers
Where name
is the identifier being created and /* scope */
represents the scope where that identifier is available
Kind | Example |
---|---|
Catch error binding | try { } catch (name) { /* scope */ } |
Class | /* scope */ class name {} |
Named class name | (class name { /* scope */ }) |
Const | /* scope */ const name = value; |
Function | /* scope */ function name () {} |
Function parameter | (function (name /* scope */ ) { /* scope */ }) |
Named function expression name | (function name ( /* scope */ ) { /* scope */ }) |
Import | /* scope */ import name from 'path' |
Label | name: { /* scope */ } |
Let | /* scope */ let name; |
Var | /* scope */ var name; |
Note: Scopes within the parameter list refers to default parameter expressions.
Assign vs. Define
Assign sets a property through getter/setters (if they exist) while define will not.
Operation | Example | Method |
---|---|---|
Assignment Operator | object.prop = value |
Assign |
Array Methods | object.push(value) object.unshift(value) etc. |
Assign |
Object.assign | Object.assign(object, { prop: value }) |
Assign |
Reflect.set | Reflect.set(object, 'prop', value) |
Assign |
Array Literal | [ value ] |
Define |
Array Spread | [ ...[ value ] ] |
Define |
Class Declaration Fields | class { prop = value } |
Define |
Class Declaration Methods | class { prop() {} } |
Define |
JSON.parse | JSON.parse('{"prop":value}') |
Define |
Object Literal | { prop: value } |
Define |
Object Spread | { ...{ prop: value } } |
Define |
Object.create | Object.create(object, { prop: { value } }) |
Define |
Object.defineProperty | Object.defineProperty(object, 'prop', { value }) |
Define |
Object.fromEntries | Object.fromEntries([['prop', value]]) |
Define |
Default Property Descriptors
Operation | Example | Default Descriptor |
---|---|---|
Assignment | object.prop = value |
configurable: true enumerable: true writable: true |
Global var Declaration | var prop = value |
configurable: false enumerable: true writable: true |
Class Field | class { prop = value } |
configurable: true enumerable: true writable: true |
Class Method | class { prop () {} } |
configurable: true enumerable: false writable: true |
Define Property | Object.defineProperty(object, 'prop', { value }) |
configurable: false enumerable: false writable: false |
Imports (prop in Module) | import * as Module from './module.js' |
configurable: false enumerable: true writable: true |
Every assign operation as well as many of the other define operations (those that don't explicitly say "define") will use the same Assignment descriptor configuration.
Loops
Statements
Statement | Loops Over |
---|---|
do...while |
User-defined condition |
for |
User-defined condition |
for...in |
Objects |
for...of |
Iterables |
for await...of |
Async Iterables |
while |
User-defined condition |
Collection Methods
Method | Return Value | Early Exit | In Array | In Map | In Set |
---|---|---|---|---|---|
every |
Boolean | Yes | Yes | No | No |
some |
Boolean | Yes | Yes | No | No |
filter |
any | No | Yes | No | No |
find |
any | Yes | Yes | No | No |
findIndex |
Number | Yes | Yes | No | No |
flatMap |
Array | No | Yes | No | No |
forEach |
none | No | Yes | Yes | Yes |
map |
Array | No | Yes | No | No |
reduce |
any | No | Yes | No | No |
reduceRight |
any | No | Yes | No | No |
Metadata Collections
Metadata collections can be created for objects and iterated over.
For | Operation | Returns |
---|---|---|
Array/Map/Set | value.entries() |
Iterable |
Array/Map/Set | value.keys() |
Iterable |
Array/Map/Set | value.values() |
Iterable |
non-null | Object.entries(value) |
Array |
non-null | Object.keys(value) |
Array |
non-null | Object.values(value) |
Array |
non-null | Object.getOwnPropertyDescriptors(value) |
Object |
non-null | Object.getOwnPropertyNames(value) |
Array |
non-null | Object.getOwnPropertySymbols(value) |
Array |
Object | Reflect.ownKeys(object) |
Array |
Object Iteration Values
When iterating over an object, what values are used for that iteration.
Operation | String Keys | Symbol Keys | Own | Inherited | Non-enumerable |
---|---|---|---|---|---|
for...in |
Yes | No | Yes | Yes | No |
JSON.stringify |
Yes | No | Yes | No | No |
Object.entries |
Yes | No | Yes | No | No |
Object.keys |
Yes | No | Yes | No | No |
Object.values |
Yes | No | Yes | No | No |
Object.assign |
Yes | Yes | Yes | No | No |
Object.defineProperties |
Yes | Yes | Yes | No | No |
Object.getOwnPropertyDescriptors |
Yes | Yes | Yes | No | Yes |
Object.getOwnPropertyNames |
Yes | No | Yes | No | Yes |
Object.getOwnPropertySymbols |
No | Yes | Yes | No | Yes |
Reflect.ownKeys |
Yes | Yes | Yes | No | Yes |
Object Spread | Yes | Yes | Yes | No | No |
Creating Functions
Creating functions named name
(or anonymous).
Kind | Example | Name | Constructable |
---|---|---|---|
Function Declaration | function name () {} |
Explicit | Yes |
Default Function Declaration | export default function () {} |
Anonymous | Yes |
Async Function Declaration | async function name () {} |
Explicit | No |
Generator Function Declaration | function * name () {} |
Explicit | No |
Async Generator Function Declaration | async function * name () {} |
Explicit | No |
Function Expression | (function () {}) |
Anonymous | Yes |
Async Function Expression | (async function () {}) |
Anonymous | No |
Generator Function Expression | (function * () {}) |
Anonymous | No |
Async Generator Function Expression | (async function * () {}) |
Anonymous | No |
Named Function Expression | (function name () {}) |
Explicit | Yes |
Named Async Function Expression | (async function name () {}) |
Explicit | No |
Named Generator Function Expression | (function * name () {}) |
Explicit | No |
Named Async Generator Function Expression | (async function * name () {}) |
Explicit | No |
Arrow Function | () => {} |
Anonymous | No |
Async Arrow Function | async () => {} |
Anonymous | No |
Class Declaration | class name { constructor () {} } |
Explicit | Yes |
Class Expression | (class { constructor () {} }) |
Anonymous | Yes |
Named Class Expression | (class name { constructor () {} }) |
Explicit | Yes |
Class Method | class { name () {} } |
Explicit | No |
Async Class Method | class { async name () {} } |
Explicit | No |
Class Method Generator | class { * name () {} } |
Explicit | No |
Async Class Method Generator | class { async * name() {} } |
Explicit | No |
Class Getter | class { get name() {} } |
Explicit | No |
Class Setter | class { set name(value) {} } |
Explicit | No |
Object Method (Shorthand) | ({ name () {} }) |
Explicit | No |
Async Object Method (Shorthand) | ({ async name () {} }) |
Explicit | No |
Object Method Generator (Shorthand) | ({ * name () {} }) |
Explicit | No |
Async Object Method Generator (Shorthand) | ({ async * name() {} }) |
Explicit | No |
Object Getter | ({ get name() {} }) |
Explicit | No |
Object Setter | ({ set name(value) {} }) |
Explicit | No |
Function Constructor | new Function() , Function() |
Anonymous | Yes |
AsyncFunction Constructor | new AsyncFunction() , AsyncFunction() |
Anonymous | No |
GeneratorFunction Constructor | new GeneratorFunction() , GeneratorFunction() |
Anonymous | No |
AsyncGeneratorFunction Constructor | new AsyncGeneratorFunction() , AsyncGeneratorFunction() |
Anonymous | No |
Note: Any expression context will work for expression variations, not just the grouping (()
) used in the examples shown.
Note: The AsyncFunction
, GeneratorFunction
and AsyncGeneratorFunction
constructors are not globally accessible but can be obtained from existing instances/declarations.
Function Syntax
Square brackets ([]
) represent optional keywords or names whereas angle brackets (<>
) represents a required item. Not all combinations are compatible.
Kind | Syntax |
---|---|
Function Declaration or Expression | [async] function [*] [name] () {} |
Arrow Function | [async] () => {} |
Class Declaration or Expression | [@<decorator>] class [name] [extends <expression>] {} |
Class Method | class { [@<decorator>] [static] [async] [get] [set] [*] [#]<name> () {} } |
Object Method (Shorthand) | { [async] [get] [set] [*] <name> () {} } |
Calling Functions
Calling a function identified as name
.
Kind | Call |
---|---|
Call | name() |
Call | name.call() |
Call | name.apply() |
Template Literal Tag (Call) | name`` |
Construct | new name |
Construct | new name() |
Call | Refect.apply(name) |
Construct | Reflect.construct(name) |
Additional Ways to Make Calls
This lists more obscure ways of function calling which may require special function definitions.
Kind | Definition | Call |
---|---|---|
Getter | obj = { get name () {} } |
obj.name |
Setter | obj = { set name (value) {} } |
obj.name = null |
Thenable | obj = { then () {} } |
await obj |
Iterator | obj = { [Symbol.iterator] () {} } |
[...obj] |
Iterator | obj = { [Symbol.iterator] () {} } |
for (let i of obj); |
Asynchronous Iterator | obj = { [Symbol.asyncIterator] () {} } |
for await (let i of obj); |
To Primitive | obj = { toString () {} } |
Object[obj] |
To Primitive | obj = { valueOf () {} } |
+obj |
To Primitive | obj = { [Symbol.toPrimitive] () {} } |
+obj |
Has Instance | obj = { [Symbol.hasInstance] () {} } |
null instanceof obj |
To Primitive Precedence
Different methods get prioritization when converting objects to primitives. If present, a Symbol.toPrimitive
will always be used. If not, conversion will rely on toString()
and valueOf()
, using the other as a fallback if the first attempted fails to produce a primitive. Which is called first depends on the "hint" of the operation. This can have one of 3 values: "string", "number", or "default". "string" prefers toString()
while "number" and "default" prefer valueOf()
. If Symbol.toPrimitive
is available, the hint will be passed in as an argument.
Where value
is an ordinary object.
Operation | Primary | Hint | Secondary | Backup |
---|---|---|---|---|
'' == value |
Symbol.toPrimitive |
"default" | valueOf |
toString |
'' + value |
Symbol.toPrimitive |
"default" | valueOf |
toString |
new Date(value) |
Symbol.toPrimitive |
"default" | valueOf |
toString |
1 > value (or other relational operation) |
Symbol.toPrimitive |
"number" | valueOf |
toString |
1 * value (or other arithmetic operation) |
Symbol.toPrimitive |
"number" | valueOf |
toString |
1 ^ value (or other bitwise operation) |
Symbol.toPrimitive |
"number" | valueOf |
toString |
+value (or other unary operation) |
Symbol.toPrimitive |
"number" | valueOf |
toString |
Math.round(value) (or other Math operation) |
Symbol.toPrimitive |
"number" | valueOf |
toString |
Number(value) |
Symbol.toPrimitive |
"number" | valueOf |
toString |
BigInt(value) |
Symbol.toPrimitive |
"number" | valueOf |
toString |
`${value}` |
Symbol.toPrimitive |
"string" | toString |
valueOf |
String(value) |
Symbol.toPrimitive |
"string" | toString |
valueOf |
Symbol(value) |
Symbol.toPrimitive |
"string" | toString |
valueOf |
Object[value] |
Symbol.toPrimitive |
"string" | toString |
valueOf |
value in object |
Symbol.toPrimitive |
"string" | toString |
valueOf |
Use of Braces in Syntax
Use parentheses ()
for:
- grouping
- function parameter lists
- function calling
- if conditions
- while conditions
- for setup (for...in, for...of, for await...of)
- switch expressions
- with expression (deprecated)
- catch exception identifier
- super() call syntax
- dynamic import() syntax
Use square braces []
for:
Use curly braces {}
for:
- code blocks
- try catch blocks
- function bodies
- class bodies
- class static blocks
- object literals
- object destructuring
- string interpolation
- unicode
- named imports
- named exports
Each of these also have special meaning when used in regular expressions:
()
: assertions, groups[]
: character classes,{}
: character classes, quantifiers, unicode
ASI Considerations
There can be ambiguity between operations when starting a line with the following characters where ASI (Automatic Semicolon Insertion) will not insert a semicolon to terminate the previous line's expression.
Line Starts With | Semicolon Before | No Semicolon Before |
---|---|---|
[ |
Array literal | Array access |
( |
Grouping | Function call |
` |
Template literal | Tagged template literal |
+ |
Unary + |
Addition |
- |
Unary - |
Subtraction |
* |
Generator method | Multiplication (of preceding field initializer) |
/ |
RegExp literal | Division |
Deprecated
These were older lists entries that no longer apply.
Loops
Iteration Order
A specification-defined order known as [[OwnPropertyKeys]] is set for some operations. Other operations (like for...in
) do not have to follow this order and are implementation-dependent. [[OwnPropertyKeys]]
ordering uses:
- Integer keys between 0 and 2^53-1 (inclusive) in ascending order
- Other non-symbol keys in creation order
- Symbol keys in creation order
Operation | Ordering |
---|---|
for...in |
Not guaranteed |
JSON.stringify |
Not guaranteed |
JSON.parse |
Not guaranteed |
Object.entries |
Not guaranteed |
Object.keys |
Not guaranteed |
Object.values |
Not guaranteed |
Object.assign |
Well-defined |
Object.defineProperties |
Well-defined |
Object.getOwnPropertyDescriptors |
Well-defined |
Object.getOwnPropertyNames |
Well-defined |
Object.getOwnPropertySymbols |
Well-defined |
Reflect.ownKeys |
Well-defined |
Where well-defined refers to [[OwnPropertyKeys]]
ordering.
:put_litter_in_its_place: Deprecation: As of ES2020's for-in mechanics, iteration order is now well defined for the places where before it was not guaranteed.