The three variables

$variable

,

$Variable

and

$VARIABLE

are completely different

// lowercase
$variable = "Value 1";

// PascalCase
$Variable = "Value 2";

// UPPERCASE
$VARIABLE = "Value 3";

echo $variable . "\n";
echo $Variable . "\n";
echo $VARIABLE . "\n";

Function names are case-insensitive

function printGreeting() {
	print "Prints: Hello world!\n";
}
printGreeting();

Calling the function with uppercase will still work

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');
};

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);

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);
}

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

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>

It's possible to have an object inside another object. In the example we have object

boyfriend

inside

cat

object

let cat = {
    name: 'Lucy',
    age: 4,
    meow() {
        console.log('Meowwww');
    },
    boyfriend: {
        name: 'Jack',
        age: 5,
        favoriteColors: ['Green', 'Yellow'],
        meow() {
            console.log('Meeoowwwwwwwwwwww');
        },
    }
}

Accessing nested object's attributes and methods:

console.log(cat.boyfriend.name); // Jack
cat.boyfriend.meow(); // Meeoowwwwwwwwwwww

The object

cat

combines attributes and behaviors of a cat in the following object

let cat = {
    age: 4,
    name: 'Bella',
    meow() {
        console.log('Meowwww');
    }
}

Instead of the object, we would have separated function and variables, which is not organized way

let catName = 'Bella';
let catAge = 4;

function meow() {
    console.log('Meowwww');
}

Sets

green

background color

document.body.style.backgroundColor = 'green';

Sets

display

property to

inline-block

for the element with id

element_id

document.getElementById('element_id').style.display = 'inline-block';

Prints the current web page title

console.log(document.title);

Updates the current web page title

document.title = 'Getting started with JavaScript';