Explaining the Fundamentals of JavaScript

In programming, efficiently storing and manipulating data is crucial for creating useful and efficient applications. JavaScript is a powerful and versatile web development language that provides multiple ways to declare variables and manipulate different types of data. Understanding these basic concepts is essential for anyone who wants to master JavaScript and create dynamic, interactive web applications.

In JavaScript, variables are used to store and manipulate data.

To declare a variable, you can use one of three keywords: "var", "let", and "const". Each keyword has its own properties in terms of scope and variability.

You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.

A JavaScript identifier usually starts with a letter, underscore (_), or dollar sign ($). Subsequent characters can also be digits (0 – 9). Because JavaScript is case sensitive, letters include the characters A through Z (uppercase) as well as a through z (lowercase).

Let's go into the details of each keyword used to declare a variable.

1
var text1 = 'Hello, World!';

1
let username = 'David';

1
const PI = 3.14159;

In summary, use "let" when declaring a variable whose value should change over time, and "const" when declaring a variable whose value should not change. Avoid using var in modern JavaScript code to avoid potential problems with scope and hoisting.

Comments in JavaScript are used to improve the readability of code by explaining what certain parts of the code are doing, without these comments being interpreted or executed by the JavaScript engine. This can be particularly helpful when reviewing code at a later date or when working as part of a team.

There are two types of comments in JavaScript:

1. Single-line comments: These are used for brief explanations or annotations. They start with two forward slashes //. Anything to the right of // on the same line is considered a comment.

   Refer to the following code snippet.

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12
   // This is a single-line comment
   let x = 5; // Declare a variable x and assign the value 5 to it

2. Multi-line comments: These comments span multiple lines and are used for longer descriptions. They start with a forward slash and an asterisk /*, and end with an asterisk and a forward slash */. Anything in between is considered a comment.

   Refer to the following code snippet.

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12345
   /* This is a multi-line comment
   You can write as many lines as you want
   Here we declare a variable y and assign the value 10 to it
   */
   let y = 10; 

Remember that the main purpose of comments is to explain the code and make it easier to understand. However, the best code is self-explanatory and requires minimal comments.

JavaScript provides various data types to store and represent different types of values in programs. Understanding these data types is essential for effective programming.

Here's a list of the most commonly used data types in JavaScript:

12
let text1 = 'Hello';
let text2 = "World";

12
let num1 = 42; 
let num2 = 3.14;

12
let bol1 = true; 
let bol2 = false;

12345678
let person = {
name: 'John',
age: 36,
address: {
street: 'Dietmar Hopp Alle ',
city: 'Walldorf'
}
};

12
let colors = ['green', 'red', 'blue'];
let mix = [36, 'hello', true, { name: 'John' }];

1
let myVar; // myVar is undefined

1
let var1 = null;

In JavaScript, the data type of a variable is determined automatically based on the value you assign to it. JavaScript is a dynamically typed language, which means that you don't need to explicitly specify the data type of a variable when declaring it. Instead, the interpreter infers the data type based on the value you provide.

Type coercion refers to the automatic or implicit conversion of a value from one data type to another. JavaScript is a dynamically typed language that performs type conversions on demand, usually when working with different data types. This can sometimes lead to unexpected results, so it is important to understand how type casting works.

Here are some common type coercion scenarios and their outcomes:

12345678910
let result;


result = '5' + 3; // '53' (string)
result = '5' - 3; // 2 (number)
result = '5' * '3'; // 15 (number)
result = '10' / '2'; // 5 (number)
result = true + 1; // 2 (number)
result = false + 1; // 1 (number)
result = 'hello' * 3; // NaN (Not a Number)

As shown in the examples, type coercion can be unpredictable, and it's essential to be aware of the data types you are working with to avoid potential issues.

To check the data type of a variable, you can use the 'typeof' operator. The 'typeof' operator returns a string representing the data type of the given value.

Refer to the following code snippet.

1234567
console.log(typeof 'Hello'); // 'string'
console.log(typeof 42); // 'number'
console.log(typeof true); // 'boolean'
console.log(typeof { name: 'John' }); // 'object'
console.log(typeof [1, 2, 3]); // 'object' (arrays are considered objects)
console.log(typeof undefined); // 'undefined'
console.log(typeof null); // 'object' (this is a known quirk in JavaScript)

JavaScript provides two comparison operators for checking the equality of two values: '==' (loose equality) and '===' (strict equality). The '==' operator compares values for equality, allowing type coercion. On the other hand, the '===' operator compares both values and data types, requiring an exact match for the comparison to be true.

Refer to the following code snippet.

123456
console.log(5 == '5'); // true (loose equality allows type coercion)
console.log(5 === '5'); // false (strict equality requires both value and data type to match)


console.log(null == undefined); // true (type coercion)
console.log(null === undefined); // false (strict equality)

It is generally recommended to use the === (strict equality) operator to avoid unexpected results due to type coercion when comparing values. Understanding type conversion and type checking is critical to using JavaScript effectively. Knowing the data types you are working with and using the appropriate comparison operators can help you avoid potential problems and errors in your code.

Operators are symbols that perform specific operations on operands (values or variables). An expression is a combination of values, variables, and operators that evaluate to a single value. There are several types of operators in JavaScript that you can use to perform different types of operations, such as arithmetic, comparison, logical, and assignment.

These operators allow you to execute calculations and manipulate numbers in your code.

Here's a list of arithmetic operators:

• Addition (+)

  Adds two numbers together.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  let var1 = 2 + 4; // Result 6

• Subtraction (-)

  Subtracts the right-hand operand from the left-hand operand.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  let var2= 10 - 3; //  Result: 7 

• Multiplication (*)

  Multiplies two numbers together.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  let var3 = 3 * 3; // Result 9

• Division (/)

  Divides the left-hand operand by the right-hand operand.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  let var4 = 100 / 2; // Result 50

• Modulus (%)

  Returns the remainder of the division between the left-hand operand and the right-hand operand.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  let remainder = 11 % 4; // Result 3

• Exponentiation (**)

  Raises the left-hand operand to the power of the right-hand operand.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  let power = 3 ** 4; // Result 81

• Increment (++)

  Increases a numeric value by 1. Can be used in both prefix and postfix forms.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  123
  let counter = 5; 
  counter++; // Result 6  
  ++counter; // Result 7 

• Decrement (--)

  Decreases a numeric value by 1. Can be used in both prefix and postfix forms.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  123
  let counter = 5;
  counter--; // Result 4
  --counter; //  Result 3

Comparison operators in JavaScript are used to compare two values and return a boolean result (true or false). These operators allow you to make decisions and control the flow of your code based on the comparison results.

Here's a list of comparison operators:

• Loose equality (==)

  Compares two values for equality, allowing type coercion. Returns true if the values are equal after type coercion.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  console.log(5 == '5'); // true

• Strict equality (===)

  Compares two values for equality, requiring both value and data type to match. Returns true if the values are equal and have the same data type.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  console.log(5 === '5'); // false

• Loose inequality (!=)

  Compares two values for inequality, allowing type coercion. Returns true if the values are not equal after type coercion.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  console.log(5 != '5'); // false

• Strict inequality (!==)

  Compares two values for inequality, requiring both value and data type to match. Returns true if the values are not equal or have different data types.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  console.log(5 !== '5'); // true

• Less than (<)

  Returns true if the left-hand operand is less than the right-hand operand.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  console.log(3 < 5); // true

• Greater than (>)

  Returns true if the left-hand operand is greater than the right-hand operand.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  console.log(7 > 4); // true

• Less than or equal to (<=)

  Returns true if the left-hand operand is less than or equal to the right-hand operand.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  console.log(3 <= 3); // true

• Greater than or equal to (>=)

  Returns true if the left-hand operand is greater than or equal to the right-hand operand.

  Refer to the following code snippet.

  Code Snippet

  Copy code

  Copy code

  Switch to dark mode

  Switch to dark mode

  1
  console.log(7 >= 7); // true

Control structures in JavaScript determine the flow of program code execution. They are used to perform various actions based on various conditions. The main types of control structures in JavaScript include conditional statements and loop statements.

Conditional statements are used in JavaScript to perform different actions based on different conditions. They allow the flow of your program to change depending on the circumstances.

123
if (condition) {
// code to be executed if condition is true
}

123456
let age = 18;


if (age >= 18) {
console.log("You are an adult.");
}

12345
if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}

12345678
let age = 17;


if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}

1234567
if (condition1) {
// code to be executed if condition1 is true
} else if (condition2) {
// code to be executed if condition2 is true
} else {
// code to be executed if both condition1 and condition2 are false
}

12345678910
let age = 17;


if (age >= 18) {
console.log("You are an adult.");
} else if (age == 16 || age == 17) {
console.log("You are almost an adult.");
} else {
console.log("You are a minor.");
}

12345678910
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

12345678910111213
let fruit = "Apple";


switch(fruit) {
case "Banana":
console.log("Bananas are yellow.");
break;
case "Apple":
console.log("Apples are red.");
break;
default:
console.log("I don't know that fruit.");
}

These conditional statements are the core of controlling the flow of a program in JavaScript.

Looping statements, or loops, are used to repeatedly execute a block of code as long as a specified condition is true. They are essential for handling repetitive tasks in your code.

In JavaScript, there are three main types of loops:

123
for (let i = 0; i < 5; i++) {
// code block to be executed
}

123
while (condition) {
// code block to be executed
}

12345
let i = 0;
while (i < 5) {
console.log(i); // This will log numbers 0 through 4.
i++;
}

1234
do {
// code block to be executed
}
while (condition);

12345
let i = 0;
do {
console.log(i); // This will log numbers 0 through 4.
i++;
} while (i < 5);

Loops are a fundamental part of programming in JavaScript as they allow you to efficiently perform tasks multiple times without having to write the same code repeatedly.

In JavaScript, an object is a non-primitive data type that lets you store multiple values as a complex data structure. An object in JavaScript can be thought of as a collection of properties, each of which is a key-value pair. Keys (or property names) are always strings or symbols, and values can be of any data type, including other objects.

Object literals: Use curly braces {} to create an object with properties and methods. This is the most common way to create objects.

Here's an example of how to create an object in JavaScript.

1234567891011
let person = {
firstName: "John",
lastName: "Doe",
age: 36,
hobbies: ["Downhill", "Skateboarding", "hiking"],
address: {
street: "Dietmar-Hopp-Alle",
city: "Walldorf",
country: "Germany"
}
};

In this example, person is an object with properties firstName, lastName, age, hobbies, and address. The hobbies property is an array, and the address property is another object.

123
console.log(person.firstName); // Outputs: "John"
console.log(person['lastName']); // Outputs: "Doe"
console.log(person.address.city); // Outputs: "Walldorf"

12
person.age = 31; // Changes the age to 31
person.address.country = "Canada"; // Changes the country to "Canada"

1
person.email = "john.doe@sap.com"; // Adds a new "email" property

Objects in JavaScript are very versatile and are used to model real-world objects, manage and manipulate data, create data structures, and build the foundation of JavaScript-oriented programming.