The function

addEventListener

creates the specified event listener for the object. In this case we add

click

event for the div element with id

div_element

without using anonymous function. First we select the object that we want to create

click

event listener to

let div = document.getElementById('div_element');

Then we create the actual event listener for the event without anonymous function

div.addEventListener('click', func);
function func() {
    alert('You clicked me!');
}

The same example using anonymous function

div.addEventListener('click', function(){
  alert('You clicked me!');
})

HTML part of the examples:

<div id="div_element">Click Me</div>

Another method to add the event listener is to include

onclick

attribute inside opening tag

<div onclick="func()">Click Me</div>

Let's declare any string variable

let myString = 'Some String'

The string variable has access to all

string functions

document.write(myString.toUpperCase());

The result will be:

SOME STRING

But if we let number variable to use the string function

toUpperCase()

let myNumber = 55
console.log(myNumber.toUpperCase());

Then we will get the following error. This is because number type variable does not have access to string functions

Uncaught TypeError: myNumber.toUpperCase is not a function

If a fatal error occurs catch block calls

logError

function and passes details of the error, such as:

file

,

line

,

code

,

message

and

trace

try {
    undefinedFunction();
} catch (Error $e) {
    logError(
		'ERR FILE: ' . $e->getFile() . "\n" .
		'ERR LINE: ' . $e->getLine() . "\n" .
		'ERR CODE: ' . $e->getCode() . "\n" .
		'ERR TEXT: ' . $e->getMessage() . "\n" .
		'ERR TRACE String: ' . $e->getTraceAsString()
	);
}

The function

logError

appends current date and time to the error details and logs into the error file

function logError($error) {
	
	$content = "\n\n\n".date('Y-m-d H:i:s');
	$content .= "\n".$error;
	
	file_put_contents('/var/log/errors.txt', $content, FILE_APPEND);
}

In JavaScript the statement evaluates to

true

but in PHP it evaluates to

false

if ("0") {
    
}

The

map

function calls

getNames

function for each item of the array. Each time the function

getNames

returns only names from each object

let myFavoritePlanets = [
    {name: 'Earth', radius: 6371}, 
    {name: 'Jupiter', radius: 69911}, 
    {name: 'Neptune', radius: 24622, moons: ['Triton', 'Thalassa', 'Nereid', 'Proteus', 'Hippocamp', 'Naiad']}
]
let namesOnly = myFavoritePlanets.map(getNames);

function getNames(planet) {
  return planet.name
}
console.log(namesOnly);

Chains several array functions

filter

,

map

together. Uses

onlyMen

and

underTwenty

methods for filtering the result. Uses

onlyNames

function to take only names from the objects.

let people = [
  {name: 'გიორგი', age: 15, gender: 'male'},
  {name: 'ეკატერინე', age: 35, gender: 'female'},
  {name: 'დავითი', age: 75, gender: 'male'},
  {name: 'ნინო', age: 18, gender: 'female'},
  {name: 'თორნიკე', age: 11, gender: 'male'}
]
function onlyMen(human) {
  return human.gender == 'male'
}
function underTwenty(human) {
  return human.age < 20
}
function onlyNames(human) {
  return human.name
}
let onlyBoysNames = people.filter(onlyMen).filter(underTwenty).map(onlyNames)
document.write(onlyBoysNames)

Variable

variableVAR

is visible outside the

if

statement because it uses function scope instead of block scope

function callMePlease() {
  if (1 == 1) {
    let variableLET = 'LET'
    var variableVAR = 'VAR'
  }
  document.write('My ' + variableVAR + '</br>')
  document.write('My ' + variableLET + '</br>')
}

callMePlease()

Another variable

variableLET

is not visible outside the block because it uses block scope and the code above will generate the following error:

Uncaught ReferenceError: variableLET is not defined

Variable

lastName

declared by the keyword

let

is not added to the global

window

object. That is why the variable is equal to

undefined

// Declaring variable using keyword "var"
var firstName = "Jet"

// Declaring variable using keyword "let"
let lastName = "Li"

// Declaring variable without using any keyword
carMark = "Tesla"

function driveCar() {
  console.log(this.firstName + ' ' + this.lastName + ' is driving a car '+this.carMark)
}

driveCar()

The result will be:

Jet undefined is driving a car Tesla

Because declaring variable with

var

keyword and without any declaration keyword are the same. Both add the variable to the global

window

object. After running the above code, global object

window

will have

firstName

and

lastName

attributes

window.firstName;  // "Jet"
window.lastName;  // undefined
window.carMark;  // "Tesla"

Regular anonymous function:

let numbers = [10, 100, 1000]

let doubled = numbers.map(function(x){
  return x * 2
})

document.write(doubled)

Alternative arrow function:

let doubled = numbers.map((x) => { return x * 2 })

If it's only a single line we don't need curly brackets and the keyword

return

let doubled = numbers.map((x) => x * 2);

If the arrow function has only one parameter, it does not need parentheses:

let doubled = numbers.map(x => x * 2);

Note: We only need

parentheses

if we had zero or more than one parameters

Function declarations are hoisted. It means, we can use the function before we declare it

hoisted(); // logs "foo"

function hoisted() {
  console.log('foo');
}

Function expressions - anonymous functions are not hoisted:

notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
   console.log('bar');
};