DEV Community

Cover image for 8 Javascript Tips  That You Should Know
Abdullah Furkan Özbek
Abdullah Furkan Özbek

Posted on • Originally published at blog.furkanozbek.com

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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`
Enter fullscreen mode Exit fullscreen mode

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"

Enter fullscreen mode Exit fullscreen mode

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”]
Enter fullscreen mode Exit fullscreen mode

Links

Discussion (0)