Title: Three.js Prerequisites Description: What you need to know to use this site. These articles are meant to help you learn how to use three.js. They assume you know how to program in JavaScript. They assume you know what the DOM is, how to write HTML as well as create DOM elements in JavaScript. They assume you know how to use ` ``` or [use the `defer` property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). ## You don't need `type="text/javascript"` modern outdated ## Always use `strict` mode Put `'use strict';` at the top of every JavaScript file. ## Know how closures work ``` function a(v) { const foo = v; return function() { return foo; }; } const f = a(123); const g = a(456); console.log(f()); // prints 123 console.log(g()); // prints 456 ``` In the code above the function `a` creates a new function every time it's called. That funciton *closes* over the variable `foo`. Here's [more info](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures). ## Understand how `this` works `this` is not magic. It's effectively a variable that is automatically passed to functions just like an argument is passed to function. The simple explaintion is when you call a function directly like somefunction(a, b, c); This will be `null` where as when you call a function via the dot operator `.` like this someobject.somefunction(a, b, c); This will be set to `someobject`. The parts where people get confused is with callbacks. const callback = someobject.somefunction; loader.load(callback); doesn't work as someone inexperienced might expect because when `loader.load` calls the callback it's not calling it with the dot `.` operator so by default `this` will be null (unless the loader explicitly sets it to someting). If you want `this` to be `someobject` when the callback happens you need to tell JavaScript that by binding it to the function. const callback = someobject.somefunction.bind(someobject); loader.load(callback); [*this* article might help](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this). ## ES5/ES6/ES7 stuff ### `var` is deprecated. Use `const` and/or `let` There is no reason to use `var` **EVER** and at this point it's considered bad practice to use it at all. Use `const` if the variable will never be reassigned which is most of the time. Use `let` in those cases where the value changes. ### Use `for(elem of collection)` never `for(elem in collection)` `for of` is new, `for in` is old. `for in` had issues that are solved by `for of` As one example you can iterate over all the key/value pairs of an object with ``` for (const [key, value] of Object.entries(someObject)) { console.log(key, value); } ``` ### Use `forEach`, `map`, and `filter` where useful Arrays added the functions [`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach, [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), and [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and are used fairly extensively in modern JavaScript. ### Use destructuring Assume an object `const dims = {width: 300, height: 150}` old code const width = dims.width; const height = dims.height; new code const {width, height} = dims; ### Use object declaration short cuts old code ``` const width = 300; const height = 150; const obj = { width: width, height: height, area: function() { return this.width * this.height }, }; ``` new code ``` const width = 300; const height = 150; const obj = { width, height, area() { return this.width * this.height; }, }; ``` ### Use the spread operator `...` The spread operator has a ton of uses. Example ``` function log(className, ...args) { const elem = document.createElement('div'); elem.className = className; elem.textContent = [...args].join(' '); document.body.appendChild(elem); } ``` Another example ``` const position = [1, 2, 3]; somemesh.position.set(...position); ``` ### Use `class` The syntax for making class like objects pre ES5 was unfamilar to most programmers. As of ES5 you can now [use the `class` keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). ### Use arrow functions where appropriate This is especially useful with callbacks and promises. ``` loader.load((texture) => { // use textrue }); ``` Arrow functions bind `this`. They are a shortcut for ``` (function(args) {/* code */}).bind(this)) ``` ### Promises as well as async/await Promises help with asynchronous code. Async/await help use promises. It's too big a topic to go into here but you can [read up on promises here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) and [async/await here](). ### Use Template Literals Template literals are strings using backticks instead of quotes. const foo = `this is a template literal`; Template literals have basically 2 features. One is they can be multi-line ``` const foo = `this is a template literal`; const bar = "this\nis\na\ntemplate\nliteral"; ``` `foo` and `bar` above are the same. The other is that you can pop out of string mode and insert snippets of JavaScript using `${javascript-expression}`. This is the template part. Example: ``` const r = 192; const g = 255; const b = 64; const rgbCSSColor = `rgb(${r},${g},${b})`; ``` or ``` const color = [192, 255, 64]; const rgbCSSColor = `rgb(${color.join(',')})`; ``` or ``` const aWidth = 10; const bWidth = 20; someElement.style.width = `${aWidth + bWidth}px`; ``` # Consider using Visual Studio Code Of course use whatever editor you want but if you haven't tried it consider using [Visual Studio Code](https://code.visualstudio.com/) for JavaScript and after installing it [setup eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). It might take a few minutes to setup but it will help you immensely with finding bugs in your JavaScript. As a simple example if you enable [the `no-undef` rule](https://eslint.org/docs/rules/no-undef) then VSCode via ESLint will warn you of many undefined variables. You'll get warnings using `THREE` so add `/* global THREE */` at the top of your JavaScript files. # If you really need to support legacy browsers use a transpiler Most modern browsers are auto-updated so using all these features will help you be productive and avoid bugs. That said, if you're on a project that absolutely must support old browsers there are [tools that will take your ES5/ES6/ES7 code and transpile the code back to pre ES5 Javascript](https://babeljs.io).