5. Destructuring | ES6 | Assignment
Download as PPTX, PDF0 likes374 views
The document provides an overview of ES6 destructuring in JavaScript, explaining its syntax for both objects and arrays. It covers various aspects such as default values, ignoring variables, and using destructuring with function responses and rest parameters. Additionally, it touches on computed property names within destructuring expressions.
![Destructuring by Declaration
Syntax
[ var_1, var_2 ] = [ val_1, val_2 ]
Example
[ a, b ] = [ 10, 20 ];
console.log( a ); console.log( b );](https://image.slidesharecdn.com/destructuring-170902135235/85/5-Destructuring-ES6-Assignment-4-320.jpg)
![Object Destructuring
Syntax
var [ var_1, var_2 ] = Object
Example
var obj = { a = 10, b = 20 };
var { a, b } = obj;
console.log( a ); console.log( b );](https://image.slidesharecdn.com/destructuring-170902135235/85/5-Destructuring-ES6-Assignment-5-320.jpg)
![Array Destructuring
Syntax
var [ var_1, var_2 ] = Array
Example
var arrayOfNames = [ ‘one’, ‘two’, ‘three’ ];
var [ a, b, c ] = arrayOfNames;
console.log( a ); console.log( b );](https://image.slidesharecdn.com/destructuring-170902135235/85/5-Destructuring-ES6-Assignment-6-320.jpg)
![Default values
Syntax
var [ var_1 = val_1, var_2 = val_2 ] = [ Array of values ]
Example
var arrayOfIds = [ 1 ];
var [ a = 5, b = 6, c = 7 ] = arrayOfIds;
console.log( a ); console.log( b ); console.log( c );](https://image.slidesharecdn.com/destructuring-170902135235/85/5-Destructuring-ES6-Assignment-7-320.jpg)
![Ignore fields
Syntax
var [ key_1, , , key_n ] = [ Array of values ]
Example
var arrayOfIds = [ 1, 2, 3 ];
var [ a, , c ] = arrayOfIds;
console.log( a ); console.log( c );](https://image.slidesharecdn.com/destructuring-170902135235/85/5-Destructuring-ES6-Assignment-8-320.jpg)
![Destructuring – Array from function response
Syntax
var [ key_1, , , key_n ] = function_name( );
Example
var arrayOfIds = function() { return [1, 2, 3 ]; };
var [ a, , c ] = arrayOfIds( );
console.log( a ); console.log( c );](https://image.slidesharecdn.com/destructuring-170902135235/85/5-Destructuring-ES6-Assignment-9-320.jpg)
![Destructuring by rest params
Syntax
var [ key_1, key_2, …rest ] = array / object
Example
var [ a, b, …rest ] = [ 10, 20, 30, 40, 50 ]; // OR
({ a, …rest } = { a : 10, b : 20, c : 30 });
console.log( a ); console.log( rest );](https://image.slidesharecdn.com/destructuring-170902135235/85/5-Destructuring-ES6-Assignment-10-320.jpg)
![Destructuring by computed params
Syntax
var [ key_1, key_2 ] = valuesObjectWithComputedParams
Example
var firstValue = 10;
var { a, b } = { a : firstValue, b : 20 }
console.log( a ); console.log( b );](https://image.slidesharecdn.com/destructuring-170902135235/85/5-Destructuring-ES6-Assignment-11-320.jpg)
5. Destructuring | ES6 | Assignment
- 1. Destructuring | ES6 JAGADEESH PATTA ( PJ )
- 2. Agenda Introduction Destructuring by Declaration Object Destructuring Array Destructuring Destructuring array as function response Default Values and Ignore Variables Destructuring by rest params Destructuring by computed property name
- 3. Agenda Destructuring is an expression. Destructuring makes it possible to unpack values from arrays, objects and variables into distinct variables.
- 4. Destructuring by Declaration Syntax [ var_1, var_2 ] = [ val_1, val_2 ] Example [ a, b ] = [ 10, 20 ]; console.log( a ); console.log( b );
- 5. Object Destructuring Syntax var [ var_1, var_2 ] = Object Example var obj = { a = 10, b = 20 }; var { a, b } = obj; console.log( a ); console.log( b );
- 6. Array Destructuring Syntax var [ var_1, var_2 ] = Array Example var arrayOfNames = [ ‘one’, ‘two’, ‘three’ ]; var [ a, b, c ] = arrayOfNames; console.log( a ); console.log( b );
- 7. Default values Syntax var [ var_1 = val_1, var_2 = val_2 ] = [ Array of values ] Example var arrayOfIds = [ 1 ]; var [ a = 5, b = 6, c = 7 ] = arrayOfIds; console.log( a ); console.log( b ); console.log( c );
- 8. Ignore fields Syntax var [ key_1, , , key_n ] = [ Array of values ] Example var arrayOfIds = [ 1, 2, 3 ]; var [ a, , c ] = arrayOfIds; console.log( a ); console.log( c );
- 9. Destructuring – Array from function response Syntax var [ key_1, , , key_n ] = function_name( ); Example var arrayOfIds = function() { return [1, 2, 3 ]; }; var [ a, , c ] = arrayOfIds( ); console.log( a ); console.log( c );
- 10. Destructuring by rest params Syntax var [ key_1, key_2, …rest ] = array / object Example var [ a, b, …rest ] = [ 10, 20, 30, 40, 50 ]; // OR ({ a, …rest } = { a : 10, b : 20, c : 30 }); console.log( a ); console.log( rest );
- 11. Destructuring by computed params Syntax var [ key_1, key_2 ] = valuesObjectWithComputedParams Example var firstValue = 10; var { a, b } = { a : firstValue, b : 20 } console.log( a ); console.log( b );
- 12. Any Q?
- 13. Thank You