DEV Community: Marko Burazin

Best practices for designing your REST APIs

Marko Burazin — Mon, 01 Mar 2021 06:27:38 +0000

Choosing how to design your REST API endpoints doesn’t restrict you to adhere to a concrete format, which is why there is a great level of freedom and flexibility in how you design them.
But, with this freedom comes responsibility. This responsibility is to make sure that we follow a certain architectural style when making choices about how we design our REST APIs.

This article explains the most important best practices and conventions to follow when designing your APIs, to support the client apps which use them, but also to make it understandable to developers who write those client apps.

Designing REST API URIs

URI stands for Uniform Resource Identifier and is a unique sequence of characters that identifies a logical or physical resource used by web technologies.
In our REST API endpoints, URIs identify resources and enable clients to access representations of that resource.

Use the plural form of nouns

For example, if you wanted to expose a resource of articles to the client, you would add the following URI endpoint to your REST API:

/articles

The convention here is to use the plural form of nouns like articles instead of article.

To understand why just suppose you want to give the client the ability to not only access “all articles” but also individual ones identified by their id.
In that case, you can add the following URI to your REST API:

/articles/:id

If it’s not obvious at this point, just look at how logical this looks. We have a collection of articles, and we are accessing a specific article with a given id in that collection.
It also potentially maps to the table in our database called articles, where there are multiple rows in the table with each representing a single article identified by id.

Just take note that the :id is presented with a semicolon here, which I used as a notation signifying that the API captures the value in that part of the URI and stores it into a variable with the name of id. There are different ways of doing this in the actual code and that depends on the framework you are using to write your APIs.
The request actually contains an integer here e.g. /articles/112 .

Never use verbs in URIs

What I mean here, is don’t use something like

/get-articles/:id
/update-articles/

This is bad practice. Where the verb like get, update, etc. is used to describe the operation being performed on the resource.

The operation performed on the resource is implicitly determined by the HTTP method the client uses to access a particular URI. The most common ones are of course POST, GET, PUT, DELETE that correspond to CRUD operations (Create / Read / Update / Delete).

Performing those operations in our example would look like:

POST /articles => creating a new article in the collection of articles
GET /articles => getting all current articles
PUT /articles/:id => updating a specific article with the given id
DELETE /articles/:id => deleting an existing article with the given id

Nest URIs corresponding to the hierarchy of objects

Another important convention to follow is to stay consistent with the relationship between objects by nesting parts of URIs so it reflects that relationship.
In the articles example, let’s say that our database contains a 1-to-many relationship between articles and comments on those articles. That means 1 article can have 1 or more comments.
To stay true to this relationship when designing our API endpoints, the URI should be consistent with it by nesting comments under an article. So in that case:

/articles/:article_id/comments => URI used to access all comments on the article with a given article ID
/articles/:article_id/comments/:comment_id => URI used to access a specific comment of a specific article

This also makes it easy for clients of your API to understand the relationship between objects of your app.

Use hyphens in the URIs

In the URLs of your REST APIs, use hyphens (- ) instead of anything else, like underscores, to separate words, e.g. /users/jack-black.

For naming the GET query parameters, it’s acceptable to use underscores (_) since those are considered variables.

Gracefully handle errors

Any error that occurs in the REST API server code when processing the request should never crash the process or app. Instead, always handle your errors, and instead of crashing, return a corresponding HTTP response code.

In that case, the response body can also contain a description of the error to be presented to the client/user.

Filtering, pagination, and sorting

Use GET query parameters to achieve filtering, pagination, or sorting of the results that are returned from your REST API.

GET query parameters are appended in the format:

?param1=value1&param2=value2&…

to the end of the URL.

Some examples:

Filtering: GET /users?firstname=Jack —> returns all users which have “Jack” as their first name
Pagination: GET /users?page=5&results=10 —> returns page number 5 where the complete users list is split into pages of 10 users
Sorting: GET /users?sort_by=firstname&order=asc —> returns all users sorted by their first name alphabetically A-Z

Versioning your REST API

Of course, as you do changes during the life of the app or service you host, sometimes those changes are non-backward compatible.
In that case, you can support different versions of your API.
One example of how to do this is to include a version number at the beginning of your URIs, e.g.

/v2/articles/
/v2/users/
/v2/articles/:id

Old versions of the APIs should be kept intact to avoid breaking changes with clients that are using those old versions.

Conclusion

Although there are many more facets to consider, these are the most common best practices to use when designing REST APIs.

So, to summarize the best practices:

Use the plural form of nouns in URIs
Never use verbs in URIs
Nest URI segments that match the hierarchy of relational resources
Use hyphens to delimit words in the URIs
Gracefully handle errors and return proper HTTP response codes
Use GET query parameters for filtering, sorting, or pagination
Always version your REST APIs to support backward compatibility

How & Why to use the `:key` attribute in VueJS v-for loops

Marko Burazin — Thu, 11 Feb 2021 19:15:15 +0000

When developing in VueJS, you might have realized that you should use the :key attribute in the v-for loops. You also might have ended up with a linter like ESLint screaming at you, stating you should always use the :key attribute with v-for.

So you thought, well why not just use the index of the looped array. Great, the linter stopped complaining.

But using :key like that is just dead wrong.

In this article, I'll explain why and how you should use the VueJS :key attribute in v-for loops.

Check the video I made on this topic:

Or just keep reading to learn more.

How VueJS renders data in HTML templates

Let’s see how, conceptually speaking, VueJS renders changes in data.

Say you have the following in your template:

<h1>{{ blogPostTitle }}</h1>

Now imagine that the value of the variable blogPostTitle changes to another value. By default, VueJS is going to optimize this operation by patching the <h1> element, meaning that it’s going to modify the value (content) of the element that’s already there.

‘key’ special attribute in VueJS

In simple cases like this, patching the element in-place like described above is exactly what we want, but for certain other cases we want to give an extra “hint” to the VueJS virtual DOM algorithm to avoid patching, and instead recreate the whole DOM element, i.e. delete and create.

So, for that purpose, we use the :key attribute. If we do the following:

<h1 :key="blogPostTitle">{{ blogPostTitle }}</h1>

This tells the algorithm that whenever the key for the <h1> changes (which is set to blogPostTitle), it should completely recreate the whole element. In this example, it’s each time the value of the variable blogPostTitle itself changes.

For simple cases like this, it doesn’t make sense to use :key. But, there are more complex cases where if you don’t use the :key, you’re going to run into bugs.
For example, adding the :key when using v-for loops inside templates is very important, especially if we’re looping over Vue components that have initialization logic.

What can happen if we don’t use ‘:key’ in v-for ?

To prove this point, let’s start with an example. We have an app that renders a list of to-do items.

<div id="app">
  <todo-item v-for="todo in todos" :item="todo"> 
  </todo-item>

  <button @click="addTodo">
    Add new item
  </button>
</div>

The Vue app is defined like this:

new Vue({
  el: "#app",
  methods: {
    addTodo() {
        this.todos.unshift(
          { id: 2000, text: 'Write article' },
      );
    },
  },
  data() {
    return {
      todos: [
        { id: 1000, text: "Decide on article topic" },
        { id: 1001, text: "Prepare code example" },
        { id: 1002, text: "Prepare article outline" },
      ],
    };
  },
})

We have a predefined list of todos and a method addTodo() which adds a new to-do item to the beginning of the todos array. For simplicity, I hard-coded the new item { id: 2000, text: 'Write article' }, but it could be added via button and a text input field. As you can see from the app template above, the addTodo() gets called when we click the button Add new item.

To render a list of to-do items themselves, we use a Vue component todo-item defined like this:

Vue.component('todo-item', {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
          isDone: false,
    };
  },
  template: `
    <div>
      <input type="checkbox" :id="item.id" v-model="isDone">
      <label :for="item.id">{{ item.text }}</label>
    </div>
  `
})

Notice we initialize the component’s local isDone variable to false since we want to make every newly added to-do item to be “not done”. Once we first open the app in the browser, we see the following:

Now let’s say we tick all of the items “done”:

This changes each of the component’s isDone variable to true.

Now we click the “Add new item” button to add a new “Write article” to-do to the top, and we might be surprised to find this:

So what happened here ?!? We were expecting that the old items remained ticked as “done” and the new one initialized to “not done”.

The issue lies in the fact that VueJS is optimizing changes to the DOM and reusing the existing elements (patching them) as much as possible.
The new item was added to the top in the same position as the item “Decide on article topic” was placed before the new item was added. So instead of a new element being created, the existing one was patched with the new “Write article” item.

Because the old DOM element was reused and the new one was not created, the component was not initialized with isDone: false and the existing value of isDone which is set to true is used. If we had any logic in the Vue hooks like created() or mounted(), those would not run either.

On the other hand, the “Prepare article outline” item was “pushed” off the bottom and ended up in a new position that didn’t exist before in the DOM. So the element (component) was re-created and isDone was initialized to false.
Again, this was not our intention.

Solution: use the `:key`

These kind of bugs are very difficult to debug. That’s why we should always use the :key attribute with v-for:

<div id="app">
  <todo-item v-for="todo in todos" :item="todo" :key="todo.id"> 
  </todo-item>

  <button @click="addTodo">
    Add new item
  </button>
</div>

As you can see, we used the id of each to-do item as the key. This way, since the id is unique for each to-do item, we are effectively “showing” the algorithm which items were there before the change, and which one was added.

Since the new to-do item has an id=2000, Vue knows that it’s a new item that didn’t exist before so it creates a new component to hold it and its isDone is initialized to false. For this simple example with hard-coded value { id: 2000, text: 'Write article' }, the button should be clicked only once, otherwise there would be more items with the same id, and that is not allowed either.

As for the rest of the existing to-do items, since they have the keys with the same id values as before we clicked the button, Vue knows it should keep the existing components and place them in new positions. That’s why their isDone values remain unchanged.

Now we get the result we originally expected:

Common misconception

Developers often get tripped up on thinking that since the :key is strongly recommended (even required by some ESLint rules) in the v-for loops, that they can just use the index of the loop as :key.

l know! I was there 😊

Sure, it’s going to get rid of the ESLint warning, but the problem with that approach is that it’s exactly the same as not providing a :key attribute, because the uniqueness of items cannot be based on loop indices since those can be reused for new values.

That’s why it’s important to use a unique value like id for the :key.

Conclusion

Alright, folks, I hope this was clear enough, feel free to ask any questions in the comments and maybe we can all learn something we didn’t know yet 😉.

Object destructuring in Javascript

Marko Burazin — Sun, 24 Jan 2021 18:06:14 +0000

In this article, you are going to learn all about object destructuring in Javascript. Previously we learned about Array destructuring in Javascript, so now let’s see how to destructure objects following pretty much the same syntax.

You’re also going to learn some cool tricks you can do using object destructuring like optional function arguments.

Object destructuring is a bit more complicated than array destructuring, but keep reading to the end and you’ll become a Javascript destructuring ninja in no-time!! 😄

Basics

When declaring an object, for example:

const employee = {
    firstName: 'Bruce',
    lastName: 'Lee',
    role: 'Teacher',
};

We can say we packed the key-value pairs of data which we can retrieve at any point later by using the so-called “dot-syntax” and store the values of specific keys into variables, e.g.:

const firstName = employee.firstName;
const lastName = employee.lastName;
const role = employee.role;

We immediately see that this can get quite repetitive as the number of values we want to retrieve gets larger. Instead, we can utilize object destructuring to unpack the data we want and avoid repeating ourselves:

const { firstName, lastName, role } = employee;

console.log(firstName); // Bruce
console.log(lastName); // Lee
console.log(role); // Teacher

Unlike array destructuring, we should be more careful if we want to destructure into variables that have been declared before, so for example:

let firstName;
let lastName;
let role;

{ firstName, lastName, role } = employee; // Syntax Error !!

This will result in an error, since using curly braces outside of the context of declaring the variables ( let), Javascript considers them to represent a code block instead. So, we should remember to explicitly wrap the whole expression using parenthesis ( … ) like this:

( { firstName, lastName, role } = employee )

console.log(firstName); // Bruce
// ... etc

Notice how we needed to remove the semicolon ; after the employee keyword in this case.

Missing elements

If we try to destructure an element which doesn’t exist in the object, the variable gets assigned the value of undefined:

const employee = {
    firstName: 'Bruce',
    lastName: 'Lee',
    role: 'Teacher',
};

let { firstName, middleName } = employee;
console.log(firstName); // Bruce
console.log(middleName); // undefined

You can also notice that we omitted to destructure some of the keys that exist in the employee variable (lastName and role). Using object destructuring we have the liberty of choosing what we need to extract and safely ignoring the rest.

Changing the order

Changing the order of variables we are destructuring into doesn’t affect the destructuring in any way:

let { role, lastName, firstName } = employee;
console.log(role); // Teacher
// ...

This is possible because in JS objects store their value by named keys, unlike arrays by index where the order matters.

Renaming

But what if we want to use a different name for the variables we destructure the object into?
A typical scenario for this is when you fetch data via an API call from the backend that might have a different naming convention for variables, or a different variable name just fits better into the current context.

Let’s check the following example:

const employee = {
    first_name: 'Bruce',
    last_name: 'Lee',
    role: 'Teacher',
};

let { 
    first_name: firstName, // rename
    last_name: lastName, // rename
    role
} = employee;

console.log(firstName); // Bruce
console.log(lastName); // Lee
console.log(role); // Teacher

As you can see, we can use the colon : operator to rename the variable we are extracting the data into.
An easy way to remember this is to imagine saying to yourself

this: into that

Default values

We’ve seen previously that if we try to destructure a value for a key in the object that doesn’t exist, we get undefined:

const employee = {
    firstName: 'Bruce',
    lastName: 'Lee',
};

let { firstName, middleName } = employee;
console.log(middleName); // undefined

We can actually define a default value which will be assigned instead of undefined:

let { firstName, middleName = 'The Dragon' } = employee;
console.log(middleName); // The Dragon

This technique is very useful for defining functions with optional arguments, as we are going to learn later.

It’s also possible to use both renaming and default values together for greater flexibility:

const employee = {
    first_name: 'Bruce',
    last_name: 'Lee',
    role: 'Teacher',
};

// ...

let {
    first_name: firstName,
    middle_name: middleName = 'The Dragon',
} = employee;
console.log(firstName); // Bruce
console.log(middleName); // The Dragon

Dynamic object destructuring

Don’t get frightened by the title, it’s a mouthful, but actually, it boils down to this question:

How do we destructure an object property for which we don’t know the key name in advance?

In other words, the key name will be determined during runtime stored in a variable. Let’s see an example:

// the variable key can be set anywhere in the program
// i.e. stored as a function return value, etc.
let key = 'role';

const employee = {
    first_name: 'Bruce',
    last_name: 'Lee',
    role: 'Teacher',
};

let {[key]: val} = employee;
console.log(val); // Teacher

We can see that we used the variable [key]. The square brackets mean that the value stored in the variable key should be used as a key when destructuring, which happens to be 'role' in our case. The [key] is called computed property name and can also be used when declaring objects.

Nested object destructuring

We can destructure complex nested objects which can contain arrays as well. In that case we can combine both object and array destructuring (see Array destructuring in Javascript) at the same time:

const employee = {
    firstName: 'Bruce',
    lastName: 'Lee',
    role: 'Teacher',
    addresses: [
        {
            street: 'Main street 9',
            city: 'San Francisco',
            country: 'USA',
        },
        {
            street: 'Not main street 122',
            city: 'Hong Kong',
            country: 'China',
        },
    ],
};

let {
    lastName,
    role: occupation,
    addresses: [
        {city: recentCity}, {city: oldCity}
    ]
} = employee;

console.log(lastName); // Lee
console.log(occupation); // Teacher
console.log(recentCity); // San Francisco
console.log(oldCity); // Hong Kong

We can see that we managed to “dig out” cities from the nested structure of the employee object by writing the destructuring pattern that matches that object. In this case, we only needed cities from addresses objects so other values were ignored.

Tricks using object destructuring

Now that we learned the basics of object destructuring, let’s dive into some of the tricks we can perform using it.

Save the remaining properties as a new object

Let’s say we destructure only some of the properties of an object, but we want to store the rest (unprocessed properties) into a new object variable.
We can do this similarly to array destructuring using the spread ... operator.

const userProfile = { 
    firstName: 'John', 
    lastName: 'Deere', 
    socialSecurityNo: 123
}; 

const { socialSecurityNo, ...rest } = userProfile; console.log(rest); // { firstName: 'John', lastName: 'Deere' }

Keep in mind that …rest has to always be located at the end of destructuring, which means something like const { firstName, …rest, socialSecurityNo } = userProfile would throw an error.

Destructuring of function arguments

So far, we’ve been destructuring objects using the assignment = operator. But the destructuring syntax can also be used in the function definition, where we can define how an object is going to be destructured once we pass it to a function call as an argument.

const employee = {
    firstName: 'Bruce',
    lastName: 'Lee',
    role: 'Teacher',
    address: {
        street: 'Main street 9',
        city: 'San Francisco',
        country: 'USA',
    },
};

function processEmployee({ firstName, address: { city } }) {
    console.log(firstName);
    console.log(city);
}

// Now we call the function
processEmployee(employee);
// the function call prints the following:
// Bruce
// San Francisco

This is great because it means we don’t have to unpack the function input argument using the dot syntax in which case the function would look like this:

function processEmployee(employee) {
    const firstName = employee.firstName;
    const city = employee.address.city;
    console.log(firstName);
    console.log(city);
}

Yuck! As you can see, this ends up with more lines of code and ugly repetition when using the dot syntax. This issue gets increasingly annoying as we need more object properties.

But where object destructuring really shines is when we want to define a function with optional arguments.

Optional function arguments with default values

Let’s assume we have defined the following function for showing some information related to a project, it’s category and tasks associated to it:

function showProjectInfo(projectName, category, tasks) {
    console.log(projectName);
    console.log(category);
    for (const task of tasks) {
        console.log(task);
    }
}

showProjectInfo(
    'Array Destructuring', 
    'Blog', 
    ['Write outline', 'Write article', 'Publish article']
);
/* Output shown: */
// Array Destructuring
// Blog
// Write outline
// Write article
// Publish article

And now let’s say that we want to make some of the arguments of this function optional, so for example we want this function to be able to only take in tasks. If we don’t provide arguments projectName and category in the function call, we want to set the values of these arguments to Unknown and Uncategorized, respectively.

The first approach you might take is to use the regular default arguments syntax provided by Javascript:

function showProjectInfo(projectName='Unknown', category='Uncategorized', tasks) {
    // ...
}

There are a couple of issues with this approach when calling this function:

We need to know how many arguments this function takes
We need to know what’s the order of arguments to pass in
We cannot leave out a certain argument from the call

So if we wanted to call it by providing only tasks and leaving the projectName and category to have the default values set, we would have to explicitly call the function with values for those arguments being undefined:

    showProjectInfo(undefined, undefined, ['Write outline', 'Write article', 'Publish article']);
/* Output shown: */
// Unknown
// Uncategorized
// Write outline
// Write article
// Publish article

Otherwise, if we called it using showProjectInfo(['Write outline', 'Write article', 'Publish article']); we would get an error.

Fortunately, we can utilise the power of object destructuring with default values to solve this issue:

function showProjectInfo({
    projectName: name = 'Unknown', // rename + default value
    category = 'Uncategorized', // default value
    tasks,
}) {
    console.log(name); // `projectName` was renamed to `name` 
    console.log(category);
    for (const task of tasks) {
        console.log(task);
    }
}

Now we can call this function by passing in an object with only the tasks key set to the array of tasks:

showProjectInfo({ tasks: ['Write outline', 'Write article', 'Publish article'] });
/* Output shown: */
// Unknown
// Uncategorized
// Write outline
// Write article
// Publish article

Notice that we left out projectName and category from the call completely and the default values were assigned in the function. We can choose to set the category as well and leave out only projectName . Additionally, we don’t even have to think about the order of these parameters during the function call:

showProjectInfo({
    tasks: ['Write outline', 'Write article', 'Publish article'],
    category: 'Blog',
});
/* Output shown: */
// Unknown
// Blog
// Write outline
// Write article
// Publish article

We can even choose to destructure the array tasks provided as a function argument using array destructuring, for example let’s say we only wanted to capture maximum 2 first tasks:

function showProjectInfo({
    projectName: name = 'Unknown',
    category = 'Uncategorized',
    tasks: [task1, task2], // first two tasks
}) {
    console.log(name);
    console.log(category);
    console.log(task1);
    console.log(task2);
}

Now if we call the function with e.g. 3 tasks we see we get only first 2 shown:

showProjectInfo({ 
    tasks: ['Write outline', 'Write article', 'Publish article'] 
});
// Unknown
// Uncategorized
// Write outline
// Write article

Let’s now define the same function as before, but make all arguments optional by also specifying the tasks array to have the default value of [] (an empty array):

function showProjectInfo({
    projectName: name = 'Unknown',
    category = 'Uncategorized',
    tasks = [],
}) {
    console.log(name);
    console.log(category);
    for (const task of tasks) {
        console.log(task);
    }
}

showProjectInfo({});
// Unknown
// Uncategorized

But, notice that we still need to remember to provide an empty object to the function call in this case. If we want to remove this requirement and be able to perform the call like showProjectInfo() , we can use a trick, which is to add an empty object as a default value for the whole object we pass in:

function showProjectInfo({
    projectName: name = 'Unknown',
    category = 'Uncategorized',
    tasks: [task1, task2] = [],
} = {}) { // We added "= {}" here !!
    /// ...
}

Now we can call the function without providing any arguments, which makes the default value of {} take effect and is the same as calling the function using it:

showProjectInfo();
// Unknown
// Uncategorized

showProjectInfo({});
// Unknown
// Uncategorized

Conclusion

That’s it! You’re now a Javascript destructuring ninja!
Now go ahead and be DRY !!!.

If you need a refresher on the array destructuring in Javascript, take a look at my previous article on the topic here.

Array destructuring in Javascript

Marko Burazin — Sat, 23 Jan 2021 19:43:04 +0000

In this article you are going to learn all about array destructuring in Javascript and some cool tricks you can perform using it, like swapping values of variables, returning multiple values from a function, copying an array, etc.

Essentially, we use destructuring in Javascript to unpack data from more complex data structures like arrays and objects into individual variables of choice, without having to repeat ourselves too much.

Check my video on this topic:

Otherwise, keep reading to know more and learn all about destructuring arrays.

Basics

When we declare and initialize a variable, essentially we pack the data into it. For example, let's suppose we create an array:

const numbers = [10, 20, 30, 40];

We can say we have packed the numbers 10, ..., 40 into the numbers variable.

Now, instead of doing the following to store individual elements of this array into variables and repeating ourselves too much:

const a = numbers[0];
const b = numbers[1];
/// ...

We can use destructuring to unpack this data:

const [a, b, c, d] = numbers;
console.log(a); // 10
console.log(d); // 40

Keep in mind that it's not needed to declare the variables in the same line as destructuring:

const a, b, c, d, e;

[a, b, c, d, e] = numbers;
console.log(a); // 10
console.log(e); // 50

If the number of values we are destructuring is less than the total number of elements in the array, we are going to destructure only the same number of elements from the beginning of the array:

const [a, c] = numbers;
console.log(a); // 10
console.log(c); // 20

But what if we try to destructure more values than there exist in the array? In that case the extra variables that map to non-existing array elements will have the value of undefined:

const [a, b, c, d, e, f] = numbers;
console.log(e); // undefined
console.log(f); // undefined

Default values for undefined elements

In the previous example we were trying to destructure variables that didn't exist in the array numbers. We can choose what would be the default values assigned to those variables in that case by using the = operator:

const [a, b, c, d, e = 0, f = 0] = numbers;
console.log(e); // 0
console.log(f); // 0

Ignoring elements

We can ignore some elements in sequence, if we don't want to destructure them:

const [a, , c, d, e, f] = numbers;
console.log(a); // 10
console.log(c); // 30

That being said, we can also ignore multiple values in a row like [a,,,d,e,f] = numbers, but the code gets quite unreadable that way, so try to avoid using it. As a matter of fact, there is already an ESLint rule out there that prevents ignoring more consecutive values (for more check eslint-plugin-unicorn)

Iterables

Since destructuring is just syntax sugar for iteration, it can be performed on any iterable, not just arrays. So, for example, a string is an iterable, so we can do this:

const [a, b, c, d] = "cool";
console.log(a, b, c, d); // c o o l

Nested array destructuring

We can also destructure nested arrays, i.e. arrays within arrays

const destination = ['Paris', [48.8566, 2.3522]];

const [city, [latitude, longitude]] = destination;
console.log(latitude, longitude); // 48.8566 2.3522

Tricks using array destructuring

OK, so now that we got the basics down, let's check out some tricks we can perform using destructuring in Javascript.

Swapping variables

Let's say we have variables a and b, and we want to swap their values so that a contains the value of b, and b contains the value of a. We can use array destructuring syntax to do that:

const a = 1;
const b = 2;
[b, a] = [a, b];

console.log(a); // 2
console.log(b); // 1

Multiple function return values

If we ever want to return more than one value from a function, and capture those values where the function is called, again we can use array destructuring to achieve this:

function getPerson() {
    const name = "Johnny Knoxville";
    const age = 30;
    const phone = "123456"

    return [name, age, phone];
}

// ... somewhere else we call getPerson()
const [personName, personAge, personPhone] = getPerson();

console.log(personName); // "Johnny Knoxville"
console.log(personAge); // 30
console.log(personPhone); // 123456

Capturing the rest of an array as another array

When destructuring the first few values of an array, we may want to store the values that we haven't destructured into a new array.

To achieve this, we can use the spread operator ... to capture the rest of the elements into the new array:

const numbers = [1, 2, 3, 4, 5, 6, 7];
const [a, b, ...rest] = numbers;
console.log(rest); // [3, 4, 5, 6, 7];

An important point to note here is that the ...rest has to always be at the end of the array we use for destructuring, otherwise an error will be thrown.
Another important thing about this to remember is that after this runs, the rest variable will hold an array which is a completely different array in memory than the numbers array, i.e. the remaining values from the numbers array are copied into a new array stored in the rest variable.

Because of this, we can utilise this as a trick to clone an array:

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

numbersCopy[0] = 999;

// The original array stays the same
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]

Conclusion

That’s it when it comes to destructuring arrays in Javascript. Hope you can utilize the info presented here and take one more step towards writing DRY code.

We can use a similar syntax to destructure Javascript objects as well, but to keep this article focused, I’m leaving that as a follow-up article which I plan to publish very soon.

DEV Community: Marko Burazin

Best practices for designing your REST APIs

Designing REST API URIs

Use the plural form of nouns

Never use verbs in URIs

Nest URIs corresponding to the hierarchy of objects

Use hyphens in the URIs

Gracefully handle errors

Filtering, pagination, and sorting

Versioning your REST API

Conclusion

How & Why to use the `:key` attribute in VueJS v-for loops

How VueJS renders data in HTML templates

‘key’ special attribute in VueJS

What can happen if we don’t use ‘:key’ in v-for ?

Solution: use the :key

Common misconception

Conclusion

Object destructuring in Javascript

Basics

Missing elements

Changing the order

Renaming

Default values

Dynamic object destructuring

Nested object destructuring

Tricks using object destructuring

Save the remaining properties as a new object

Destructuring of function arguments

Optional function arguments with default values

Conclusion

Array destructuring in Javascript

Basics

Default values for undefined elements

Ignoring elements

Iterables

Nested array destructuring

Tricks using array destructuring

Swapping variables

Multiple function return values

Capturing the rest of an array as another array

Conclusion

Solution: use the `:key`