Interesting JavaScript Tips

At the start, JavaScript seemed overwhelming to me with everything that it had to offer. I’ve come to learn over time that this isn’t something to worried about but rather thankful for. There are a lot of cool tricks that you can do with JavaScript and…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by John Finley

At the start, JavaScript seemed overwhelming to me with everything that it had to offer. I've come to learn over time that this isn't something to worried about but rather thankful for. There are a lot of cool tricks that you can do with JavaScript and it is exciting knowing just how much more is out there to learn. I'm going to go over some cool things you can do in JavaScript and hopefully teach you something new!

Filter Unique Values from Arrays

With the introduction of ES6, we can use the new Set object and "spread operator" to create a new array with unique values.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Ternary Operator

The ternary operator is a quick write to write quick conditional statements.

function getFee(isMember) {
  return (isMember ? '$2.00' : '$10.00');
}

console.log(getFee(true));
// expected output: "$2.00"

console.log(getFee(false));
// expected output: "$10.00"

console.log(getFee(null));
// expected output: "$10.00"

In this example isMember is the condition. If the condition is true, whatever expression is after the "?" will be returned. If the condition is false, the expression after the ":" will be returned. This syntax is relatively simple and is great for conditional rendering in programs like React.

Convert to String

To convert a number to a string quickly, we can add an empty string to the number.

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

Convert to Number

The opposite can also be quickly achieved using the addition operator.

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Random Item from Array

Although some programs make this easier with much less code, it is still cool that JavaScript can manage this.

let items = [12, 548, "a", 2, 5478, "foo", 8852, , "Doe", 2145, 119];

let randomItem = items[Math.floor(Math.random() * items.length)];

Empty out an Array

Calling the length function on an array and setting it equal to 0 will make the array empty. Similarly using a number other than 0 will truncate the array to that specific length.

let myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray will be equal to [].

let newArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
newArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

Sort Array Alphabetically

//sort alphabetically
function alphabetSort(arr)
{
  return arr.sort((a, b) => a.localeCompare(b));
}
let array = ["d", "c", "b", "a"]
console.log(alphabetSort(array)) // ["a", "b", "c", "d"]


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by John Finley


Print Share Comment Cite Upload Translate Updates
APA

John Finley | Sciencx (2022-10-06T16:03:48+00:00) Interesting JavaScript Tips. Retrieved from https://www.scien.cx/2022/10/06/interesting-javascript-tips/

MLA
" » Interesting JavaScript Tips." John Finley | Sciencx - Thursday October 6, 2022, https://www.scien.cx/2022/10/06/interesting-javascript-tips/
HARVARD
John Finley | Sciencx Thursday October 6, 2022 » Interesting JavaScript Tips., viewed ,<https://www.scien.cx/2022/10/06/interesting-javascript-tips/>
VANCOUVER
John Finley | Sciencx - » Interesting JavaScript Tips. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/06/interesting-javascript-tips/
CHICAGO
" » Interesting JavaScript Tips." John Finley | Sciencx - Accessed . https://www.scien.cx/2022/10/06/interesting-javascript-tips/
IEEE
" » Interesting JavaScript Tips." John Finley | Sciencx [Online]. Available: https://www.scien.cx/2022/10/06/interesting-javascript-tips/. [Accessed: ]
rf:citation
» Interesting JavaScript Tips | John Finley | Sciencx | https://www.scien.cx/2022/10/06/interesting-javascript-tips/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.