The JS Basics
When I started to learn JavaScript I used to look up with the basics and core of the language.
I wanted to create a simple way to maximize my time.
I included the statements and explanation of the syntaxes. This could be a help for the future review.
The Seven (7) Types
Primitive Types | Execution |
---|---|
Strings | "This is a string." |
Numbers | 123 |
Boolean | true or false |
Null | null |
undefined | undefined |
Symbol | Symbol('something') |
Object | { key: 'value' } |
Array | [1, "text", false] |
Function | function functionName(){ } |
NOTE: Arrays and functions are considered special types of objects.
Basic Vocabulary
let foo = 7 + "2";
var, let, const
- Keyword / Reserved word
Any
word that
is part of the vocabulary of the programming language is called a keyword.
foo
- Variable
A named reference to a value
is a variable.
= + - * in === typeof !=
- Operator
Operators
are
reserved-words
that perform action on values and variables Example:
7, "2"
- Expressions
A reference, value or
a group of reference(s) and value(s) combined with operator(s) which result in a single value.
let foo = 7 + "2";
- Statement
A group of
words, numbers and operators that do a task is a statement.
Object
An Object is a data type in JavaScript that is used to store a combination of data in a simple key-value pair.
let user = {
name: "John Doe",
age: 22,
gender: "Male",
isMarried: false,
hobbies: ["reading","gaming"],
address: {
street: "123 Main St",
city: "New York",
state: "NY"
},
calculateAge: function() {
return 2023 - this.age;
},
}
name, age, gender, isMarried ...
- Key
These
are the keys in user in Object.
"John Doe", 22, male, false ...
- Value
These
are the values of the respective keys in user object.
function() {}
- Method
If a key has a function as a value, it's called a method.
Function
A function is simply a bunch of code bundled in a section. This bunch of code ONLY runs when the function
is called. Functions allows for organizing code into sections and code reusability.
Using a function has ONLY two parts.
(1) Declaring / Defining a function and
(2) Using / running a function.
// Function Declaration / Function Statement
function someName(param1, param2) {
// bunch of code as needed...
let foo = param1 + "love" + param2;
return foo;
}
// Invoke (run / call) a function
someName("Me", "You");
someName
- Name of Function
A function should be descriptive of what it does.
param1, param2
- Parameters / Arguments
A function can optionally take parameters (arguments). The function can then use this information within
the code.
return
- Return
A function can optionally spit-out or "return" a value once its invoked. Once a function returns, no
further lines of code within the function run.
function someName(param1, param2) { ... }
- Code
Block
Any code within the curly braces {...} is called a "block of code", "code block" or simply "block". This
concept is not just limited to functions. "If statements", "for loops", and other statements use code
blocks as well.
someName("Me", "You")
- Invoke a function
Invoking, calling or running a function all mean the same thing. When we write the function name, in the
case someName, followed by the brackets symbol () like this someName(), the code inside the function
gets executed.
("Me", "You")
- Passing Parameters to a function
When we invoke a function, we can pass in values to the function. These values are called parameters or
Vocabulary around Variables & Scope
Scope
The limits where the variable exists.
Global Scope
The outer most scope called the Global scope.
Functional Scope
Any variables inside a function is in a scope of the function.
Lexical Environment (Lexical Scope)
The physical location (scope) where a variable or function is declared is its lexical environment
(lexical scope).
RULE:
(1) Variables in the outer scope can be accessed in a nested scope; But variables inside a nested
scope CANNOT be accessed by the outer scope. (Private variables)
(2) Variables are picked up from the lexical environment.
let a;
- Variable Declaration
Declaring a variable means creating a variable.
a = 12
- Variable Initialization
An initial value is assigned to the variable.
a = "me"
- Variable Assignment
Assigning a value to a variable that has already been declared.
console.log(a); var a = "me"
- Hoisting
Variables are declared at the top of the function automatically, and initialized at the same time
they run.
Uncaught ReferenceError: a is not defined.
Scope Chain
The nested hierarchy of scope is called the scope chain. The JS Engine looks for a variable in the
scope chain upwards (it is ancestors, until found).
let a = "global";
function first() {
let a = "fresh";
function second() {
console.log(a); // fresh
}
second();
}
first();
- JavaScript uses the scope chain to resolve variables from inner to outer scopes.
second()
is defined insidefirst()
, so ist closes over the variables infirst()
scope.- When
second()
access a, it finds "fresh" infirst()
and stops searching - it does not access the global a. - Therefore, if
second()
is called, it will log "fresh".
Operators
Operators are reserved-words that perform action on values and variables.
Arithmetic | Assignment | Logical | Equality |
---|---|---|---|
+ add |
= Assign Value |
|| OR |
=== Equality |
- Subtraction |
+= Add then Assign |
&& AND |
== Equality with coercion |
* Multiply |
-= Subtract then Assign |
||
/ Divide |
*= Multiply then Assign |
||
% remainder |
|||
** Exponential |
Conversion | Relational / Comparison | Increment / Decrement |
---|---|---|
+ Convert to a number |
>= Greater than equal to |
++ Postfix increment -- Postfix decrement |
- Convert to number then negate it |
<= Greater than equal to |
++ Prefix increment -- Prefix decrement |
! Convert to boolean then inverse it |
!= Not equal after coercion |
|
!== Not equal |
Operator | Uses |
---|---|
typeof |
Returns the type of a variable (e.g., typeof "hello" → "string") |
instanceof |
Checks if an object is an instance of a constructor (e.g., x instanceof Array) |
() |
Grouping operator or used to invoke functions (e.g., sum()) |
... (spread) |
Spread (or rest) operator: spreads elements or collects rest args (e.g., [...arr], function(...args)) |
. |
Property access (e.g., obj.name) |
[ ] |
Bracket notation for property access (e.g., obj["name"]) |
new |
Creates an instance of an object (e.g., new Date()) |
delete |
Deletes a property from an object (e.g., delete obj.key) |
?.. : .. (ternary) |
Ternary conditional operator (e.g., condition ? value1 : value2) |
Operators Precedence
Given Multiple operators are used in an expression, the
'Operator Precedence' determines which operators will be executed first. The higher the precedence, the
earlier it will get executed.
E.G. 8 * 4 + 2 -> The first operator to be executed is * (multiplication) and then + (addition).
Operators Associativity
Given Multiple operators have the same
precedence,"associativity" determines in which direction the code will be parsed.