A Beginner’s Guide to JavaScript Fundamentals
Tags: webdev, javascript, beginners, tutorial
Published: 2024-01-24 12:54:58

JavaScript is a popular programming language used to create dynamic and interactive web pages. Understanding the basics of JavaScript like variables, data types, and operators is essential for anyone looking to learn the language. This article will provide an overview of these fundamental building blocks of JavaScript.

## Introduction
JavaScript is a lightweight, interpreted programming language that runs in web browsers. Along with HTML and CSS, JavaScript makes up the three core technologies used in web development. JavaScript code can be inserted into HTML pages to create dynamic content and handle user interactions.

Some key things JavaScript is commonly used for:

- **Adding interactive behavior to web pages (e.g. drop-down menus, sliders, forms validation)**

- **Creating web and mobile apps**

- **Building web servers and developing server applications**

- **Game development**

Understanding how to store, manipulate, and access data is critical to leveraging the full power of JavaScript. This article will cover the basics of variables, data types, and operators in JavaScript.

## Variables
Variables are containers that store values. You can think of them as labeled boxes used to put information in. Here are some key points about variables in JavaScript:

- **Declared with `var`, `let` or `const`**

- **Case-sensitive names (myVar is different from myvar)**

- **Can contain letters, digits, underscores, $**

- **Cannot start with a digit**

**var**

The var statement is used to declare a variable in JavaScript:

```javascript
var myVariable;
```
This creates a variable called myVariable that can hold any value.

You can also initialize a variable when you declare it:

```javascript
var myVariable = 5;
```

**let**

`let` is a newer way to declare variables that was introduced in ES6. Variables declared with let:

- **Are block-scoped**

- **Cannot be redeclared in the same scope**

- **Can be reassigned**

```javascript
let language = "JavaScript";
language = "Python"; //allowed
```
**const**

The `const` declaration creates a read-only reference to a value.

```javascript
const myBirthday = "Jan 1";
myBirthday = "Dec 31"; //throws an error
```

- **Cannot be redeclared**
- **Cannot be reassigned**
- **Are block-scoped like let**

Using `const` helps avoid bugs from unintended mutation of variables.

## Data Types
JavaScript has several built-in data types:


- **Number**
- **String**
- **Boolean**
- **Null**
- **Undefined**
- **Object**
- **Symbol (new in ES6)**
- **BigInt - integers larger than 2^53.**

The type of data stored in a variable affects what values it can take on and what operations can be performed.

**Number**

The number data type represents both integers and floating point numbers.

```javascript
let count = 10; //integer
let temperature = 10.5; //float
```

**String**

Strings represent text and are wrapped in single or double quotes.

```javascript
let greeting = "Hello world!";
let name = 'John';
```

**Boolean**

Booleans can only be true or false. They are useful for representing on/off or yes/no values.

```javascript
let done = true;
let isEmpty = false;
```

**Null**

In JavaScript null represents the intentional absence of a value. It is treated as falsy in boolean contexts.

```javascript
let empty = null;
```

**Undefined**

Undefined means a variable has been declared but not yet assigned a value.

```javascript
let sample; //value is undefined
```

**Object**

In JavaScript objects can be seen as collections of key-value pairs.

```javascript
let person = {
  name: "John",
  age: 30 
};
```
**Symbol**

Symbols are new in ECMAScript 6 and are unique identifiers.

```javascript
let id = Symbol("id");
```
**BigInt**

```javascript
const largeInteger = 9007199254740991n;
```
Operations with BigInts will also return a BigInt:


```javascript
const x = 2n ** 53n; // 9007199254740992n
const y = 5n + 2n; // 7n
```
You cannot mix Number and BigInt types in operations, a TypeError will be thrown. But you can convert between the two:

```javascript
Number(largeInteger); // 9007199254740991
BigInt(Number.MAX_SAFE_INTEGER); // 9007199254740991n
```
BigInt provides the ability to safely perform math operations on large integers beyond the Number type limit. This opens up use cases like cryptography, working with large databases, and more.


**Operators**
Operators allow you to manipulate values and variables by performing actions like arithmetic, comparison, concatenation etc.

Here are some common operators in JavaScript:

- **Arithmetic:** +, -, *, /, %, **
- **Assignment:** =, +=, -=, *=, /=
- **Comparison:** ==, ===, !=, >, <, >=, <=
- **Logical:** &&, ||, !
- **Concatenation:** + (strings only)

```javascript
//arithmetic
let sum = 10 + 5; 

//assignment
let points = 0; 
points += 10;

//comparison
let score = 100;
if(score > 90) {
  console.log("A grade");
}

//concatenation
let greeting = "Hi " + "there!";
```

Understanding operators allows you to perform a wide variety of operations on variables and values in your code.

## Conclusion
Having a solid grasp on JavaScript variables, data types, and operators is essential for anyone looking to learn the language. Mastering these basic building blocks will allow you to store data, manipulate it, and build the logic of your applications.

The key points covered in this article include:

- **Variables declared with var, let and const**

- **JavaScript has number, string, boolean, null, undefined, object and symbol data types**

- **Common operators like arithmetic, assignment, comparison, logical, and concatenation**

With this foundation you will be prepared to continue your journey in learning JavaScript and all of the powerful things you can develop with it. The depth and flexibility of the language comes from mastering the fundamentals.

## Summary of Key Learnings

- **How to declare variables with var, let and const**
- **The basic native data types in JavaScript**
- **What operators are, examples of arithmetic, assignment, comparison operators**
- **How to store, access and manipulate values using variables and operators**
- **Fundamentals of strings, numbers, booleans, null and undefined**
- **How data types and operators work together to build program logic**

You should now have a basic yet solid understanding of how to work with variables, data types, and operators in JavaScript. With this foundation you can start writing functional code and continue mastering everything JavaScript has to offer.