Introduction
Welcome to our JavaScript tutorial series! In this series, we'll take you from a beginner level to a master level in JavaScript. This series is designed for people to want to learn JavaScript from scratch, or for people who want to refresh their knowledge of JavaScript. We'll cover everything from the basics of JavaScript to advanced.
You can find all the source code for each section on our GitHub repository. Check it out here.
Getting Started
If you're new to JavaScript, don't worry! We'll start with the basics and work our way up. We'll cover topics like variables, data types, and functions.
Intermediate Topics
Once you've got the basics down, we'll move on to more intermediate topics like arrays, objects, and loops. We'll also cover some common programming patterns and best practices.
Advanced Topics
Finally, we'll dive into some advanced topics like closures, prototypes, callbacks , and asynchronous programming. We'll also cover some of the latest features in JavaScript, like ES6.
By the end of this series, you'll have a deep understanding of JavaScript and be able to build complex applications with ease.
Section 1: Variables and Data Types
In this section, we'll cover the basics of JavaScript, including variables, and data types We'll also cover some common programming patterns and best practices.
Variables
Variables are used to store data in computer programs. In JavaScript, variables are declared using the var, let, or const keywords, followed by the variable name.
Here's an example of declaring a variable in JavaScript:
// Variable Examples
var name = "Clifford"; // Declared using the var keyword
let age = 25; // Declared using the let keyword
const isAdult = true; // Declared using the const keyword
In this example, we declare three variables: name, age, and isAdult. The name variable is declared using the var keyword, while the age and isAdult variables are declared using the let and const keywords, respectively. var and let are used to declare variables that can be reassigned, while const is used to declare variables that cannot be reassigned.
let and const were introduced in ES6, while var has been around since the beginning of JavaScript.
Data Types
JavaScript has several built-in data types, including strings, numbers, booleans, null, undefined, symbols, objects, and arrays.
Strings are sequences of characters, numbers are integers and floating-point numbers, and booleans can be either true or false. Null represents nothing, while undefined represents an uninitialized variable. Symbols are unique and immutable data types, and objectsare collections of key-value pairs. Arrays are ordered collections of values.
JavaScript has several built-in data types, including:
| Data Type | Description | Example |
|---|---|---|
| Strings | Sequences of characters | "Hello, world!" |
| Numbers | Integers and floating-point numbers | 42, 3.14 |
| BigInt | Integers with arbitrary precision | 900719925124740999n |
| Booleans | Values that can be either true or false | true, false |
| Null | A value representing nothing | null |
| Undefined | A value representing an uninitialized variable | undefined |
| Symbol | Unique and immutable data types | let sym = Symbol('description') |
| Objects | Collections of key-value pairs | { name: "John", age: 30 } |
| Arrays | Ordered collections of values | [1, 2, 3, "four", "JavaScript"] |
In JavaScript, all data types except for Objects and Arrays are primitive data types.
JavaScript Strings
In JavaScript, strings are used to store text and are surrounded by quotes. There are three types of quotes you can use:
- Single quotes: 'Hello'
- Double quotes: "Hello"
- Backticks:
{}
For example:
// String Examples
const singleQuotes = "Hello, this is a single quote in JavaScript";
const doubleQuotes = "Hello, this is a double quote in JavaScript";
const name = "Clifford";
const backticks = `Hello, ${name}. This is a backtick in JavaScript`;
Single quotes and double quotes are practically the same, and you can use either of them. Backticks are generally used when you need to include variables or expressions into a string.
Backticks are used to create template literals in JavaScript. They allow you to embed expressions inside string literals, making it easier to create dynamic strings.
Here's an example of using a ternary operator inside a template literal:
const age = 25;
const message = `You are ${age >= 18 ? "an adult" : "a minor"}.`;
console.log(message); // Output: "You are an adult."
In this example, the ternary operator is used to check if the age variable is greater than or equal to 18. If it is, the string "an adult" is returned. Otherwise, the string "a minor" is returned. The resulting string is then assigned to the message variable and logged to the console.
JavaScript Numbers
In JavaScript, numbers can be integers or floating-point numbers (decimals and exponential). Here are some examples:
// Number Examples
const number1 = 2;
const number2 = 2.433;
const number3 = 3e5; // 3 * 10^5
In addition to regular numbers, JavaScript has three special number values:
- Infinity: Represents positive infinity, which is a value greater than any other number.
const result1 = 1 / 0;
console.log(result1); // Output: Infinity
- -Infinity: Represents negative infinity, which is a value less than any other number.
const result2 = -1 / 0;
console.log(result2); // Output: -Infinity
- NaN (Not a Number): Represents a value that is not a legal number.
const result1 = "hello" / 5;
console.log(result1); // Output: NaN
It's important to note that arithmetic operations with these special number values can sometimes produce unexpected results. For example, NaN is contagious, meaning that if you perform any operation with NaN, the result will also be NaN. Additionally, dividing a non-zero number by Infinity will result in zero, and dividing zero by Infinity will result in NaN. Therefore, it's important to handle these special values with care in your JavaScript code.
JavaScript BigInt
In JavaScript, BigInt is a built-in numeric data type that allows you to work with very large integers that are too big to be represented by the regular Number type. BigInt values are represented with the n suffix, like this: 12345678901234567890n.
Here's an example of using BigInt to perform arithmetic with large integers:
const a = 12345678901234567890n;
const b = 98765432109876543210n;
const c = a + b;
console.log(c); // Outputs "111111111111111111100n"
In this example, we're adding two BigInt values together to get a third BigInt value. Note that the result is also a BigInt, and it has the n suffix to indicate that it is a BigInt value.
One thing to keep in mind when working with BigInt is that you cannot mix BigInt and regular Number values in arithmetic operations. For example, this code will not work as expected:
const a = 12345678901234567890n;
const b = 123;
const c = a + b; // This will result in an error!
In this example, we're trying to add a BigInt value and a regular Number value together. This will result in an error, because BigInt and Number cannot be mixed in arithmetic operations.
To avoid this error, you should always use BigInt values throughout your arithmetic operations if you need to work with very large numbers.
It's worth noting that BigInt is a relatively new addition to JavaScript (as of ES2020), and it may not be supported in all web browsers or environments. Be sure to check the compatibility of BigInt before using it in your project.
JavaScript Boolean
In JavaScript, Boolean is a data type that represents a logical value, either true or false. Boolean values are used in programming to make decisions based on whether a certain condition is true or false.
You can create Boolean values using the keywords true and false, like this:
const isTrue = true;
const isFalse = false;
You can also use comparison operators to create Boolean values, like this:
let age = 50;
let isAdult = age >= 18; // This will evaluate to true because 50 is greater than or equal to 18
In addition, many JavaScript functions return Boolean values. For example, the Array.includes() method returns true if an array includes a certain value, and false otherwise Don worry about and array for now, we'll cover that later. Here's an example:
let myArray = [1, 2, 3, 4];
let includesTwo = myArray.includes(2); // This will evaluate to true
let includesFive = myArray.includes(5); // This will evaluate to false
I hope your learning is going well! if your confused about anything, don't worry about it. Everything will make sense as you continue to learn.
JavaScript Null
In JavaScript, null is a value that represents the intentional absence of any object value. It is often used to indicate that a variable or object does not currently have a value, or to reset a value to null when it is no longer needed.
In JavaScript, null is represented by the keyword null. Here's an example:
const nullValue = null;
You can also use null to check whether a variable or object has a value or not. For example:
let myVariable = null;
if (myVariable === null) {
console.log("The variable is null");
} else {
console.log("The variable has a value");
}
It's important to note that null is different from undefined in JavaScript. undefined means a variable has been declared but has not been assigned a value, while null represents an explicitly assigned empty value.
Undefined
Undefined is a primitive data type that represents the absence of a value. It is often used to indicate that a variable or object has not yet been assigned a value.
const undefinedValue = undefined;
let undefinedValue2;
console.log(undefinedValue); // This will output 'undefined'
Symbol
Symbol is a primitive data type that was introduced in ECMAScript 2015 (ES6). It is used to create unique identifiers that are not accessible by any other part of the program. Symbols are often used as keys in objects to ensure that the property names are unique.
const mySymbol = Symbol();
const myObject = {};
myObject[mySymbol] = "Hello, world!";
console.log(myObject[mySymbol]); // 'Hello, world!'
Object
Object is a data structure that allows you to store data as key-value pairs. It is a fundamental part of the language and is used extensively in web development.
const person = {
name: "Isaiah Clifford",
age: 30,
profession: "Software Engineer",
};
console.log(person.name); // Isaiah Clifford
console.log(person.profession); // Software Engineer
There's a lot more to learn about objects, but we'll cover that in a later section.
Array
Array is a collection of values that can be of any type, including other arrays and objects. Arrays are commonly used to store lists of items, such as numbers, strings, or objects.
const MyArray = [a, b, c];
console.log(myArray[0]); // a
console.log(myArray[1]); // b
console.log(myArray[2]); // c
Array have many useful methods that allow you to manipulate the data they contain such as push(), pop(),shift() slice() . We'll cover those in a later section.
Finally you have come the end of t he first section. I hope you have learned a lot. If you have any questions, please feel free to ask. I'll be happy to help you out.
You can all the code been used in the section github repo. I'll leave a link in the description below. I'll see you in the next section. Bye for now.
Find all the code used in this section here
Top comments (4)
Pretty good introduction but you're missing few things:
Hello Napssy, I wanted to thank you for your feedback regarding the mistake that was made. I apologize for not noticing it initially, but I truly appreciate your input. All the necessary changes have been made. If you have any further suggestions or contributions, I would be delighted to have them on board. Together, we can make JavaScript easier for others. Thank you once again.
"Backticks are generally used when you need to include variables or expressions into a string." That said, you forgot to mention that using backticks for strings - a.k.a. template strings - also allows you to use line breaks inside them, like a
pretag.Hi Edson, thank you for your feedback. Regarding the Backticks template strings, I noticed that in the Markdown file, they are being highlighted instead of being displayed as intended. I will respond to that issue. Thank you very much.