DEV Community

Cover image for 12 Easy and Useful JavaScript Snippets for Beginners.
Ryan
Ryan

Posted on

7

12 Easy and Useful JavaScript Snippets for Beginners.

Maintaining a list of useful yet simple JavaScript code snippets can save a good amount of time. You can always revisit the list when you are working on a complex JavaScript app and don't want to spend too much of time building a logic for simple tasks. Let's have a look at some of these snippets that are easy-to-understand and can save a good amount of time.

1. Create an array of a range of numbers

const numbers = [...Array(15).keys()].map(x => x + 1);
console.log(numbers); //[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
Enter fullscreen mode Exit fullscreen mode

2. Check if the number is Even or Odd

//Even
const num = 4;
const isEven = num % 2 === 0;
console.log(isEven); //true

//Odd
const num = 9;
const isOdd = num % 2 !== 0;
console.log(isOdd); //true
Enter fullscreen mode Exit fullscreen mode

3. Get a sub-string of a string

const subStr = 'jason'.substring(1, 4);
console.log(subStr); //aso
Enter fullscreen mode Exit fullscreen mode

4. Replace a string

const replacedStr = 'king'.replace('in', 'on');
console.log(replacedStr); //kong
Enter fullscreen mode Exit fullscreen mode

5. Check if a string starts with or ends with a specific strings

//startsWith
const startsWth = 'arnold'.startsWith('ar');
console.log(startsWth); //true;

//endsWith
const endsWth = 'arnold'.endsWith('ld');
console.log(endsWth); //true;
Enter fullscreen mode Exit fullscreen mode

6. Trim and remove all empty spaces from a string

const strWithSpace = ' ryan ';
const strWithoutSpace = strWithSpace.trim();
console.log(strWithoutSpace);
Enter fullscreen mode Exit fullscreen mode

7. Get the power of a number.

//1) Using the Math.pow() method
const power = Math.pow(2, 6);
console.log(power); //64;

//2) Using the exponentiation operator
const power1 = 2**6;
console.log(power); //64;
Enter fullscreen mode Exit fullscreen mode

8. Check if an object has a specific property

const name = {
 firstName: "Shawn",
 lastName: "Ronalds",
 age: 35
};
const hasProp = 'firstName' in name;
console.log(hasProp); //true;
Enter fullscreen mode Exit fullscreen mode

9. Creating a copy of an object

const profile = {
 name: "John Davis",
 city: "London",
 age: '45',
 hobby: 'football'
}
const profileCopy = {...profile};
console.log(profileCopy); //{name: 'John Davis', city: 'London', age: '45', hobby: 'football'}
Enter fullscreen mode Exit fullscreen mode

10. Delete a property from an object

const car = {
 brand: 'Volvo',
 topSpeed: '250mph',
 color: 'red'
}
delete car.brand;
console.log(car); //{topSpeed: '250mph', color: 'red'}
Enter fullscreen mode Exit fullscreen mode

11. Remove duplicate items from an array

const arr = [1, 2, 1, 3, 4, 7, 4, 8, 9]
const removeDuplicates = [...new Set(arr)];
console.log(removeDuplicates);
Enter fullscreen mode Exit fullscreen mode

12. Merge 2 arrays or 2 objects

//1) Merging arrays
const arr1 = [1, 2];
const arr2 = [3, 4]
const mergedArr = [...arr1, ...arr2]
console.log(mergedArr); // [1, 2, 3, 4]

//2) Merging Objects
const obj1 = {name: 'Larry'};
const obj2 = {age: '30'};
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // {name: 'Larry', age: '30'}
Enter fullscreen mode Exit fullscreen mode

So, that was a short list of some of the code snippets that I feel are highly useful and yet easy to understand. Hope you find this list helpful. Have a beautiful day.

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post โ†’

Top comments (3)

Collapse
 
clarity89 profile image
Alex K. โ€ข โ€ข Edited

You can also use Array.from to create an array with a specific length:

const start = 1;
const end = 10;
const numbers = Array.from({length: end - start + 1}, (_, index) => start + index);

console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ โ€ข
// Create an array of a range of numbers (1-15)
const numbers = Array.from({length:15},(x,i)=>i+1)
const numbers = [...Array(16).keys()].slice(1)

// Even/odd
const isEven = ~num&1
const isOdd = num&1
Enter fullscreen mode Exit fullscreen mode
Collapse
 
pookie_woe profile image
ash zeit โ€ข

๐Ÿคฉ๐Ÿคฉ๐Ÿคฉthank you

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools canโ€™t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video