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);



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



Links


Print Share Comment Cite Upload Translate
APA
Abdullah Furkan Özbek | Sciencx (2024-03-29T13:25:10+00:00) » 8 Javascript Tips That You Should Know. Retrieved from https://www.scien.cx/2021/08/31/8-javascript-tips-that-you-should-know/.
MLA
" » 8 Javascript Tips That You Should Know." Abdullah Furkan Özbek | Sciencx - Tuesday August 31, 2021, https://www.scien.cx/2021/08/31/8-javascript-tips-that-you-should-know/
HARVARD
Abdullah Furkan Özbek | Sciencx Tuesday August 31, 2021 » 8 Javascript Tips That You Should Know., viewed 2024-03-29T13:25:10+00:00,<https://www.scien.cx/2021/08/31/8-javascript-tips-that-you-should-know/>
VANCOUVER
Abdullah Furkan Özbek | Sciencx - » 8 Javascript Tips That You Should Know. [Internet]. [Accessed 2024-03-29T13:25:10+00:00]. Available from: https://www.scien.cx/2021/08/31/8-javascript-tips-that-you-should-know/
CHICAGO
" » 8 Javascript Tips That You Should Know." Abdullah Furkan Özbek | Sciencx - Accessed 2024-03-29T13:25:10+00:00. https://www.scien.cx/2021/08/31/8-javascript-tips-that-you-should-know/
IEEE
" » 8 Javascript Tips That You Should Know." Abdullah Furkan Özbek | Sciencx [Online]. Available: https://www.scien.cx/2021/08/31/8-javascript-tips-that-you-should-know/. [Accessed: 2024-03-29T13:25:10+00:00]
rf:citation
» 8 Javascript Tips That You Should Know | Abdullah Furkan Özbek | Sciencx | https://www.scien.cx/2021/08/31/8-javascript-tips-that-you-should-know/ | 2024-03-29T13:25:10+00:00
https://github.com/addpipe/simple-recorderjs-demo