Forward Euler in JavaScript #418

depate · 2018-10-02T14:42:30Z

Hey all!

Forward Euler in JS.
First time I did something in JS, so I really appreciate any constructive criticism about the code.

Regards
depate

…rithm-archive

Yordrar · 2018-10-04T21:48:37Z

Thanks for the contribution! We are not supporting this language yet, but when we do, we will review it. Make sure to read carefully the contributing tutorial as it says there what i just said

Gathros · 2018-10-04T21:55:50Z

We have JavaScript code in the AAA.

Butt4cak3 · 2018-10-05T00:03:07Z

@Yordrar We have lots of JavaScript already. It was one of the first languages that were contributed. I don't know where you have that information from.

@depate Thank you for contributing! I took a really quick look at your code on my phone and I can already tell you that I will have a few suggestions for you as soon as I have time tomorrow.

depate · 2018-10-05T07:00:58Z

@Butt4cak3 Thanks for reviewing!

zsparal · 2018-10-05T08:29:46Z

contents/forward_euler_method/code/javascript/euler.js

@@ -0,0 +1,32 @@
+function forward_euler(time_step, n) {


As a general note, JS uses camelCase for everything, so the underscores kind of stand out. I would recommend sticking with the de-facto standard formatting

Thanks for the information.
I confess, I did write this first attempt on JavaScript Syntax quite quickly and did not read through a style guide. I could have noticed that there. I'll catch up on the style guides, promise!

zsparal · 2018-10-05T08:31:15Z

contents/forward_euler_method/code/javascript/euler.js

@@ -0,0 +1,32 @@
+function forward_euler(time_step, n) {
+    var arr = [];


In more modern JS people tend to avoid var since it behaves in unexpected ways. For variables whose value does not change you should go with const, otherwise let. In this case const would be the correct option

I think I got behind the usage of var, let and const. After reading about their scopes in the Mozilla Web Dev documents.

If I got it right with const I assign a fixed identifier and a value to the variable. The identifier can't be changed, but the value it holds can.

let is a little less strict about initial values and properties. So I could assign let a = $string and afterwards let a = $number. Which const would prohibit.

Both are only valid for the local control or programming structure, including further inner functions. Thus not globally available to other functions or blocks.

@depate Yes, that's pretty much right. Your terminology might not be 100% correct, but I see that you understand the concept.

zsparal · 2018-10-05T08:31:45Z

contents/forward_euler_method/code/javascript/euler.js

@@ -0,0 +1,32 @@
+function forward_euler(time_step, n) {
+    var arr = [];
+    arr[0] = 1;


I would just inline this with the array initialization: const arr = [1]

Ok, if I got this right, this initialises, the arr array with one element (the zero-eth) in the list which value is 1. As we iterate through all n time steps, the array gets extended by another element which value is the calculated one.

I am more used to fixed array dimensions which are allocated or set at the time of the initialisation. So I get confused all the time. But Python also is more 'flexibel' with memory allocation so I could've known better in the first place.

zsparal · 2018-10-05T08:32:08Z

contents/forward_euler_method/code/javascript/euler.js

+function forward_euler(time_step, n) {
+    var arr = [];
+    arr[0] = 1;
+    for (var i = 1; i <= n; i++) {


Same thing about var as above. let would be the replacement here

zsparal · 2018-10-05T08:33:24Z

contents/forward_euler_method/code/javascript/euler.js

+        var solution = Math.exp(-3 * time_step * i);
+
+        if (Math.abs(arr[i] - solution) > threshold) {
+            alert(arr[i], solution);


I think a console.log would be nicer here. It works in Node as well and it's way less abrasive, even in the browser.

zsparal · 2018-10-05T08:36:05Z

contents/forward_euler_method/code/javascript/euler.js

+
+function check_euler(arr, time_step, threshold) {
+    var is_approx = true;
+    for (var i = 1; i <= arr.length; i++) {


The range is wrong, it should go from 0 to < arr.length. Alternatively you could use:

arr.forEach((value, i) => { // const solution = ... });

Okay, here I get the general concept. One can iterate through the array directly because the array structure supports it as a method internally, great.

I am not sure about the => part. What is its purpose? I did not see it in the docs.

As the callback function returns the actual value of the array element, I could "simplify" the following threshold check by passing value instead of arr[i], am I right?

zsparal · 2018-10-05T08:37:16Z

contents/forward_euler_method/code/javascript/euler.js

+}
+
+function main() {
+     time_step = 0.01;


These should all be declared with const:

const timeStep = 0.01; const threshold = ...;

zsparal · 2018-10-05T08:37:35Z

contents/forward_euler_method/code/javascript/euler.js

+     n = 100;
+    var euler_result = forward_euler(time_step, n);
+    var check_result = check_euler(euler_result, time_step, threshold);
+    alert(check_result);


Similarly to the previous comment, console.log would be more user-friendly here

Butt4cak3 · 2018-10-05T09:32:47Z

In addition to everything that @gustorn said, we use 2-space-indentation here.

Yordrar · 2018-10-05T14:55:27Z

@Butt4cak3 Oh, yeah i searched in the archive and there is javascript... i supposed there wasn't support for it because we don't track its progress here https://github.com/julianschacher/algorithm-archive/projects srry for my blindness

Butt4cak3 · 2018-10-05T17:54:48Z

@Yordrar We do track its progress there, though. Whatever. Let's just focus on the PR. It happens. Don't worry about it.

depate · 2018-10-06T07:59:44Z

Thanks for reviewing as well, @Gustorn . I'll have a few questions, when I get to overhaul the code. But it won't be before today's evening.

depate · 2018-10-09T21:24:57Z

I implemented the recommendations. But I also left some questions to the change requests. :)

Butt4cak3

Alright. @Gustorn unfortunately doesn't have the time needed to keep reviewing this, so I'll go ahead do it instead.

You did a pretty good job applying most of the suggestions, but there are still a few things left. I tried to be somewhat detailed to help you out.

Butt4cak3 · 2018-10-10T15:01:32Z

contents/forward_euler_method/code/javascript/euler.js

+  const time_step = 0.01;
+  const threshold = 0.01;
+  const n = 100;
+  var euler_result = forwardEuler(time_step, n);


You changed var to let and const in most places, but not here. Let me get this straight: There is no good reason to use var. Why?

On the top level of a function, var and let do exactly the same.

In a block inside of a function, var does something kind of weird while let actually does what you would expect. So let is actually better to use.

function foo() { // <- This is where JavaScript moves the var declaration if (true) { var bar; // JavaScript moves this declaration to the top of the function and outside of the block let baz; } }

So in case 1 let and var are the same and in case 2 let is objectively better. So why use var in the first place? I hope you can see how there's no need for it in modern code now. =)

Butt4cak3 · 2018-10-10T15:03:16Z

contents/forward_euler_method/code/javascript/euler.js

@@ -0,0 +1,31 @@
+function forwardEuler(time_step, n) {


What was already said about snake_case vs. camelCase also applies to variables. This should be timeStep. The same goes for is_approx, euler_result and check_result further down.

Butt4cak3 · 2018-10-10T15:15:01Z

contents/forward_euler_method/code/javascript/euler.js

+
+function checkEuler(arr, time_step, threshold) {
+  const is_approx = true;
+  arr.forEach(function callback(value, i) {


I'll go from the point where this thread ended.

I am not sure about the => part. What is its purpose? I did not see it in the docs.

The arrow (=>) is part of the arrow function syntax. It's an alternative way to create an anonymous function. But it's not just another syntax, it actually behaves differently than function () {}. If you want to read up on the differences, you now know what to search for (arrow function). I will not go into detail here. All I will say is that you should probably get in the habit of using them. They're really quite common these days.

This is how an arrow function with a full function body would look:

const func1 = (param1, param2) => { // Function body goes here };

If a function only has one line in it, which is a return statement, you can omit the { } around the function body, so these 2 are the same:

const func1 = (param1, param2) => { return param1 + param2; }; const func2 = (param1, param2) => param1 + param2;

I know what you're thinking. This looks kind of weird and unreadable. But trust me, it's just a syntax that you're not used to and once you're used to seeing it, it will look completely normal and you'll be able to quickly understand its meaning.

If an arrow function has only one parameter, you can also omit the ( ) around the parameter list. So these 2 would be the same:

const double1 = (num) => num * 2; const double2 = num => num * 2;

To give you a practical example of why you would use these forms of arrow functions, here is a snippet of code that takes an array with numbers and creates a second array where all the numbers are doubled:

const doubleArr = arr.map(num => num * 2);

And finally, this is how you could use an arrow function in your code:

arr.forEach((_value, i) => { // Function body goes here });

Also note how I called the first parameter _value with an underscore. That is because it's unused and by convention, you denote an unused parameter by giving it a _ prefix or simply naming it _. Some editors like VSCode will mark an unused parameter as unused unless you prefix it with an underscore.

ok,

I think I got it at least for the first part. This short syntax for functions is easy, because you declare a variables value to the result of a function one evokes with a set of parameters like:

const doubleArr = arr.map(num => num * 2);

But using the same syntax just to define a function on to parameters without a result being assigned to a variable outside of it.

Intuitively I would write it somehow that inside the checkEuler function the const isApprox gets the value of the check directly.

Something like:

const isApprox = arr.forEach(( _value, i) => { [...] // here is the calculation of the solution variable A which gets compared later on with threshold B if ( A > B) { [...] return (A > B) // returning the logical value of the check here, but I can't tell if this valid } });

If this would somehow be possible, then we are saving at least one line of code there. Because const isApprox does not need to be initialised before as true.

Edit:

I see a problem with this procedure: If A > B is never true, which is the intended behavior, then const isApprox will never get a boolean value. So an else statement must be defined which produces more lines of code than the previous implementation.

I felt smart for a little moment in time.

depate · 2018-10-11T17:38:30Z

Thanks for the very detailed explanations, @Butt4cak3!

I'll get my head around it soon!

Butt4cak3

It looks good apart from 2 more little things. Well... One of them isn't that little. It can actually crash your program. But it's a little fix.

Butt4cak3 · 2018-10-12T12:25:52Z

contents/forward_euler_method/code/javascript/euler.js

+}
+
+function checkEuler(arr, timeStep, threshold) {
+  const isApprox = true;


You made this a const, but you try to assign a new value further down. This function will either return true or crash. This is one of those cases where let is required.

Butt4cak3 · 2018-10-14T12:25:59Z

contents/forward_euler_method/code/javascript/euler.js

-  var check_result = checkEuler(euler_result, time_step, threshold);
-  console.log(check_result);
+  let eulerResult = forwardEuler(timeStep, n);
+  let checkResult = checkEuler(eulerResult, timeStep, threshold);


eulerResult and checkResult can also be const.

Ok. GH did not notice me about the new review. I'm on it tomorrow.

Butt4cak3 · 2018-10-21T23:05:16Z

Hey, it's been a few days since you said you'd make the changes. Just wanted to remind you that this is still open.

depate and others added 16 commits September 6, 2018 23:10

Delete monte_carlo_pi.f90

0619e57

Merge branch 'master' of https://github.com/algorithm-archivists/algo…

ecf82ab

…rithm-archive

init

3e86449

Merge branch 'master' of https://github.com/algorithm-archivists/algo…

b9e0828

…rithm-archive

further implementation

5d1602a

next

1ea8e18

Merge branch 'master' of https://github.com/algorithm-archivists/algo…

b9f0caa

…rithm-archive

Merge branch 'master' of https://github.com/algorithm-archivists/algo…

76f5ca2

…rithm-archive

Merge branch 'master' of github.com:depate/algorithm-archive

99b3b36

Merge branch 'bubblesort_fortran' of github.com:depate/algorithm-archive

46f7300

Added bubble.f90

2917f32

Merge branch 'master' of https://github.com/algorithm-archivists/algo…

2bb14be

…rithm-archive

hopefully fixes things

824060b

Merge branch 'master' of https://github.com/algorithm-archivists/algo…

7d8917e

…rithm-archive

Merge branch 'master' of github.com:depate/algorithm-archive

64a2fc8

implementation & documentaiion

252f9c3

june128 added Hacktoberfest The label for all Hacktoberfest related things! Implementation This provides an implementation for an algorithm. (Code and maybe md files are edited.) labels Oct 2, 2018

zsparal reviewed Oct 5, 2018

View reviewed changes

Fixed the raised issues from the review

fd1842c

Butt4cak3 self-assigned this Oct 10, 2018

Butt4cak3 requested changes Oct 10, 2018

View reviewed changes

Using a arrow function

14aa6fa

Butt4cak3 requested changes Oct 14, 2018

View reviewed changes

Butt4cak3 mentioned this pull request Oct 21, 2018

Euler method in js #511

Closed

depate and others added 2 commits October 26, 2018 14:42

Update euler.js

ce1dc90

Merge branch 'master' into euler_javascript

71d7fa2

Butt4cak3 approved these changes Oct 27, 2018

View reviewed changes

Butt4cak3 merged commit 03912e7 into algorithm-archivists:master Oct 27, 2018

		@@ -0,0 +1,32 @@
		function forward_euler(time_step, n) {
		var arr = [];

Uh oh!

Forward Euler in JavaScript #418

Forward Euler in JavaScript #418

Uh oh!

Conversation

depate commented Oct 2, 2018

Uh oh!

Yordrar commented Oct 4, 2018

Uh oh!

Gathros commented Oct 4, 2018

Uh oh!

Butt4cak3 commented Oct 5, 2018

Uh oh!

depate commented Oct 5, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zsparal Oct 5, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Butt4cak3 commented Oct 5, 2018

Uh oh!

Yordrar commented Oct 5, 2018

Uh oh!

Butt4cak3 commented Oct 5, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

depate commented Oct 6, 2018

Uh oh!

depate commented Oct 9, 2018

Uh oh!

Butt4cak3 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

depate Oct 11, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

depate commented Oct 11, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Butt4cak3 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Butt4cak3 commented Oct 21, 2018

zsparal Oct 5, 2018 •

edited

Loading

Butt4cak3 commented Oct 5, 2018 •

edited

Loading

depate Oct 11, 2018 •

edited

Loading

depate commented Oct 11, 2018 •

edited

Loading