JavaScript ES6: Destructuring and Spread Operator

Introduction

ECMAScript 2015, commonly known as ES6, brought numerous enhancements to JavaScript. Among these, two highly useful features are Destructuring and the Spread Operator. These tools simplify data handling by allowing you to unpack values from arrays or properties from objects into variables, and to copy elements/properties, respectively. In this detailed explanation, we will delve into both concepts, illustrating their importance and practical use cases.

Destructuring Assignment

Destructuring allows us to extract data from complex data structures such as arrays and objects into individual variables, making it a clean and efficient way of working with these data types.

Destructuring Arrays

One of the simplest uses of destructuring is with arrays. Consider the following example:

const fruits = ['Apple', 'Banana', 'Cherry'];
const [firstFruit, secondFruit, thirdFruit] = fruits;

console.log(firstFruit);  // Output: Apple
console.log(secondFruit);  // Output: Banana
console.log(thirdFruit);  // Output: Cherry

In the code snippet above, fruits is an array containing three string elements. By using destructuring assignment, we've unpacked these values into individual variables firstFruit, secondFruit, and thirdFruit.

We can also skip certain elements if we don't need them. Here's how:

const fruits = ['Apple', 'Banana', 'Cherry'];
const [firstFruit, , thirdFruit] = fruits;

console.log(firstFruit);  // Output: Apple
console.log(thirdFruit);  // Output: Cherry

In the modified example, the comma , acts as a placeholder for the second element in the fruits array, which we choose to ignore.

Another powerful aspect of array destructuring is dealing with functions that return multiple values:

function getCoordinates() {
    return [34.052235, -118.243683];  // latitude, longitude
}

const [lat, lon] = getCoordinates();

console.log(`Latitude: ${lat}, Longitude: ${lon}`);  // Output: Latitude: 34.052235, Longitude: -118.243683

Here, getCoordinates function returns an array of latitude and longitude. We then destructure this returned array into lat and lon variables.

Default Values in Array Destructuring

You can assign default values during destructuring of arrays. This is particularly useful when you're unsure whether elements will be present in an array:

const colors = ['Red', 'Green'];
const [primaryColor, secondaryColor, tertiaryColor = 'Blue'] = colors;

console.log(primaryColor);  // Output: Red
console.log(secondaryColor);  // Output: Green
console.log(tertiaryColor);  // Output: Blue

Since colors only contains two elements, tertiaryColor takes its default value 'Blue'.

Rest Parameter in Array Destructuring

When destructuring arrays, sometimes you might want to collect the remaining elements of the array into a separate variable. This can be achieved using the rest parameter syntax (...):

const numbers = [1, 2, 3, 4, 5];
const [one, two, ...rest] = numbers;

console.log(one);  // Output: 1
console.log(two);  // Output: 2
console.log(rest);  // Output: [3, 4, 5]

The ...rest syntax collects the remaining elements of the array after the first two (one and two) and puts them inside a new array named rest.

Destructuring Objects

Destructuring objects is just as powerful as destructuring arrays. With object destructuring, you can pull out properties from an object and assign them to variables based on matching property keys:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    email: 'john.doe@example.com'
};

const { firstName, lastName } = person;
console.log(firstName);  // Output: John
console.log(lastName);  // Output: Doe

In the code above, properties firstName and lastName are directly assigned to variables of the same name from the person object.

You can also rename these properties during destructuring:

const { firstName: fn, lastName: ln } = person;
console.log(fn);  // Output: John
console.log(ln);  // Output: Doe

The variables created using renamed properties will now be fn and ln instead of firstName and lastName.

Default values can also be applied in object destructuring, similar to array destructuring:

const { age, occupation = 'unemployed' } = person;
console.log(age);         // Output: 30
console.log(occupation);  // Output: unemployed

Since occupation does not exist in the person object, it takes the default value 'unemployed'.

Nested objects can also be destructured:

const personWithAddress = {
    name: 'Jane',
    location: {
        city: 'Los Angeles',
        zipCode: 90001
    }
}

const { name, location: { city, zipCode } } = personWithAddress;

console.log(name);       // Output: Jane
console.log(city);       // Output: Los Angeles
console.log(zipCode);    // Output: 90001

This makes deep data structures easier to work with.

Spread Operator (...)

The spread operator is used primarily to expand elements of an iterable object (such as an array) or entries of a map into places where zero or more arguments (for function calls) or elements (for array literals) are expected, or to merge objects into new objects.

In Function Calls

Here's an example of spreading an array of parameters into a function call:

const greetMany = (name1, name2, name3) => {
    console.log(`${name1}, ${name2}, ${name3}`);
};

const friends = ['Alice', 'Bob', 'Charlie'];
greetMany(...friends);  // Output: Alice, Bob, Charlie

Without the spread operator, you'd have to call greetMany(friends[0], friends[1], friends[2]). Using ...friends, it automatically spreads the elements into the function call.

In Array Literal Expressions

Using the spread operator with arrays results in more concise code when creating a new array:

const fruitsArray = ['Apple', 'Banana'];
const updatedFruitsArray = [...fruitsArray, 'Cherry', 'Date'];

console.log(updatedFruitsArray);  // Output: ['Apple', 'Banana', 'Cherry', 'Date']

Instead of manually adding each element, the spread syntax allows you to add them in one go.

Copying arrays becomes very intuitive with the help of the spread operator:

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray);  // Output: [1, 2, 3]

It creates a shallow copy of the original array.

In Object Literals

Spread syntax has been added to objects starting with ES9 (ES2018). It is helpful when you want to combine two objects:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const combinedObject = {...obj1, ...obj2 };
console.log(combinedObject);  // Output: { a: 1, b: 2, c: 3, d: 4 }

Additionally, it's a convenient way to create a new object from an existing object while adding or modifying certain properties:

const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, c: 3 };

console.log(newObject);  // Output: { a: 1, b: 2, c: 3 }

The spread operator can also be useful to override properties of an object:

const person = {
    name: 'John',
    age: 30,
    email: 'john.doe@example.com'
};

const updatedPerson = { ...person, age: 31 };
console.log(updatedPerson.age);  // Output: 31

In this case, the age property of the original person object is overridden with a new value in the updatedPerson object.

Practical Use Cases for Spread Operator

• Concatenating Arrays: The spread operator can simplify array concatenation:

  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  
  const combinedArray = [...arr1, ...arr2];
  console.log(combinedArray);  // Output: [1, 2, 3, 4, 5, 6]
  

• Passing Unknown Number of Arguments to Functions: You can pass any number of array elements as separate arguments to functions:

  const mathMax = (...values) => Math.max(...values);
  
  console.log(mathMax(12, 34, 56, 78));  // Output: 78
  

• Creating Copies of an Object: As seen earlier, the spread operator makes it easy to create a new object with identical properties and values:

  const product = { id: 101, name: 'Coffee Maker', price: 99 };
  const productCopy = { ...product };
  
  console.log(productCopy);  // Output: { id: 101, name: 'Coffee Maker', price: 99 }
  

Importance and Benefits

• Readability & Maintainability: Both concepts improve code readability by reducing boilerplate, making it easier to understand and maintain.
• Efficiency: Destructuring reduces the need for accessing nested properties explicitly. Similarly, the spread operator provides a quick way to concatenate or clone arrays and objects without extra loops or methods.
• Advanced Data Manipulation: These operators facilitate advanced data manipulation tasks and make them more straightforward.
• Function Argument Handling: They simplify handling function arguments, especially when dealing with unknown numbers of arguments or options objects in function parameters.

Conclusion

Understanding and utilizing ES6 destructuring and the spread operator can greatly enhance your JavaScript development workflow. By effectively unpacking data, merging objects, and passing elements or properties, you can write cleaner, more readable, and efficient code. These tools are so beneficial that they form part of modern JavaScript practices and are widely used in both frontend and backend JavaScript applications.

Understanding JavaScript ES6 Destructuring and Spread Operator: A Beginner’s Guide

Examples, Set Route and Run the Application Then Data Flow Step by Step

Welcome to this beginner-friendly guide on JavaScript ES6 Destructuring and Spread Operator. These features are integral to writing more efficient and readable code in modern JavaScript. We will cover examples, set up a simple project, and trace the flow of data using these concepts. By the end of this guide, you'll have a solid understanding and practical experience with destructuring and the spread operator.

---

Setting Up Your Development Environment

Before we dive into coding, you need to set up your environment:

1. Install Node.js: Download and install Node.js from https://nodejs.org/.

2. Set up a Project Directory:

   • Open your terminal or command prompt.
   • Create a new directory named es6-project and navigate into it:

     mkdir es6-project
     cd es6-project
     

   • Initialize npm (Node package manager) to create a package.json file:

     npm init -y
     

3. Create an HTML and JS File:

   • Create an index.html file with the following contents:

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>ES6 Destructuring and Spread Operator</title>
     </head>
     <body>
         <div id="app"></div>
         <script src="app.js"></script>
     </body>
     </html>
     

   • Create an app.js file for our coding exercises:

     touch app.js
     

4. Run the Application:

   • Start a local server using a tool like http-server. You can install it globally via npm:

     npm install -g http-server
     

   • Navigate to your project directory and start the server:

     http-server
     

   • Open your browser and visit http://127.0.0.1:8080 to see your project running.

---

JavaScript ES6 Destructuring

Destructuring is an expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Example 1: Array Destructuring

// app.js
const fruits = ['apple', 'banana', 'cherry'];
const [firstFruit, secondFruit] = fruits;

console.log(firstFruit); // Output: apple
console.log(secondFruit); // Output: banana

Example 2: Object Destructuring

// app.js
const person = {
  name: 'John Doe',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  }
};

const { name, age, address: { city } } = person;

console.log(name); // Output: John Doe
console.log(age); // Output: 30
console.log(city); // Output: New York

Example 3: Default Values and Renaming

// app.js
const defaultUser = {
  username: 'guest',
  email: '',
  role: 'user'
};

const { username, email, role = 'subscriber' } = defaultUser;
const { username: userName, email: userEmail } = defaultUser;

console.log(username); // Output: guest
console.log(email);    // Output: ''
console.log(role);     // Output: user (default value if not provided)
console.log(userName); // Output: guest (renaming variable)
console.log(userEmail); // Output: ''

---

JavaScript ES6 Spread Operator

The spread operator (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Example 1: Spreading Arrays

// app.js
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3, 4, 5]

Example 2: Combining Arrays

// app.js
const fruitsArray1 = ['apple', 'banana'];
const fruitsArray2 = ['cherry', 'date'];
const combinedFruits = [...fruitsArray1, ...fruitsArray2];

console.log(combinedFruits); // Output: ['apple', 'banana', 'cherry', 'date']

Example 3: Spreading Objects

// app.js
const bookDetails = {
  title: 'JavaScript ES6',
  author: 'Jane Doe'
};

const bookInfo = {
  ...bookDetails,
  price: '$20.99',
  isbn: '978-3-16-148410-0'
};

console.log(bookDetails);
// Output: { title: 'JavaScript ES6', author: 'Jane Doe' }
console.log(bookInfo);
// Output: { title: 'JavaScript ES6', author: 'Jane Doe', price: '$20.99', isbn: '978-3-16-148410-0' }

Example 4: Cloning Objects

// app.js
const originalObject = { a: 1, b: 2 };
const clonedObject = { ...originalObject };

console.log(originalObject); // Output: { a: 1, b: 2 }
console.log(clonedObject);   // Output: { a: 1, b: 2 }

// Verifying both objects are independent
originalObject.a = 100;
console.log(originalObject); // Output: { a: 100, b: 2 }
console.log(clonedObject);   // Output: { a: 1, b: 2 }

---

Data Flow Step-by-Step

Let's combine what we've learned in a simple application scenario. We will simulate fetching user data, destructuring it, and using the spread operator to enhance the data before displaying it.

Step 1: Fetch Dummy User Data

Assume we have an API endpoint that returns user data:

// app.js
const fetchUserData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const userData = {
                userId: 1,
                userInfo: {
                    name: 'Alice Johnson',
                    age: 29,
                    email: 'alice.johnson@example.com',
                    role: 'admin',
                    preferences: {
                        theme: 'dark'
                    }
                }
            };
            resolve(userData);
        }, 1500);
    });
};

Explanation

• A fetchUserData function simulates asynchronously fetching user data after a 1.5-second delay.
• It returns a promise that resolves with the user data as an object.

Step 2: Destructure and Use the Spread Operator

We'll use destructuring to extract name, age, and email from userInfo, and then add a new property createdAt using the spread operator before displaying the user details.

// app.js
const displayUserDetails = async () => {
    try {
        const userData = await fetchUserData();
        const { userId, userInfo: { name, age, email, role, preferences } } = userData;

        const enhancedUserData = {
            ...userData,
            createdAt: new Date().toLocaleString(),
            greeting: `Hello, ${name}! Welcome back.`
        };

        console.log(enhancedUserData);

        const appElement = document.getElementById('app');
        appElement.innerHTML = `
            <h1>User Details</h1>
            <p>UserID: ${userId}</p>
            <p>Name: ${name}</p>
            <p>Age: ${age}</p>
            <p>Email: ${email}</p>
            <p>Role: ${role}</p>
            <p>Theme Preference: ${preferences.theme}</p>
            <p>Greeting: ${enhancedUserData.greeting}</p>
            <p>Registered On: ${enhancedUserData.createdAt}</p>
        `;
    } catch (error) {
        console.error("Error fetching user data:", error);
    }
};

Explanation

• The displayUserDetails function is an asynchronous function that awaits the resolved userData.
• We use destructuring to extract userId and specific properties from userInfo.
• Utilizing the spread operator, we create an augmented object called enhancedUserData, which includes all properties from userData plus additional ones like createdAt and greeting.
• The user details are then displayed in the browser within the #app div.

---

Running and Observing the Application

Ensure your app.js file contains both the fetchUserData and displayUserDetails functions. Save your changes and refresh the browser.

1. Simulated Data Loading:

   • After a short delay, you should see the user details appear on the webpage.
   • Inspect the console and note how the enhancedUserData object has combined original properties along with the newly added createdAt and greeting.

2. Data Flow Summary:

   • The fetchUserData function mimics fetching data from an API.
   • The displayUserDetails function asynchronously receives the data, deconstructs necessary parts, enhances the object with additional properties using the spread operator, and renders it in the UI.

3. Practical Benefits:

   • Readability: Destructuring simplifies the extraction of values, making code clean and easy to understand.
   • Flexibility: The spread operator allows effortless creation of new objects and arrays without directly mutating the originals, promoting best practices in functional programming.
   • Scalability: These tools facilitate easier management of data transformations as applications grow in complexity, reducing potential errors associated with manual copying of properties.

Final Thoughts

In this guide, you've explored JavaScript ES6 destructuring and the spread operator through practical examples and a step-by-step project setup. These powerful features help streamline data manipulation, improving both the efficiency and readability of your code. As you continue learning and working with modern JavaScript, mastering these concepts will undoubtedly serve you well.

Feel free to experiment further by adding more complex operations, handling different data types, or integrating real API requests to deepen your understanding.

Happy coding!

---

References:

• MDN Web Docs: Destructuring Assignment
• MDN Web Docs: Spread Syntax
• Introduction to the Spread and Rest Operators

---

This article provides an in-depth understanding of JavaScript ES6 Destructuring and Spread Operator through interactive examples and a fully functional application setup.

Top 10 Questions and Answers about JavaScript ES6 Destructuring and Spread Operator

1. What is destructuring in JavaScript ES6?

Answer: Destructuring in JavaScript ES6 is a powerful syntax that allows you to extract values from arrays or properties from objects into separate variables. This makes your code cleaner, reduces the amount of boilerplate code, and enhances readability. For example:

const person = { name: 'Alice', age: 24 };
const { name, age } = person; // Destructuring person object
console.log(name); // Output: Alice
console.log(age);  // Output: 24

// Similarly with arrays:
const numbers = [5, 6];
const [first, second] = numbers;
console.log(first); // Output: 5
console.log(second); // Output: 6

2. Can you provide examples of default values in destructuring?

Answer: Yes, you can assign default values to variables in destructuring. If a value is not present (undefined), the default value will be used as the fallback.

// Object destructuring with default values
const user = { username: 'john_doe' };
const { username, email = 'default@example.com' } = user;
console.log(username); // john_doe
console.log(email);    // default@example.com, since it wasn't provided

// Array destructuring with default values
const arr = [undefined, 2];
const [value1 = 'one', value2] = arr;
console.log(value1); // Output: one
console.log(value2); // Output: 2

3. How does destructuring work with nested objects and arrays?

Answer: You can use destructuring to access deeply nested properties within an object or array.

// Nested object destructuring
const employee = {
    id: 101,
    details: {
        name: 'Jane Doe',
        address: {
            city: 'Chicago',
            zip: 60614
        }
    },
    roles: ['Manager', 'Developer']
};

const { 
    details: { name: fullname, address: { city, zip } }, 
    roles: [roleOne] 
} = employee;

console.log(fullname); // Output: Jane Doe
console.log(city);     // Output: Chicago
console.log(zip);      // Output: 60614
console.log(roleOne);  // Output: Manager

// Nested array destructuring:
const coordinates = [[10, 20], [30, 40], [50]];
const [ [x1, y1], [x2, y2], [z] = [0, 0]] = coordinates;
console.log(x1, y1); // 10 20
console.log(x2, y2); // 30 40
console.log(z);      // 50

4. Why is the spread operator useful in JavaScript ES6?

Answer: The spread operator (...) in JavaScript ES6 provides a concise way to expand elements of an iterable (like an array, string, or map) where individual elements are expected. It can also be used to clone objects or merge them efficiently.

// Clone an array
const numbers1 = [1, 2, 3, 4, 5];
const numbersCopy = [...numbers1]; // [1, 2, 3, 4, 5]

// Merging arrays
const moreNumbers = [6, 7, 8];
const combinedArray = [...numbers1, ...moreNumbers]; // [1, 2, 3, 4, 5, 6, 7, 8]

// Object cloning and merging
const car = { brand: 'Toyota', model: 'Corolla' };
const carDetails = { ...car, engine: 'V4' }; // { brand: 'Toyota', model: 'Corolla', engine: 'V4' }

// Passing array elements as separate arguments
function sum(a, b, c) {
    return a + b + c;
}

const myValues = [5, 8, 2];
console.log(sum(...myValues)); // Output: 15

5. How do I handle arrays of unknown length with the spread operator?

Answer: When dealing with arrays of unknown length, the spread operator is incredibly handy for tasks like cloning or merging without knowing how many items are present.

// Using spread to concatenate arrays of unknown length:
let fruits = ['apple', 'banana'];
let newFruits = ['pear', 'mango'];
fruits.push(...newFruits); // Adds all items in newFruits to the end of fruits array
console.log(fruits); // Output: ['apple', 'banana', 'pear', 'mango']

// Spread operator with rest parameters – collecting additional arguments into array:
function printColors(firstColor, ...otherColors) {
    console.log('First color:', firstColor);
    console.log('Other colors:', otherColors);
}
printColors('red', 'blue', 'yellow'); 
// Output:
// First color: red
// Other colors: ['blue', 'yellow']

6. Is it possible to destructure function arguments using destructuring assignment?

Answer: Absolutely! Destructuring parameters in function definitions can make your code clearer and allow you to handle complex structures more easily.

// Destructuring object argument in a function:
function printUserInfo({name, age}) {
    console.log(`Name: ${name}, Age: ${age}`);
}

const user = { name: 'Bob', age: 42 };
printUserInfo(user); // Name: Bob, Age: 42

// Destructuring default parameter:
function displayBookDetails({title = 'Unknown', author = 'Unknown'}) {
    console.log(`Title: ${title}, Author: ${author}`);
}

displayBookDetails({author: 'J.K. Rowling'});
// Output: Title: Unknown, Author: J.K. Rowling

// Destructuring array arguments with defaults:
function createGreeting([firstName = 'Guest', lastName = 'User']) {
    return `Hello, ${firstName} ${lastName}!`;
}

console.log(createGreeting(['Tom'])); // Output: Hello, Tom User!

7. Can the spread operator be used inside an object literal to merge objects?

Answer: Yes, the spread operator can be used within an object literal to copy all key-value pairs from one object to another, effectively merging them. This approach is concise and avoids the need for Object.assign().

const originalCar = { make: 'Honda', year: 2020 };
const updatedCar = { ...originalCar, model: 'Civic', color: 'red' };

console.log(updatedCar);
// Output: { make: 'Honda', year: 2020, model: 'Civic', color: 'red' }

// Merging multiple objects
const defaults = { theme: 'light', notifications: true };
const userPreferences = { notifications: false, language: 'en' };
const mergedConfig = { ...defaults, ...userPreferences };

console.log(mergedConfig);
// Output: { theme: 'light', notifications: false, language: 'en' }

8. What is the difference between the rest parameter and the spread operator in ES6?

Answer: Both the rest parameter and the spread operator utilize the same syntax (...), but they serve different purposes:

• Rest Parameter: Used in function definitions to collect all remaining arguments into an array.

function sum(...nums) {
    return nums.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10

• Spread Operator: Used during function calls or when initializing arrays/objects to expand iterables into individual elements or key-value pairs.

const numbers = [1, 2, 3];
console.log(...numbers); // Outputs: 1 2 3

const moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // Output: [1, 2, 3, 4, 5]

9. When should I use the spread operator versus using Array.prototype.slice()?

Answer: While both methods can be used to create copies of arrays, the choice depends on the situation:

• Spread Operator: Preferred for its brevity and clarity when creating shallow copies of arrays or merging them.

const arr = [1, 2, 3];
const copyArr = [...arr]; // Shallow copy

const newArr = [...arr, 4, 5];
console.log(newArr); // Output: [1, 2, 3, 4, 5]

• Array.prototype.slice(): Useful when you need to extract a portion of an array or when you prefer a method-chaining style.

const arr = [1, 2, 3, 4, 5];
const subArray = arr.slice(1, 3); // Extracts elements at index 1 and 2
console.log(subArray); // Output: [2, 3]

const copyArr = arr.slice(); // Shallow copy
console.log(copyArr); // Output: [1, 2, 3, 4, 5]

In summary, use the spread operator for its simplicity and versatility, especially when combining arrays, while opting for slice() for specific extraction needs.

10. How can I avoid common pitfalls when using destructuring and the spread operator?

Answer: Understanding best practices can help prevent common issues:

• Default Values: Always specify default values when destructuring to handle cases where keys might be undefined.

const settings = { volume: 50 };
const { volume = 20, brightness = 75 } = settings;
console.log(volume);     // Output: 50
console.log(brightness); // Output: 75

• Avoiding Mutation: Be mindful of shared references in arrays or objects when copying or merging using the spread operator.

const oldObj = { a: 1, b: { x: 2 } };
const newObj = { ...oldObj };
newObj.a = 3; // Only affects newObj
console.log(oldObj.a);   // Output: 1
console.log(newObj.a);   // Output: 3

newObj.b.x = 4; // Affects both objects because the b property points to the same reference
console.log(oldObj.b.x); // Output: 4
console.log(newObj.b.x); // Output: 4

To fully clone objects with nested structures, consider using libraries like Lodash (_.cloneDeep()) or implementing a deep copy recursively if necessary.

• Handling Missing Values Carefully: When destructuring, ensure that the structure exists to prevent errors. Using default values can mitigate this issue.

const product = {}; // Assume some fields could be missing
const { price = 0, quantity = 1 } = product;
console.log(price);    // Output: 0
console.log(quantity); // Output: 1

By mastering these nuances, you can harness the full power of destructuring and the spread operator to write more efficient and maintainable JavaScript code.