sikiru

Posted on Jan 24 • Updated on Feb 26 • Originally published at Medium

A Beginner’s Guide to JavaScript Fundamentals

#webdev #javascript #beginners #tutorial

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;

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

You can also initialize a variable when you declare it:

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

let language = "JavaScript";
language = "Python"; //allowed

const

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

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.

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

String

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

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.

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.

let empty = null;

Undefined

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

let sample; //value is undefined

Object

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

let person = {
  name: "John",
  age: 30 
};

Symbol

Symbols are new in ECMAScript 6 and are unique identifiers.

let id = Symbol("id");

BigInt

const largeInteger = 9007199254740991n;

Operations with BigInts will also return a BigInt:

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:

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)

//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.