Most Popular and Essential JavaScript Syntax Snippets

Introduction#

JavaScript is a high-level, interpreted programming language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

JavaScript's syntax is largely influenced by C programming language. It is also influenced by Awk, Perl and Python. JavaScript is also used in environments that are not Web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript VMs and frameworks built upon them have also increased the popularity of JavaScript for server-side web applications. On the client side, JavaScript has been traditionally implemented as an interpreted language, but more recently engines such as Google's V8 allow JavaScript to be compiled into native machine code.

JavaScript is a prototype-based language with first-class functions, meaning that functions can be assigned to variables and passed as arguments to other functions. JavaScript's syntax is loosely based on Java's C-like syntax. JavaScript supports object-oriented programming with object prototypes and the new class keyword.

In this article, we will explore the most popular and essential JavaScript syntax snippets that you will need to know in order to be a proficient JavaScript developer.

Data Types#

In JavaScript, there are six basic data types:

undefined : A value that has not been assigned a value.

: A value that has not been assigned a value. null : A value that represents "no value".

: A value that represents "no value". boolean : A value that can either be true or false .

: A value that can either be or . number : A numeric value. Can be an integer or a floating-point value.

: A numeric value. Can be an integer or a floating-point value. string : A sequence of characters.

: A sequence of characters. symbol: A unique and immutable data type that is used to identify an object.

In addition to these data types, there are two composite data types:

object : A collection of unordered key-value pairs.

: A collection of unordered key-value pairs. function: A subprogram that can be invoked to perform a certain action.

Variables#

In JavaScript, variables are used to store data values. There are two ways to declare a variable in JavaScript:

var : The traditional way to declare a variable.

: The traditional way to declare a variable. let: The new way to declare a variable, introduced in ES6.

The var keyword is used to declare a variable. The variable can be assigned a value of any data type.

var name = "John Doe";

The let keyword is used to declare a variable. The variable can be assigned a value of any data type.

let name = "John Doe";

JavaScript also supports const , which is used to declare a constant variable. The variable cannot be reassigned a new value.

const name = "John Doe";

Functions#

A function is a subprogram that can be invoked to perform a certain action. In JavaScript, functions are first-class citizens, meaning that they can be assigned to variables and passed as arguments to other functions.

Functions are declared using the function keyword.

function sayHello() { console.log("Hello, world!"); }

Functions can take arguments. The arguments are separated by commas and enclosed in parentheses.

function sayHello(name) { console.log("Hello, " + name + "!"); }

Functions can return a value. The return keyword is used to return a value from a function.

function add(a, b) { return a + b; }

Objects#

In JavaScript, an object is a composite data type that is used to store a collection of unordered key-value pairs. Objects are created using the object literal syntax.

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

Keys and values can be of any data type, including other objects.

var person = { name: "John Doe", age: 30, address: { street: "123 Main St", city: "New York", state: "NY", }, };

Functions can also be stored as values in an object. These are called methods.

var person = { name: "John Doe", age: 30, sayHello: function () { console.log("Hello, world!"); }, };

Arrays#

An array is a data type that is used to store a list of values. Arrays are created using the array literal syntax.

var numbers = [1, 2, 3, 4, 5];

Values in an array can be of any data type, including other arrays.

var nestedArray = [1, 2, [3, 4], 5];

Array indices are zero-based, which means that the first element in an array is at index 0, the second element is at index 1, and so on.

var numbers = [1, 2, 3, 4, 5]; 
console.log(numbers[0]); // 1 console.log(numbers[1]); // 2 console.log(numbers[2]); // 3 console.log(numbers[3]); // 4 console.log(numbers[4]); // 5

Array elements can be added, removed, or updated using array methods.

var numbers = [1, 2, 3, 4, 5]; // Add an element at the end numbers.push(6); // Remove an element at the end numbers.pop(); // Add an element at the beginning numbers.unshift(0); // Remove an element at the beginning numbers.shift(); // Update an element at index 2 numbers[2] = 100;

Strings#

A string is a data type that is used to store a sequence of characters. Strings are enclosed in double quotes or single quotes.

var name = "John Doe";

Strings can be concatenated using the + operator.

var greeting = "Hello, " + name + "!";

Strings have a length property that returns the number of characters in the string.

var name = "John Doe"; console.log(name.length); // 8

Strings have many methods that can be used to perform operations on strings.

var name = "John Doe"; // Convert to upper case name.toUpperCase(); // Convert to lower case name.toLowerCase(); // Check if string includes a certain substring name.includes("Doe"); // Check if string starts with a certain substring name.startsWith("John"); // Check if string ends with a certain substring name.endsWith("Doe"); // Find the index of the first occurrence of a substring name.indexOf("Doe"); // Find the index of the last occurrence of a substring name.lastIndexOf("Doe"); // Extract a part of the string name.substring(0, 3); // Replace a part of the string name.replace("John", "Jane"); // Split the string into an array of substrings name.split(" "); // Trim whitespace from the beginning and end of the string name.trim();

Numbers#

A number is a data type that is used to store numeric values. Numbers can be integers or floating-point values.

Integers are whole numbers that can be positive, negative, or zero.

Floating-point values are real numbers that can be positive, negative, or zero. They can also be infinity or not a number.

Numbers can be declared using the var keyword.

var x = 10;

Numbers can be added, subtracted, multiplied, and divided using the + , - , * , and / operators.

var x = 10; 
var y = 5; 

var sum = x + y; // 15 var difference = x - y; // 5 var product = x * y; // 50 var quotient = x / y; // 2

Numbers have many methods that can be used to perform operations on numbers.

var x = 10.5; // Convert to an integer x.toInteger(); // Round to the nearest integer x.round(); // Round up to the next integer x.ceil(); // Round down to the previous integer x.floor(); // Convert to a string x.toString(); // Check if a number is finite x.isFinite(); // Check if a number is NaN x.isNaN(); // Check if a number is negative x.isNegative(); // Check if a number is positive x.isPositive();

Symbols#

A symbol is a unique and immutable data type that is used to identify an object. Symbols are created using the Symbol() function.

var sym = Symbol();

Symbols can be used as keys in an object.

var obj = {}; obj[sym] = "value";

Symbols can be used as values in an array.

var arr = [sym];

Classes#

In JavaScript, a class is a template for creating objects. A class can be defined using the class keyword.

class Person { constructor(name, age) { [this.name](<http://this.name/>) = name; this.age = age; } sayHello() { console.log("Hello, world!"); } }

Classes can have constructor methods, which are used to initialize the class instance.

Classes can have methods, which are functions that are associated with a class instance.

Classes can be extended to create subclasses.

class Person { constructor(name, age) { [this.name](<http://this.name/>) = name; this.age = age; } sayHello() { console.log("Hello, world!"); } } class Student extends Person { constructor(name, age, major) { super(name, age); this.major = major; } }

Conclusion#

In this article, we have explored the most popular and essential JavaScript syntax snippets that you will need to know in order to be a proficient JavaScript developer. We have covered variables, data types, functions, objects, arrays, strings, numbers, symbols, and classes. With these syntax snippets, you will be well on your way to becoming a JavaScript expert!