JavaScript With Statement Explained – A Deep Dive
Tags: javascript, programming, tutorial, es5
Published: 2020-01-15 13:56:24

---
title: JavaScript With Statement Explained – A Deep Dive
published: true
date: 2020-01-15 13:53:57 UTC
tags: Javascript,Programming,Tutorial,es5
canonical_url: https://qvault.io/2020/01/15/javascript-with-statement-explained-a-deep-dive/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-with-statement-explained-a-deep-dive
---

By [@wagslane](https://twitter.com/wagslane) (twitter)

![](https://qvault.io/wp-content/uploads/2020/01/photo-1529156069898-49953e39b3ac-1024x576.jpeg)

Let’s look at the JavaScript _with_ statement. We will go over the simple uses, as well as a deep dive into some more advanced concepts.

```
Note: Use of the _with_ statement is discouraged. It can lead to strange bugs. That said, it is important to understand how it works because it may exist in legacy code.
```

## With Function Syntax

[From Mozilla’s definition:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with)

```
with (expression){
  statement
}
```

_expression_: An [expression](https://en.wikipedia.org/wiki/Expression_(computer_science)) that evaluates to an object that will become the default object inside its scope.

_statement_: Code that will run with the evaluated expression as the default object

## Example

```
let car = {color: 'red'}
with(car){
  console.log(color)
}

// prints 'red'
```

As you can see, the car object becomes the default object in the scope. The object’s properties become available without using the ‘.’ operator.

If the variable already exists in the parent scope, it will be overwritten:

```
let color = 'blue'
let car = {color: 'red'}
with(car){
  console.log(color)
}

// prints 'red'
```

## Why Shouldn’t I Use ‘With’?

![](https://qvault.io/wp-content/uploads/2020/01/photo-1550770203-e14cc04c58fa-1024x680.jpeg)

> Using `with` is not recommended, and is forbidden in ECMAScript 5 [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode). The recommended alternative is to assign the object whose properties you want to access to a temporary variable.
> 
> <cite><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">Mozilla</a></cite>

While using _with_ can make long pieces of code easier to read due to the removal of long accessor paths,

```
with(car.make.model){
  let size = width * height * length;
}

vs

let size = car.make.model.width * car.make.model.height * car.make.model.length;
```

the danger or potential bugs due to ambiguity isn’t worth it.

There is an argument to be made that code will be smaller and easier to send to the browser by using ‘with’ statements. While true, the gains are negligible, especially when compared to what minified code can do.

## Thanks For Reading

Lane on Twitter: [@wagslane](https://twitter.com/wagslane)

Lane on Dev.to: [wagslane](https://dev.to/wagslane)

Download Qvault: [https://qvault.io](https://qvault.io/)

The post [JavaScript With Statement Explained – A Deep Dive](https://qvault.io/2020/01/15/javascript-with-statement-explained-a-deep-dive/) appeared first on [Qvault](https://qvault.io).