DEV Community

Cover image for JavaScript 101: Introduction to Modern JavaScript.
Peter Mwovi
Peter Mwovi

Posted on

JavaScript 101: Introduction to Modern JavaScript.

So, you are new to JavaScript? So am I, Or at least I was a few months ago.

Before we really get in depth with the complexities of the language and why it's basically the go to language for beginners, we will first begin with a history lesson and then learn it's basics.

Image description

JavaScript, sometimes known as JS, is a programming language that, together with HTML and CSS, is one of the essential technologies of the World Wide Web.

On the client side, over 97 percent of websites employ JavaScript for web page behavior, with third-party libraries frequently incorporated.

Brendan Eich invented JavaScript in 1995. It was created for Netscape 2, and in 1997, it became the ECMA-262 standard. The Mozilla foundation continued to develop JavaScript for the Firefox browser after Netscape turned it over to ECMA. The most recent version of Mozilla was 1.8.5. (Identical to ES5).

JavaScript was presented to the ECMA international standards organization by Netscape and Brendan Eich in 1996, and a technical committee (TC39) was formed to further develop the language.

The first edition of ECMA-262 was published in June 1997.

Image description

It's all boring, I know but history is super important.

Continuing on, when the TC39 group met in Oslo in 2008 to discuss ECMAScript 4, they were split into two camps: those who supported ECMAScript 4 and those who opposed it.

  • The ECMAScript 3.1 Camp:
    Microsoft and Yahoo intended to upgrade from ES3 incrementally.

  • Adobe, Mozilla, Opera, and Google formed the ECMAScript 4 Camp to push for a major ES4 upgrade.

August 13 2008, Brendan Eich wrote an email:

It's no secret that the JavaScript standards body, Ecma's Technical Committee 39, has been split for over a year, with some members favoring ES4, a major fourth edition to ECMA-262, and others advocating ES3.1 based on the existing ECMA-262 Edition 3 (ES3) specification. Now, I'm happy to report, the split is over

The solution was to work together:

  1. ECMAScript 4 was renamed to ES5.
  2. ES5 should be an incremental upgrade of ECMAScript 3.
  3. Features of ECMAScript 4 should be picked up in later versions.
  4. TC39 should develop a new major release, bigger in scope than ES5.

The code name for the upcoming new release (ES6) was "Harmony" (because to the division it caused?).

The ES5 project was a big success.
It was first published in 2009, and by July 2013, all major browsers (including Internet Explorer) were completely compliant.

ES6 was also a huge success. It was released in 2015, and all major browsers were fully compliant by March 2017:

The latest ES Version is the ES 12 which was released in June 2021.

Enough with the history lesson now let's see the syntax.

Image description

To log or print messages to the console, use the console.log() method.
It can also print objects and other information.

console.log("Hello World");
//Prints Hello World
Enter fullscreen mode Exit fullscreen mode

Declaring Variables
Any of these three keywords, along with a variable name, can be used to declare a variable in JavaScript:

  • In JavaScript versions prior to ES6, the var is used.
  • When a variable can be transferred, let is the preferable method of declaring it.
  • When declaring a variable with a constant value, const is the preferred method.
var age;
let height;
const price = 300;
Enter fullscreen mode Exit fullscreen mode

undefined is a JavaScript value that denotes the absence of a defined value. The value of variables that are declared but not initialized will be undefined.

var age;
// Prints: undefined
Enter fullscreen mode Exit fullscreen mode

let Keyword
In JavaScript, let creates a local variable that can be renamed. Initialization of a let variable during its declaration is optional. If no value is assigned to a let variable, it will be undefined.

let age; 
console.log(age); // Prints: undefined
count = 21;
console.log(age); // Prints: 21
Enter fullscreen mode Exit fullscreen mode

const Keyword
The term const can be used to declare a constant variable. It must be given a task. Any attempt to re-assign a const variable will result in a runtime error in JavaScript.

const numberOfColumns = 4;
numberOfColumns = 8;
// TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

Methods return information about an object and are called by putting an instance, a period, the method name, and parentheses to the end of the method name.

// Returns a number between 0 and 1`
Enter fullscreen mode Exit fullscreen mode

String .length
A string's .length property returns the total number of characters in the string.

let message = 'Hello lux academy';
// Prints: 17
Enter fullscreen mode Exit fullscreen mode

Numbers are the most basic data type.
They encompass all integers as well as floating point numbers.

let number = 2000; 
 let cash = 500;
Enter fullscreen mode Exit fullscreen mode

Methods can be accessed by inserting the library name, a period, the method name, and a set of parentheses to the library name.

// Math is the library
Enter fullscreen mode Exit fullscreen mode

A primitive data type is a boolean.
It is possible for them to be true or false.

let football = true;
Enter fullscreen mode Exit fullscreen mode

Single Line Comments
Single-line comments are formed in JavaScript by using two consecutive forward slashes //.

//This is a comment
Enter fullscreen mode Exit fullscreen mode

Multi-line Comments
Multi-line comments are formed in JavaScript by encircling the lines with /* at the start and */ at the conclusion. Comments are useful for a variety of purposes, such as explaining a code block or offering hints.

This is a really long comment
which is referred to as a multi-line
Enter fullscreen mode Exit fullscreen mode

Strings are the most basic data type.
They're any collection of characters (letters, spaces, numbers, or symbols) encircled by single or double quotations.

`let string = "This article is really good.";
 let string = "JavaScript is the best.";`
Enter fullscreen mode Exit fullscreen mode

Arithmetic Operators
JavaScript supports arithmetic operators for:

  • + addition
  • - subtraction
  • * multiplication
  • / division
  • % modulo
// Addition
2 + 1
// Subtraction
19 - 2
// Multiplication
2 * 25
// Division
49 / 7
// Modulo
100 % 20
Enter fullscreen mode Exit fullscreen mode

Assignment Operators
Based on the value of its right operand, an assignment operator assigns a value to its left operand.
Here are a few examples:

  • *= multiplication assignment
  • /= division assignment
  • += addition assignment
  • -= subtraction assignment
`let number = 100;
// Both statements will add 10
number = number + 10;
number += 10;
// Prints: 120` 
Enter fullscreen mode Exit fullscreen mode

String Concatenation
The + operator in JavaScript can be used to concatenate multiple strings. Multiple strings and variables containing string values have been concatenated in this example. The concatenated string will be stored in the displayText variable when the code block has been executed.

let team = 'chelsea';
let opponent = 'arsenal'; 
let displayText = 'Yesterday ' + opponent  + ' was beaten by ' +  team + '.';
// Prints: Yesterday arsenal was beaten by chelsea.
Enter fullscreen mode Exit fullscreen mode

String Interpolation
The technique of evaluating string literals containing one or more placeholders is known as string interpolation (expressions, variables, etc).
It's possible to do it with template literals: text $expression text.

let price = 700;
// String concatenation
'The car cost ' + price + ' dollars.';
// String interpolation
`The car cost ${price} dollars.`;
Enter fullscreen mode Exit fullscreen mode

Variables are utilized whenever a piece of data needs to be stored. A variable is a collection of data that can be used elsewhere in the program. Because variables can be used to replace the same value in several locations, they ensure code re-usability.

const name = 'Mwovi';
let age = 21; 
console.log(name + ' is ' + age + ' years old.');
// Prints: Mwovi is 21 years old.
Enter fullscreen mode Exit fullscreen mode

Image description

These basic JavaScript syntax are enough to get you started on the most popular language on the internet.

It is common for people, especially beginners to confuse between java and JavaScript. However as Professor Snape would say,

Image description

This would be akin to confusing car and carpet.
Key differences in the two are, Java is an object-oriented programming language, whereas JavaScript is an object-oriented scripting language. Java builds apps that operate in a virtual machine or in a browser, whereas JavaScript is exclusively used in a browser. While Java code must be compiled, JavaScript code is pure text.

In JavaScript circles such a mistake would cost you your life as you know it.

Image description

Top comments (0)