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 inside first(), so ist closes over the variables in first() scope.
  • When second() access a, it finds "fresh" in first() 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.