DEV Community

Cover image for Part (1): Variables and Data Types in JavaScript
  Isaiah   Clifford Opoku
Isaiah Clifford Opoku

Posted on • Updated on

Part (1): Variables and Data Types in JavaScript

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
Enter fullscreen mode Exit fullscreen mode

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`;
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • -Infinity: Represents negative infinity, which is a value less than any other number.
const result2 = -1 / 0;
console.log(result2); // Output: -Infinity
Enter fullscreen mode Exit fullscreen mode
  • NaN (Not a Number): Represents a value that is not a legal number.
const result1 = "hello" / 5;
console.log(result1); // Output: NaN
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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!'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
napssy profile image
napssy

Pretty good introduction but you're missing few things:

  • You don't explain difference between var, let and const, knowing that ones can be reassigned could be good to know
  • You say backticks are used to include variables or expressions but doesn't say anything about their other use, multiple lines, or that you can include variables inside quoted strings, or that they're called template literals (name suggesting the use)
  • You could also briefly introduce typeOf and type coercion Also, there's a mistake in the numbers section, the example you show is the same as the one about strings. That said, I think you did a well concise and beginner friendly first tutorial.
Collapse
 
clifftech123 profile image
Isaiah Clifford Opoku

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.

Collapse
 
ed1nh0 profile image
Edson Jr.

"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 pre tag.

Collapse
 
clifftech123 profile image
Isaiah Clifford Opoku

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.