JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions — it is best known as the scripting language for webpages. It is a prototype-based, multi-paradigm scripting language that is dynamic, and it supports object-oriented, imperative, and functional programming styles.
Now, what does all that mean?
Well, it could be a bit overkill to try to explain those topics if you are just starting out in coding or learning JavaScript. In short, JavaScript most often correlates with client-side scripting on webpages. When you use a website, anything you interact with usually involves JavaScript — a search bar on Google or a dropdown menu on Facebook is all JavaScript.
While JavaScript was originally intended for websites, its uses have far surpassed front-end interactive website usage. JavaScript can be used as a server side-language with NodeJS to create desktop and mobile apps or program different electronics (popular YouTuber, Michael Reeves, uses JavaScript on a lot of his quirky inventions). JavaScript has expanded immensely since its inception with tons of different use cases and massive community support.
The Best Places to Learn JavaScript
There are many ways to learn JavaScript — here are some of the best and the most cost-effective ways.
1. freeCodeCamp
With freeCodeCamp, everything runs in your browser. It has a code editor, console, and example browser window all within site. freeCodeCamp can seem daunting at first due to the sheer amount of content it has, but do not worry. If you are looking to learn JavaScript fast, it has a section called “JavaScript Algorithms and Data Structures Certification” specifically for JavaScript. It will take you through learning the basics of JavaScript and even some in-depth topics such as Data Structures and Algorithms.
Everything else freeCodeCamp has to offer is related to website programming. It even has sections on job hunting. If that is something you are interested in, I would recommend the entire site as it has a lot of great content. FCC also has a Youtube channel: youtube.com/c/freeCodeCamp, where it explains a lot of site topics in a video format.
2. Udemy/Youtube
I put these two in the same category since there is a lot of overlap, and you will see that a lot of people on Udemy use Youtube almost like a marketing tool for their full course. Nonetheless, a lot of Udemy courses range from $10–15 with a lot of good material. Really, one or two courses should be enough to learn JavaScript, so there is no need to spend a fortune. A few instructors I liked were Colt Steele and Brad Traversy.
Alternatively, both Colt Steele and Brad Traversy have Youtube channels that are free and have great content for learning JavaScript. Once you get the hang of the basics, I also recommend The Coding Train, which is run by Daniel Shiffman. I enjoyed all of these instructors’ teaching styles — they have great explanations for different concepts. That said, choose someone who best fits your needs and makes things clearest for you.
How to Learn JavaScript Fast
As with any language, learning JavaScript requires time, studying, and practice. I recommend you learn the basics, which include:
- Variables
- Types of Data: Strings, Integers, Objects, Arrays, Boolean, null, and undefined
- Object Prototypes
- Loops
- If Statements/Conditionals
- Functions
After you have those basics down, hop into some code challenges to get some practice. One site I would recommend is codewars.com. It has tons of challenges with varying levels of difficulty. Start at a basic level. Practice until you are comfortable with the above topics.
Another good practice exercise is making a game like tic-tac-toe or a basic calculator. With these exercises, you will be able to tackle different obstacles and exercise the syntax of JavaScript.
JavaScript Quick Tutorial
Variable Declaration
If the above materials are not enough, here is my quick JavaScript tutorial:
First, we have variables. In JavaScript, there are three ways you can declare a variable:
- var: function-scoped.
- let: block-scoped.
- const: block-scoped, but cannot be reassigned; it also is initialized with an “a” value, unlike “var” and “let.”
Data Types
There are different data types, as mentioned above, but the most important is Objects. Objects are used for various data structures in JavaScript such as Array, Map, Set, WeakMap, WeakSet, Date, and almost everything made with a new keyword.
A small note about null: If you were to check the data type of null through JavaScript, it would evaluate to an Object. This is a loophole that has been utilized by programmers for years. This might not be very common for you early on…
Comments
Comments in JavaScript are signified with “//” for single-line comments or “/* ….. */” for longer blocks of comments. I bring this up now since the examples below have comments.
Loops
If you are not new to programming, I am sure you know what loops are. For those of you who are new to coding, loops are used to iterate or repeat a block of code a certain amount of times or until a condition is met. Loops are often used to go through items in an Array.
The most common loops are the traditional for loops and while loops. A lot of the following is from the developer.mozilla.org and MDN, which is similar to the documentation for JavaScript — here are some of the different loops JavaScript has to offer:
for loop:
for ([initialExpression]; [conditionExpression]; [incrementExpression]) {
// statement
}Provided by MDN:
When a for loop executes, the following occurs:
- The initializing expression, initialExpression, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
- The conditionExpression expression is evaluated. If the value of conditionExpression is true, the loop statement executes. If the value of the condition is false, the for loop terminates. (If the condition expression is omitted entirely, the condition is assumed to be true.)
- The statement executes. To execute multiple statements, use a block statement ({ … }) to group those statements.
- If present, the update expression incrementExpression is executed.
- Control returns to Step 2.
An actual code example of a for loop:
for (let i = 0; i < array.length; i++) {
// code here
}For loops are extremely useful and used often. It is very important to understand and master how for loops work.
do…while loop:
A do…while loop will run code until a condition is false
do {
// statement
}
while (condition);while loop:
A while loop is very similar to the do while loop, but the key difference lies when the conditional is checked. In a do…while loop, the code block runs, and the condition is checked after the while loop checks the condition and runs the block of code.
while (condition) {
// statement
}for…in loop:
For…in loop is used to loop over objects
for (variable in object) {
// statement
}for…of loop:
For…of loop is used typically for arrays or iterable objects. I must stress using the correct loops for arrays and objects to avoid confusion.
for (variable of array) {
// statement
}If Statements
If statements depend on whether a given condition is true and perform what is in the first set of the code block. Do not continue to evaluate the subsequent “else” portions. If there are subsequent conditions that need to be checked, the use of “if else” will be needed. If all conditions do not evaluate as true and there is an “else” provided, the “else” portion of the statement will be used.
if (condition) {
// statement1
} else if (condition2) {
// statement2
} else {
// statement3
}Functions
There are two ways to write a function: a function declaration and a function expression. The “return” keyword is used in JavaScript to define what a function will return. All subsequent code below a return statement will not run inside a function.
Function Declaration:
function square(number) {
return number * number;
}Function Expression:
var square = function(number) {
return number * number;
}The key difference between the two is the function declarations load before any code is executed, while function expressions load only when the interpreter reaches that line of code.
Object Prototype/Classes
In order to provide inheritance, JavaScript utilizes things called prototypes.
Here is an example of what the syntax would look like:
function Person(first, last, age, gender, interests) {
// property and method definitions
this.name = {
'first': first,
'last' : last
};
this.age = age;
this.gender = gender;
//...see link in summary above for full definition
}Creating a new instance of that prototype would look like this:
let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);If you come from a different coding language, you may be more familiar with the term “classes.”
JavaScript also has something called classes — classes are built on prototypes:
class Person {
constructor(first, last, age, gender, interests) {
this.name = {
first,
last
};
this.age = age;
this.gender = gender;
this.interests = interests;
}
}How To Run JavaScript
Since JavaScript is one of the core technologies of the Internet, every modern web browser will have built-in JavaScript consoles. There are also many web-based JavaScript compilers and interpreters.
Browsers
All the big-name browsers such as Chrome, Firefox, Safari, Internet Explorer, and Opera will have JavaScript consoles. I will explain the process on Google Chrome, but all the other browsers can be found in a similar fashion.
In Chrome, right-click anywhere in your browser window and select “Inspect.” Then click on the console tab. From there, you can write “JavaScript” right into the console. Another keyboard shortcut can be found by pressing Command + Shift + J on Mac and Control + Shift + J on Windows.
Web-Based
There are a lot of different web-based JavaScript consoles. My personal favorite is Repl.it, but other options include JS Bin, JSFiddle, and CodePen. Of course, if you find one that you are more comfortable with, you are welcome to use it.
Can I teach myself JavaScript?
The short answer is yes. I do truly believe you can learn JavaScript on your own, but as with anything, it will take time and discipline. There may be times when you want to quit, think you’ve had enough, or question if you are doing it correctly. My answer to those questions would be to follow the free options of Codecademy and freeCodeCamp (above) as they are very structured and give a good foundation for learning. Never get discouraged; you will be surprised at how much you actually know!
So… should I learn JavaScript or Python?
This is a loaded question and could be a whole article in itself, but it really comes down to use cases. Almost everything outside of the coding languages of JavaScript and Python is alike. This includes popularity, support, community, free and paid courses, and versatile uses.
I mention use cases because if you intend to do web-based programming, you will most likely need to know JavaScript; if you focus on web programming, I would recommend learning JavaScript.
If you are more interested in data analytics, artificial intelligence, and machine learning, Python may be the route to go. This is not to say you can only learn one language. If you are up for it, learn both! Python and JavaScript have evolved a lot since they were created, and both can be used for websites, data analytics, artificial intelligence, and machine learning.