Six (Dirty) Ways to shorten your Javascript
Tags: javascript, tutorial, programming, codequality
Published: 2021-11-26 13:06:52

Shortening your code might not be the best way to do something, but it can help you out a lot if you are competing or trying to make a small javascript package!  Here are ten tips I'll show you that you can use to make all your javascript files miniature.

## Backticks instead of Parentheses
```javascript
let splitStr = "this is a test"
let splitStr = str.split` `; // ['this', 'is', 'a', 'test']
```

This technique won't _dramatically_ shorten your code but it does help if you are trying to minimize on code.  It actually won't return that direct value.  It returns it in an array instead.  Here's the input/output of that if you use backticks:

```javascript
console.log`Hello`; // ['Hello']
console.log`${1+1}`; // [ '', '' ] 2
console.log`My name is ${"John"}`; // [ 'My name is ', '' ] John
console.log`bleeeeh`; // [ 'bleeeeh' ]
console.log`${false}`; // [ '', '' ] false
```

It's weird but it gets the job done.  Don't try passing values into a function that requires more than one argument.  This will _not_ work.
```javascript
"Heyya Worlld".replace`yy`,`ll`
```

## One `let` Declaration
This one isn't a super-secret one but it works well.  Simply declare a variable and you can chain off of that.

```javascript
let num = 0, dog = "dog", me = { age: 100, name: "Me" }, f = false, t = true;
```

## Replace `true` and `false`
Literally, the booleans `true` and `false` can work as `1` and `0`.  Only use this if you really want to shorten your code.  It makes your JS a little harder to read.

```javascript
let isThisTrue = 1;
let isThisAlsoTrue = true;

let isThisFalse = 0;
let isThisAlsoFalse = false;

if(isThisTrue) { ... } //executes
if(isThisAlsoTrue) { ... } //executes as well

if(isThisFalse || isThisAlsoFalse) { ... } //won't execute
```

## Start using `for...of` and `for...in` loops

Typically, for...of and for...in loops perform slower and less efficient than normal loops, but if you are wanting a small code size, be sure them!!

```javascript
let array = ["apple", "banana", "orange", "severed finger"];

for(let i = 0; i < array.length; i++){
  console.log(array[i])
}

//does the same thing as the above loop ^^
for(let i in array) {
  console.log(array[i])
}

//literally, "i" becomes the value
for(let i of array){
  console.log(i)
}
```

Let's go over the differences of each loop.
First, you should know that the first one simply loops through an array.

`for...in` loops will loop through objects, arrays, and even strings and return the variable (e.g. "i") as the index or object key.

```javascript
let obj = {
  "a": 1,
  "b": 2,
  "c": 3
};
let arr = ["a", "b", "c", "d"];
let str = "abcde";

for(var i in obj){
  console.log(i);
} // logs "a", "b", and "c"

for(var j in arr){
  console.log(j);
} // logs 0, 1, 2, and 3

for(var k in str){
  console.log(k);
} //logs 0, 1, 2, 3, and 4

```

For...of loops behave slightly different.  In these types of loops, "i" _becomes_ the value in the array, or string.  Objects are not iterable in for...of loops.

```javascript
let arr = ["a", "b", "c", "d"];
let str = "abcde";

for(var j of arr){
  console.log(j);
} // logs "a", "b", "c", and "d"

for(var k of str){
  console.log(k);
} //logs "a", "b", "c", "d", and "e"
```

## Use more javascript array functions
Array functions took me a while to grasp when I first started coding, but now I use them constantly.  Functions like `.map`, `.forEach`, and `.reduce` can seriously shorten your code.  You can replace loops with these sometimes.

Log items in an array:
```javascript
let arr = ["a", "b", "c"];
arr.forEach(console.log);
```

Double String length in an array:
```javascript
let arr = ["a", "b", "c"];
arr.map(value => value.repeat(2)); // ["aa", "bb", "cc"]
```

There are many more things you can do with array functions, but I won't fill this article with too much of them.

## No declarations
This is probably the dirtiest javascript shortening trick ever.  Don't try this on the client side of javascript unless you want to be bombarded with errors and also, server-side javascript sometimes doesn't allow it.  It depends on where you're coding.

```javascript
arr=["a","b","c","d"]
for(i in arr)console.log(i);
```

Declaring a variable without `const`, `let`, or `var` typically creates a non-constant variable like `let` or `var` that can be changed.

## Tips
I guess this is the end of my article, but then I have a number of tricks up my sleeve for shortening your javascript.

#### 1. Split string by each index
`let str = "abc"`
`console.log([...str]) // prints ["a", "b", "c"]`

#### 2. Use `Number()` instead of `parseInt()`
It's shorter and performs better!!
`let num = "10"`
`console.log(Number(parseInt))`

#### 3. Unique set of array items
`let arr = ["a", "b", "b", "a", "c", "d", "c", "e"]`
`console.log([...new Set(arr)]); // [ 'a', 'b', 'c', 'd', 'e' ]`

#### 4. Crash a browser
`while(true)window.open("https://dev.to")`

#### 5. Split an array on different characters
`let str = "aaabccdddddefffgggh"`
`console.log(srt.match(/(.)\1*/g)); // logs ["aaa", "b", "cc", "ddddd", "e", "fff", "ggg", "h"]`

I hope you enjoyed my article.
Have fun, don't try the browser crasher, and make sure to still use declarations when necessary.
Be sure to follow and [subscribe](https://www.connerow.dev/contact).