25:["$","title",null,{"children":"JavaScript for Python Developers | jpt | Observable"}] 4b:Tb89,## Philosophical Differences To understand JavaScript it is helpful to start with where it came from, and why it is important today. The original version of the language was written by one person, and it took 10 days. That is an impressive feat, but also an indication of the level of planning that went into that first version. In 1995 nobody foresaw what the web would become and the role that JavaScript would play. That is important because it results in a lot of the shortcomings we’re left with 30 years later. While we're talking history: the name JavaScript was essentially a marketing term. The language has no formal relationship to Java, which at the time was emerging as an important language. Java is closer to C++ or C# in semantics and purpose, a compiled language used for building applications. Java is a by-the-book object oriented language, and Javascript is, as we will see, definitely not. You will see JavaScript referred to as ECMAScript or ES. That is the more "correct" name for the modern version of the language as it is written today. (TypeScript is another thing entirely however, a language that compiles down to JS/ES). ### Backwards Compatability JavaScript, like all web languages cannot break backwards compatibility without breaking the web. As a result, instead of old features (and even bugs) being removed, they are often left in, sometimes deprecated, but available nonetheless. This means JavaScript is a language that has more than one way of doing most things. This guide will focus on the current accepted best practice, and only briefly touch upon alternatives. ### Evolving While Python is by no means a static language, the pace at which JavaScript changes can be jarring. There are significant new features every year, and best practices evolve quickly. In light of the above, I am aiming to target current best practices. You may discover that reading JavaScript code on StackOverflow, or generated by ChatGPT uses alternatives to what is presented here. There is a lot of old & not-very-good JavaScript out there. ### Silent Errors Things that you'd expect to raise an exception in JavaScript will instead fail silently. This can be frustrating, especially as you learn. The general principle in JavaScript is to execute code unless/until there is a syntax error. This is influenced by the idea that web pages shouldn't show errors. ### Browser Differences When running client-side JavaScript (that is, JavaScript that runs in the browser), there is no single implementation. Each version of each web browser introduces changes to what is supported and what is not, and major browsers do not agree 100% on their implementation. This can be a major headache, though the situation has improved significantly with the death of Internet Explorer. is an important site for any developer building anything of complexity with newer JavaScript (or CSS) features.)4c:T91c,## Syntax Differences It's worth clarifying that JavaScript has only a passing similarity with Java, with syntax somewhere between C & Python and semantics closer to LISP. (The name was chosen for marketing reasons, nothing more.) Simple Python code can be translated to JavaScript without much fuss. We can start with some superficial differences: ### Comments JavaScript uses C-style multiline comments just like CSS ``` /* JavaScript comment. */ ``` There are also single-line comments that do not need an ending marker: ``` // one line comment ``` Most people use `//` where you would use `#` in Python. And keep `/* multilines */` for docstring-type comments. ### Whitespace vs. {} In Python, whitespace is significant. ``` if condition: func1() func2() ``` The indentation before `func1` identifies it as part of the conditional block, whereas `func2` will execute no matter what, as it is external to the block. In JavaScript (or any language with C-inspired syntax), blocks are denoted with `{` and `}`, and statements are terminated with `;`. ```javascript if (condition) { func1(); } else if(condition2) { func4(); } else { func3(); } func2(); ``` You'll see three differences: - The conditional statement is surrounded by `()`. - The body of the conditional is surrounded by `{}`. - Each statement ends with a `;`. We've kept the indentation comparable to the Python version, which is conventional, but no longer necessary. This code can be placed on a single line, since whitespace is essentially ignored in these languages. ```javascript if (condition) { func1(); } func2(); ``` Has the same meaning, it is just less readable. One final caveat, in this example, where the body of the conditional is only a single statement, the `{}` are actually optional, so you will often see the code written: ```javascript if (condition) func1(); func2(); ``` To a Python programmer this can be misleading, since it is not the indentation that matters here. ```javascript if(condition) func1(); func2() ``` or ```javascript if(condition) func1(); func2(); ``` Would still be interpreted as: ```javascript if (condition) { func1(); } func2(); ``` Because no matter what, if the `{}` are omitted, only the statement immediately following the conditional is considered the body.4d:Ta76,## Objects JavaScript objects are kind of a hybrid between a `dict` and a `class`. As you've seen with `JSON`, JavaScript objects use familiar syntax: ```json {"key": "value", "arrays": ["work", "too"], "and_items": {"can": "nest"}} ``` In JSON and Python, keys need to be quoted, in JavaScript, the quotes are typically omitted. In `JavaScript` this is called an object, and instead of accessing members with index-like lookup (`d["key"]`), members are accessed with dotted lookup `d.key` the way you would an object in Python. ### Object-Oriented Programming The traditional method of doing object-oriented programming in JavaScript is to use something called "prototypal inheritance". It also has a newer `class` keyword, but we won't dive too deeply into creating our own objects in this lesson. What you might need to know is how to use existing classes: ```javascript // constructor functions must follow the `new` keyword let d = new Date('January 1, 2024 01:23:45'); ``` JavaScript does have a newer `class` keyword, but we aren't going to look at object-oriented programming in JavaScript. # Gotchas JavaScript does not want to raise exceptions, instead it will typically allow some unusual things like the aforementioned missing parameters to functions. Another place that this laxness can be a real pain is in how JavaScript handles types conversions. In Python you get a `TypeError` if you try to take an illegal action between two types, such as dividing a string by an integer. In JavaScript `"abc"/3 === NaN`. Any operation between to types will give *some* result. When a `Number` is involved, that's often a `NaN`. But other types will do surprising things: - `[]*2 === 0` - `[4]*2 === 8` - `[4, 5]*2 === NaN` - `{} * {} === NaN` - `{} + {} === '[object Object][object Object]'` - `Array(16).join("wat" - 1) + "Batman" == "NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN Batman"` Yeah... it is a mess. These type coercion rules are learnable, and I've seen JavaScript interviews that ask people to solve the last one. But as a best practice, we want to avoid triggering any of these. Instead of relying on this behavior we'll need to be very careful about types, and know that if we're getting a strange bug like output that includes `[object Object]`, we probably used a type incorrectly. And before we get any further, no `===` is not a typo, it is actually a key part of avoiding type coercion. `==` will do coercion, so some strange things are equal to one another. - `1 == "1"` - `0 == []` - `"" == false` - `false == ["0"]` We never want this behavior, most JavaScript style guides ban `==` as a result. Use `===` instead. 4e:T67a,## Functions On their surface, functions in JavaScript are quite similar to those in Python. ``` function add(a, b = 2) { return a + b; } ``` Just like other blocks, JavaScript uses `{}` instead of indentation. Like Python we can make parameters optional by setting default values, as seen with `b` above. But in fact, all parameters are optional. Of course in Python, `add()` would raise an Exception, this is one of many places where JavaScript is much more "forgiving". Missing parameters are simply set to `undefined`, so `add()` becomes `add(undefined, 2)`, and `undefined + 2` is the special value `NaN`, or "not-a-number". Ick. I mainly mention this because it makes JavaScript code harder to debug. When a missing `return` statement leads to a chain of undefineds being returned, you will likely miss your exceptions. Pass the right number of arguments to functions. ### Keyword Arguments In Python if you needed to pass a lot of parameters to configure a function you'd typically make them keyword-only: ```python encode(x="mpg", y="year", color="make", shape="country") ``` In JavaScript, this would be achieved by taking an object as a parameter. ```python encode({x: "mpg", y: "year", color: "make", shape: "country"}) ``` A function receiving such an object would often then use this pattern to handle defaults: ```javascript function encode(options) { let xDatum = options.x || "x"; let yDatum = options.x || "y"; ... } ``` This uses the property of `||` that if the first value is `undefined`, it will return the second. This operates on the principle of short-circuiting, which also works in Python but is less-used. 4f:T630,## DOM Manipulation The purpose of JavaScript in the browser is to modify what is on the page. This means your code won't use `print` statements. Instead, you will typically be manipulating the HTML via the document object model, DOM. - `document.getElementById` - Get a single element, since IDs are supposed to be unique. - `document.getElementsByClassName` - Get list of elements with a given class in their classList. - [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) - A powerful API for selecting elements based on CSS selectors. ### Element All of the above methods return instances of an `Element` type, which has attributes: - `elem.classList` - List of classes on this element. (Already split, so `class="one two"` becomes `classList=["one", "two"]`). - `elem.innerHTML` - Directly access/modify HTML between start & end tag for this element. - `elem.attributes` - A dictionary-like object mapping attributes to their values. For more: ### `console.log` `print`-debugging can be very useful, especially in an interactive program, and given JavaScript's lack of error reporting. You will want to open your developer console whenever working with JavaScript, so you can see the errors that *are* reported, as well as the output of JavaScript's answer to print debugging: `console.log`. `console.log` is in fact a very powerful tool, if you log a variable such as a list or DOM element, you can use your mouse to inspect it in the terminal. (Demonstration) 50:[] 47:{"id":"dbb6cc292aa95589","slug":"js-for-py","title":"JavaScript for Python Developers","thumbnail":"ad446f3b369ff9e034645629f547f5b46f63e30f19e435f25a50a987499385e5","access_level":"public","create_time":"$D2024-10-24T04:16:42.017Z","update_time":"$D2026-10-29T19:24:23.366Z","view_time":null,"first_public_time":"$D2024-11-07T20:11:05.039Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e1d9f35bdac07876","login":"jpt","name":"jpt","avatar_url":"https://avatars-next.observableusercontent.com/72e10a43bda276292c5d748244cf7dc1d3cfb1d188ff32d52f1c5c3e0b5b5522","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":134,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c412710920b89269","login":"jpt","name":"jpt","avatar_url":"https://avatars-next.observableusercontent.com/6925780e31ef84d65818e305f228f86a2b41ebdb465d7382027da54ab8d87fb8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c412710920b89269","login":"jpt","name":"jpt","avatar_url":"https://avatars-next.observableusercontent.com/6925780e31ef84d65818e305f228f86a2b41ebdb465d7382027da54ab8d87fb8","tier":null,"role":"editor"},{"type":"team","id":"e1d9f35bdac07876","login":"jpt","name":"jpt","avatar_url":"https://avatars-next.observableusercontent.com/72e10a43bda276292c5d748244cf7dc1d3cfb1d188ff32d52f1c5c3e0b5b5522","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c5297cfb013b1030","slug":"web-collection","title":"Web Collection","owner":{"id":"e1d9f35bdac07876","login":"jpt","name":"jpt"}},"type":"notebook","body":{"titling":"auto","title":"JavaScript for Python Developers","cells":[{"id":0,"value":"# JavaScript for Python Developers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"

\n**This notebook has been superceded by **\n

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"## Variables\n\nThere are two currently-recommended ways to set variables:\n\n```javascript\nlet radius = 3;\nconst PI = 3.14159;\n```\n\nYou may also see `var x = 0;` in older code, but it should not be used.\n\nConstants cannot be changed, while variables set with `let` can be.\n\nJavaScript also uses `camelCaseVariables` instead of Python's `snake_case_names`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"## String Differences\n\nStrings in JavaScript are similar to Python's in many ways.\n\nOne key difference is that instead of f-strings, JavaScript has backtick-surrounded template strings:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"// template string example\n{\n let word = \"fig\";\n let n = 8;\n const nSquared = n * n;\n return `Template ${word} -- ${nSquared}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"## Functional Programming\n\nIf we mind our types carefully, and remember our `;` we can write JavaScript code that looks a lot like Python code.\n\nBut just as we have the concept of \"Pythonic\" or idiomatic code, there is a way JavaScript code is typically written, and language features to support it.\n\nJavaScript is very oriented towards functional programming, and D3 is no exception.\n\nIn many places you will find yourself passing functions into other functions. \n\nWe can do this in Python too, though you may not be well-acquainted with this style of programming:\n\n```python\ndef add_one(x):\n return x + 1\n\n# map is a Python built-in that applies a function to all elements of a list\nlist(map(add_one, [1, 2, 3])) == [2, 3, 4]\n```\n\nYou may have encountered `lambda` in Python, which gives us a shortcut for returning single-line functions to be used as parameters:\n\nlist(map(lambda x: x + 1, [1, 2, 3]))\n\nIn JavaScript map is built in to `Array`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"{\n let ll = [2, 3, 4];\n let a = ll.map(function (x) {\n // as much as we want\n return x + 1;\n });\n\n let b = [2, 3, 4].map((x) => {\n console.log(x);\n return x + 1;\n });\n\n // the arrow function is equivalent to returning x + 1\n return [a, b];\n}\nconsole.log(a);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"

one

two

three

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"{\n // grab an element and change its inner HTML\n document.getElementById(\"one\").innerHTML = \"new bold text\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"// grab elements by class name and modify their style\n{\n for (let e of document.getElementsByClassName(\"odd\")) {\n // can set entire style\n e.style = \"font-weight: bold;\";\n // or per-property in a dictionary-like manner on .style\n e.style[\"color\"] = \"green\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"// example of console.log\n{\n let divs = document.querySelectorAll(\"#exZ > div\"); // get all divs in example\n divs.forEach(function (e) {\n console.log(e);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null