DEV Community

Cover image for A Beginner’s Guide to JavaScript Fundamentals
sikiru
sikiru

Posted on • Edited on • Originally published at Medium

A Beginner’s Guide to JavaScript Fundamentals

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:

var myVariable;
Enter fullscreen mode Exit fullscreen mode

This creates a variable called myVariable that can hold any value.

You can also initialize a variable when you declare it:

var myVariable = 5;
Enter fullscreen mode Exit fullscreen mode

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

let language = "JavaScript";
language = "Python"; //allowed
Enter fullscreen mode Exit fullscreen mode

const

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

const myBirthday = "Jan 1";
myBirthday = "Dec 31"; //throws an error
Enter fullscreen mode Exit fullscreen mode
  • 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.

let count = 10; //integer
let temperature = 10.5; //float
Enter fullscreen mode Exit fullscreen mode

String

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

let greeting = "Hello world!";
let name = 'John';
Enter fullscreen mode Exit fullscreen mode

Boolean

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

let done = true;
let isEmpty = false;
Enter fullscreen mode Exit fullscreen mode

Null

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

let empty = null;
Enter fullscreen mode Exit fullscreen mode

Undefined

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

let sample; //value is undefined
Enter fullscreen mode Exit fullscreen mode

Object

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

let person = {
  name: "John",
  age: 30 
};
Enter fullscreen mode Exit fullscreen mode

Symbol

Symbols are new in ECMAScript 6 and are unique identifiers.

let id = Symbol("id");
Enter fullscreen mode Exit fullscreen mode

BigInt

const largeInteger = 9007199254740991n;
Enter fullscreen mode Exit fullscreen mode

Operations with BigInts will also return a BigInt:

const x = 2n ** 53n; // 9007199254740992n
const y = 5n + 2n; // 7n
Enter fullscreen mode Exit fullscreen mode

You cannot mix Number and BigInt types in operations, a TypeError will be thrown. But you can convert between the two:

Number(largeInteger); // 9007199254740991
BigInt(Number.MAX_SAFE_INTEGER); // 9007199254740991n
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

You've missed BigInt from the data types

Collapse
 
sikirumomodu profile image
sikiru

Thanks for the tip jon. Right on it