Skip to content

3. The Basics of JavaScript

Note: From here on, the term [JavaScript] will always refer to the ECMAScript 6 standard.

Inside the previous JavaScript project, create a folder named [bases]. We will place the examples from this section there:

Image

3.1. script [bases-01]

To introduce the basics of PHP7, we used the following code (see linked paragraph):


<?php

// this is a comment
// variable used without being declared
$name = "dupont";
// a screen display
print "name=$name\n";
// an array with elements of different types
$array = array("one", "two", 3, 4);
// its number of elements
$n = count($array);
// a loop
for ($i = 0; $i < $n; $i++) {
  print "array[$i] = $array[$i]\n";
}
// Initializing 2 variables with the contents of an array
list($string1, $string2) = array("string1", "string2");
// concatenating the two strings
$string3 = $string1 . $string2;
// display result
print "[$string1,$string2,$string3]\n";
// function usage
display($string1);
// the type of a variable can be known
displayType("n", $n);
displayType("string1", $string1);
displayType("array", $array);
// the type of a variable can change during execution
$n = "has changed";
displayType("n", $n);
// a function can return a result
$res1 = f1(4);
print "res1=$res1\n";
// a function can return an array of values
list($res1, $res2, $res3) = f2();
print "(res1,res2,res3)=[$res1,$res2,$res3]\n";
// we could have retrieved these values into an array
$t = f2();
for ($i = 0; $i < count($t); $i++) {
  print "t[$i]=$t[$i]\n";
}
// some tests
for ($i = 0; $i < count($t); $i++) {
  // display only strings
  if (getType($t[$i]) === "string") {
    print "t[$i]=$t[$i]\n";
  }
}
// comparison operators == and ===
if("2"==2){
  print "With the == operator, the string 2 is equal to the integer 2\n";
}else{
  print "with the == operator, the string 2 is not equal to the integer 2\n";
}
if("2"===2){
  print "With the === operator, the string 2 is equal to the integer 2\n";
}
else{
  print "with the === operator, the string 2 is not equal to the integer 2\n";
}
// other tests
for ($i = 0; $i < count($t); $i++) {
  // only displays integers >10
  if (getType($t[$i]) === "integer" and $t[$i] > 10) {
    print "t[$i] = $t[$i]\n";
  }
}
// a while loop
$t = [8, 5, 0, -2, 3, 4];
$i = 0;
$sum = 0;
while ($i < count($t) and $t[$i] > 0) {
  print "t[$i]=$t[$i]\n";
  $sum += $t[$i];   //$sum=$sum+$t[$i]
  $i++;               //$i=$i+1
}//while
print "sum=$sum\n";

// end of program
exit;

//----------------------------------
function display($string) {
  // display $string
  print "string=$string\n";
}

//display
//----------------------------------
function displayType($name, $variable) {
  // displays the type of $variable
  print "type[variable $" . $name . "]=" . getType($variable) . "\n";
}

//displayType
//----------------------------------
function f1($param) {
  // add 10 to $param
  return $param + 10;
}

//----------------------------------
function f2() {
  // returns 3 values
  return array("one", 0, 100);
}
?>

Translated into JavaScript, this results in the following code:


'use strict';
// this is a comment
// constant
const name = "dupont";
// a screen display
console.log("name: ", name);
// an array with elements of different types
const array = ["one", "two", 3, 4];
// its number of elements
let n = array.length;
// a loop
for (let i = 0; i < n; i++) {
  console.log("array[", i, "] = ", array[i]);
}
// Initializing 2 variables with the contents of an array
let [string1, string2] = ["string1", "string2"];
// concatenating the two strings
const string3 = string1 + string2;
// display result
console.log([string1, string2, string3]);
// using the function
display(string1);
// the type of a variable can be determined
displayType("n", n);
displayType("string1", string1);
displayType("array", array);
// the type of a variable can change during execution
n = "has changed";
afficheType("n", n);
// A function can return a result
let res1 = f1(4);
console.log("res1=", res1);
// a function can return an array of values
let res2, res3;
[res1, res2, res3] = f2();
console.log("(res1,res2,res3)=", [res1, res2, res3]);
// we could have retrieved these values in an array
let t = f2();
for (let i = 0; i < t.length; i++) {
  console.log("t[i]=", t[i]);
}
// some tests
for (let i = 0; i < t.length; i++) {
  // only displays strings
  if (typeof (t[i]) === "string") {
    console.log("t[i]=", t[i]);
  }
}
// comparison operators == and ===
if ("2" == 2) {
  console.log("With the == operator, the string 2 is equal to the integer 2");
} else {
  console.log("with the == operator, the string 2 is not equal to the integer 2");
}
if ("2" === 2) {
  console.log("With the === operator, the string 2 is equal to the integer 2");
} else {
  console.log("With the === operator, the string '2' is not equal to the integer 2");
}
// other tests
for (let i = 0; i < t.length; i++) {
  // displays only integers >10
  if (typeof (t[i]) === "number" && Math.floor(t[i]) === t[i] && t[i] > 10) {
    console.log("t[i]=", t[i]);
  }
}
// a while loop
t = [8, 5, 0, -2, 3, 4];
let i = 0;
let sum = 0;
while (i < t.length && t[i] > 0) {
  console.log("t[i]=", t[i]);
  sum += t[i];
  i++;
}
console.log("sum=", sum);

// program terminates because there is no more executable code

//display
//----------------------------------
function display(string) {
  // displays string
  console.log("string=", string);
}

//displayType
//----------------------------------
function displayType(name, variable) {
  // displays the variable type
  console.log("type[variable ", name, "]=", typeof (variable));
}

//----------------------------------
function f1(param) {
  // adds 10 to param
  return param + 10;
}

//----------------------------------
function f2() {
  // returns 3 values
  return ["one", 0, 100];
}

Let’s discuss the differences between PHP and ECMAScript 6 code with the [use strict] declaration (line 1):

  • The first difference is that in ECMAScript, variables are declared using the following keywords:
    • [let] to declare a variable whose value may change during code execution;
    • [const] to declare a variable whose value will not change (i.e., a constant) during code execution;
    • You can also use the [var] keyword instead of [let]. This was the keyword used in ECMAScript 5. We will not use it in this course;
  • line 6: the [console.log] method can display all kinds of data: strings, numbers, booleans, arrays, and objects. The PHP [print] method cannot natively display arrays and objects. In the [console.log] expression, [console] is an object and [log] is a method of that object;
  • line 8: JavaScript arrays are objects referenced by a pointer. When we write: 

const array = ["one", "two", 3, 4];

the variable [array] is a pointer to the literal array ["one", "two", 3, 4]. Modifying the array’s contents does not change its pointer. Therefore, an array is most often declared with the [const] keyword. In PHP, an array is not referenced by a pointer. It is a literal value;

  • Line 12: The loop variable [i] is declared (let) within the loop. The keyword [let] is block-scoped (code within curly braces). Therefore, the variable [i] on line 12 is only accessible within the loop;
  • Line 18: The string concatenation operator is the + operator in JavaScript and the . operator in PHP. A distinctive feature of this operator is that it takes precedence over the + addition operator. Thus:
    • in PHP, ‘1’ + 2 yields the number 3;
    • in JavaScript, ‘1’+2 yields the string ‘12’;
  • line 20: [console.log] can display arrays;
  • line 82: in JavaScript, it is not possible to specify the type of a function’s parameters;
  • line 91: the [typeof] operator allows you to determine the type of a data item. There are four types: number, string, boolean, and object. Note that in JavaScript there is no [integer] type or [array] type. As mentioned, arrays are handled via pointers and fall into the object category;
  • lines 50–59: As in PHP, JavaScript has two comparison operators, == and ‘===’, with the same meaning as in PHP. ESLint most often flags the == operator as a potential error. We will consistently use the ‘===’ operator;
  • line 79: we could have included the [return] statement, but ESLint issues a warning that [return] should only be used within a function;

Let’s run this code:

Image

Execution results:


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-01.js"
name: dupont
array[ 0 ] = one
array[ 1 ] = two
array[ 2 ] = 3
array[ 3 ] = 4
[ 'string1', 'string2', 'string1string2' ]
string = string1
type[variable n] = number
type[variable string1] = string
type[variable array] = object
type[variable n] = string
res1 = 14
(res1, res2, res3) = ['one', 0, 100]
t[0] = one
t[1] = 0
t[2] = 100
t[0] = one
With the == operator, the string 2 is equal to the integer 2
With the === operator, string 2 is not equal to the integer 2
t[ 2 ]= 100
t[ 0 ]= 8
t[ 1 ]= 5
sum= 13

[Done] exited with code=0 in 0.316 seconds

In the written code, ESLint reports two errors:

Image

  • When you hover over the red warning line, you see error message [3]. Here, ESLint does not recognize that two constants are being compared. One of the two operands should be a variable;
  • in [4], a [Quick Fix] option allows you to dismiss the warning if you decide not to correct the error;

Image

  • in [5], you can disable the warning for the current line or for the entire file. We choose the latter option here. Line [6] is then generated at the beginning of the file;

3.2. script [bases-02]

The [bases-02] script demonstrates the use of the [let] and [const] keywords:


'use strict';
// To initialize a variable, use let or const
// let for variables
let x = 4;
x++;
console.log(x);
// const for constants
const y = 10;
x += y;
// not allowed
y++;
  • Line 11 causes a runtime error [1-2]. It is flagged by ESLint before execution [3]:

Image

3.3. script [bases-03]

The script [bases-03] examines the scope of variables in JavaScript:


'use strict';
// variable scope
let count = 1;
function doSomething() {
  // count is known here
  console.log("count=", count);
}
// call
doSomething();
  • the variable [count] declared outside the [doSomething] function is nevertheless known within this function. This is a fundamental difference from PHP;

Execution


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-03.js"
count= 1

[Done] exited with code=0 in 0.3 seconds

3.4. script [bases-04]

A local variable hides a global variable with the same name:


'use strict';
// variable scope
const count = 1;
function doSomething() {
  // the local variable hides the global variable
  const count = 2;
  console.log("count inside function=", count);
}
// global variable
console.log("count outside function=", count);
// local variable
doSomething();

Execution


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-04.js"
count outside function= 1
count inside function= 2

[Done] exited with code=0 in 0.246 seconds

3.5. script [bases-05]

A variable defined within a function is not known outside of it:


'use strict';
// variable scope
function doSomething() {
  // variable local to the function
  const count = 2;
  console.log("count inside function=", count);
}
// Here, `count` is not defined
console.log("count outside function=", count);
doSomething();

ESLint reports an error on line 9:

Image

3.6. script [bases-06]

The keywords [let] and [const] define variables with [block] scope (code within curly braces), but not the keyword [var]:


'use strict';
// the [let] keyword allows you to define a block-scoped variable
{
  // the variable [count] is only known within this block
  let count = 1;
  console.log("count=", count);
}
// Here, the variable [count] is not known
count++;

// the keyword [const] allows you to define a block-scoped variable
{
  // the variable [count2] is only known within this block
  const count2 = 1;
  console.log("count=", count2);
}
// here the variable [count2] is not known
count2++;

// the keyword [var] does not allow defining a block-scoped variable
{
  // the variable [count3] will be known globally
  var count3 = 1;
  console.log("count=", count3);
}
// here the variable [count3] is known
count3++;

Comments

  • line 5: the variable [count] is only known within the code block in which it is declared (lines 3–7);
  • line 14: the constant [count2] is only known within the code block in which it is declared (lines 12–16);
  • line 23: the variable [count3] is known outside the code block in which it is declared (lines 21–25);

ESLint reports the following errors:

Image

For these reasons related to block scope, we will only use the keywords [let] and [const] from now on.

3.7. script [bases-07]

Data types in JavaScript:


'use strict';

// JavaScript data types
const var1 = 10;
const var2 = "abc";
const var3 = true;
const var4 = [1, 2, 3];
const var5 = {
  name: 'axèle'
};
const var6 = function () {
  return +3;
}
// Displaying types
console.log("typeof(var1)=", typeof(var1));
console.log("typeof(var2)=", typeof(var2));
console.log("typeof(var3)=", typeof (var3));
console.log("typeof(var4)=", typeof (var4));
console.log("typeof(var5)=", typeof(var5));
console.log("typeof(var6)=", typeof(var6));

Execution


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-07.js"
typeof(var1)= number
typeof(var2)= string
typeof(var3) = boolean
typeof(var4) = object
typeof(var5) = object
typeof(var6) = function

[Done] exited with code=0 in 0.26 seconds

Comments

  • line 7 (code): an array is an object. As such, [var4] is a pointer to the array, not the array itself;
  • line 8 (code): [var5] is a pointer to a literal object. We will see that JavaScript literal objects closely resemble PHP class instances. They, too, are referenced via pointers;
  • line 11 (code): a variable can be of type [function] (line 7 of the results);

3.8. script [bases-08]

This script demonstrates the possible type conversions in JavaScript.


'use strict';

// implicit type conversions
// type --> bool
console.log("---------------[Implicit conversion to a boolean]------------------------------");
showBool("abcd");
showBool("");
showBool([1, 2, 3]);
showBool([]);
showBool(null);
showBool(0.0);
showBool(0);
showBool(4.6);
showBool({});
showBool(undefined);

function showBool(data) {
  // The conversion of data to a boolean is done automatically in the following test
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[boolean value(data)]=", data ? true : false);
}

// Implicit type conversions to a numeric type
console.log("---------------[Implicit conversion to a number]------------------------------");
showNumber("12");
showNumber("45.67");
showNumber("abcd");

function showNumber(data) {
  // data + 1 doesn't work because JavaScript performs string concatenation instead of addition
  const number = data * 1;
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[number]=", number, "[type(number)]=", typeof (number));
}

// Explicit type conversions to a boolean
console.log("---------------[Explicit conversion to a boolean]------------------------------");
showBool2("abcd");
showBool2("");
showBool2([1, 2, 3]);
showBool2([]);
showBool2(null);
showBool2(0.0);
showBool2(0);
showBool2(4.6);
showBool2({});
showBool2(undefined);

function showBool2(data) {
  // The conversion of data to a boolean is done explicitly in the following test
  console.log("[", data, "], [type(data)]=", typeof (data), "[boolean value(data)]=", Boolean(data));
}
// Explicit type conversions to Number
console.log("---------------[Explicit conversion to a number]------------------------------");
showNumber2("12.45");
showNumber2(67.8);
showNumber2(true);
showNumber2(null);

function showNumber2(data) {
  const number = Number(data);
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[number]=", number, "[type(number)]=", typeof (number));
}

// to String
console.log("---------------[Explicit conversion to a string]------------------------------");
showString(5);
showString(6.7);
showString(false);
showString(null);

function showString(data) {
  const string = String(data);
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[string]=", string, "[type(string)]=", typeof (string));
}

// some unexpected implicit conversions
console.log("---------------[Other cases]------------------------------");
const string1 = '1000.78';
// default string concatenation
const data1 = string1 + 1.034;
console.log("data1=", data1, "type=", typeof (data1));
const data2 = 1.034 + string1;
console.log("data2=", data2, "type=", typeof (data2));
// Explicit conversion to number
const data3 = Number(string1) + 1.034;
console.log("data3=", data3, "type=", typeof (data3));
// true is converted to the number 1
const data4 = true * 1.18;
console.log("data4=", data4, "type=", typeof (data4));
// false is converted to the number 0
const data5 = false * 1.18;
console.log("data5=", data5, "type=", typeof (data5));

Execution


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Data\st-2019\dev\es6\javascript\bases\bases-08.js"
---------------[Implicit conversion to a boolean]------------------------------
[data= abcd ], [type(data)]= string [boolean value(data)]= true
[data= ], [type(data)]= string [boolean value(data)]= false
[data= [ 1, 2, 3 ] ], [type(data)]= object [boolean value(data)]= true
[data= [] ], [type(data)]= object [boolean value(data)]= true
[data= null ], [type(data)]= object [boolean value(data)]= false
[data= 0 ], [type(data)]= number [boolean value(data)]= false
[data= 0 ], [type(data)]= number [boolean value(data)]= false
[data= 4.6 ], [type(data)]= number [boolean value(data)]= true
[data= {} ], [type(data)]= object [boolean value(data)]= true
[data= undefined ], [type(data)]= undefined [boolean value(data)]= false
---------------[Implicit conversion to a number]------------------------------
[data= 12 ], [type(data)]= string [number]= 12 [type(number)]= number
[data= 45.67 ], [type(data)]= string [number]= 45.67 [type(number)]= number
[data= abcd ], [type(data)]= string [number]= NaN [type(number)]= number
---------------[Explicit conversion to a Boolean]------------------------------
[ abcd ], [type(data)]= string [boolean value(data)]= true
[ ], [type(data)]= string [boolean value(data)]= false
[ [ 1, 2, 3 ] ], [type(data)]= object [boolean value(data)]= true
[ [] ], [type(data)]= object [boolean value(data)]= true
[ null ], [type(data)]= object [boolean value(data)]= false
[ 0 ], [type(data)]= number [boolean value(data)]= false
[ 0 ], [type(data)]= number [boolean value(data)]= false
[ 4.6 ], [type(data)]= number [boolean value(data)]= true
[ {} ], [type(data)]= object [boolean value(data)]= true
[undefined], [type(data)]= undefined [boolean value(data)]= false
---------------[Explicit conversion to a number]------------------------------
[data= 12.45 ], [type(data)]= string [number]= 12.45 [type(number)]= number
[data= 67.8 ], [type(data)]= number [number]= 67.8 [type(number)]= number
[data= true ], [type(data)]= boolean [number]= 1 [type(number)]= number
[data= null ], [type(data)]= object [number]= 0 [type(number)]= number
---------------[Explicit conversion to a string]------------------------------
[data= 5 ], [type(data)]= number [string]= 5 [type(string)]= string
[data= 6.7 ], [type(data)]= number [string]= 6.7 [type(string)]= string
[data= false ], [type(data)]= boolean [string]= false [type(string)]= string
[data= null ], [type(data)]= object [string]= null [type(string)]= string
---------------[Other cases]------------------------------
data1= 1000.781.034 type= string
data2= 1.0341000.78 type= string
data3= 1001.814 type= number
data4= 1.18 type= number
data5= 0 type= number
https://tahe.developpez.com
This tutorial written by Serge Tahé is made available to the public under the terms of the Creative Commons Attribution – Non-Commercial – ShareAlike 3.0 Unported.