Replacing array item in javascript assignment expert
Answer to Question #205995 in HTML/JavaScript Web Application for PraveenReplacing Array Item Show Given an array
Sample Input 1 [1, 2, 3, "four", 5, 6] "four" 4 Sample Output 1 [ 1, 2, 3, 4, 5, 6 ] Sample Input 2 [22, 44, 88, 352, 352] 352 176 Sample Output 2 [ 22, 44, 88, 176, 352 ] Replacing array Item Given an array myArray, targetItem and a replace item write a JS program to replace the targetItem with the given replacement in myArray consists of more than one targetItem replace the first occurence. sample input1 [1,2,3,'four'5,6] 'four' 4 sample output1 [1,2,3,4,5,6] function readLine() { return inputString[currentLine++]; } function main() { let myArray = JSON.parse(readLine().replace(/'/g, '"')); let targetItem = JSON.parse(readLine().replace(/'/g, '"')); let replaceItem = JSON.parse(readLine().replace(/'/g, '"')); /* Please do not modify anything above this line */ /* Write your code here and log the output */ } The two most used data structures in JavaScript are
Although, when we pass those to a function, it may need not be an object/array as a whole. It may need individual pieces. Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we’ll see that. Array destructuringHere’s an example of how an array is destructured into variables:
Now we can work with variables instead of array members. It looks great when combined with
As you can see, the syntax is simple. There are several peculiar details though. Let’s see more examples, to better understand it. “Destructuring” does not mean “destructive”. It’s called “destructuring assignment,” because it “destructurizes” by copying items into variables. But the array itself is not modified. It’s just a shorter way to write:
Ignore elements using commas Unwanted elements of the array can also be thrown away via an extra comma:
In the code above, the second element of the array is skipped, the third one is assigned to Works with any iterable on the right-side …Actually, we can use it with any iterable, not only arrays:
That works, because internally a destructuring assignment works by iterating over
the right value. It’s a kind of syntax sugar for calling Assign to anything at the left-side We can use any “assignables” on the left side. For instance, an object property:
Looping with .entries() In the previous chapter we saw the Object.entries(obj) method. We can use it with destructuring to loop over keys-and-values of an object:
The similar code for a
Swap variables trick There’s a well-known trick for swapping values of two variables using a destructuring assignment:
Here we create a temporary array of two variables and immediately destructure it in swapped order. We can swap more than two variables this way. The rest ‘…’Usually, if the array is longer than the list at the left, the “extra” items are omitted. For example, here only two items are taken, and the rest is just ignored:
If we’d like also to gather all that follows – we can add one more parameter that gets “the rest” using three dots
The value of We can use any other variable name in place of
Default valuesIf the array is shorter than the list of variables at the left, there’ll be no errors. Absent values are considered undefined:
If we want a “default” value to replace the missing one, we can provide it using
Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided. For instance, here we use the
Please note: the Object destructuringThe destructuring assignment also works with objects. The basic syntax is:
We should have an existing
object on the right side, that we want to split into variables. The left side contains an object-like “pattern” for corresponding properties. In the simplest case, that’s a list of variable names in For instance:
Properties The order does not matter. This works too:
The pattern on the left side may be more complex and specify the mapping between properties and variables. If we want to assign a property to a variable with another name, for instance, make
The colon
shows “what : goes where”. In the example above the property For potentially missing properties we can set default values using
Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided. In the code below
We also can combine both the colon and equality:
If we have a complex object with many properties, we can extract only what we need:
The rest pattern “…”What if the object has more properties than we have variables? Can we take some and then assign the “rest” somewhere? We can use the rest pattern, just like we did with arrays. It’s not supported by some older browsers (IE, use Babel to polyfill it), but works in modern ones. It looks like this:
Gotcha if there’s no In the examples above variables were declared right in the assignment: This won’t work:
The
problem is that JavaScript treats
So here JavaScript assumes that we have a code block, that’s why there’s an error. We want destructuring instead. To show JavaScript that it’s not a code block, we can wrap the expression in parentheses
Nested destructuringIf an object or an array contain other nested objects and arrays, we can use more complex left-side patterns to extract deeper portions. In the code below
All properties of Finally, we have Note that there are no variables for Smart function parametersThere are times when a function has many parameters, most of which are optional. That’s especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, items list and so on. Here’s a bad way to write such function:
In real-life, the problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still… Another problem is how to call a function when most parameters are ok by default. Like this?
That’s ugly. And becomes unreadable when we deal with more parameters. Destructuring comes to the rescue! We can pass parameters as an object, and the function immediately destructurizes them into variables:
We can also use more complex destructuring with nested objects and colon mappings:
The full syntax is the same as for a destructuring assignment:
Then, for an object of parameters, there will be a variable Please note that such destructuring assumes that
We can fix this by making
In the code above, the whole arguments object is Summary
|