Understanding JavaScript with a beginner: Variables and Data Types

JavaScript is a versatile and widely-used programming language that powers the web. One of its core features is its ability to work with variables and data types, which are fundamental to storing and manipulating data. Variables act as containers for storing data, while data types define the kind of data being stored. Understanding how to name variables, declare variables, assign values, and work with different data types is essential for writing effective JavaScript code. In this episode, we’ll explore variables, data types, and their usage in detail, with plenty of examples to help you grasp these concepts easily.

What are Variables?

Variables are like boxes with labels where you can store data. You can put something in the box, take it out, or replace it with something else. In JavaScript, you declare variables using the var, let, or
const keywords.

Declaring Variables

The syntax is simple.

Keyword variableName = value of variable 

• var: The old way of declaring variables. It is no longer a recommended way of declaring variables in JavaScript and should not be used. However, it still works and you may come across in your JavaScript and web development journey.

  var name = "Alice";
  console.log(name); // Output: Alice

• let: The modern way of declaring functions.

  let age = 25;
  console.log(age); // Output: 25

• const: It is used for declaring constant values.

Note: Constant values are values that are not meant to change. A good example is the value of pi in mathematics which will always be equal to 3.14.

  const PI = 3.14;
  console.log(PI); // Output: 3.14

Variable Naming Rules

In JavaScript, variable naming have rules and following standard naming conventions increases readability and makes it easier for you and others to understand your code.

• Variable names can contain letters, digits, underscores (_), and dollar sign ($).
• They cannot start with a digit.
• They are case-sensitive (myName and myname are different).
• Avoid using reserved keywords like let, const, function, etc.

Reassigning Variables

• let and var allow reassignment.
• const does not allow reassignment.

Example:

let score = 10;
score = 20; // Reassigning is allowed
console.log(score); // Output: 20

const gravity = 9.8;
gravity = 10; // Error: Cannot reassign a constant

Data Types in JavaScript

Data types simply means “types of data”.

The word data means “piece of information”. So, basically, data types are types of pieces of informations.

JavaScript has two main categories of data types:

1. Primitive Data Types: Simple, immutable values.
2. Non-Primitive Data Types: Complex, mutable values.

Primitive Data Types

Primitive data types are the most basic types in JavaScript. They are immutable, meaning their values cannot be changed directly.

• number: Represents both integers and floating-point numbers.

Examples:

  let integer = 10;
  let float = 10.5;
  let scientific = 1.23e4; // 12300

• string: Represents text enclosed in single (') or double (") quotes.

Examples:

  let name = "Alice";
  let greeting = 'Hello, World!';

Template Literals: Use backticks (`) for multi-line strings and embedding variables.

  let age = 25;
  let message = `Hello, my name is ${name} and I am ${age} years old.`;
  console.log(message); // Output: Hello, my name is Alice and I am 25 years old.

• boolean :Represents true or false.

Examples:

  let isStudent = true;
  let isWorking = false;

• undefined: Represents a variable that has been declared but not assigned a value.

Example:

  let x;
  console.log(x); // Output: undefined

• null: Represents an intentional absence of any value.

Example:

  let y = null;
  console.log(y); // Output: null

Non-Primitive Data Types

Non-primitive data types are more complex and can hold collections of values or behaviors.

• object: Represents a collection of key-value pairs.

Example:

  let person = {
      name: "John",
      age: 30,
      isStudent: false
  };
  console.log(person.name); // Output: John
  console.log(person.age); // Output: 30

• array: Represents an ordered list of values.

Example:

  let fruits = ["Apple", "Banana", "Orange"];
  console.log(fruits[0]); // Output: Apple

Side note: In JavaScript, and programming in general, counting starts a (0). So, from the example above, we are simply trying to print the first item in the array to the console.

• function: Represents a reusable block of code.

Example:

  function greet(name) {
      return `Hello, ${name}!`;
  }
  console.log(greet("Alice")); // Output: Hello, Alice!

Wrapping up

Variables and data types are the building blocks of JavaScript programming. With practice and a solid understanding of these concepts, you’ll be ready to tackle even more advanced JavaScript concepts and build powerful applications.

Happy coding!😊