JavaScript

JavaScript is a high-level, interpreted programming language that is central to modern web development. It was created to enable interactive effects within web browsers, but is now used across web applications, mobile apps, and even back-end server environments.

JavaScript can be written and executed in different contexts, both in-browser and server-side. Its versatility and dynamic nature make it powerful for building rich user interfaces and real-time features, but also present unique security challenges when handling user input, data exchange, and cross-origin operations.

Some of its main components are:

  • Variables and Data Types: Fundamental storage units and the types of data they hold, such as strings, numbers, objects, and arrays

  • Functions: Blocks of reusable code that encapsulate logic and can be invoked with various arguments

  • Objects: Collections of related data and functions (methods), central to JavaScript’s flexible, object-oriented design

  • Events: Mechanisms that allow scripts to respond dynamically to user actions and system triggers (like clicks, keypresses, or form submissions)

  • DOM Manipulation: The capability to dynamically read and modify the structure and content of web pages via the Document Object Model (DOM)

  • Asynchronous Programming: Techniques like callbacks, promises, and async/await that allow non-blocking operations, enabling a responsive user experience.

These and others will be explored in detail in the section.

Primitive Data Types

Data types define the kind of value a variable will hold. JavaScript has a set of well-defined built-in data types, which are immutable basic values. Here we find some examples:

"hello", 'hello' // string, for textual data
3, 3.14 // number, for integers and floating-point
123456789012345678990n // bigint, for arbitrarily large integers
true, false // boolean, for logical values
undefined // Indicates a variable has been declared but not assigned a value
Symbol('id') // Symbol, for unique, collision-free identifiers 
null // Represents an empty value

Variables

Variables in JavaScript are containers used to store data values that can be referenced and manipulated in the code. They allow giving a name to a value to use it later, change it, or pass it to functions.

A variable gets declared (created) using the keywords var, let, or const. The difference between them is the scope in which they can be used and their mutability properties. In JavaScript, variables are dynamic, so they can hold any type of value, no matter what value they had before.

Variable names are case sensitive, can include letters, numbers, and the _ or $ characters, but can't start with a number or have the same name as keywords. To assign a value to a variable, the = character is used.

Here we find some examples:

var _age = 25; // Function-scoped, can be re-declared, initialized as undefined
const str1 = "Alice"; // This variable can´t be changed, and must be assigned a value in the declaration
let $active = true; // Block-scoped, can be re-declared in the same scope. It's not initialized and using it before assignment gives an error

let hi = 1213312n;               // Can hold any data type
let hi = {id: 1, name: "Sara"};  // Even objects
let hi = function() {};          // Or functions

Comments

The comments are notes in the code that are used for communication purposes and will not be considered in the execution.

There are two types of code comments in JavaScript:

  • A single-line comment, denoted with // preceding it

//At the beginning of the line to comment the whole line
let a = "hello" // After a code part to comment the rest of the line

  • A multi-line comment, denoted with /* to begin the comment and */ to end it

"Hello" 
/* This is a multiline
comment and will not execute
anything inside it */
"Bye"
"hello" /* Can also be used in the middle of a code line */ "bye"

Console

The console is a panel that displays/prints messages. It is a built-in tool present in web browsers and development environments that allows developers to view messages, errors, and warnings produced by JavaScript code running.

It also allows interaction directly with a web page’s JavaScript environment by typing commands, inspecting variables, and running code snippets in real time.

It is also considered an object with which we can interact. Here we find some examples:

console.log('Hello, World!');
console.log(2 * 2); // Prints operation result
console.error("This is an error message"); // Prints an error message
console.warn("This is a warning message"); // Prints a warning message
console.log([1,2,3]); // Can print objects
pi = 3.1416
console.log(pi); // And variables

Operators

The are various types of operators in JavaScript that let us manipulate values, make operations, access properties, check conditions, and even concatenate various types of them.

  • The arithmetic operators allow us to do mathematical calculations on numbers and manipulate string values

3 + 4 // Addition, result is 7
5 - 1 // Subtraction, result is 4
4 * 2 // Multiplication, result is 8
5 / 2 // Division, result is 2.5
9 % 5 // Modulo, the division remainder, result is 4
2 ** 4 //Exponentiation, raises a value to the power of another, the result is 16
'he' + 'llo' // Concatenation, result is 'hello'

let a = 1; let b = 5;
a + b // Also works with variables, result is 6
b - 2 // And between variables and values, the result is 3
`My number is ${a}` // We can interpolate variables in strings using template literals, the result is 'My number is 1'

  • We also have special assignment operators that directly set a value after an operation

a += 3; // Add and then assign, is the same as a = a+3
a++; // Same as a = a+1, use the value and then increase by 1
++a; // Another way for a = a+1, increase by 1 and then use the value, prefix
a -= 3; // Substract and then assign, is the same as a = a-3
a--; // Same as a = a-1, use the value and then decrease by 1
--a; // Another way for a = a-1, decrease by 1 and then use the value, postfix
a *= 1; // Multiply and then assign, is the same as a = a*2
a /= 2; // Divide and then assign, is the same as a = a/2
a %= 2; // Modulo and then assign, is the same as a = a%2
a **= 2; // Raises  and then assign, is the same as a = a**2

  • We also have comparison operators that let us perform logical checks between two values, and even concatenate various expressions

x == y 	// Equal to, true if values are equal
x != y	// Not equal, true if values are not equal
x === y	// Strict equal to, true if values and type are equal
x !== y	// Strict not equal to, true if values or type are not equal
x > y	// Greater than, true if x is greater than y
x < y	// Less than, true if x is less than y
x <= y	// Greater than or equal to, true if x is greater than or equal to y
x >= y	// Less than or equal to, true if x is greater than or equal to y
expression1 && expression2 // True if the result of both expressions is true
expression1 || expression2 // True if the result of any of the expressions is true
!expression    // True if the result is false and vice versa

  • We also have a ternary operator that lets us establish logic when an expression is true and another when it's false

expression ? valueIfTrue : valueIfFalse

  • We also have a typeof operator that lets us know the data type of a variable

const str = 'hello';
console.log(typeof str); // This prints string

PreviousFundamentalsNextConditional Statements

Last updated