Categories
JavaScript Answers

How to Join or Combine Two JavaScript Arrays by Concatenating Them into One Array?

Sometimes, we want to combine 2 JavaScript arrays by concatenating them into one array.

In this article, we’ll look at how to join or combine 2 JavaScript arrays by concatenating them into one array.

Use the Array.prototype.concat Method

One way to join 2 Javascript arrays by concatenating them into one array is to use the JavaScript array’s concat method.

For instance, we can write:

const a = ['a', 'b', 'c'];
const b = ['d', 'e', 'f'];
const c = a.concat(b);
console.log(c)

We call a.concat(b) to add the entries of b after the entries of a and return the new array with all the entries.

Therefore, c is:

["a", "b", "c", "d", "e", "f"]

Use the Spread Operator

Another way to combine 2 arrays by joining them together is to use the spread operator.

For example, we can write:

const a = ['a', 'b', 'c'];
const b = ['d', 'e', 'f'];
const c = [...a, ...b]
console.log(c)

We spread the entries of a and b into a new array to form the c array.

They’ll be spread in the same order that they’re listed.

Therefore, c is now:

["a", "b", "c", "d", "e", "f"]

Conclusion

We can use the JavaScript array’s concat method or the spread operator to combine 2 JavaScript arrays by joining them together.

Categories
JavaScript Answers

How to Remove an Element from a JavaScript Array with Lodash?

Sometimes, we want to remove an element from a list with Lodash.

In this article, we’ll look at how to remove an element from a JavaScript array with Lodash.

Use the remove Method

One way to remove an element from a JavaScript array is to use the Lodash remove method.

For instance, we can write:

const obj = {
  "objectiveDetailId": 285,
  "objectiveId": 29,
  "number": 1,
  "text": "x",
  "subTopics": [{
    "subTopicId": 1,
    "number": 1
  }, {
    "subTopicId": 2,
    "number": 32
  }, {
    "subTopicId": 3,
    "number": 22
  }]
}
const stToDelete = 2;
_.remove(obj.subTopics, {
  subTopicId: stToDelete
});
console.log(obj)

to remove the obj.subTopics entry with the subTopicId set to 2.

To do this, we call the remove method with the obj.subTopics property as the first argument.

And we pass in an object with the entry with the subTopicId we want to delete from obj.subTopics .

The removal operation will be done in place.

And the removed item will be returned.

Therefore, obj is now:

{
  "objectiveDetailId": 285,
  "objectiveId": 29,
  "number": 1,
  "text": "x",
  "subTopics": [
    {
      "subTopicId": 1,
      "number": 1
    },
    {
      "subTopicId": 3,
      "number": 22
    }
  ]
}

Instead of passing in an object as the 2nd argument of remove , we can also pass in a predicate function with the condition of the items we want to remove.

To do this, we write:

const obj = {
  "objectiveDetailId": 285,
  "objectiveId": 29,
  "number": 1,
  "text": "x",
  "subTopics": [{
    "subTopicId": 1,
    "number": 1
  }, {
    "subTopicId": 2,
    "number": 32
  }, {
    "subTopicId": 3,
    "number": 22
  }]
}
const stToDelete = 2;
_.remove(obj.subTopics, (currentObject) => {
  return currentObject.subTopicId === stToDelete;
});
console.log(obj)

We call remove with the same first argument.

But the 2nd argument is replaced with a predicate function that returns the condition of the object we want to remove.

And so e get the same result as in the previous example.

Conclusion

We can remove an element from an array in an object with Lodash with the remove method.

Categories
JavaScript Answers

How to Set a CSS Property of an HTML Element with JavaScript?

Sometimes, we want to set a CSS property of an HTML element with JavaScript.

In this article, we’ll look at how to set a CSS property of an HTML element with JavaScript.

Set a CSS Property of an HTML Element with JavaScript by Setting the style Property

We can set a CSS property of an HTML element with JavaScript by setting a property of the style property.

For instance, we can write:

const element = document.createElement('div');  
element.textContent = 'hello world'  
element.style.backgroundColor = "lightgreen";  
document.body.append(element)

We call document.createElement with 'div' to create a div element.

Then we set the textContent to a string to add some text into the div.

Next, we set the style.backgroundColor property to set its background color.

Any CSS properties with multiple words are in camel case instead of kebab case in CSS.

Then finally, we call document.body.append to append the div into the body element.

Set a CSS Property of an HTML Element with JavaScript by Setting the cssText Property

Another way to set the style of an HTML element with JavaScript is to set the style.cssText property to a string with some CSS styles in it.

For instance, we can write:

const element = document.createElement('div');  
element.textContent = 'hello world'  
element.style.cssText = 'background-color: lightgreen';  
document.body.append(element)

We set element.style.cssText to a string with some CSS styles.

The string just has regular CSS code to set the styles.

Therefore, we get the same result as we had in the previous example.

Conclusion

We can set the CSS styles of an HTML element by setting the style properties within the style property or the style.cssText property to set the CSS text.

Categories
JavaScript Answers

How to Get the First and Last Day of the Current Month with Moment.js?

Sometimes, we want to get the first and last day of the current month within our JavaScript app.

We can do this easily with moment.js.

In this article, we’ll look at how to get the first and last day of the current month with Moment.js.

Use the Moment.js startOf and endOf Methods

We can use the startOf method to get the first day of the current month.

And we can use the endOf method to get the last day of the current month.

For instance, we can write:

const startOfMonth = moment().clone().startOf('month').format('YYYY-MM-DD hh:mm');  
const endOfMonth = moment().clone().endOf('month').format('YYYY-MM-DD hh:mm');  
console.log(startOfMonth)  
console.log(endOfMonth)

We call moment to create a Moment object with the current date and time.

Then we call clone to clone that object.

Then we call startOf with 'month' to return the first day of the current month.

And then we call format to format the date into the human-readable YYYY-MM-DD format.

Likewise, we do the same with the endOf method to get the last day of the current month.

If the current month is April, 2021, then we should get:

'2021-04-01 12:00'

for startOfMonth .

And endOfMonth should be:

'2021-04-30 11:59'

startOf and endOf also accepts 'year' , 'week' , and 'day' as arguments to get the first and last year, week, or day of the given date and time.

Conclusion

We can get the first and last day of the current month easily with the Moment.js’s startOf and endOf methods respectively.

Categories
JavaScript Answers

How to Remove the First and the Last Character of a JavaScript String?

Sometimes, we want to remove the first and last characters of a JavaScript string.

In this article, we’ll look at how to remove the first and last characters of a JavaScript string.

Use the String.prototype.substring Method

We can use the JavaScript string’s substring method to return a string that’s between the start and end indexes.

The start index is included but the end index isn’t.

To use it, we write:

const str = "/installers/";  
const result = str.substring(1, str.length - 1);  
console.log(result);

to call substring with the start and end index respectively.

str.length — 1 is the end index because we only want to return the string up to the 2nd last character.

Therefore result is 'installers' .

Use the String.prototype.slice Method

We can also use the JavaScript string’s slice method to return a string between the start and end indexes.

For instance, we can write:

const str = "/installers/";  
const result = str.slice(1, -1);  
console.log(result);

to call slice with the start and end index of the str we want to include in result .

Index -1 is the last index of the string, and it’s not included in the returned string like substring .

Therefore, result is the same as the last example.

Conclusion

We can use the JavaScript string slice or substring method to extract a string within the given start and end indexes.

The character at the end index isn’t included in the returned string with either method.