Destructuring assignment of variables

Hi coders, we will know about a very interesting topic destructuring assignment of variables in this reading, and I hope somehow it will help you in daily coding challenge.

The destructuring assignment of variable is a process to unpack the value from arrays, or properties from objects, into distinct variables, that looks similar to array or object literals.

Here, we will see the examples in PHP and JavaScript syntax. If you are familiar with ES6, may very well aware of destructuring. Let’s first see the JavaScript destructuring assignment.

Destructuring Assignment in JavaScript

Normal variable values assignment-

const variable = [1, 2, 3, 4, 5];
const a = variable[0];
const b = variable[1];
const c = variable[2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

The destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Without destructuring assignment, you might access the first three items in an array like this:

var arr = [10, 20, 15, 25, 50];
var a = arr[0];
var b = arr[1];
var c = arr[2];

// With destructuring assignment, the equivalent code becomes more concise and readable:

var [a, b, c] = arr;

// On console.log(a), output is 10 in both the above cases

Example for Destructuring assignment of Object-

let a, b, rest;
let obj = {name: 'John Deo', age: 30, id: 400, houseNumber: 40};
{a, b, ...rest} = obj;
console.log(a); // 'John Deo'
console.log(b); // 30
console.log(rest); // {id: 400, houseNumber: 40}

When destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern as given in the above example. Be aware that a syntax error will be thrown if a trailing comma is used on the left-hand side with a rest element:

const [a, ...b,] = [1, 2, 3];

// SyntaxError: rest element may not have a trailing comma
// Always consider using rest operator as the last element

We can also use destructuring assignment while calling a function like-

getUserProperty = ()=> {
   return [
      'John Deo',
      'demo@webkul.com',
      101
   ]
};

var [name, email, id] = getUserProperty();
console.log(name, email, id) // Output- 'John Deo', 'demo@webkul.com', 101

You can also skip the starting values in the array being destructured like-

var [,,c] = ["fish", "buzz", "buzzfish"];
console.log(c);
// "buzzfish"

Destructuring on empty object will assign undefined-

var { emptyObj } = {};
console.log(emptyObj);
// undefined

Keep in mind, while destructuring assignment there must be keyword let, const or var because while destructuring, it declare variables first then assigns the values.

Destructuring Assignment in PHP

The Destructuring Assignment in PHP like in Javascript was introduced in PHP version 7.1.0. In PHP, the destructuring is only possible for Symmetric Array , not for Object. It is an alternative of PHP function list which now can be used with shorthand array syntax([]).

Let’s take an example of list –

$user = ['Demo Webkul', 'demo@webkul.com', '101'];
list($name, $email, $id) = $user;

Using Destructuring Assignment-

[$name, $email, $id] = $user;

Destructuring in foreach loop-

$users = [
   [101, 'Demo Webkul', 'demo@webkul.com'],
   [102, 'John Deo', 'test@webkul.com'],
   [103, 'Patrik Deo', 'test1@webkul.com']
];

// list() style
list($id1, $name1, $email1) = $users[0];

// Destructuring ([]) style
[$id1, $name1, $email] = $users[0];

// list() style
foreach ($users as list($id, $name, $email)) {
    // logic here with $id, $name and $email
}

// Destructuring ([]) style
foreach ($data as [$id, $name, $email]) {
    // logic here with $id, $name and $email
}

Destructuring using a function–

<?php
class Destructuring {
  protected $a = 'Alphabet A';
  protected $b = 'Alphabet B';
  protected $c = 'Alphabet C';

  public function getA() {
    return $this->a;
  }

  public function getB() {
    return $this->b;
  }

  public function getC() {
    return $this->c;
  }

  public function getAllAlphabets() {
    return [$this->a, $this->b, $this->c];
  }
}

$des = new Destructuring();
// To get all the alphabets and assign the values in variables calling getAllAlphabets()
[$a, $b, $c] = $des->getAllAlphabets();
echo $a; // 'Alphabet A'
echo $b; // 'Alphabet B'
echo $c; // 'Alphabet C'

We can call get method of properties one by one to get a single property value but it may be somehow long methodology so here comes the Destructuring Assignment to reduce our code.

I hope you really enjoyed this reading, Happy Codding.