Preparing to Learn JavaScript

As we enter this next module of Flatiron academy, we find ourselves beginning a new language, JavaScript. JavaScript is a programming language that uses the ECMAScript specification and is object-oriented. Object-oriented means that it is based on the concept of objects that contain data and code. JavaScript is an implementation of ECMAScript or European Computer Manufacturers Association. Those definitions sound nice but don’t mean much to someone new to programming or even new to this language. What is important is understanding some fantastic JavaScript methods, mathematics capabilities, and syntax of JavaScript.

Common JavaScript Methods

Luckily for us, JavaScript shares a lot of methods in common with Ruby. Some of those include .map(), .include? /.includes(), and .reduce(). However, JavaScript, or JS, has many methods that can do similar things but with different names. To name a very important one, the for…of iterator. It iterates through an array and lets you operate on each item. Think of this as a replacement for the for-loop. For example, if I had a list of colors in an array, and I wanted to change them all to lighter colors, I could use the for…of loop like such:

for … of loop used to iterate through the ‘colors’ array

This takes the constant array “colors” and adds the string “light” before them. This code would have an output that looks like this:

logged in the console

It is important to note that the for…of loop does the same thing as the .forEach method in JavaScript and is a little more common. You can relate the .forEach method to using the .each method in Ruby; it performs a function or does something with the data for every element of an array. If we were to write the same code out using the .forEach method, it would look like this:

This logs the same as the previous function: light red, light green, and light blue.

You can imagine how these methods would come in handy during everyday programming. Imagine you are trying to write a program that adds the prefix of a person’s name, Mr., Mrs., etc. You could replace the hard coded string with a variable that relies on user input. Then, from that point on in the code, when the user is referenced, they will be remembered as Mr. or Mrs. User.

Another important to be aware of before entering the world of JavaScript is the Object.hasOwnProperty() method. This method returns a boolean value based on what you pass as an argument. If the object has a property equal to your argument, you will receive true, otherwise, you will receive false. Think back to all the times we entered our Ruby console and had to delve into our code to determine what objects had what properties. In JavaScript .hasOwnProperty() on any object and learn whether it exists or not.

Mathematics in JavaScript

A few useful Math functions

Perhaps one of the more fun aspects of JavaScript is its vast mathematic capabilities! In my humble opinion I find Math.round(), Math.pow(a, b), Math.sqrt(), Math.ceil() and Math.floor() to be incredibly useful. These methods do about what you would expect them to do: round rounds to the nearest integer, pow can be used as an exponent or power, ceil and floor round numbers either higher or lower, and sort finds the square root of a number. And their outputs are, respectively:

Math function outputs

These are just some of the many awesome built-in Math functions in JavaScript that can be used for anything from generating random instances of objects to populate a database, setting random colors to an image, to eventually manipulating objects on the screen for things like animations and games. Understanding how to use these and practicing with them can give you a head start on JavaScript programming.

Syntax

Although it is not the most fun subject, it is important to go into JavaScript knowing a few key pieces of syntax. Since we have been learning Ruby, a language that if rather flexible with its inputs, we need to be ready to be a little more implicit in JS. For starters, the use of curly braces {} is almost always necessary when defining a function body in JavaScript. For example, let’s look at the code below:

This function almost works

The above code looks like it should work, and something similar in Ruby certainly would work. However, in JavaScript, this code will throw you an error like this:

A big ugly error message

We can fix this error by simply wrapping our function body in curly braces like so:

Yay! Working code!

And now the function will perform the correct math and will return 3.

To review this code, in the first two lines we use the keyword let to define two variables, a and b. In Ruby, we don’t need keywords to define variables, but in JavaScript, we have a few, the most common being let. Next, we declare our functions differently in JavaScript. We write the word function out before our function name instead of def. It must always be followed by parentheses whether it takes any arguments or not.

Console Log

Enough console logs to start a console fire.

Another key difference you may have noticed is this new line of code console.log(). The console log is JavaScript’s version of Ruby’s p or puts method. It prints or “logs” things to the console. Console log can take a string, variables, integers, or other data types as arguments. It can even take a function as an argument! This can be used to test your code and see what variables or functions equate to what as to avoid getting lost in complicated programs

The printed results of our function!

To sum it up

This is merely a fraction of what we can learn about JavaScript. We haven’t even scratched the surface of Document Object Models or any of the other features JavaScript has. That being said, keeping in mind these methods, math functions, and syntax differences can make the learning process for JavaScript go a little smoother. I hope this encourages all who read it to dive into JavaScript headfirst and get as much out of it as we can!

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store