Categories
JavaScript

Introduction to JavaScript Event Handlers

Any websites with dynamic functionality need to deal with users interacting with them. This is the pages have controls that users can use. To let users use those controls, the pages have to be able to handle the actions done by the users to the controls. These are example of events in JavaScript. Events also include other activities done by the browser like page loading.

With the HTML DOM, JavaScript can get the elements from there and handle events. Some events are divided into groups to what elements they’re applied to. Other events apply to all elements other than the body and frameset elements.

The list of events that are supported by all HTML elements are below:

  • abort, triggered when file load is aborted
  • change, triggered when value has changed
  • click, triggered when mouse is clicked or screen is tapped
  • dbclick, triggered when mouse is clicked twice
  • input , trigger when input value in an input or textarea element is changed
  • keydown, triggered when key is down
  • keyup, trigger when key is released after being pressed
  • mousedown, triggered when mouse button is down
  • mouseenter, triggered when mouse button is released
  • mouseleave, triggered when mouse leaves over an element
  • mousemove, triggered when mouse moves over an element
  • mouseout, triggered when mouse moves off an element
  • mouseover, triggered when mouse hovers over an element
  • mouseup, triggered when mouse button is released
  • mousewheel, triggered when mouse wheel is rotated
  • onreset , triggered when a form is reset
  • select, triggered when text is selected
  • submit, triggered when form is submitted
  • drag, triggered when element is being dragged
  • dragend, triggered when element is dragged
  • dragenter, triggered when dragged element enters the drop target
  • dragstart, triggered when element starts dragging
  • dragleave, triggered when dragged element leaves a valid drop target
  • dragover, triggered when element or text selection is dragged over a valid drop target
  • drop, triggered when element is dropped on a valid drop target

Below some HTML audio and video events:

  • pause, triggered when playback of media has started
  • play, triggered when playback has begun
  • playing, triggered when media is playing
  • seeking, triggered when media is being seeked
  • seeked, triggered when media is done seeking

Events supported by every element except the body and frameset elements are below:

  • blur, triggered when element loses focus
  • error, triggered when file failed to load
  • focus, triggered when element is in focus
  • load, triggered when a file and attached files are loading
  • resize, triggered when document is resized
  • scroll, triggered when element is scrolled

Events supported by the window object is below:

  • afterprint, triggered when print preview window has closed or document has started printing
  • beforeprint, triggered when print preview window is opened or document is going to print
  • beforeunload, triggered when the document is unloaded
  • hashchange, triggered when the part of the URL with the pound sign (#) is changed
  • pagehide, triggered when browser leaves a page in browser history
  • pageshow, triggered when browser goes to a page
  • popstate, triggered when session history item changes
  • unload, triggered when document and included files are being unloaded

There are many more events that can be handled by browsers. They are listed at https://developer.mozilla.org/en-US/docs/Web/Events.

Event Handling

When the browser’s JavaScript code is responding to those events, it’s called event handling. There are a few ways to handle events in JavaScript.

Inline Event Handlers

We can add event handlers straight to an element’s code. We can write code in HTML element’s attributes to handle code. For example, if we want to handle the event when a button is clicked we can put the event handling code in the onclick attribute of the button element, like so:

<button onclick='alert('Button clicked')>Click me</button>

It’s likely than we want to prevent the default action from happening, like navigating to a new page or triggering submit when a button is clicked. To prevent these default actions from happening, we can put return false at the end of the script. We can do following to prevent navigation to a new page if we handle the onclick event in an a tag:

<a onclick='alert('Clicked'); return false;'>Click me</a>

Handling Events in Script Tag

Inline event handlers aren’t good because you’re mixing dynamic code in HTML, which is supposed to only care about organizing pages into meaningful sections. Also, if you have complex code, then it’s very hard to put all the code in the attribute. We should attach event handlers to elements by getting them in dedicated code and then putting the code in the event handler’s callback function to handle the events.

For example, if we have code that increases and decrease the counter when you press different buttons, we can write the code as follows.

We make a new folder, then in index.html , we put:

<html>  
  <head>  
    <title>Counting App</title>  
  </head> 
  <body>  
    <h1>Click the button to count.</h1>  
    <p>Current Number: <span id="currentCount">0</span></p>  
    <button id="increaseButton">Increase</button>  
    <button id="decreaseButton">Decrease</button>  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js , we put:

const handleIncrease = () => {  
  const currentCount = document.getElementById("currentCount");  
  const increaseButton = document.getElementById("increaseButton");  
  increaseButton.onclick = () => {  
    currentCount.innerHTML++;  
  };  
};

const handleDecrease = () => {  
  const currentCount = document.getElementById("currentCount");  
  const decreaseButton = document.getElementById("decreaseButton");  
  decreaseButton.onclick = () => {  
    currentCount.innerHTML--;  
  };  
};

const initialize = () => {  
  handleIncrease();  
  handleDecrease();  
};

window.onload = initialize;

In script.js, we have the functions to handle the clicks of the buttons in index.html. We attached the event handlers by getting the element object by using getElementById, then we set the onclick property of the elements with their own anonymous event handler functions. If we want to assign a function reference to it, we can do it like we did to window.onload. In the handlers we get the content of the element with IDcurrentCount, and then modified the innerHTML property to change the content after we got the original content. In the last line, we assign the initialize variable to it. We do not want to call it immediately, but rather when the event actually happened, so there’s no parenthesis after the initialize. We are assigning it the reference on the function, rather than calling it immediately and returning something then assigning the result to it.

addEventListener

Another way to attach an event handler to a function is to use the addEventListener function available with the HTML element object. The addEventListener event listens to DOM events that’s trigger and runs the callback function that you pass into it when the event happens. The callback function has one argument which contains the details of the event that was triggered. With addEventListener we can reuse code since we can use the same callback function in multiple places. You can also control how the event is triggered since we have the parameter which contains the event details. It also works on non-element nodes in the DOM tree.

If we change the above example to use addEventListener we can replace what we had in script.js with:

const handleClick = e => {  
  const currentCount = document.getElementById("currentCount");  
  if (e.target.id === "increaseButton") {  
    currentCount.innerHTML++;  
  } if (e.target.id === "decreaseButton") {  
    currentCount.innerHTML--;  
  }  
};

const handleIncrease = () => {  
  const increaseButton = document.getElementById("increaseButton");  
  increaseButton.addEventListener("click", handleClick);  
};

const handleDecrease = () => {  
  const decreaseButton = document.getElementById("decreaseButton");  
  decreaseButton.addEventListener("click", handleClick);  
};

const initialize = () => {  
  handleIncrease();  
  handleDecrease();  
};

window.onload = initialize;

As we can see, we used the same handleClick function for handling clicks of button the increaseButton and the decreaseButton. We did this by checking which element is triggering the click event by using the e.target.id property, which has the ID attribute of the element. Doing different actions in the same event handler function for different elements is called event delegation. We are delegating different actions as different elements are triggered. There’s less repeated code than the first example.

The addEventListener function takes 3 arguments. The first is the string that has the event name, the second is a callback function to handle the events. The last one indicates whether a parent element is also associated with the event. It’s true if it is and false otherwise.

If there’s a parent element that’s also associated with the event, then you can propagate the event to the parent element. It’s called bubbling up an event and the event will also be triggered on the parent element if it does. There’s also the capture method, which lets the parent element’s event happen first and the child after. It’s rarely used in code so we don’t have to be too concerned about this.

An example of event bubbling up would be as follows. If we have the following in index.html :

<html>  
  <head>  
    <title>Click App</title>  
  </head> 
  <body>  
    <div id="grandparent">  
      <div id="parent">  
        <button id="child">  
          Click Me  
        </button>  
      </div>  
    </div>  
    <script src="script.js"></script>  
  </body>  
</html>

and the following in script.js :

window.onload = () => {  
  const child = document.getElementById("child");  
  const parent = document.getElementById("parent");  
  const grandparent = document.getElementById("grandparent");  
  child.addEventListener(  
    "click",  
    () => {  
      alert("Child Clicked");  
    },  
    true  
  ); 

  parent.addEventListener(  
    "click",  
    () => {  
      alert("Parent Clicked");  
    },  
    true  
  ); 

  grandparent.addEventListener(  
    "click",  
    () => {  
      alert("Grandparent Clicked");  
    },  
    true  
  );  
};

Then when the button ‘Click me’ is clicked, we should get 3 alerts, since we specified to let the click events bubble up all the way to the top element.

Stop Event Propagation

If we only want the event to happen on the one you want, then you have to stop it from propagating to the parent. If we modify script.js from the previous example to:

window.onload = () => {  
  const child = document.getElementById("child");  
  const parent = document.getElementById("parent");  
  const grandparent = document.getElementById("grandparent");  
  child.addEventListener(  
    "click",  
    e => {  
      if (e.stopPropagation) {  
        e.stopPropagation();  
      }  
      alert("Child Clicked");  
    },  
    true  
  ); 

  parent.addEventListener(  
    "click",  
    e => {  
      if (e.stopPropagation) {  
        e.stopPropagation();  
      }  
      alert("Parent Clicked");  
    },  
    true  
  ); 

  grandparent.addEventListener(  
    "click",  
    e => {  
      if (e.stopPropagation) {  
        e.stopPropagation();  
      }  
      alert("Grandparent Clicked");  
    },  
    true  
  );  
};

We should only see ‘Grandparent Clicked’ since we stopped the event from propagating with the stopPropagation function. Stopping propagation should make your code faster since bubbling and capturing takes resources.

Categories
JavaScript JavaScript Basics

Adding Inputs and Outputs to JavaScript Apps

For many web apps, inputs and outputs are important parts of the app. Many parts of most applications consist of forms. JavaScript makes it easy to add forms and handle inputs and then get the outputs. An HTML form consists of many parts. It can have text inputs, text areas, checkboxes, radio buttons, dropdowns, buttons, etc. The look of them can be adjusted with CSS, and JavaScript lets you add dynamic functionality to the form.

The form element is the HTML element that contains the controls for forms. It holds all the text inputs, radio buttons, checkboxes, text areas, etc., along with the label text for each element. It can also contains HTML elements that divide the form into sections like div , article , and section elements.

To make a simple form, we can write the following:

<html>  
  <head>  
    <title>Form</title>  
  </head>  
  <body>  
    <form action="save.php" name="nameForm" method="post">  
      <label for="firstName">First Name: </label>  
      <input type="text" name="firstName" id="firstName" /><br />  
      <label for="lastName">Last Name: </label>  
      <input type="text" name="lastName" id="lastName" /><br />  
      <input type="submit" value="Submit" />  
    </form>  
  </body>  
</html>

In the example above, we have the action attribute in the form tag to tell the browser what to do with the form when the submit action is triggered. It can be sent to the server-side directly, or it can be manipulated on the client-side first before sending it to the server via Ajax. The name attribute is the name that the programmer assigns to the form. It’s a handy reference for accessing it in our JavaScript code. The method attribute is used when we send the form data to the server directly and it’s used to specify the HTTP method used to send the data to the server.

Other attributes that form elements can have include:

  • accept-charset: specifies the character set to use when sending the data to the server. It’s useful if your form inputs have multilingual content.
  • autocomplete: specifies whether the form should use browser’s autocomplete
  • enctype: indicates the type of content that’s sent to the server. If the data sent to the server is all text, then it should be text/html. If the form has file inputs, then it should be multipart/form-data. The default value is application/x-www-form-urlencoded .
  • novalidate: a boolean value that specifies whether we want to use browser’s form validation for form inputs
  • target: specifies whether we want the server’s response should be displayed after the form is submitted. The default setting is to open the response in the same browser window (value is _self ). If you want the response data to be shown in a new window, then it should be set to _blank.

Label Element

The label element is used to specify the text associated with a form field. It makes it clear to the user which field is used for entering what kind of data. It has a for attribute that takes the id of the input element as the value to associate the label with the form field. You can also nest the form field in the label element to associate the form field with the input element, so you don’t have to have an id attribute in your input field.

Input Element

Almost all forms have an input element. It’s used for entering text. Input elements have the type attribute which is usually set to text as the value. Other possible values include number , email , password , etc. The full list of types are listed below. Inputs also can have a value attribute which lets us set the value entered into the form field. It’s handy if you want to preset the value of the form field. The name attribute is also an important one since it lets us get the input by name and get the value from it.

Below is the full list of possible inputs that we can set in the type attribute:

  • button — a clickable button
  • checkbox — checkbox
  • color — color picker
  • date — date control
  • datetime — control to let us enter date and time (year, month, day, hour, minute, second, and a fraction of a second in UTC)
  • datetime-local — control to let us enter date and time (year, month, day, hour, minute, second, and a fraction of a second in local time)
  • email — email address
  • file — file upload
  • hidden — hidden input
  • image — submit button that has an image instead of text
  • month — month and year picker
  • number — input that only takes numbers
  • password — password field
  • radio — radio button
  • range — input that takes a range of numbers
  • reset — reset button
  • search — input that takes a search string
  • submit — submit button
  • tel — phone number input
  • text — a single line of text input. This is the default choice.
  • time — time input without taking into account the time zone
  • url — URL input
  • week — week and year input without taking into account the time zone

Select Element

The select element is a drop-down that lets users select from one or more choices in the drop-down list. We can also have default choices with the selected attribute and group the drop-down options with optgroup.

A simple example would be:

<select name='color'>  
  <option color='white'>White</option>  
  <option color='yellow'>Yellow</option>  
  <option color='black'>Black</option>  
</select>

If we want to group items together we can write:

<select name='car'>  
  <optgroup label="American Cars">  
    <option value="ford">Ford</option>  
    <option value="gm">GM</option>  
  </optgroup>  
  <optgroup label="Japanese Cars">  
    <option value="toyota">Toyota</option>  
    <option value="mazda">Mazda</option>  
  </optgroup>  
</select>

An option can have a selected attribute to make a choice a preset choice:

<select name='color'>  
  <option color='white' selected>White</option>  
  <option color='yellow'>Yellow</option>  
  <option color='black'>Black</option>  
</select>

Textarea

A textarea element is a multline text input field:

<textarea name='recipe' rows='10' cols='50'></textarea>

Button

We can use the button element to create our submit button instead of an input with type attribute set to submit . We can write:

<button type='submit'>Submit</button>

which is the same as:

<input type='submit value='Submit' >

The Form Object

The form object is an HTML DOM object that represents the form element that you defined in HTML. We can manipulate the form object to get the input and set different options to our liking, to change the behavior of the form. With the form object, we get full access to all parts of the form.

A form object has the following properties:

  • acceptCharset — get or set a list of character sets supported by the server
  • action — get or set the action attribute of the form
  • autocomplete — get or set whether to turn on or off autocomplete attribute of the form
  • encoding — set the enctype attribute of the form, or the way data is encoding when sending to the server
  • enctype — set the enctype attribute of the form, or the way data is encoding when sending to the server
  • length — get the number of controls in a form
  • method — get or set the HTTP method used to submit the form data
  • name — get or set the name attribute of the form
  • noValidate — get or set the novalidate attribute of the form, or whether validation can be skipped by the browser
  • target — indicate the place to show the response data after submitting a form

Autocomplete Attribute

The autocomplete attribute in a form tells the browser whether to use its autocomplete feature to let users enter data by getting existing input data that was saved from previous data entries. We can set it to form the whole form or just single inputs.

Getting Form and Input Attributes

We can get a form’s attribute like getting the attributes of any other element. So we can use getElementById , getElementsByTagName , querySelector , querySelectorAll , or getElementsByClassName to get what we want.

For example, we can use document.querySelector('form') to get the first element with the form tag, which is a convenient way of getting forms. If we have more than one form element in one page, then we can get it by using document.querySelector('form')[0] to get the first one, document.querySelector('form')[1] to get the second one, etc.

Also, there is the document.forms property, which we can use to access a form if the form has a name attribute. If it has a name attribute, then we can pass it in as the key. For example, if there’s a form with name attribute set to nameForm , then we can write document.forms.nameForm or document.forms['nameForm'] to get the form.

A form object has a methods, reset() and submit() . The reset method clears the input values and reset all validation previously done to the form. It’s the same as having a input with type reset in the form, which also clears the form’s inputs, like the following:

<input type='reset' value='Clear form'>

The submit method submits the form data to the place you want depending on the action, method and target attributes. It’s the same as what an input element with type submit does, like the following:

<input type='submit' value='Submit'>

We have the example below for making a form that displays an alert of the inputted values after the Submit button is clicked. In index.html, we add our form by adding the following:

<html>  
  <head>  
    <title>Form</title>  
  </head>  
  <body>  
    <form action="" name="nameForm" method="post">  
      <label for="firstName">First Name: </label>  
      <input type="text" name="firstName" id="firstName" /><br />  
      <label for="lastName">Last Name: </label>  
      <input type="text" name="lastName" id="lastName" /><br />  
      <input type="submit" value="Submit" />  
    </form>  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js , we add:

window.onload = () => {  
  const nameForm = document.forms.nameForm;  
  nameForm.method = "post";  
  nameForm.target = "_blank";  
  nameForm.action = "";  
  nameForm.addEventListener("submit", e => {  
    e.preventDefault();  
    const firstName = document.getElementById("firstName");  
    const lastName = document.getElementById("lastName");  
    alert(`Your name is ${firstName.value} ${lastName.value}`);  
  });  
};

We use the document.forms property to get the form with name attribute set to nameForm in the script. Then we set the method , target , and action properties. We do not want to submit to a server immediately, so in the handler function that we pass into the addEventListener function, we add e.preventDefault() to prevent the submit action. Then we get the values of the firstName and lastName field and display an alert from it.

Other ways to get input fields in a form element in this example is to use nameForm.firstName instead of document.getElementById(“firstName”), or set an ID for the form and then get the form element by ID then access the form field with the given name as a property of the form object. So if we have:

<html>  
  <head>  
    <title>Form</title>  
  </head>  
  <body>  
    <form action="" name="nameForm" id="nameForm" method="post">  
      <label for="firstName">First Name: </label>  
      <input type="text" name="firstName" id="firstName" /><br />  
      <label for="lastName">Last Name: </label>  
      <input type="text" name="lastName" id="lastName" /><br />  
      <input type="submit" value="Submit" />  
    </form>  
    <script src="script.js"></script>  
  </body>  
</html>

in index.html , then in script.js , we can write:

document.getElementById("nameForm").firstName

to get the first name field instead of what we have above.

Setting Form Values

We can set form values with the value property of an input element. We can access the form elements like we did before, and set the value attribute of a form element. For example, if we have index.html with the following code:

<html>  
  <head>  
    <title>Form</title>  
  </head>  
  <body>  
    <form action="" name="nameForm" id="nameForm" method="post">  
      <label for="firstName">First Name: </label>  
      <input type="text" name="firstName" id="firstName" /><br />  
      <label for="lastName">Last Name: </label>  
      <input type="text" name="lastName" id="lastName" /><br />  
      <input type="submit" value="Submit" />  
    </form>  
    <script src="script.js"></script>  
  </body>  
</html>

and script.js with:

window.onload = () => {  
  const nameForm = document.forms.nameForm;  
  nameForm.method = "post";  
  nameForm.target = "_blank";  
  nameForm.action = "";  
  const firstName = document.getElementById("firstName");  
  const lastName = document.getElementById("lastName");  
  firstName.value = "John";  
  lastName.value = "Smith"; nameForm.addEventListener("submit", e => {  
    e.preventDefault();  
    alert(`Your name is ${firstName.value} ${lastName.value}`);  
  });  
};

Then we set the default value of firstName and lastName fields by setting the value property of both field objects when the page is loaded.

Form Validation

Most forms need to be validated for valid data before submitting the form data to ensure that we don’t get bad data. With JavaScript, we can use regular expressions to validate the content of each input to ensure that they’re entered in the correct format. We can extend the examples above to include form validation. HTML5 also provides attributes to validate form data in HTML instead of JavaScript. However, if you want to customize your validation, then JavaScript makes this possible.

To validate forms with JavaScript, we can do the following. In index.html, we put:

<html>  
  <head>  
    <title>Form</title>  
  </head>  
  <body>  
    <form action="" name="nameForm" id="nameForm" method="post">  
      <label for="firstName">First Name: </label>  
      <input type="text" name="firstName" id="firstName" /><br />  
      <label for="lastName">Last Name: </label>  
      <input type="text" name="lastName" id="lastName" /><br />  
      <label for="email">Email: </label>  
      <input type="text" name="email" id="email" /><br />  
      <input type="submit" value="Submit" />  
    </form>  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js , we add:

window.onload = () => {  
  const nameForm = document.forms.nameForm;  
  nameForm.method = "post";  
  nameForm.target = "\_blank";  
  nameForm.action = "";  
  nameForm.addEventListener("submit", e => {  
    e.preventDefault();  
    const firstName = document.getElementById("firstName");  
    const lastName = document.getElementById("lastName");  
    const email = document.getElementById("email");  
    let errors = [];  
    if (!firstName.value) {  
      errors.push("First name is required.");  
    } 

    if (!lastName.value) {  
      errors.push("Last name is required.");  
    } 

    if (!email.value) {  
      errors.push("Email is required.");  
    } 

    if (!/\[^@\]+@\[^\.\]+\..+/.test(email.value)) {  
      errors.push("Email is invalid.");  
    } 

    if (errors.length > 0) {  
      alert(errors.join(" "));  
      return;  
    }  
    alert(  
      `Your name is ${firstName.value} ${lastName.value}. Your email is ${email.value}`  
    );  
  });  
};

In the example above, we check each field’s value to see if they’re filled in. Then for the email field, we check if the field is filled in and that it matches the email format with a regular expression check. To learn more about regular expressions, you can go to https://regexone.com/. The regular expression we have basically checks if we have characters before the at sign, then the at sign, then check if we have anything separated by a dot after the at sign.

If there are errors, we display an alert box with all the errors. Otherwise, we show what’s entered.

If we want to use HTML for validation, we can do the following instead. In index.html, we put:

<html>  
  <head>  
    <title>Form</title>  
  </head>  
  <body>  
    <form action="" name="nameForm" id="nameForm" method="post">  
      <label for="firstName">First Name: </label>  
      <input type="text" name="firstName" id="firstName" required /><br />  
      <label for="lastName">Last Name: </label>  
      <input type="text" name="lastName" id="lastName" required /><br />  
      <label for="email">Email: </label>  
      <input type="text" name="email" id="email" /><br />  
      <input type="submit" value="Submit" />  
    </form>  
    <script src="script.js"></script>  
  </body>  
</html>

Then in script.js , we put:

window.onload = () => {  
  const nameForm = document.forms.nameForm;  
  nameForm.method = "post";  
  nameForm.target = "_blank";  
  nameForm.action = "";  
  nameForm.addEventListener("submit", e => {  
    e.preventDefault();  
    const firstName = document.getElementById("firstName");  
    const lastName = document.getElementById("lastName");  
    const email = document.getElementById("email");  
    alert(  
      `Your name is ${firstName.value} ${lastName.value}. Your email is ${email.value}`  
    );  
  });  
};

We’ve put validation attributes in the input elements like required and pattern in the HTML form instead of using JavaScript to validate the data. They serve the same purpose since the browser prevents you from submitting the form if there’re invalid values in any input, so the submit event is only triggered if everything’s valid. The only difference is that the validation messages are controlled by the browser so there’s less choice in controlling how it’s displayed.

Now that we know how to add forms to a web page with form validation, we can make many features of a web app. For many web apps, inputs and outputs are important parts of the app. Many parts of most applications consist of forms.

Categories
JavaScript JavaScript Basics

Introducing the JavaScript Destructuring Assignment Syntax

The destructuring assignment syntax is a JavaScript syntax feature that was introduced in the 2015 version of JavaScript and lets us unpack a list of values of an array or key-value pairs of an object into individual variables.

It’s very handy for retrieving entries from arrays or objects and setting them as values of individual variables. This is very handy because the alternative was to get an entry from an array from an index and then setting them as values of variables for arrays.

For objects, we have the value from the key and set them as values of variables.


Array Destructuring

We can use the destructuring assignment syntax easily in our code. For arrays, we can write:

const [a,b] = [1,2];

Then, we get 1 as the value of a and 2 as the value of b because the destructing syntax unpacked the entries of an array into individual variables.

Note that the number of items in the array does not have to equal the number of variables. For example, we can write:

const [a,b] = [1,2,3]

Then a is still 1 and b is still 2 because the syntax only sets the variables that are listed in the same order as the numbers appeared in the array. So, 1 is set to a, 2 is set to b, and 3 is ignored.

We can also use the rest operator to get the remaining variables that weren’t set to variables. For example, we can have:

const [a,b,...rest] = [1,2,3,4,5,6]

Then, rest would be [3,4,5,6] while we have a set to 1 and b set to 2. This lets us get the remaining array entries into a variable without setting them all to their own variables.

We can use the destructuring assignment syntax for objects as well. For example, we can write:

const {a,b} = {a:1, b:2};

In the code above, a is set to 1 and b is set to 2 as the key is matched to the name of the variable when assigning the values to variables.

Because we have a as the key and 1 as the corresponding value, the variable a is set to 1 as the key name matches the variable name. It is the same with b. We have a key named b with a value of 2, because we have the variable named b, we can set b to 2.

We can declare variables before assigning them with values with the destructuring assignment syntax. For example, we can write:

let a, b;  
([a, b] = [1, 2]);

Then, we have a set to 1 and b set to 2 because a and b that were declared are the same ones that are assigned.

As long as the variable names are the same, the JavaScript interpreter is smart enough to do the assignment regardless of whether they’re declared beforehand or not.

We need the parentheses on the line so that the assignment will be interpreted as one line and not individual blocks with an equal sign in between, because two blocks on the same line aren’t valid syntax.

This is only required when the variable declarations happen before the destructuring assignment is made.

We can also set default values for destructuring assignments. For instance:

let a,b;  
([a=1,b=2] = [0])

This is valid syntax. In the code above, we get that a is 0 because we assigned 0 to it. b is 2 because we didn’t assign anything to it.

The destructuring assignment syntax can also be used for swapping variables, so we can write:

let a = 1;  
let b = 2;  
([a,b] = [b,a])

b would become 1 and a would become 2 after the last line of the code above. We no longer have to assign things to temporary variables to swap them, and we also don’t have to add or subtract things to assign variables.

The destructuring assignment syntax also works for assigning returned values of a function to variables.

So, if a function returns an array or object, we can assign them to variables with the destructuring assignment syntax. For example, if we have:

const fn = () =>[1,2]

We can write:

const [a,b] = fn();

To get 1 as a and 2 as b with the destructuring syntax because the returned array is assigned to variables with the syntax.

Similarly, for objects, we can write:

const fn = () => {a:1, b:2}  
const {a,b} = fn();

We can ignore variables in the middle by skipping the variable name in the middle of the destructuring assignment. For example, we can write:

const fn = () => [1,2,3];  
let [a,,b] = fn();

We get a with the value of 1 and b with the value of 3, skipping the middle value.

It’s important to know that if we use the rest operator with a destructuring assignment syntax, we cannot have a trailing comma on the left side, so this:

let [a, ...b,] = [1, 2, 3];

Will result in a SyntaxError.


Object Destructuring

We can use the destructuring assignment syntax for objects as well. For example, we can write:

const {a,b} = {a:1, b:2};

In the code above, a is set to 1 and b is set to 2 because the key is matched to the name of the variable when assigning the values to variables.

As we have a as the key and 1 as the corresponding value, the variable a is set to 1 because the key name matches the variable name. It is the same with b. We have a key named b with a value of 2, because we have the variable named b, we can set b to 2.

We can also assign it to different variable names, so we don’t have to set the key-value entries to different variable names. We just have to add the name of the variable we want on the value part of the object on the left side, which is the one we want to assign it to, like the following:

const {a: foo, b: bar} = {a:1, b:2};

In the code above, we assigned the value of the key a to foo and the value of the key b to the variable bar. We still need a and b as the keys on the left side so they can be matched to the same key names on the right side for the destructuring assignment.

However, a and b aren’t actually defined as variables. It’s just used to match the key-value pairs on the right side so that they can be set to variables foo and bar.

Destructuring assignments with objects can also have default values. For example, we can write:

let {a = 1, b = 2} = {a: 3};

Then, we have a set to 3 and b set to 2 which is the default value as we didn’t have a key-value pair with a key named b on the right side.

Default values can also be provided if we use the destructuring syntax to assign values to variables that are named differently from the keys of the originating object. So, we can write:

const {a: foo=3, b: bar=4} = {a:1};

In this case, foo would be 1 and bar would be 4 because we assigned the left bar with the default value, but assigned foo to 1 with the destructuring assignment.

The destructuring assignment also works with nested objects. For example, if we have the following object:

let user = {  
  id: 42,  
  userName: 'dsmith',  
  name: {  
    firstName: 'Dave',  
    lastName: 'Smith'  
  }  
};

We can write:

let {userName, name: { firstName }} = user;

To set displayName to 'dsmith' , and firstName to 'Dave'. The lookup is done for the whole object and, so, if the structure of the left object is the same as the right object and the keys exist, the destructuring assignment syntax will work.

We can also use the syntax for unpacking values into individual variables while passing objects in as arguments.

To do this, we put what we want to assign the values, which is the stuff that’s on the left side of the destructuring assignment expression, as the parameter of the function.

So, if we want to destructure user into its parts as variables, we can write a function like the following:

const who = ({userName, name: { firstName }}) => `${userName}'s first name is ${firstName};who(user)

So, we get userName and firstName, which will be set as 'dsmith' and 'Dave' respectively as we applied the destructuring assignment syntax to the argument of the who function, which is the user object we defined before.

Likewise, we can set default parameters as with destructuring in parameters like we did with regular assignment expressions. So, we can write:

const who = ({userName = 'djones', name: { firstName }}) => `${userName}'s first name is ${firstName}`

If we have user set to:

let user = {  
  id: 42,  
  name: {  
    firstName: 'Dave',  
    lastName: 'Smith'  
  }  
};

Then we when call who(user), we get 'djones's first name is Dave' as we set 'djones' as the default value for userName.

We can use the destructuring assignment syntax when we are iterating through iterable objects. For example, we can write:

const people = [{  
    firstName: 'Dave',  
    lastName: 'Smith'  
  },  
  {  
    firstName: 'Jane',  
    lastName: 'Smith'  
  },  
  {  
    firstName: 'Don',  
    lastName: 'Smith'  
  },  
]

for (let {  firstName, lastName } of people) {  
  console.log(firstName, lastName);  
}

We get:

Dave Smith  
Jane Smith  
Don Smith

Logged, as the destructuring syntax works in for...of loops because the variable after the let is the entry of the array.

Computed object properties can also be on the left side of the destructuring assignment expressions. So, we can have something like:

let key = 'a';  
let {[key]: bar} = {a: 1};

This will set bar to 1 because [key] is set to a and then the JavaScript interpreter can match the keys on both sides and do the destructuring assignment to the variable bar.

This also means that the key on the left side does not have to be a valid property or variable name. However, the variable name after the colon on the left side has to be a valid property or variable name.

For instance, we can write:

const obj = { 'abc 123': 1};  
const { 'abc 123': abc123 } = obj;  
  
console.log(abc123); // 1

As long as the key name is the same on both sides, we can have any key in a string to do a destructuring assignment to variables.

Another thing to note is that the destructuring assignment is smart enough to look for the keys on the same level of the prototype chain, so if we have:

var obj = {a: 1};  
obj.__proto__.b = 2;  
const {a, b} = obj;

We still get a set to 1 and b set to 2 as the JavaScript interpreter looks for b in the prototype inheritance chain and sets the values given by the key b.

As we can see, the destructuring assignment is a very powerful syntax. It saves lots of time writing code to assign array entries to variables or object values into their own variables.

It also lets us swap variables without temporary variables and makes the code much simpler and less confusing. It also works through inheritance so the property does not have to be in the object itself, but works even if the property is in its prototypes.

const fn = () => {a:1, b:2}  
const {a,b} = fn();
Categories
JavaScript Vue

Create Web Components with Vue.js

Component-based architecture is the main architecture for front end development today. The World Wide Web Consortium (W3C) has caught up to the present by creating the web components API. It lets developers build custom elements that can be embedded in web pages. The elements can be reused and nested anywhere, allowing for code reuse in any pages or apps.

The custom elements are nested in the shadow DOM, which is rendered separately from the main DOM of a document. This means that they are completely isolated from other parts of the page or app, eliminating the chance of conflict with other parts,

There are also template and slot elements that aren’t rendered on the page, allowing you to reused the things inside in any place.

To create web components without using any framework, you have to register your element by calling CustomElementRegistry.define() and pass in the name of the element you want to define. Then you have to attach the shadow DOM of your custom element by calling Element.attachShawdow() so that your element will be displayed on your page.

This doesn’t include writing the code that you want for your custom elements, which will involve manipulating the shadow DOM of your element. It is going to be frustrating and error-prone if you want to build a complex element.

Vue.js abstracts away the tough parts by letting you build your code into a web component. You write code by importing and including the components in your Vue components instead of globally, and then you can run commands to build your code into one or more web components and test it.

We build the code into a web component with Vue CLI by running:

npm run build -- --target wc --inline-vue --name custom-element-name

The --inline-vue flag includes a copy of view in the built code, --target wc builds the code into a web component, and --name is the name of your element.

In this article, we will build a weather widget web component that displays the weather from the OpenWeatherMap API. We will add a search to let users look up the current weather and forecast from the API.

We will use Vue.js to build the web component. To begin building it, we start with creating the project with Vue CLI. Run npx @vue/cli create weather-widget to create the project. In the wizard, select Babel, SCSS and Vuex.

The OpenWeatherMap API is available at https://openweathermap.org/api. You can register for an API key here. Once you got an API key, create an .env file in the root folder and add VUE_APP_APIKEY as the key and the API key as the value.

Next, we install some packages that we need for building the web component. We need Axios for making HTTP requests, BootstrapVue for styling, and Vee-Validate for form validation. To install them, we run npm i axios bootstrap-vue vee-validate to install them.

With all the packages installed we can start writing our code. Create CurrentWeather.vue in the components folder and add:

<template>  
  <div>  
    <br />  
    <b-list-group v-if="weather.main">  
      <b-list-group-item>Current Temparature: {{weather.main.temp - 273.15}} C</b-list-group-item>  
      <b-list-group-item>High: {{weather.main.temp_max - 273.15}} C</b-list-group-item>  
      <b-list-group-item>Low: {{weather.main.temp_min - 273.15}} C</b-list-group-item>  
      <b-list-group-item>Pressure: {{weather.main.pressure }}mb</b-list-group-item>  
      <b-list-group-item>Humidity: {{weather.main.humidity }}%</b-list-group-item>  
    </b-list-group>  
  </div>  
</template>

<script>  
import { requestsMixin } from "@/mixins/requestsMixin";  
import store from "../store";  
import { BListGroup, BListGroupItem } from "bootstrap-vue";  
import 'bootstrap/dist/css/bootstrap.css'  
import 'bootstrap-vue/dist/bootstrap-vue.css'

export default {  
  store,  
  name: "CurrentWeather",  
  mounted() {},  
  mixins: [requestsMixin],  
  components: {  
    BListGroup,  
    BListGroupItem  
  },  
  computed: {  
    keyword() {  
      return this.$store.state.keyword;  
    }  
  },  
  data() {  
    return {  
      weather: {}  
    };  
  },  
  watch: {  
    async keyword(val) {  
      const response = await this.searchWeather(val);  
      this.weather = response.data;  
    }  
  }  
};  
</script>

<style scoped>  
p {  
  font-size: 20px;  
}  
</style>

This component displays the current weather from the OpenWeatherMap API is the keyword from the Vuex store is updated. We will create the Vuex store later. The this.searchWeather function is from the requestsMixin, which is a Vue mixin that we will create. The computed block gets the keyword from the store via this.$store.state.keyword and return the latest value.

Note that we’re importing all the BootstrapVue components individually here. This is because we aren’t building an app. main.js in our project will not be run, so we cannot register components globally by calling Vue.use. Also, we have to import the store here, so that we have access to the Vuex store in the component.

Next, create Forecast.vue in the same folder and add:

<template>  
  <div>  
    <br />  
    <b-list-group v-for="(l, i) of forecast.list" :key="i">  
      <b-list-group-item>  
        <b>Date: {{l.dt_txt}}</b>  
      </b-list-group-item>  
      <b-list-group-item>Temperature: {{l.main.temp - 273.15}} C</b-list-group-item>  
      <b-list-group-item>High: {{l.main.temp_max - 273.15}} C</b-list-group-item>  
      <b-list-group-item>Low: {{l.main.temp_min }}mb</b-list-group-item>  
      <b-list-group-item>Pressure: {{l.main.pressure }}mb</b-list-group-item>  
    </b-list-group>  
  </div>  
</template>

<script>  
import { requestsMixin } from "@/mixins/requestsMixin";  
import store from "../store";  
import { BListGroup, BListGroupItem } from "bootstrap-vue";  
import 'bootstrap/dist/css/bootstrap.css'  
import 'bootstrap-vue/dist/bootstrap-vue.css'

export default {  
  store,  
  name: "Forecast",  
  mixins: [requestsMixin],  
  components: {  
    BListGroup,  
    BListGroupItem  
  },  
  computed: {  
    keyword() {  
      return this.$store.state.keyword;  
    }  
  },  
  data() {  
    return {  
      forecast: []  
    };  
  },  
  watch: {  
    async keyword(val) {  
      const response = await this.searchForecast(val);  
      this.forecast = response.data;  
    }  
  }  
};  
</script>

<style scoped>  
p {  
  font-size: 20px;  
}  
</style>

It’s very similar to CurrentWeather.vue. The only difference is that we are getting the current weather instead of the weather forecast.

Next, we create a mixins folder in the src folder and add:

const APIURL = "http://api.openweathermap.org";  
const axios = require("axios");
export const requestsMixin = {  
  methods: {  
    searchWeather(loc) {  
      return axios.get(  
        `${APIURL}/data/2.5/weather?q=${loc}&appid=${process.env.VUE_APP_APIKEY}`  
      );  
    },

    searchForecast(loc) {  
      return axios.get(  
        `${APIURL}/data/2.5/forecast?q=${loc}&appid=${process.env.VUE_APP_APIKEY}`  
      );  
    }  
  }  
};

These functions are for getting the current weather and the forecast respectively from the OpenWeatherMap API. process.env.VUE_APP_APIKEY is obtained from our .env file that we created earlier.

Next in App.vue , we replace the existing code with:

<template>  
  <div>  
    <b-navbar toggleable="lg" type="dark" variant="info">  
      <b-navbar-brand href="#">Weather App</b-navbar-brand>  
    </b-navbar>  
    <div class="page">  
      <ValidationObserver ref="observer" v-slot="{ invalid }">  
        <b-form @submit.prevent="onSubmit" novalidate>  
          <b-form-group label="Keyword" label-for="keyword">  
            <ValidationProvider name="keyword" rules="required" v-slot="{ errors }">  
              <b-form-input  
                :state="errors.length == 0"  
                v-model="form.keyword"  
                type="text"  
                required  
                placeholder="Keyword"  
                name="keyword"  
              ></b-form-input>  
              <b-form-invalid-feedback :state="errors.length == 0">Keyword is required</b-form-invalid-feedback>  
            </ValidationProvider>  
          </b-form-group><b-button type="submit" variant="primary">Search</b-button>  
        </b-form>  
      </ValidationObserver><br />
      <b-tabs>  
        <b-tab title="Current Weather">  
          <CurrentWeather />  
        </b-tab>  
        <b-tab title="Forecast">  
          <Forecast />  
        </b-tab>  
      </b-tabs>  
    </div>  
  </div>  
</template>

<script>  
import CurrentWeather from "@/components/CurrentWeather.vue";  
import Forecast from "@/components/Forecast.vue";  
import store from "./store";  
import {  
  BTabs,  
  BTab,  
  BButton,  
  BForm,  
  BFormGroup,  
  BFormInvalidFeedback,  
  BNavbar,  
  BNavbarBrand,  
  BFormInput  
} from "bootstrap-vue";  
import { ValidationProvider, extend, ValidationObserver } from "vee-validate";  
import { required } from "vee-validate/dist/rules";  
extend("required", required);

export default {  
  store,  
  name: "App",  
  components: {  
    CurrentWeather,  
    Forecast,  
    ValidationProvider,  
    ValidationObserver,  
    BTabs,  
    BTab,  
    BButton,  
    BForm,  
    BFormGroup,  
    BFormInvalidFeedback,  
    BNavbar,  
    BNavbarBrand,  
    BFormInput  
  },  
  data() {  
    return {  
      form: {}  
    };  
  },  
  methods: {  
    async onSubmit() {  
      const isValid = await this.$refs.observer.validate();  
      if (!isValid) {  
        return;  
      }  
      localStorage.setItem("keyword", this.form.keyword);  
      this.$store.commit("setKeyword", this.form.keyword);  
    }  
  },  
  beforeMount() {  
    this.form = { keyword: localStorage.getItem("keyword") || "" };  
  },  
  mounted() {  
    this.$store.commit("setKeyword", this.form.keyword);  
  }  
};  
</script>

<style lang="scss">  
@import "./../node_modules/bootstrap/dist/css/bootstrap.css";  
@import "./../node_modules/bootstrap-vue/dist/bootstrap-vue.css";  
.page {  
  padding: 20px;  
}  
</style>

We add the BootstrapVue b-navbar here to add a top bar to show the extension’s name. Below that, we added the form for searching the weather info. Form validation is done by wrapping the form in the ValidationObserver component and wrapping the input in the ValidationProvider component. We provide the rule for validation in the rules prop of ValidationProvider. The rules will be added in main.js later.

The error messages are displayed in the b-form-invalid-feedback component. We get the errors from the scoped slot in ValidationProvider. It’s where we get the errors object from.

When the user submits the number, the onSubmit function is called. This is where the ValidationObserver becomes useful as it provides us with the this.$refs.observer.validate() function to check for form validity.

If isValid resolves to true , then we set the keyword in local storage, and also in the Vuex store by running this.$store.commit(“setKeyword”, this.form.keyword); .

In the beforeMount hook, we set the keyword so that it will be populated when the extension first loads if a keyword was set in local storage. In the mounted hook, we set the keyword in the Vuex store so that the tabs will get the keyword to trigger the search for the weather data.

Like in the previous components, we import and register all the components and the Vuex store in this component, so that we can use the BootstrapVue components here. We also called Vee-Validate’s extend function so that we can use its required form validation rule for checking the input.

In style section of this file, we import the BootstrapVue styles, so that they can be accessed in this and the child components. We also add the page class so that we can add some padding to the page.

Then in store.js , we replace the existing code with:

import Vue from "vue";  
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({  
  state: {  
    keyword: ""  
  },  
  mutations: {  
    setKeyword(state, payload) {  
      state.keyword = payload;  
    }  
  },  
  actions: {}  
});

to add the Vuex store that we referenced in the components. We have the keyword state for storing the search keyword in the store, and the setKeyword mutation function so that we can set the keyword in our components.

Finally, in package.json , we add 2 scripts to the scripts section of the file:

"wc-build": "npm run build -- --target wc --inline-vue --name weather-widget","wc-test": "cd dist && live-server --port=8080 --entry-file=./demo.html"

The wc-build script builds our code into a web component as we described before, and the wc-test runs a local web server so that we can see what the web component looks like when it’s included in a web page. We use the live-server NPM package for serving the file. The --entry-file option specifies that we server demo.html as the home page, which we get when we run npm run wc-build .

Categories
JavaScript JavaScript Basics

Introducing the JavaScript Spread Operator

The spread syntax allows us to break up a collection of objects, like arrays, into individual arguments or insert them into a different iterable object, like an array.

With the 2018 version of JavaScript, we can also spread properties of an object into another object, with keys and values spread into another object. The spread syntax is denoted by three periods before your object.

For example, we can write:

...arr

The spread syntax works by copying the values of the original array and then inserting them into another array, or putting them in the order they appeared in the array as the list of arguments in a function in the same order.

When the spread operator is used with objects, the key-value pairs appear in the same order they appeared in the original object.

We can use the spread syntax to spread an array of values as arguments of a function. For example, we can write:

const arr = [1,2,3];  
const add = (a,b,c) => a+b+c;  
add(...arr) // returns 6

In the example above, the spread operator spreads the variables into the argument in the same order they appeared in the array. So 1 is passed into a, 2 is passed into b, and 3 is passed into c.


Spread Arrays

For arrays, we can also use the spread syntax to insert one array’s values into another array. For example, we can write:

const arr = [1,2,3];  
const arr2 = ['a','b','c',...arr,'d']; // arr2 is ['a','b','c',1,2,3,'d']

As we can see, the spread operator inserts the values exactly where we spread the array, in the same order they appeared in the array.

So, 1 is inserted between a and d, then 2 is inserted between 1 and d, and 3 is inserted between 2 and d. The result is that we copied an array’s values into another array with the spread operator in the same order they appeared in, and exactly where you put the array spread expression.

Without the spread operator, we have to write loops to insert them into the position we want. We slice the array into two and then call concat on the three parts, then assign the result to the array you inserted the stuff into. It sounds painful just thinking about it.

Note that with the spread operator, only the first level of the array is spread. If we have nested or multi-dimensional arrays, it’s going to copy the references as-is. It will not do anything to nested items.

With ES2018, we can do the same thing with objects, like the following:

const obj = {a: 1, b: 2};  
let objClone = { ...obj }; // objClone is {a: 1, b: 2}

This creates a shallow copy of the object. It means that only the first level of the object is copied.

For nested objects, it’s going to copy the references as-is. It will not do anything to nested items. The top-level keys and values of the object will be copied to objClone.

So, if we have nested objects, we get:

const obj = {  
  a: 1,  
  b: {  
    c: 2  
  }  
};  
let objClone = {  
  ...obj  
};  
console.log(objClone) 

In objClone, we get:

{  
  a: 1,  
  b: {  
    c: 2  
  }  
}

So, nested objects will reference the same ones as the original.

The spread operator can be used as an alternative to other functions that existed before.

For example, we can use it to replace the apply function for passing in arguments to a function. The apply function takes an array of arguments for the function it’s called on as the second argument.

With the apply function, we call it as follows:

const arr = [1,2,3]  
const sum = (a,b,c)=> a+b+c;  
sum.apply(null, arr); // 6

With the spread syntax, we can write the following instead:

const arr = [1,2,3]  
const sum = (a,b,c)=> a+b+c;  
sum(...arr)

The spread operator also work with strings. We apply the spread operator to strings, we get an array with the individual characters of the string.

For example, if we write:

const str = 'abcd';  
const chars = [...str];

We get [“a”, “b”, “c”, “d”] as the value of chars.


Using Spread Operator Multiple Times

We can use the spread syntax multiple times in one place. For example, we can have the following:

const arr = [1,2,3];  
const arr2 = [4,5];  
const sum = (a,b,c,d,e,f)=> a+b+c+d+e+f;  
sum(...arr, ...arr2, 6)

As usual, the spread syntax will spread the array of numbers into arguments of the array in the order as they appeared in.

So, sum(…arr, …arr2, 6) is the same as sum(1,2,3,4,5,6).

1, 2, and 3 are the first three arguments, which are the entries of arr in the same order, and 4 and 5 are the fourth and fifth arguments, which are spread after 1, 2, and 3.

Then, in the end, we have 6 as the last argument. We can also see the spread syntax work with the normal function call syntax.


Use It in Constructors

We can use the spread operator as arguments for object constructors. For example, if we want to create a new Date object, we can write:

let dateFields = [2001, 0, 1];  
let date = new Date(...dateFields);

The items in the dateFields array are passed into the constructors as arguments in the order they appeared in. The alternative way to write that would be much longer, something like:

let dateFields = [2001, 0, 1];  
const year = dateFields[0];  
const month = dateFields[1];  
const day = dateFields[2];  
let date = new Date(year, month, day);

Copying Items

The spread syntax can also be used to make a shallow copy of an array or an object as it works by creating copies of the top-level elements of an array or key-value pairs of an object and then inserting them into the place you used the spread operator with.

For copying arrays, we can write:

const arr = [1, 2, 3];  
const arr2 = [...arr, 4, 5];

The above example, arr2, is [1,2,3,4,5], while arr1 is still [1,2,3].

arr1 is not referenced by arr2 because the spread operator actually makes a copy of the array and then inserts the values. Note that this doesn’t work with multi-dimensional arrays as it only makes copies of the top-level elements.

We can apply the spread syntax multiple times in one array or object. An example for array would be:

let arr = [1, 2, 3];  
let arr2 = [4, 5];  
let arr3 = [...arr2, ...arr];

In the above example, we get [4,5,1,2,3]. arr1 and arr2 are unaffected as a copy of the values from arr1 and arr2 are inserted into arr3.


Spread Operator and Objects

With ES2018, the spread operator works with object literals. Then, key-value pairs of an object can be inserted into another object with the spread operator.

If there are two objects with the same key that the spread operator is applied to in the same object, the one that’s inserted later will overwrite the one that’s inserted earlier.

For example, if we have the following:

let obj1 = {foo: 'bar', a: 1};  
let obj2 = {foo: 'baz', b: 1};  
let obj3 = {...obj1, ...obj2 }

Then we get {foo: “baz”, a: 1, b: 1} as the value of obj3 because obj1 is spread before obj2.

They both have foo as a key in the object. First, foo: 'bar' is inserted by the spread operator to obj3. Then, foo: 'baz' overwrites the value of foo after obj2 is merged in, as it has the same key foo but inserted later.

This is great for merging objects as we don’t have to loop through the keys and put in the values, which is much more than one line of code.

One thing to note is that we can’t mix the spread operator between regular objects and iterable objects. For example, we will get TypeError if we write the following:

let obj = {foo: 'bar'};  
let array = [...obj];

Conclusion

As we can see, the spread syntax is a great convenience feature of JavaScript. It lets us combine different arrays into one.

Also, it lets us pass arrays into a function as arguments with just one line of code. With ES2018, we can also use the same operator to spread key-value pairs into other objects to populate one object’s key-value pairs into another object.

The spread operator works by copying the top-level items and populating them in the place you use the spread operator, so we can also use it to make shallow copies of arrays and objects.