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

8 Javascript Tips That You Should Know

Comments

More from this blog

React Hooks: useLayoutEffect

6 Tips To Achieve Your Goal

How to Deploy Your App to Netlify

5 Ways To Host Your Applications

Array methods that you should know

1. Number<>String

2. Swap using destructuring

3. Remove duplicates from an Array

4. Shorten the array using length

5. Combine objects using ...spread

6. window.location object

7. Dynamice Object Properties

8. map() Substitute

Links

Command Palette

Comments

More from this blog

1. Number<>String

2. Swap using destructuring

3. Remove duplicates from an Array

4. Shorten the array using length

5. Combine objects using ...spread

6. window.location object

7. Dynamice Object Properties

8. map() Substitute

Links