How to break from for loop in javascript?

Question

I know this question has been asked many times but strangely the answers in other posts did not solve my problem:

handleFile(files) {
 var f = files[0] 
 var dataSet = JSZip.loadAsync(f).then(function (zip) {
 for (var filename in zip.files) {
 const one_dicom_file = zip.files[filename]
 console.log('--------- one_dicom_file ----------', one_dicom_file)
 try {
 one_dicom_file.async("arraybuffer").then(function (ArrayBuffer) {
 var byteArray = new Uint8Array(ArrayBuffer);
 var dataSet = dicomParser.parseDicom(byteArray);
 console.log(filename, 'parsed dataSet: ', dataSet);
 return dataSet
 // EDIT: OP is Missing close curly bracket here!!
 } catch (error) {
 console.error(error);
 }
 console.log('check 1')
 }
 }, function (e) {
 console.log(e)
 });
}

I'm iterating through the contents of a zip file, and when the first dicom file (a format for medical image) is encountered, I analyze it with a library call dicomParser.parseDicom().

Upon successful execution of this function, I want to quit the iteration immediately. The other dicom files can be ignored for performance purpose.

The above code will, however, print console.log(filename, 'parsed dataSet: ', dataSet); for every single dicom file. The line return dataSet does nothing at all to the for loop. Also, check 1 is printed for every dicom file.

I also tried replacing return dataSet with break, in which case an error Unsyntactic break will be thrown.

Other answers have claimed that both return and break should stop a for loop, but they don't.

I'm very new to javascript so sorry if this is silly question. I'm used to python, and javascript syntax is so over-complicated...

• Jaromanda X: you have neither break nor return in the for loop ... the return is NOT in the for loop, it's in a function called inside the for loop, so, does nothing to the for loop - your indentation hides this fact
• Jaromanda X: to be honest though, the code you posted isn't syntactically correct anyway - the try is outside the .then(function(ArrayBuffer){ callback, and the catch is inside it - please post code that is syntactically correct
• Rodrigo Rodrigues: I edited the indentation to make it clear that OP is missing a close bracket
• Kid_Learning_C: ahh silly me....
• Bergi: You should use async/await instead of .then() to be able to break out of the loop (and to do the iteration sequentially in the first place)

Answer 1

The callback function you are passing with .then(function (ArrayBuffer) { } will be executed asynchronously.

That means, your program will continue the flow and not wait for its execution and result. Because of that, you cannot use the result of this function as a condition to break from the loop. Program will flow to the next loop regardless of what happened inside that function.

In order to decide on breaking the loop or not based on the result of the function, you must block the program flow until the function is finished.

I suggest you to take a look at the await keyword and functionality. There are tons of tutorials over the web about it, like here or here.

---

I do not know the details of the functions you are calling, but it might look something like this:

async function handleFile(files) {
 var f = files[0] 
 var zip = await JSZip.loadAsync(f)
 for (var filename in zip.files) {
 const one_dicom_file = zip.files[filename]
 console.log('--------- one_dicom_file ----------', one_dicom_file)
 try {
 var arrayBuffer = await one_dicom_file.async("arraybuffer")
 var byteArray = new Uint8Array(arrayBuffer)
 var dataSet = dicomParser.parseDicom(byteArray)
 console.log(filename, 'parsed dataSet: ', dataSet)
 return dataSet
 } catch (error) {
 console.error(error)
 }
 }
}

Just be aware that you can only await inside a function that is async, so you need to convert your handleFile to an async function.

Then, whenever you call this function, if you'r going to await it, the respective callsite function must also be async. And so on, and so on... like a virus, or a matryoska doll.