michael-h.dk
Multimedia Designer and Web Developer
JavaScript References VS Copying
Working with code in JavaScript, there are a lot of possibilities to make mistakes, and some times it could be your own fault.
One of the areas there are likely to make some errors in your code, is when you are changin the values in variabled. It is not always that logical, but I will try to make it a little easier to understant.
I know that I have learned a lot just by making this page.
Strings
JavaScript strings are used for storing and manipulating text.
Numbers
JavaScript has only one type of number. Numbers can be written with or without decimals.
Boolean
A JavaScript Boolean represents one of two values: true or false.
When you make a copy, and change the value of the first variable, the copy still keep that value.
Strings
const firstName = "Michael";
Numbers
const age = 51;const pi = 3.14;
Boolean
const isRich = false;
Example:
| Declare a variable with var, let or const: | let firstName; |
| Value | |
| Give the variable a value | firstName = "Michael"; |
| Value | |
| Make a copy of firstName | let firstName2 = firstname; |
| Value | |
| Change firstName | firstName = "Mike"; |
| Value | |
Array
The Array object is used to store multiple values in a single variable.
Array indexes are zero-based: The first element in the array is 0, the second is 1, and so on.
If you make a copy of an array like we did with the variable, and change an element in the array, both arrays will change.
If you want to copy an array, without having them affect eachother, there are some ways to do that:
Array
const beatles = ["John", "Paul", "George", "Pete"];
Example:
| Create an array: | let beatles = ["John", "Paul", "George", "Pete"]; |
| Value | |
| Copy the array | let betterBeatles = beatles; |
| Value | |
| Change an element in the original array | beatles[3] = "Ringo"; |
| Value | |
As you can see both arrays changed their value. If your want to make a copy, that won't change values with the first, you have a few options.
1. You can use the slice() function:
The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.
When you don't give any arguments, you make a direct copy of an array.
let betterBeatles = beatles.slice()
2. You can use the concat() function:
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
When you use the concat() methode with an empty array, you get a copy
let betterBeatles = [].concat(beatles);
3. You can use the new spread operator:
Spread syntax 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.
| Make the first array | let newBeatles = ["John", "Paul", "George", "Pete"] |
| Value | |
| Copy the array | let oldBeatles = [...newBeatles]; |
| Value | |
| Change an element in the first array | newBeatles[3] = "Ringo"; |
| Value | |
All defenitions are copied from MDM Web Docs at Mozilla.
Object
JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.
The same problem with copying an array, are also applying to copieng an object, but right now there are only one way to make a copy of an object that won't change value, when the original are changed.
Object
const michael = {name: "Michael", age: 50, socialMedia: {facebook:
"michael.houmann", twitter: "@MichaelHoumann"}};
Example:
| Create an object: | const michael = {name: "Michael", age: 50, socialMedia: {facebook:
"michael.houmann", twitter: "@MichaelHoumann"}}; |
| Value | |
| Copy the object | let michael2 = michael; |
| Value | |
| Change an element in the original object | michael.age = 51; |
| Value | |
| The right way to copy an object | const michael3 = Object.assign({}, michael, {age: 50}); |
| Value | |
All defenitions are copied from MDM Web Docs at Mozilla.