Eliminate var

docs/user-manual/assets/models/index.md

@@ -7,7 +7,7 @@ sidebar_position: 4
 
 PlayCanvas supports a wide variety of formats, such as glTF binary (GLB), FBX, COLLADA and obj. We recommend using the GLB format for best results.
 
-Uploading one of these files will create a [Source Asset][3] of type 'Model' and will produce several [Target Assets][4] including a '[Template]'[7] with the model hierarchy and 'Render' assets. You can add an instance of the 'Template' in your game.
+Uploading one of these files will create a [Source Asset][3] of type 'Model' and will produce several [Target Assets][4] including a '[Template][7]' with the model hierarchy and 'Render' assets. You can add an instance of the 'Template' in your game.
 
 Learn more about:
 

docs/user-manual/assets/preloading-and-streaming.md

@@ -36,10 +36,10 @@ In many cases, you don't wish assets to "popup" as they load. It's preferable to
 Here is some example javascript which shows you how you might load a set of assets using a tag.
 
 ```javascript
-var assets = this.app.assets.findByTag("level-1");
-var count = 0;
+const assets = this.app.assets.findByTag("level-1");
+let count = 0;
 
-for (var i = 0; i < assets.length; i++) {
+for (let i = 0; i < assets.length; i++) {
     assets[i].once("load", function () {
         count++;
         if (count === assets.length) {

docs/user-manual/assets/types/css.md

@@ -10,10 +10,10 @@ The loaded CSS asset resource is just a string. You can use the string as you li
 
 ```javascript
 // get asset from registry by id
-var asset = app.assets.get(32);
+const asset = app.assets.get(32);
 
 // create element
-var style = document.createElement('style');
+const style = document.createElement('style');
 style.type = "text/css";
 style.textContent = asset.resource || '';
 document.head.appendChild(style);

docs/user-manual/assets/types/html.md

@@ -10,10 +10,10 @@ The loaded HTML asset is just a string. You can use that string as you like - a
 
 ```javascript
 // get asset from registry by id
-var asset = app.assets.get(32);
+const asset = app.assets.get(32);
 
 // create element
-var div = document.createElement('div');
+const div = document.createElement('div');
 div.innerHTML = asset.resource || '';
 document.body.appendChild(div);
 

docs/user-manual/assets/types/json.md

@@ -29,7 +29,7 @@ JsonScript.attributes.add('jsonAsset', { type: 'asset', assetType: 'json' });
 JsonScript.prototype.initialize = function () {
     if (this.jsonAsset) {
         // Get the JSON asset's resource (an object)
-        var jsonData = this.jsonAsset.resource;
+        const jsonData = this.jsonAsset.resource;
 
         // Example: Accessing data from the JSON object
         if (jsonData.someDataField) {

docs/user-manual/assets/types/shader.md

@@ -7,9 +7,9 @@ A shader asset contains GLSL code. You can create a new Shader asset by clicking
 To edit a Shader asset, right click on it in the Editor and select Edit. Here's an example on using Shader assets to create a custom material.
 
 ```javascript
-var vertexShader = this.app.assets.find('my_vertex_shader');
-var fragmentShader = this.app.assets.find('my_fragment_shader');
-var shaderDefinition = {
+const vertexShader = this.app.assets.find('my_vertex_shader');
+const fragmentShader = this.app.assets.find('my_fragment_shader');
+const shaderDefinition = {
     attributes: {
         aPosition: pc.SEMANTIC_POSITION,
         aUv0: pc.SEMANTIC_TEXCOORD0
@@ -18,7 +18,7 @@ var shaderDefinition = {
     fshader: fragmentShader.resource
 };
 
-var shader = new pc.Shader(this.app.graphicsDevice, shaderDefinition);
-var material = new pc.Material();
+const shader = new pc.Shader(this.app.graphicsDevice, shaderDefinition);
+const material = new pc.Material();
 material.setShader(shader);
 ```

docs/user-manual/assets/types/text.md

@@ -22,7 +22,7 @@ TextScript.attributes.add('textAsset', { type: 'asset', assetType: 'text' });
 TextScript.prototype.initialize = function() {
     if (this.textAsset) {
         // Get the Text asset's resource (a string)
-        var textData = this.textAsset.resource;
+        const textData = this.textAsset.resource;
 
         // Output the content of the text asset
         console.log('Content of text asset: ', textData);

docs/user-manual/getting-started/your-first-app.md

@@ -96,11 +96,11 @@ Movement.prototype.initialize = function() {
 // update code called every frame
 Movement.prototype.update = function(dt) {
     // get which keys are pressed
-    var keyboard = this.app.keyboard;
-    var left  = keyboard.isPressed(pc.KEY_LEFT);
-    var right = keyboard.isPressed(pc.KEY_RIGHT);
-    var up    = keyboard.isPressed(pc.KEY_UP);
-    var down  = keyboard.isPressed(pc.KEY_DOWN);
+    const keyboard = this.app.keyboard;
+    const left  = keyboard.isPressed(pc.KEY_LEFT);
+    const right = keyboard.isPressed(pc.KEY_RIGHT);
+    const up    = keyboard.isPressed(pc.KEY_UP);
+    const down  = keyboard.isPressed(pc.KEY_DOWN);
 
     // move this entity based on which keys are pressed
     // dt is the time in seconds since the last frame and stands for 'delta time'

docs/user-manual/graphics/advanced-rendering/hardware-instancing.md

@@ -15,24 +15,29 @@ Populate a vertex buffer with per instance matrices to provide their world matri
 
 ```javascript
 // store matrices for individual instances into array
-var matrices = new Float32Array(instanceCount * 16);
-var matrix = new pc.Mat4();
-var matrixIndex = 0;
-for (var i = 0; i < instanceCount; i++) {
+const matrices = new Float32Array(instanceCount * 16);
+const matrix = new pc.Mat4();
+let matrixIndex = 0;
+for (let i = 0; i < instanceCount; i++) {
     matrix.setTRS(pos, pc.Vec3.ZERO, pc.Vec3.ONE);
 
     // copy matrix elements into array of floats
-    for (var m = 0; m < 16; m++)
+    for (let m = 0; m < 16; m++)
         matrices[matrixIndex++] = matrix.data[m];
 }
 ```
 
 Create a VertexBuffer which stores per-instance state and initialize it with the matrices. In the following example, we use `pc.VertexFormat.defaultInstancingFormat` which allows us to store a per-instance Mat4 matrix. Then we enable instancing on a MeshInstance, which contains the mesh geometry we want to instance.
 
 ```javascript
-var instanceCount = 10;
-var vertexBuffer = new pc.VertexBuffer(this.app.graphicsDevice, pc.VertexFormat.defaultInstancingFormat,
-                                        instanceCount, pc.BUFFER_STATIC, matrices);
+const instanceCount = 10;
+const vertexBuffer = new pc.VertexBuffer(
+    this.app.graphicsDevice,
+    pc.VertexFormat.defaultInstancingFormat,
+    instanceCount,
+    pc.BUFFER_STATIC,
+    matrices
+);
 meshInst.setInstancing(vertexBuffer);
 ```
 

docs/user-manual/optimization/runtime-devicepixelratio.md

@@ -20,7 +20,7 @@ Ideally, we want the best of both worlds where users on high-tier devices will r
 The Device pixel ratio can be changed at runtime via the property [`pc.GraphicsDevice#maxPixelRatio`][4]:
 
 ```javascript
-var device = pc.Application.getApplication().graphicsDevice;
+const device = pc.Application.getApplication().graphicsDevice;
 if (highTierDevice) {
     // Use the default device pixel ratio of the device
     device.maxPixelRatio = window.devicePixelRatio;
@@ -49,7 +49,7 @@ An example for mobile can be found below (correct at time of writing Thu 30 Jul
 
 ```javascript
 function isLowQualityGPU() {
-    var renderer = pc.Application.getApplication().graphicsDevice.unmaskedRenderer;
+    const renderer = pc.Application.getApplication().graphicsDevice.unmaskedRenderer;
 
     // Only check the GPU if we are on mobile
     if (renderer && pc.platform.mobile) {

docs/user-manual/publishing/web/communicating-webpage.md

@@ -14,11 +14,10 @@ Common to both methods of hosting you should think about what features of your P
 Here is a simple example where we show a couple of different ways of exposing an API from a PlayCanvas application to a web page.
 
 ```javascript
-
 // method one: define a global function to set the score
 window.setScore = function (score) {
-    var app = pc.Application.getApplication();
-    var entity = app.root.findByName("Score Keeper");
+    const app = pc.Application.getApplication();
+    const entity = app.root.findByName("Score Keeper");
     entity.script.scoreKeeper.setScore(score);
 }
 
@@ -41,7 +40,7 @@ ScoreKeeper.prototype.setScore = function (score) {
 window.setScore(10);
 
 // method two:
-var app = pc.Application.getApplication();
+const app = pc.Application.getApplication();
 app.fire("score:set", 10);
 
 ```
@@ -61,7 +60,7 @@ If you add `/e` after `https://playcanv.as` in the URL, this will give you a ver
 ```html
 <iframe loading="lazy" id="app-frame" src="https://playcanv.as/e/p/example/">
 <script>
-var iframe = document.getElementById("app-frame");
+const iframe = document.getElementById("app-frame");
 iframe.contentWindow.postMessage({
     score: 10,
 }, "https://playcanv.as");
@@ -73,13 +72,13 @@ In your application
 ```javascript
 window.addEventListener("message", function (event) {
     if (event.origin === "http://example.com") { // always check message came from your website
-        var score = event.data.score;
+        const score = event.data.score;
 
         // call API method one:
         window.setScore(score);
 
         // call API method two:
-        var app = pc.Application.getApplication();
+        const app = pc.Application.getApplication();
         app.fire("score:set", score);
     }
 }, false);
@@ -142,10 +141,10 @@ For example:
     <script src="__start__.js"></script>
     <script src="__loading__.js"></script>
     <script>
-    var app = pc.Application.getApplication();
+    const app = pc.Application.getApplication();
     app.on("start", function () {
         // get the root of the scene.
-        var hierarchy = app.root.getChildren()[0];
+        const hierarchy = app.root.children[0];
 
         // do other stuff here
     });

docs/user-manual/publishing/web/self-hosting-for-beginners.md

@@ -56,7 +56,7 @@ When writing PlayCanvas applications, no code you write in PlayCanvas runs serve
 In the web stack, the server is not the only place where we can do programming and respond to user input. Client-side refers to code running inside your browser. This code is always in Javascript, which is the language that browsers run. With client-side javascript you can perform many different operations. In the simplest case, you can modify the HTML page that was downloaded from the server
 
 ```javascript
-var title = document.getElementById("title");
+const title = document.getElementById("title");
 title.innerHTML = "This is the new title";
 ```
 

docs/user-manual/scripting/communication.md

@@ -21,8 +21,8 @@ Trigger an event using `fire()`. In this example, the player script fires a `mov
 var Player = pc.createScript('player');
 
 Player.prototype.update = function (dt) {
-    var x = 1;
-    var y = 1;
+    const x = 1;
+    const y = 1;
     this.fire('move', x, y);
 };
 ```
@@ -37,7 +37,7 @@ Display.attributes.add('playerEntity', { type: 'entity' });
 
 Display.prototype.initialize = function () {
     // method to call when player moves
-    var onPlayerMove = function(x, y) {
+    const onPlayerMove = function(x, y) {
         console.log(x, y);
     };
 
@@ -65,8 +65,8 @@ Firing the `player:move` event:
 var Player = pc.createScript('player');
 
 Player.prototype.update = function (dt) {
-    var x = 1;
-    var y = 1;
+    const x = 1;
+    const y = 1;
     this.app.fire('player:move', x, y);
 };
 ```
@@ -78,7 +78,7 @@ var Display = pc.createScript('display');
 
 Display.prototype.initialize = function () {
     // method to call when player moves
-    var onPlayerMove = function(x, y) {
+    const onPlayerMove = function(x, y) {
         console.log(x, y);
     };
 

docs/user-manual/scripting/creating-new.md

@@ -24,7 +24,7 @@ Scripts are shown by their name, when you select a script to add it to a compone
 If you want to dynamically add scripts while your application is running you can do so from the script component
 
 ```javascript
-var entity = new pc.Entity();
+const entity = new pc.Entity();
 entity.addComponent("script");
 entity.script.create("rotate", {
     attributes: {

docs/user-manual/scripting/migration-guide.md

@@ -76,8 +76,8 @@ MyScript.attributes.add('speed', { type: 'number', default: 10 });
 
 // initialize code called once per entity
 MyScript.prototype.initialize = function() {
-    var app = this.app;       // application instance is available as this.app
-    var entity = this.entity; // entity property already set up
+    const app = this.app;       // application instance is available as this.app
+    const entity = this.entity; // entity property already set up
 };
 
 // update code called every frame
@@ -132,7 +132,7 @@ MyScript.prototype.initialize = function() {
 Next, we will transfer the legacy project's scene hierarchy across. The PlayCanvas Editor supports a copy and paste operation between two Editor instances. However, this operation fails if legacy script components are in the selection. Therefore, you should first delete all script components from your legacy script project. To do this, select all entities with legacy script components. You can do this by running the following JavaScript in the browser's JavaScript console:
 
 ```javascript
-var entities = editor.call('entities:list').filter(function(entity) {
+const entities = editor.call('entities:list').filter(function(entity) {
     return entity.has('components.script');
 });
 if (entities.length) {

docs/user-manual/scripting/script-attributes.md

@@ -166,7 +166,7 @@ Here's an example of accessing the above attributes in a script:
 ```javascript
 MyScript.prototype.update = function (dt) {
     if (this.gameConfig.godMode) {
-        for (var i = 0; i < this.gameConfig.numEnemies; i++) {
+        for (let i = 0; i < this.gameConfig.numEnemies; i++) {
             // ...
         }
     }

docs/user-manual/templates/index.md

@@ -88,8 +88,8 @@ You modify the position of Tree1/Sphere. This creates an override on the positio
 You can instantiate Template Assets at runtime like so:
 
 ```javascript
-var templateAsset = this.app.assets.get(templateAssetId);
-var instance = templateAsset.resource.instantiate();
+const templateAsset = this.app.assets.get(templateAssetId);
+const instance = templateAsset.resource.instantiate();
 this.app.root.addChild(instance);
 ```