{"id":22345592,"url":"https://github.com/gerhynes/reference-vs-copy","last_synced_at":"2025-07-17T14:34:35.987Z","repository":{"id":106047664,"uuid":"106726259","full_name":"gerhynes/reference-vs-copy","owner":"gerhynes","description":"Exercises to practice the difference between referencing and copying in JavaScript. Part of Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-01-19T20:26:15.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-26T10:23:10.113Z","etag":null,"topics":["copy","javascript","javascript30","reference"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-12T17:48:14.000Z","updated_at":"2018-01-23T21:46:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"8d4ee700-52c2-4986-987f-715e8b9d8a9d","html_url":"https://github.com/gerhynes/reference-vs-copy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gerhynes/reference-vs-copy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Freference-vs-copy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Freference-vs-copy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Freference-vs-copy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Freference-vs-copy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/reference-vs-copy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Freference-vs-copy/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265617179,"owners_count":23798987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["copy","javascript","javascript30","reference"],"created_at":"2024-12-04T09:18:11.740Z","updated_at":"2025-07-17T14:34:35.964Z","avatar_url":"https://github.com/gerhynes.png","language":"HTML","readme":"# Reference vs Copy\n\nExercises to practice the difference between referencing and copying in JavaScript. Part of Wes Bos'\n[JavaScript 30](https://javascript30.com/) course.\n\n## Notes\n\n### Strings, Numbers, and Booleans\n\nWhen dealing with strings, numbers and Booleans, if you assign them to a variable, set another variable to equal it, and then change the original, the second variable will not be updated.\n\n```js\nlet age = 100;\nlet age2 = age;\nconsole.log(age, age2); // 100 100\nage = 200;\nconsole.log(age, age2); // 200 100\n```\n\nYou have made a copy, independent of the original.\n\n### Arrays\n\nArrays work differently. If you create an array, then set a second array to equal it and chage the second array, the original array will be updated.\n\nThis is because the second array is an array reference, not an array copy. They both point to the same array.\n\n```js\nconst players = [\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"];\nconst team = players;\nconsole.log(players, team);\n// [\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"]\n// [\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"]\nteam[3] = \"Lux\";\nconsole.log(players, team);\n// [\"Wes\", \"Sarah\", \"Ryan\", \"Lux\"]\n// [\"Wes\", \"Sarah\", \"Ryan\", \"Lux\"]\n```\n\nIf you update an array, it will always reference back.\n\nYou need to make a copy, not a reference.\n\nYou can take the original array and call `.slice()` against it without any paramaters. This will return a copy of the original array.\n\n`const team2 = players.slice();`\n\nAnother option is to take an empty array and concatenate in the existing array.\n\n`const team3 = [].concat(players);`\n\nYou can also use ES6 spread. Spread takes every item out of your iterable and puts it into the containing array.\n\n`const team4 = [...players];`\n\nFinally, you can use `Array.from()`, which also leaves the original array untouched.\n\n`const team5 = Array.from(players);`\n\n### Objects\n\nObjects behave similarly to arrays.\n\nIf you create an object, set a second object equal to it, and then change the second object, you will change the original object.\n\n```js\nconst person = {\n  name: \"Ger Hynes\",\n  age: 29\n};\n\nconst captain = person;\ncaptain.number = 99;\nconsole.log(person); // {name: \"Ger Hynes\", age: 29, number: 99}\n```\n\nYou will have made a reference, not a copy.\n\nTo make a copy, use `Object.assign()`.\n\nStart with a blank object. Pass it the object you wish to copy the properties from. Then add in the new properties you want to overwrite. Finally, put it into its own variable.\n\n```js\nconst cap2 = Object.assign({}, person, { number: 99, age: 12 });\nconsole.log(cap2); // {name: \"Ger Hynes\", age: 12, number: 99}\n```\n\nObject spread should be added soon: `cap3 = {...person};`\n\nSo far, these are very shallow copies. They only go one level deep.\n\nFor example, if you have an object containing a nested object and make a copy using `Object.assign()` the nested object will be referenced, not copied.\n\nIf you need to clone an object you have to use a Deep Clone function.\n\nYou _can_ use `JSON.parse(JSON.stringify())`:\n\n```js\nconst dev = Object.assign({}, ger); // shallow copy\nconst dev2 = JSON.parse(JSON.stringify(ger)); // deep clone\n```\n\n`JSON.stringify()` will return a string, not an object. Immediately calling `JSON.parse()` will turn it back into an object.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Freference-vs-copy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Freference-vs-copy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Freference-vs-copy/lists"}