Vet That Codes

Fun features in JavaScript

Cover image for blog post: Fun features in JavaScript

Fun features in JavaScript

Fun and useful features in vanilla JavaScript

Photo by Roudy Salameh from Pexels
Photo by Roudy Salameh from Pexels

JavaScript is a pretty fun language. While it does some quirky and weird things at times, it's enjoyable to write on a daily basis. The creators of the language have given us access to some really nifty and powerful built-in tools. Let's go over 3 pretty useful and common things you can do with the language.

Spread syntax

Have you ever been working on some logic, and you have a base set of data that you'd like to build upon as scenarios change? Instead of having to copy and paste your object or array values over and over again, you can use the spread syntax. This keeps repetitive code to a minimum and leads to more readable code.

const ourObject = {
  valueA: "A",
  valueB: "B",
  valueC: "C",
};

console.log(ourObject);
// {valueA: 'A', valueB: 'B', valueC: 'C'}

// Then, let's build onto this initial object
const ourNewObject = {
  ...ourObject,
  valueD: "D",
  valueE: "E",
};

console.log(ourNewObject);
// {valueA: 'A', valueB: 'B', valueC: 'C', valueD: 'D', valueE: 'E'}

This works with arrays as well:

const ourArray = [1, 2, 3, 4];
console.log(ourArray);
// (4) [1, 2, 3, 4]

const ourNewArray = [...ourArray, 5, 6, 7];
console.log(ourNewArray);
// (7) [1, 2, 3, 4, 5, 6, 7]

The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, it enumerates the properties of an object and adds the key-value pairs to the object being created.
Spread syntax – MDN

Arrow functions

Before ES6, functions were usually written like this:

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

// or

const exampleFunction = function exFunction(a, b) {
  return a + b;
};

With ES6, arrow functions (a.k.a. fat arrow functions) make code shorter and easier to read:

const exFunction = (a, b) => {
  return a + b;
};

// or if you want a one-liner
const exFunction = (a) => a + 2;

A few notes:

  1. Without curly braces:
    (params) => expression
    The expression is evaluated and returned automatically (no return needed). Parentheses can be omitted if there's only one parameter.

  2. With curly braces:
    (params) => { code here }
    You can write multiple statements, but you'll need an explicit return.

An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and limitations.
Arrow functions – MDN

Try…Catch statements

When writing code, we want to handle errors gracefully. JavaScript gives us try…catch. As the name suggests, it will try something and then catch any errors.

const exFunction = (a) => a + 2;

try {
  exFunction(2);
} catch (error) {
  console.error(`error: ${error}`);
}

This lets you handle failures safely. You can also use finally to run code regardless of success or failure:

const exFunction = (a) => a + 2;

try {
  exFunction(2);
} catch (error) {
  console.error(`error: ${error}`);
} finally {
  console.log("Nice work!");
}

The try...catch statement is made of a try block and either a catch block, a finally block, or both. The code in the finally block always runs before the construct finishes.
try…catch – MDN

About me

Hey there! I'm Jeremy. I write articles about front-end development to help beginners understand the inner workings of web development. If you have questions, leave a comment, connect with me on LinkedIn @JeremyGrice, or visit my site VetThatCodes.

More from me: Vet That Codes on Medium

If you found this article helpful