devtut.github.io/javascript/destructuring-assignment.html at master · devtut/devtut.github.io

History

210 lines (162 loc) · 48.9 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

<!DOCTYPE html>

<head>

<title>JavsScript - Destructuring assignment</title>

</head>

<body>

<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"> DevTut</a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">

GitHub

age: 25

};

let { name, age } = person;

// Is equivalent to

let name = person.name; // 'Bob'

let age = person.age; // 25

</code></pre></div>Destructuring and renaming: <div class="language-js extra-class"><pre class="language-js"><code>let person = {

age: 25

};

let { name: firstName } = person;

// Is equivalent to

let firstName = person.name; // 'Bob'

</code></pre></div>Destructuring with default values: <div class="language-js extra-class"><pre class="language-js"><code>let person = {

age: 25

};

let { phone = '123-456-789' } = person;

// Is equivalent to

let phone = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

</code></pre></div>Destructuring and renaming with default values <div class="language-js extra-class"><pre class="language-js"><code>let person = {

age: 25

};

let { phone: p = '123-456-789' } = person;

// Is equivalent to

let p = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

</code></pre></div><h2 id="destructuring-function-arguments"><a href="#destructuring-function-arguments" class="header-anchor">#</a> Destructuring function arguments</h2> Pull properties from an object passed into a function. This pattern simulates named parameters instead of relying on argument position. <div class="language-js extra-class"><pre class="language-js"><code>let user = {

age: 33,

profession: 'Pilot'

}

function greeting ({name, profession}) {

console.log(`Hello, ${name} the ${profession}`)

}

greeting(user)

</code></pre></div>This also works for arrays: <div class="language-js extra-class"><pre class="language-js"><code>let parts = ["Hello", "World!"];

function greeting([first, second]) {

console.log(`${first} ${second}`);

}

</code></pre></div><h2 id="nested-destructuring"><a href="#nested-destructuring" class="header-anchor">#</a> Nested Destructuring</h2> We are not limited to destructuring an object/array, we can destructure a nested object/array. Nested Object Destructuring <div class="language-js extra-class"><pre class="language-js"><code>var obj = {

a: {

c: 1,

d: 3

},

b: 2

};

var {

a: {

c: x,

d: y

},

b: z

} = obj;

console.log(x, y, z); // 1,3,2

</code></pre></div>Nested Array Destructuring <div class="language-js extra-class"><pre class="language-js"><code>var arr = [1, 2, [3, 4], 5];

var [a, , [b, c], d] = arr;

console.log(a, b, c, d); // 1 3 4 5

</code></pre></div>Destructuring is not just limited to a single pattern, we can have arrays in it, with n-levels of nesting. Similarly we can destructure arrays with objects and vice-versa. Arrays Within Object <div class="language-js extra-class"><pre class="language-js"><code>var obj = {

a: 1,

b: [2, 3]

};

var {

a: x1,

b: [x2, x3]

} = obj;

console.log(x1, x2, x3); // 1 2 3

</code></pre></div>Objects Within Arrays <div class="language-js extra-class"><pre class="language-js"><code>var arr = [1, 2 , {a : 3}, 4];

var [x1, x2 , {a : x3}, x4] = arr;

console.log(x1, x2, x3, x4);

</code></pre></div><h2 id="destructuring-arrays"><a href="#destructuring-arrays" class="header-anchor">#</a> Destructuring Arrays</h2> <div class="language-js extra-class"><pre class="language-js"><code>const myArr = ['one', 'two', 'three']

const [ a, b, c ] = myArr

// a = 'one', b = 'two, c = 'three'

</code></pre></div>We can set default value in destructuring array, see the example of <a href="http://stackoverflow.com/documentation/javascript/616/destructuring-assignment/12051/default-value-while-destructuring" target="_blank" rel="noopener noreferrer">Default Value While Destructuring<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> (opens new window)</a>. With destructuring array, we can swap the values of 2 variables easily: <div class="language-js extra-class"><pre class="language-js"><code>var a = 1;

var b = 3;

[a, b] = [b, a];

// a = 3, b = 1

</code></pre></div>We can specify empty slots to skip unneeded values: <div class="language-js extra-class"><pre class="language-js"><code>[a, , b] = [1, 2, 3] // a = 1, b = 3

</code></pre></div><h2 id="renaming-variables-while-destructuring"><a href="#renaming-variables-while-destructuring" class="header-anchor">#</a> Renaming Variables While Destructuring</h2> Destructuring allows us to refer to one key in an object, but declare it as a variable with a different name. The syntax looks like the key-value syntax for a normal JavaScript object. <div class="language-js extra-class"><pre class="language-js"><code>let user = {

id: 10,

email: '[email protected]',

};

let {user: userName, id: userId} = user;

console.log(userName) // John Smith

console.log(userId) // 10

</code></pre></div><h2 id="destructuring-inside-variables"><a href="#destructuring-inside-variables" class="header-anchor">#</a> Destructuring inside variables</h2> Aside from destructuring objects into function arguments, you can use them inside variable declarations as follows: <div class="language-js extra-class"><pre class="language-js"><code>const person = {

age: 45,

location: 'Paris, France',

};

let { name, age, location } = person;

console.log('I am ' + name + ', aged ' + age + ' and living in ' + location + '.');

// -> "I am John Doe aged 45 and living in Paris, France."

</code></pre></div>As you can see, three new variables were created: <code>name</code>, <code>age</code> and <code>location</code> and their values were grabbed from the object <code>person</code> if they matched key names. <h2 id="default-value-while-destructuring"><a href="#default-value-while-destructuring" class="header-anchor">#</a> Default Value While Destructuring</h2> We often encounter a situation where a property we're trying to extract doesn't exist in the object/array, resulting in a <code>TypeError</code> (while destructuring nested objects) or being set to <code>undefined</code>. While destructuring we can set a default value, which it will fallback to, in case of it not being found in the object. <div class="language-js extra-class"><pre class="language-js"><code>var obj = {a : 1};

var {a : x , b : x1 = 10} = obj;

console.log(x, x1); // 1, 10

var arr = [];

var [a = 5, b = 10, c] = arr;

console.log(a, b, c); // 5, 10, undefined

</code></pre></div><h2 id="using-rest-parameters-to-create-an-arguments-array"><a href="#using-rest-parameters-to-create-an-arguments-array" class="header-anchor">#</a> Using rest parameters to create an arguments array</h2> If you ever need an array that consists of extra arguments that you may or may not expect to have, apart from the ones you specifically declared, you can use the array rest parameter inside the arguments declaration as follows: Example 1, optional arguments into an array: <div class="language-js extra-class"><pre class="language-js"><code>function printArgs(arg1, arg2, ...theRest) {

console.log(arg1, arg2, theRest);

}

printArgs(1, 2, 'optional', 4, 5);

// -> "1, 2, ['optional', 4, 5]"

</code></pre></div>Example 2, all arguments are an array now: <div class="language-js extra-class"><pre class="language-js"><code>function printArgs(...myArguments) {

console.log(myArguments, Array.isArray(myArguments));

}

// -> "[1, 2, 'Arg #3'] true"

</code></pre></div>The console printed true because <code>myArguments</code> is an Array, also, the <code>...myArguments</code> inside the parameters arguments declaration converts a list of values obtained by the function (parameters) separated by commas into a fully functional array (and not an Array-like object like the native arguments object). <h4 id="syntax"><a href="#syntax" class="header-anchor">#</a> Syntax</h4> <ul><li>let [x, y] = [1, 2]</li> <li>let [first, ...rest] = [1, 2, 3, 4]</li> <li>let [one, , three] = [1, 2, 3]</li> <li>let [val='default value'] = []</li> <li>let {a, b} = {a: x, b: y}</li> <li>let {a: {c}} = {a: {c: 'nested'}, b: y}</li> <li>let {b='default value'} = {a: 0}</li></ul> <h4 id="remarks"><a href="#remarks" class="header-anchor">#</a> Remarks</h4> Destructuring is new in the ECMAScript 6 (A.K.A ES2015) specification and <a href="http://kangax.github.io/compat-table/es6/#test-destructuring" target="_blank" rel="noopener noreferrer">browser support<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> (opens new window)</a> may be limited. The following table gives an overview of the earliest version of browsers that supported >75% of the specification. <table><thead><tr><th>Chrome</th> <th>Edge</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th></tr></thead> <tbody><tr><td>49</td> <td>13</td> <td>45</td> <td>x</td> <td>36</td> <td>x</td></tr></tbody></table> (Last Updated - 2016/08/18)</div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/devtut/generate/edit/master/docs/javascript/destructuring-assignment.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> (opens new window)</div> </footer> <div class="page-nav">

←

Variable coercion/conversion

</a> <a href="/javascript/websockets.html">

WebSockets

</a>

→

</div> </main></div><div class="global-ui"></div></div>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

destructuring-assignment.html

Latest commit

History

destructuring-assignment.html

File metadata and controls