WinehouseLabs

Here we cover the basic syntax that are used to write JavaScript code. In programming, syntax is the set of rules that defines how code must be written for a computer to understand it. If a code does not follow these set of rules then this can result in bugs in the code—meaning the code not working as expected or not working at all.

Comments

A comment in coding is a piece of text included in the code that is ignored by the compiler or interpreter. This means when the code is being executed to perform whatever task it was written for, the parts of the code that are comments are ignored.

Comments are used to provide explanations, notes, or reminders for the developer and others reading the code, making it easier to understand. Comments help document the code without affecting its execution.

// a one line comment

/* this is a longer,
 * multi-line comment
 */

Declaration and Initialization

Declaration: This is the process of creating a variable and specifying its name, but without assigning it a value. It simply tells the program that a variable exists. Example:

let x; // Declaration of x

Initialization: This is the process of assigning an initial value to a declared variable. Assigning a value to a variable often happens immediately a variable is declared. Example:

let x = 10; // Declaration and initialization

In short:

Declaration: Creating the variable but not assigning any value to it.
Initialization: Assigning a value to the variable immediately it is created.

Re-assign and re-declare

Re-assign means changing the value of an already declared variable. It is allowed with let and var, but not with const. Example:

let x = 10;
x = 20; // Re-assigning the value of x
console.log(x); // 20

Re-declare means declaring a variable again (like creating it anew) within the same scope. It is allowed with var but not with let or const in the same scope.

Example with var

var z = 50;
var z = 60; // Re-declaring z with var
console.log(z); // 60

Example with let or const

let a = 10;
let a = 20; // Error: Cannot redeclare block-scoped variable 'a'

const b = 30;
const b = 40; // Error: Cannot redeclare block-scoped variable 'b'

Key Differences:

Re-assignment changes the value of an existing variable.
Re-declaration declares a variable again (creates it again) in the same scope, which is allowed only with var

Variables

A variable in coding is a symbolic name associated with a value or data that can change during the execution of a program. The variable acts as a storage location where data can be stored, modified, and retrieved.

JavaScript has three kinds of variable declarations: var, let, and const

var: the var variable is the oldest variable declaration type among the 3. It can be function or globally-scoped depending on where it is declared. One of its most problematic behaviours is hoisting — var declarations are hoisted to the top of their scope and automatically initialised with undefined, meaning a var variable can be accessed before its declaration in the code without throwing an error, it just returns undefined silently. This makes bugs hard to track down. The var variable can also be redeclared and updated within the same scope. Due to the many errors it is prone to, it is not advisable to use var, which led to the creation of let and const.
let: the let variable is a block-scoped variable. This means any variable declared with let is only accessible within the block ({ … }) it was created. The let variable can also be globally-scoped if it is created outside any block. This makes it less prone to errors and more predictable than var. Like var, let is also hoisted — but unlike var, it is not initialised. Accessing a let variable before its declaration throws a ReferenceError, which makes the bug immediately visible rather than silently returning undefined. Any variable created with let can be updated by assigning a new value to it but it cannot be re-declared.
const: the const variable is used when a variable must not be reassigned. It is used to create variables whose values must remain constant and not change after being created. What this means is that unlike var and let, the const variable cannot be reassigned after creation. It should be noted though that objects and arrays created with const can have their contents modified — only the binding itself is locked, not the data inside.

Scope

Scope in programming simply means where a variable is allowed to exist and be used. If while writing a specific line of code you can access a variable then this means it is in your scope. If not then it is outside your scope. The reason for its existence is to prevent clashes of variable names and accidental changes or usage of variables that were not intended to be touched or used.

There are 3 main types of scope; global scope, function scope, and block scope.

Global scope: when a variable has a global scope this means it is accessible throughout the codebase. Variables like these are not restricted to a certain block of code like a function or logic, and can be used anytime anywhere during programming.
Function scope: variables that are function scoped are restricted to the functions that they were created in. These types of variables cannot be used outside the function they were declared in.
Block scope: variables that are block scoped are restricted to the block they were created in. A block is any pair of curly braces { } — this includes if statements, for loops, while loops, and even standalone { } blocks. Any let or const variable declared inside a block is inaccessible outside of it.

Data types and data structures

Data types: in programming there are different types of data that can be used to perform tasks when paired with other programming features. The nature of these data are what is called "data types", and the nature of a data determines what actions can be performed with the data. Examples are string, number, boolean, null, undefined, object.
Data structures: data structures are ways of organizing and storing the aforementioned data efficiently to allow for operations like accessing, insertion, and manipulation on the group of data. Examples are arrays, set, map, and so on.

Immutable & Mutable

Data types and data structures in JavaScript fall into either of 2 categories; immutable or mutable. Whether a data type or data structure is immutable or mutable is based on whether that data type or data structure can be changed after it was originally created.

Data types that are immutable (meaning cannot be changed after creation) are called primitive data types. Examples are number, string, boolean, null, undefined, symbol, bigint. Any modification to these data types will result in a new value entirely.

Data structures, on the other hand, are mutable because their contents can be modified, expanded, or reduced after being created. This is because data structures store collections of values (or data types) rather than a single primitive. Examples are object, array, function.

Types of Data Types

It is worth noting that the list below reflects what JavaScript's typeof operator returns for each value. typeof is how JavaScript itself categorises data at runtime, which is why object and function appear here as well as in the data structures section — they are both a type (as far as typeof is concerned) and a way of organising data.

number: this data type is used to represent integers or floating-point numbers e.g. let age = 25
string: represent text e.g. let name = "WinehouseLabs"
boolean: represents true or false e.g. let hasPaid = false;
undefined: a variable that has been declared but not assigned a value e.g. let score;
null: represents an intentional absence of a value e.g. let selectedUser = null;
symbol: represents a unique and immutable identifier e.g. let id = Symbol("userId");
bigint: represents integers larger than what number can safely handle e.g. let largeNumber = 9007199254740991n;
object: represents a collection of key-value pairs e.g.
```
let user = {
  name: "Wariz",
  age: 20
};
```
function: a callable object that runs code e.g.
```
function greet() {
  return "Hello!";
}
```

Types of Data Structures

Array: An ordered list of values e.g. let numbers = [1, 2, 3, 4];

Object: A collection of key–value pairs

let user = {
  name: "Wariz",
  age: 20
};

While arrays and objects are the most used data structures, there are other structures like map, set, WeakMap, WeakSet, Date, and Typed arrays.

Operators

Operators are symbols or keywords in programming used to perform operations on data types. They are essential for computations, comparisons, and logic in code.

Examples of Operators in JavaScript:

Arithmetic Operators: Perform mathematical operations.
- + (Addition): 5 + 3 // Output: 8
- - (Subtraction): 5 - 3 // Output: 2
- * (Multiplication): 5 * 3 // Output: 15
- / (Division): 10 / 2 // Output: 5
- % (Remainder): 10 % 3 // Output: 1
Comparison Operators: Compare two values and return a Boolean (true/false).
- === (Strict Equality): 5 === 5 // true — compares both value and type. This is the preferred form.
- !== (Strict Inequality): 5 !== 3 // true
- < (Less than): 3 < 5 // true
- > (Greater than): 5 > 3 // true
- == (Loose Equality): 5 == "5" // true — compares value only, performing type coercion. This can produce unexpected results and should generally be avoided in favour of ===.
- != (Loose Inequality): 5 != "3" // true — the loose counterpart to !==. Same caution applies.
Logical Operators: Combine or invert Boolean values.
- && (AND): true && false // Output: false
- || (OR): true || false // Output: true
- ! (NOT): !true // Output: false
Assignment Operators: Assign values to variables.
- = (Assign): let x = 10;
- += (Add and assign): x += 5; // x = 15
String Operators: Work with text.
- + (Concatenation): "Hello" + " " + "World!" // Output: "Hello World!"
Unary Operators: Operate on a single operand.
- typeof: typeof(42) // Output: "number"
- (Negation): -10 // Output: -10

JavaScript Basics