8 Javascript Tips  That You Should Know
Tags: javascript, beginners, 100daysofcode
Published: 2021-08-31 10:02:56

## 1. Number<>String
For converting numbers and strings with each other, we can use following methods;

```jsx
// Number > String
let num = 4
let newNum = num.toString();

// String > Number
let num = "4"
let stringNumber = Number(num);

// New Way
let num = 15;
let numString = num + ""; // number to string
let stringNum = +s; // string to number
```

## 2. Swap using destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

 We can also use that to swap values fast, like this:

```jsx
let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // result -> 2
console.log(b) // result -> 1
```

## 3. Remove duplicates from an Array

If we have an array of values and we try to filter unique values we can follow this trick;

```jsx
const arr = ["1", 2, 3, "abc", "1", 2, 5]
const arrayWithUniqueItems = [...new Set(arr)]
// ["1", 2, 3, "abc", 5]
```

## 4. Shorten the array using length

Array has length property which tells how many items inside that list.

If we change the length property the remaining items will be gone forever;

```jsx
let array = [0, 1, 2, 3, 4, 5, 6, 6, 8, 9]
array.length // 10
array.length = 4

// Result: [0, 1, 2, 3]
```

## 5. Combine objects using ...spread

Let’s say you want to combine multiple objects into one object containing them all. The spread operator ( … ) is a great way to achieve this!

```jsx
const obj1 = {'a': 1, 'b': 2}
const obj2 = {'c': 3}
const obj3 = {'d': 4}

// Combine them using the spread operator            
const objCombined = {...obj1, ...obj2, ...obj3}

// Result: {'a': 1, 'b': 2, 'c': 3, 'd': 4}
```

## 6. window.location object

JavaScript can access the current URL using the window.location object. 
And it has all kinds of useful property which we can use;

```jsx
// JavaScript can access the current URL in parts. For this URL:
`https://furkanozbek.com/example/index.html?s=article`

window.location.protocol == `https:`
window.location.host == `furkanozbek.com`
window.location.pathname == `/example/index.html`
window.location.search == `?s=article`
```

## 7. Dynamice Object Properties

ES6 brought us computed property names that allow property keys of object literals to use expressions. 

By surrounding the key with brackets [], we can use variables as property keys.

```jsx
const type = "fruit";
const item = {
  [type]: "kiwi"
};

console.log(item); // {fruit: "kiwi"}

item[type];   // "kiwi"
item["fruit"] // "kiwi"

// Or
item.fruit // "kiwi"

```

## 8. map() Substitute

We can also use Array.from() method as the same way map function.

```jsx
let dogs = [
    { name: "Rio", age: 2 },
    { name: "Mac", age: 3 },
    { name: "Bruno", age: 5 },
    { name: "Jucas", age: 10 },
    { name: "Furr", age: 8 },
    { name: "Blu", age: 7 },
]

let dogsNames = Array.from(dogs, ({name}) => name);
// returns [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]
```

## Links
- [45 Useful JavaScript Tips, Tricks And Best Practices | Modern Web](https://modernweb.com/45-javascript-tips-tricks-practices/)

- [5 Must-know Javascript Tips & Tricks](https://dev.to/toktoktwan/5-must-know-javascript-tips-tricks-3pm7)

- [8 JavaScript Tips & Tricks That No One Teaches 🚀](https://dev.to/worldindev/8-javascript-tips-tricks-that-no-one-teaches-24g1)