Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

265
Views
Why can we omit a return statement in this usage of the method map()

I am currently going over the WebRTC tutorial on their docs when I noticed that they use forEach after their usage of map(). In order to use forEach and expect a value instead of undefined array, map() would have needed to return an array, which I don't see how it can, because it doesn't return anything.

function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

The code will not work since the map returns nothing.

Here is an alternative method

function updateCameraList(cameras) {
  document.getElementById('availableCameras').innerHTML = cameras
  .map(({label, deviceId}) => `<option value="${deviceId}">${label}</option>`)
  .join(""); 
}

I learned today that we now can use label instead of text

https://jsfiddle.net/mplungjan/osyLzqk2/

Here is a safer version since there is a tiny possibility for XSS

function updateCameraList(cameras) {
  const sel = document.getElementById('availableCameras')
  cameras.forEach(({label, deviceId}) => {
    const option = new Option(label,deviceId); 
    sel.add(option)
  })
}

And here is a non working attempt of XSS - at least it does nothing in Chrome

const cameras = [{ deviceId : `xss"></option></select><img src="x" onerror="alert(1)" />`  , label:"bla" }]

    function updateCameraList(cameras) { 
      const xssString = cameras
      .map(({label, deviceId}) => `<option value="${deviceId}">${label}</option>`)
      .join("")
      console.log(xssString)
      document.getElementById('availableCameras').innerHTML = xssString; 
    }


updateCameraList(cameras)
<select id="availableCameras"></select>

about 4 years ago · Juan Pablo Isaza Report

0

The code is clearly missing a line. The code should be pushing undefined into an array and that would be appended to the select.

function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
        return cameraOption;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

Now why would we need to loop twice, it is a bit of a waste of time. So I would just loop once.

function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.forEach(camera => {
      const cameraOption = document.createElement('option');
      cameraOption.label = camera.label;
      cameraOption.value = camera.deviceId;
      listElement.add(cameraOption));
    });
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!