Skip to content

Forward Euler in JavaScript #418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Oct 27, 2018
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions contents/forward_euler_method/code/javascript/euler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
function forward_euler(time_step, n) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

var arr = [];
Copy link
Contributor

@zsparal zsparal Oct 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

arr[0] = 1;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

for (var i = 1; i <= n; i++) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

arr[i] = arr[i - 1] - 3 * arr[i - 1] * time_step;
}
return arr;
}

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

var solution = Math.exp(-3 * time_step * i);

if (Math.abs(arr[i] - solution) > threshold) {
alert(arr[i], solution);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

is_approx = false;
}
}
return is_approx;
}

function main() {
time_step = 0.01;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should all be declared with const:

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

threshold = 0.01;
n = 100;
var euler_result = forward_euler(time_step, n);
var check_result = check_euler(euler_result, time_step, threshold);
alert(check_result);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}

main();
2 changes: 2 additions & 0 deletions contents/forward_euler_method/forward_euler_method.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,8 @@ Full code for the visualization follows:
[import, lang:"matlab"](code/matlab/euler.m)
{% sample lang="swift" %}
[import, lang:"swift"](code/swift/euler.swift)
{% sample lang="js" %}
[import, lang:"javascript"](code/javascript/euler.js)
{% endmethod %}

<script>
Expand Down