problems with using array.concat()

Question

problems with using array.concat()

I am attempting to reverse a stream of data using a recursive call to concatenate a return array.

The instructions for this problem are as follows: The incoming data needs to be reversed in segments that are 8 bits long.

This means that the order of these 8-bit segments needs to be reversed. For example:

11111111 00000000 00001111 10101010 (byte1) (byte2) (byte3) (byte4) should become:

10101010 00001111 00000000 11111111 (byte4) (byte3) (byte2) (byte1)

The total number of bits will always be a multiple of 8.

I have been experimenting with different combinations of approaches...

function dataReverse(data) {
  //split the incoming array into values consisting of 8 numbers each.
  var result = [];
  
  function shuffler(array){
    let input = array;
    
    if(input.length === 0){
      return result;
    } else {
      let cache = input.splice(-8,8);
      result.concat(cache);
      return shuffler(input);
    }
    return result;
  }
  
  var reversed = shuffler(data);

  return reversed;
}

console.log(dataReverse([1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0]));

The expected behavior is to reverse through the input array by concatenating a result array with 8 values at a time starting from the end, without changing the order of the numbers.

My implementation above is returning an empty array. What mistake have I made?

javascript arrays ecmascript-6

Answer 1

Answer №1

It is recommended to use the join method instead of the concat method.

function reverseData(data) {
  //split incoming array into arrays with 8 numbers each
  var result = [];
  
  //recursive function for shuffling the array
  function shuffleArray(array) {
    let input = array;
    
    //base case
    if (input.length === 0) {
      return result;
    } else {
      
      //using join to concatenate 8 values at a time
      let cache = input.splice(-8, 8);
      result.push(cache.join(''));
      return shuffleArray(input);
    }
    
    return result;
  }

  var reversedData = shuffleArray(data);
  
  //reverse iterate through array and concatenate to new array
  //return result
  return reversedData;

}

console.log(reverseData([1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0]));

Answer 2

It is recommended to use the join method instead of the concat method.

function reverseData(data) {
  //split incoming array into arrays with 8 numbers each
  var result = [];
  
  //recursive function for shuffling the array
  function shuffleArray(array) {
    let input = array;
    
    //base case
    if (input.length === 0) {
      return result;
    } else {
      
      //using join to concatenate 8 values at a time
      let cache = input.splice(-8, 8);
      result.push(cache.join(''));
      return shuffleArray(input);
    }
    
    return result;
  }

  var reversedData = shuffleArray(data);
  
  //reverse iterate through array and concatenate to new array
  //return result
  return reversedData;

}

console.log(reverseData([1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0]));

Answer 3

Answer №2

After using concat, make sure to assign the result back to a variable

result = result.concat(cache);

If you want each byte as a string of 8 characters, you can use the join method

result = result.concat(cache.join(''));

function rearrangeData(data) {
  var result = [];
  
  function shuffler(array) {
    let input = array;
    
    if (input.length === 0) {
      return result;
    } else {
      
      let cache = input.splice(-8, 8);
      result = result.concat(cache);
      return shuffler(input);
    }
    return result;
  }

  var reversed = shuffler(data);

  return reversed;
}

console.log(rearrangeData([1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0]));

You can create groups of 8 bytes each by looping over the array, then reverse and reduce them back into a single array

let rearrangeData = (data) => {
  let count = 0
  let temp = []
  let group = data.reduce((op, inp) => {
    temp.push(inp)
    if (count === 8) {
      op.push(temp)
      temp = []
    }
    return op
  }, [])
  if (temp.length) group.push(temp)
  return group.reverse().reduce((op,inp)=>op.concat(inp))
}

console.log(rearrangeData([1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0]));

Answer 4

After using concat, make sure to assign the result back to a variable

result = result.concat(cache);

If you want each byte as a string of 8 characters, you can use the join method

result = result.concat(cache.join(''));

function rearrangeData(data) {
  var result = [];
  
  function shuffler(array) {
    let input = array;
    
    if (input.length === 0) {
      return result;
    } else {
      
      let cache = input.splice(-8, 8);
      result = result.concat(cache);
      return shuffler(input);
    }
    return result;
  }

  var reversed = shuffler(data);

  return reversed;
}

console.log(rearrangeData([1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0]));

You can create groups of 8 bytes each by looping over the array, then reverse and reduce them back into a single array

let rearrangeData = (data) => {
  let count = 0
  let temp = []
  let group = data.reduce((op, inp) => {
    temp.push(inp)
    if (count === 8) {
      op.push(temp)
      temp = []
    }
    return op
  }, [])
  if (temp.length) group.push(temp)
  return group.reverse().reduce((op,inp)=>op.concat(inp))
}

console.log(rearrangeData([1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0]));

Answer 5

Answer №3

concat method in JavaScript returns an array - make sure to assign the result:

function customDataReverse(data) {
  //breaking down incoming array into chunks of 8 numbers each.
  
  var result = [];
  
  //recursive function for shuffling
  function shuffler(array) {
    let input = array;
    
    //base case
    if (input.length === 0) {
      return result;
    } else {
      //combine 8 values at a time with the result array
      let chunk = input.splice(-8, 8);
      result = result.concat(chunk);
      return shuffler(input);
    }
    return result;
  }

  var reversed = shuffler(data);

  //reverse iterate through array and concatenate to new return array
  
  return reversed;
}

let reversedArray = customDataReverse([1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0]);

//Code for formatting output in groups of 8
reversedArray = reversedArray.reduce((acc, curr, i) => {
  const index = Math.floor(i / 8);
  acc[index] = [].concat((acc[index] || []), curr);
  return acc;
}, []);

console.log(reversedArray.map(e => e.join("")));

.as-console-wrapper {
  max-height: 100% !important;
  top: auto;
}

(This implementation is inspired by this post on Stack Overflow).

Answer 6

concat method in JavaScript returns an array - make sure to assign the result:

function customDataReverse(data) {
  //breaking down incoming array into chunks of 8 numbers each.
  
  var result = [];
  
  //recursive function for shuffling
  function shuffler(array) {
    let input = array;
    
    //base case
    if (input.length === 0) {
      return result;
    } else {
      //combine 8 values at a time with the result array
      let chunk = input.splice(-8, 8);
      result = result.concat(chunk);
      return shuffler(input);
    }
    return result;
  }

  var reversed = shuffler(data);

  //reverse iterate through array and concatenate to new return array
  
  return reversed;
}

let reversedArray = customDataReverse([1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0]);

//Code for formatting output in groups of 8
reversedArray = reversedArray.reduce((acc, curr, i) => {
  const index = Math.floor(i / 8);
  acc[index] = [].concat((acc[index] || []), curr);
  return acc;
}, []);

console.log(reversedArray.map(e => e.join("")));

.as-console-wrapper {
  max-height: 100% !important;
  top: auto;
}

(This implementation is inspired by this post on Stack Overflow).

Answer 7

Answer №4

Divide the array into 8 sections each, then simply apply Array.reverse and Array.flat. This approach offers a functional, reusable, chain-able, and highly readable code.

Take a look at this:

let data = [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0]

// custom function to segment array by quantity
const chunkBy = (arr, by=2) => arr.reduce((r,c,i) => (i%by==0 ? r.push([c]) : r[r.length-1] = [...r[r.length-1], c], r), [])

let result = chunkBy(data, 8).reverse().flat()

console.log('in:  ', data.join(''))
console.log('out: ', result.join(''))

Here is a more presentable version of the chunkBy function:

let data = [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0]

const chunkBy = (arr, by=2) => // default chunk size is 2
  arr.reduce((acc, cur, index) => {
    if(index % by == 0)        // check for remainder using modulo operator
      acc.push([cur])          // start a new chunk if exact division
    else                       // continue adding to the current chunk
      acc[acc.length-1] = [...acc[acc.length-1], cur]
    return acc
}, [])

console.log(chunkBy(data, 8))

If you are using lodash, _.chunk provides this functionality:

let data = [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0]

let result = _(data)
  .chunk(8)
  .reverse()
  .flatten()
  .value()

console.log(result.join(''))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Answer 8

Divide the array into 8 sections each, then simply apply Array.reverse and Array.flat. This approach offers a functional, reusable, chain-able, and highly readable code.

Take a look at this:

let data = [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0]

// custom function to segment array by quantity
const chunkBy = (arr, by=2) => arr.reduce((r,c,i) => (i%by==0 ? r.push([c]) : r[r.length-1] = [...r[r.length-1], c], r), [])

let result = chunkBy(data, 8).reverse().flat()

console.log('in:  ', data.join(''))
console.log('out: ', result.join(''))

Here is a more presentable version of the chunkBy function:

let data = [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0]

const chunkBy = (arr, by=2) => // default chunk size is 2
  arr.reduce((acc, cur, index) => {
    if(index % by == 0)        // check for remainder using modulo operator
      acc.push([cur])          // start a new chunk if exact division
    else                       // continue adding to the current chunk
      acc[acc.length-1] = [...acc[acc.length-1], cur]
    return acc
}, [])

console.log(chunkBy(data, 8))

If you are using lodash, _.chunk provides this functionality:

let data = [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0]

let result = _(data)
  .chunk(8)
  .reverse()
  .flatten()
  .value()

console.log(result.join(''))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

problems with using array.concat()

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Information in a Service is reset upon refreshing the page

Easily transfer files without the need to refresh the page by utilizing the power of AJAX

Indeed, verifying parent.parent access

Using an exported function with parameters as a filtering mechanism for the material datepicker

Tabulate the number of items in an array based on the month and

Creating randomized sequences using JavaScript

What is the best way to compare dates in order to obtain the necessary results?

How to Transfer an Embedded Document to an Array within the Same Parent Document in MongoDB

cdkDropList does not function properly when used with ng-template in a dynamic component list

Is it possible to have more than one button for each item on my Shopping List App?

Getting row data from ag-grid using the angular material menu is a straightforward process

Exploring the fundamentals of JavaScript within the context of Express.JS

I have a dynamic blog site that is generated on the fly using Ajax, making the content unsearchable

Obtain the actual file path from a JSON response

What is the best way to verify if a text input has a valid email format in ReactJS?

Angular 2 - synchronizing timer for all users

Unable to Define Headers in Fetch GET Call

Is there a way to toast the values of an array retrieved from a getter within my object?

Exploring through a table using JavaScript

Using Typescript in NextJS 13 application router, implement asynchronous fetching with async/await