DEV Community

Cover image for Interesting JavaScript Tips
John Finley
John Finley

Posted on • Edited on

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

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

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

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

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

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

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

Top comments (1)

Collapse
 
geochronology profile image
Chris Perry

Very neat! Learned a few tricks -- the array.length = 4 one is cool.