Author: John Au-Yeung

Sometimes, we want to create an array from a for loop with JavaScript.

In this article, we’ll look at how to create an array from a for loop with JavaScript.

Create Array from a for Loop with JavaScript

To create an array from a for loop with JavaScript, we can use the JavaScript array push method to append the entries into the array within the loop body.

For instance, we can write:

const yearStart = 2000;
const yearEnd = 2040;
const arr = [];

for (let i = yearStart; i < yearEnd + 1; i++) {
  arr.push(i);
}

console.log(arr)

We set the yearStart and yearEnd variables to the start and end values of the for loop.

Then we loop from yearStart to yearEnd with the for loop with:

for (let i = yearStart; i < yearEnd + 1; i++)

Then in the loop body, we call arr.push with i to push i into the arr array.

Therefore, from the console log, we see that arr is:

[2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040]

Conclusion

To create an array from a for loop with JavaScript, we can use the JavaScript array push method to append the entries into the array within the loop body.

Sometimes, we want to validate ZIP code (US postal code) with JavaScript.

In this article, we’ll look at how to validate ZIP code (US postal code) with JavaScript.

Validate ZIP Code (US Postal Code) with JavaScript

To validate ZIP code (US postal code) with JavaScript, we can use a regex that matches 5 digit numbers or 5 digit numbers with a 4 digit number separated by a dash.

For instance, we can write:

const isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/.test("90210");
console.log(isValidZip)

to match 5 digit numbers with (^\d{5}$).

And we match 5 digit numbers with a dash and 4 digit number after it with (^\d{5}-\d{4}$).

We match both by joining both patterns with |.

Then we call test with a string to check if the string matches the regex pattern.

Therefore, from the console log, we should see that isValidZip is true since it’s a 5 digit number.

Conclusion

To validate ZIP code (US postal code) with JavaScript, we can use a regex that matches 5 digit numbers or 5 digit numbers with a 4 digit number separated by a dash.

Sometimes, we may run into the ‘unexpected string concatenation’ error when we’re using ESLint to lint our JavaScript project.

In this article, we’ll look at how to fix the ‘unexpected string concatenation’ error when we’re using ESLint to lint our JavaScript project.

Fix the ESLint ‘Unexpected string concatenation’ Error

To fix the ‘unexpected string concatenation’ error when we’re using ESLint to lint our JavaScript project, we should use template literals instead of string concatenation.

For instance, we write:

const ANR = 'Animal Friend,ANR,ANP,$30'
const specialityPlates = [{
  cName: 'Environmental / Wildlife',
  oSubMenu: [{
    cName: `${ANR}`,
    cReturn: `${ANR}|27.00`
  }]
}]

to interpolate the value of the ANR variable into the template string.

Therefore, cReturn is 'Animal Friend,ANR,ANP,$30|27.00'.

Conclusion

To fix the ‘unexpected string concatenation’ error when we’re using ESLint to lint our JavaScript project, we should use template literals instead of string concatenation.

Sometimes, we want to get all li elements in an array with JavaScript.

In this article, we’ll look at how to get all li elements in an array with JavaScript.

Get All li Elements in an Array with JavaScript

To get all li elements in an array with JavaScript, we can call the getElementsByTagName method to get all the li elements.

Then we can use the spread operator to spread all the items in the node list to an array.

For instance, if we have:

<div id="navbar">
  <ul>
    <li id="navbar-One">One</li>
    <li id="navbar-Two">Two</li>
    <li id="navbar-Three">Three</li>
    <li id="navbar-Four">Four</li>
    <li id="navbar-Five">Five</li>
  </ul>
</div>

then we write:

const lis = [...document.getElementById("navbar").getElementsByTagName("li")];
console.log(lis)

to call document.getElementById("navbar") to get the div element.

Then we can select the li elements inside with .getElementsByTagName("li").

Next, we use the spread operator to spread all the returned li elements into an array an assign it to lis.

Therefore, we should see that lis is an array with the 5 li elements in the console log.

Conclusion

To get all li elements in an array with JavaScript, we can call the getElementsByTagName method to get all the li elements.

Then we can use the spread operator to spread all the items in the node list to an array.

Sometimes, we want to create a dynamic object in a loop with JavaScript.

In this article, we’ll look at how to create a dynamic object in a loop with JavaScript.

Create a Dynamic Object in a Loop with JavaScript

To create a dynamic object in a loop with JavaScript, we can use the square bracket notation to add properties to an object dynamically.

For instance, we can write:

const objects = {};

for (let x = 0; x < 5; x++) {
  objects[x] = {
    name: 'foo'
  };
}

console.log(objects)

We create an empty object and assign it to the objects variable.

Then we add a for loop that loops through some numbers.

And we use the numbers as property names with objects[x].

Then we assign objects[x] to an object with the name property set to 'foo' as its value.

As a result, we see that the value of objects is:

{
  "0": {
    "name": "foo"
  },
  "1": {
    "name": "foo"
  },
  "2": {
    "name": "foo"
  },
  "3": {
    "name": "foo"
  },
  "4": {
    "name": "foo"
  }
}

from the console log.

Conclusion

To create a dynamic object in a loop with JavaScript, we can use the square bracket notation to add properties to an object dynamically.