Description and basic syntax

PreviousExtra Resources NextThe Document Object Model

Last updated 2 years ago

Was this helpful?

Description and basic syntax

Language overview

JavaScript is arguably the most popular programming language.

JavaScript is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
More than this, JavaScript is single threaded, non-blocking, asynchronous.

Along with HTML and CSS, JavaScript (often abbreviated as JS) is one of the three pillars of the World Wide Web and was started as a way to add interactivity to web pages. However, its role has expanded over the years.

The biggest leap in JavaScript's evolution was the ES6 iteration which will be detailed starting with the Advanced Javascript section.

As well as many other languages, Javascript supports, but it is not limited to the following programming concepts:

Variables of Data Types (ex: Booleans, Numbers, Strings)
Operators (ex: Arithmetic, Assignment, Comparison, Logical, Bitwise)
Structural types:
- Functions
- Objects
Conditional statements and loops

Adding JavaScript to a web page

Inline
Directly in the HTML file between script tags
Using external .js files

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Click me!.</button>

<p id="demo"></p>

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script src="js/script.js"></script> 

</body>
</html>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

Syntax

var myNumber = 3;
counter = counter + 1;
myFunction(); //executing myFunction this is a single line comment

function myFunction() {
    console.log('Hello World!')
}

Variables

Functions

Functions are named blocks of reusable code. (Actually starting with ES6, functions can also be anonymous)

Functions can return a desired value; the default returned value in case the return statement is missing is undefined

JavaScript applies function scoping for its variables.

We can only use the arguments inside the function, they are not accessible from the outside.

We can also declare local variables that have the same scope as parameters.

Variables from outside the function are accessible only if declared in the enclosing scope

function someName(argument1, argument2) {
    let x = argument1 + argument2;
    return(x);
    console.log("hello!"); //this is not executed
}

console.log(someName(3,5))

Operators

Conditional statements

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false
  //  and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false
  //  and condition2 is false
}

Conditional (ternary) operator

Shorter syntax for simple conditions: condition ? exprIfTrue : exprIfFalse

function tooYoung(person) {
    return ((person.age < 18) ? "too young" : "allowed")
}

Looping statements

Basic for loop has the following general syntax: for ([initialExpression]; [conditionExpression]; [incrementExpression]) { statement}

for (let step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log('Made another step');
}

The following example shows the difference between a for...of loop and a for...in loop. While for...in iterates over property names, for...of iterates over property values.

const arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs 3, 5, 7
}

A while statement executes its statements as long as a specified condition evaluates to true

// Infinite loops are bad!
while (true) {
  console.log('Hello, world!');
}