8 Javascript Tips That You Should Know

1. Number<>String

For converting numbers and strings with each other, we can use following methods;

// 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:

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;

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;

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!

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;

// 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.

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.

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”]

Furkan's Notes