69 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			69 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| ---
 | |
| title: With
 | |
| ---
 | |
| ## With
 | |
| 
 | |
| JavaScript's `with` statement is a shorthand way for editing several properties on one object. Most developers discourage usage of `with`, and you are best not using this keyword.
 | |
| 
 | |
| **Note**: `"strict mode"` forbids usage of `with`.
 | |
| 
 | |
| 
 | |
| ### Syntax
 | |
| ```syntax
 | |
| with (expression)
 | |
|   statement
 | |
| ```
 | |
| 
 | |
| 
 | |
| ### Example Usage
 | |
| In JavaScript, you can individually modify an object's properties like below:
 | |
| ```javascript
 | |
| let earth = {};
 | |
| earth.moons = 1;
 | |
| earth.continents = 7;
 | |
| ```
 | |
| `with` gives you a shorthand to modify the properties on an object:
 | |
| ```javascript
 | |
| with (earth) {
 | |
|   moons = 1;
 | |
|   continents = 7;
 | |
| }
 | |
| ```
 | |
| 
 | |
| While this example is contrived, you can understand use cases of `with` more if you have larger objects like below:
 | |
| ```javascript
 | |
| earth.continents.australia.geography.ocean = "Pacific";
 | |
| earth.continents.australia.geography.river = "Murray";
 | |
| earth.continents.australia.geography.mountain = "Kosciuszko";
 | |
| ```
 | |
| 
 | |
| ### Alternatives
 | |
| You should not use `with` as it has subtle bugs and compatibility issues. A highly recommended approach is to assign the object to a variable, and then modify the variable's properties. Here is an example using a larger object:
 | |
| ```javascript
 | |
| let earth = {
 | |
|   continents: {
 | |
|     australia: {
 | |
|       geography: {}
 | |
|     }
 | |
|   }
 | |
| };
 | |
| 
 | |
| let geo = earth.continents.australia.geography;
 | |
| 
 | |
| geo.ocean = "Pacific";
 | |
| geo.river = "Murray";
 | |
| geo.mountain = "Kosciuszko";
 | |
| ```
 | |
| 
 | |
| ### Try It Out
 | |
| https://repl.it/Mixg/5
 | |
| 
 | |
| 
 | |
| #### More Information:
 | |
| 
 | |
| <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with</a>
 | |
| 
 | |
| <a href="https://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/" target="_blank">https://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/</a>
 | |
| 
 | |
| <a href="http://2ality.com/2011/06/with-statement.html" target="_blank">http://2ality.com/2011/06/with-statement.html</a>
 |