Zum Inhalt springen

Some differences between JavaScript/TypeScript and PHP8

Last updated on 29. Mai 2024

JavaScript/TypeScript

PHP8

variables

„var“ is scoped inside a function

function test() {
    var x = 2;
    return x + 2
}

console.log(x);

// error

function test2() {
    if(true) {
        var x = 2;
        return x +1;
    }

   //still possible
   console.log(x);

}

All var’s are function scoped.

„let“ is scoped inside the curly braces

We can even produce our own scope with curly braces without constructs like „if“.

$globalVar

Variables declared outside a class or a function have a global scope.

Variables declared within a function have a local scope inside the function.

Function parameters:
variables passed to a function as parameters are local to that function.

Static Variables:
Static variables within a function retain their value between function calls:

function expStatic() {
    static $staticVar = 0;
    $staicVar++;
    echo $staticVar;
}

expStatic(); //outputs: 1
expStatic(); //outputs: 2

Superglobals like ‚$_GET‘ are always accessible regardless of scope.

Class properties and methods declared inside a class have scope based on their visibility: ‚public‘, ‚protected‘ or ‚private‘.

The JS example with the if statement inside a function will work since the variable inside the if-curly-braces is still available in the function context:

<?
function test(){
    if(true) {
        $x = 2;
    }

    $y = $x;
    echo($y);
}

test();

// output: 2

//$x is outside of "if" reachable (not as "let" in JS, it behaves like a "var" in JS)

constants

In JS you can not change the value of a constant:

const x = 1;
x = 2

output: error

But you can still mutate the value held by const.

You can e.g. push to an array held by a const:

function f() {
const numbers = [1,2];
numbers.push(3);

return: numbers;
}

f();

output: [1,2,3]

But you can not assign a new array to the const:

function f() {
   const numbers = [1,2];
   numbers = [1,2,3]

   return: numbers;
}

f();

output: error

In PHP a const is immutable:

const MY_ARRAY = [1,2];

MY_ARRAY[] = 3;

output: error

Be careful with the dollar sign:


const MY_ARRAY = [1,2,3];
$MY_ARRAY[] = 4;
print_r(MY_Array);

/*
output: 
Array
(
    [0] => 1
    [1] => 2
    [2] => 3
)

„const MY_ARRAY“ and „$MY_ARRAY“ are two different things! First is a const second is a variable with the same name but wrong writing convention in capital letters.


const MY_ARRAY = [1,2,3];
$MY_ARRAY[] = 4;
print_r($MY_Array);

/*
output: 
Array
(
    [0] => 4
)

In PHP, const are written in capital letters, variables in lowerCamelCase.

Template Literals in Java Script and Strings in general

// TS

hello: string = "hello"
hello: string = 'hello'
hello: string = `hello`

// is the same

`backticks` strings allow to insert the result of any JS expression into the string by wrapping it with ${....}. This is called template literals:.

`1 + 1 = ${1 + 1}`;

// result: '1+1=2'

When the result inside the curly braces is a number the .toString() method is used.

`three numbers ${[1, 2, 3]}`

//result: 'three numbers 1,2,3'

The syntactic comma is kind of added.

All of the usual string syntax also works inside template literals. For example, inside of 'quotes'\' is an escaped single quote. We can also write \' inside template literals.

Single-quoted strings are the simplest form of string in PHP. They do not interpret variables or special characters (except for

`\\`

`\'`

Variables are not interpreted.

$string = 'This is a single-quoted string';

Double-quoted strings interpret variables and special characters such as \n (newline), \t (tab), and others. Variables are interpreted.

$name = "Thomas \n Hezel";

Heredoc syntax allows for creating complex strings that span multiple lines. It behaves like double-quoted strings, so variables and special characters are interpreted.

$name = "John";
$string = <<<EOT
This is a heredoc string.
Hello, $name!
EOT;

Nowdoc syntax is similar to heredoc, but it does not interpret variables or special characters. It behaves like single-quoted strings.

$name = "John";
$string = <<<'EOT'
This is a nowdoc string.
Hello, $name!
EOT;

In PHP, you can’t directly embed an array in a double-quoted string the way you can with JavaScript’s template literals. However, you can achieve the same effect by converting the array to a string before including it in the main string.

<?php
$numbers = [1, 2, 3];
$numbersString = implode(", ", $numbers);
$string = "three numbers {$numbersString}";
echo $string;
?>

// output: three numbers: 1, 2, 3
// the empty space between the numbers is ", "

arrays

In JS arrays are objects which is why ‚typeof [1,2,3]* returns *object*.

JS arrays have methods inherited from ‚Array.prototype‘ and are instances of the ‚Array‘ class.

const fruits = ['cherry', 'apple', 'banana'];
Object.keys(fruits);

output: ['0', '1', '2']
const elements = [];
const men = ['paul', 'thomas', 'klaus'];

for (const man in men) {
elements.push(man)
}

output: ['0', '1', '2']

In JS arrays can be „sparse“ not having all indices, same as in PHP. The missing indices are just not there, they don’t have an value of null or something else. Same in PHP.

for … in“ loops over the keys but „for … of“ loops over the values, like the „foreach“ in PHP.

BUT:
„for … of“ returns undefined if a value is missing.

Advice: Always use „for … of“, ESLint will also direct you in this direction.

In PHP arrays are fundamental data types and are not treated as objects.

They do not inherit form any class and do not have methods like JS arrays.

const FRUITS = ['apple', 'banana', 'carrot'];
$elements = [];

foreach (FRUITS as $fruit) {
$elements[] = $fruit;
}

print_r($elements);

Arrays can be sparse not having all indices. They don’t need a predefined size. If you assign a value to a non-existent index in an array, PHP creates that index.

more about arrays

//define an array in JS

let numbers = [1, 2, 3];
let fruits = ['Apple', 'Orange', 'Banana'];
let mixedArray = [1, 'two', true, {key: 'value'}];

//empty array
let emptyArray = [];
//accessing array elements in JavaScript

console.log(numbers[0]);
//output: 1

console.log(fruits[1]);
//output: Orange

conslole.log(mixedArray[3]);
//output: {key: 'value'}

In Java Script, arrays are a specialized type of object. While arrays have some unique behavior and features compared to regular objects, they are still objects at their core. Internally, arrays are represented as objects with integer-base keys (treated as strings) that are automatically maintained and used as indices.

Arrays have the ability to hold elements in a specific order and use numerical indices to access these elements, which is a characteristic feature that separates them from regular objects.

let arr = [1, 2, 3];
console.log(typeof arr);
//output: 'object'

//adding a property to the array, like with an object
arr.someProperty = 'Hello';

//Accessing array elements and the added property
console.log(arr[0]); //1
console.log(arr.someProperty); //'Hello'

Despite arrays being objects, they have additional functionalities and optimizations tailored specifically for handling ordered collections of data. The primary distinction is that arrays have specialized behaviors, methods, and optimizations focused on managing ordered collections (e.g. „push()“, „pop()“, „splice()“), making them more suitable for working with lists of elements compared to regular generic objects in JavaScript.

In JS objects are used similar like associative arrays in PHP, but unlike arrays, objects in JavaScript don’t guarantee the order of properties and don’t have built in methods like „push()“ or „pop()“ as arrays do.

Integer keys in objects will be converted internally in strings (same as PHP associative arrays).

In TypeScript an empty object „{}“ will have the types „string“ and „any“.

let emptyObject: {} = {};

Alternatively, you can use the „Record“ utility type to describe an empty object with specific keys and their corresponding value types:

let emptyRecord: Record<string, any> = {};

If you want to specify the structure of the object with certain properties and their types, you can define an interface or type alias:

interface MyEmptyObject {
//here are the properties
}

let myObj: MyEmptyObject = {};
//define an array in PHP

//using the array() construct
$numbers = array(1, 2, 3);

//or square brackets
$fruits = ['Apple', 'Orange', 'Banana'];

$mixedArray = [1, 'two', true, ['key' => 'value']];

//empty array
$emptyArray = [];
//accessing array elements in PHP

echo $numbers[0];
//output: 1

echo $fruits[1];
//output: Orange

print_r($mixedArray[3]);
//output: Array ([key] => value)

In PHP an array is just an array, the standalone object like in JS doesn’t exist, an object is an instance of a class.

Similar to JS, in PHP, if you use numeric keys in associative arrays, they behave like string keys internally.

For instance,

$myArray[1];
$myArray['1']; $myArray["1"];

will access the same element.

Unlike JavaScript objects, PHP arrays aren’t limited to storing key-value pairs; they can also act as numeric arrays (indexed arrays) and associative arrays simultaneously.

loops over array (values, index-value-pairs)

array

// JS

const numbers = [];
numbers[3] = 'a';
const ergeb = [];
for (const n of numbers) {
    ergeb.push(n);
}
ergeb;

// output: [undefined, undefined, undefined, 'a']
// PHP

$numbers = [];
$numbers[3] = 'a';
$ergeb = [];
foreach ($numbers as $n => $value) {
    $ergeb[$n] = $value;
}

print_r($ergeb);

// output: Array ([3] => a)

nullable types

// TS

class MyClass {
    public add(key: string, value?: string): void {
        // Method implementation
    }
}

value can be undefined: union type

// class PHP

public function add(string $key, ?string $value):void {

}

String $value can be provided or not.

PHP pseudo-type „false“ (instead of „bool“)

// TS

class MyClass {
    public doSomething(myVariable: SomeType | false): void {
        // Method implementation
    }
}

TypeScript is flexible enough to allow specific values in union types, not just types like booleannumber, or string. You can use specific values like false or „23“ in a union type.

// PHP

public function doSomething(SomeType|false $myVariable): void {

}

Values (like string | 23) are not possible in PHP. „false“ is possible.

JS loop over a string/PHP, first convert string to array

// JS

const s = 'loop';
const chars = [];
for (const char of s) {
  chars.push(char);
}
chars;

// result: ['l', 'o', 'o', 'p']
<?php

$s = 'loop';
$chars = [];

foreach (str_split($s) as $char) {
    $chars[] = $char;
}

print_r($chars);

// Outputs: Array ( [0] => l [1] => o [2] => o [3] => p )

In PHP you must first split your string in an array using „str_split()“.

rest parameters / varargs

// JS

function f(...args) {
  return args;
}
f('a', 'b'); 

// Returns: ['a', 'b']

„args“ is an array on which I could use „for … of“ later.

<?php

function f(...$args) {
    return $args;
}

$result = f('a', 'b');

print_r($result);

// Outputs: Array ( [0] => a [1] => b )

?>

passing single arguments with an array / spreading

// JS

function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers);

// result: 3

The array „numbers“ is converted/spread into single arguments.

<?php

function add($x, $y) {
    return $x + $y;
}

$numbers = [1, 2];
$result = add(...$numbers);

echo $result;

// 3

Same in PHP.

destructuring

const letters = ['a', 'b', 'c', 'd'];
const [a, b, c] = letters;
[a, b, c];

Result:

['a', 'b', 'c']

Here an edge case for JS and even more if you try to do it in PHP:

let userName = undefined;
try {
  throw {name: 'Thomas'};
} catch ({name}) {
  userName = name;
}
userName;

// result: 'Thomas'
<?php

// Define the array
$letters = ['a', 'b', 'c', 'd'];

// Destructure the array with the "list-function"
list($a, $b, $c) = $letters;

// Output the variables (or use them as needed)
echo $a; // outputs 'a'
echo $b; // outputs 'b'
echo $c; // outputs 'c'

// If you want to return the values in an array
$result = [$a, $b, $c];

print_r($result); // outputs ['a', 'b', 'c']
?>

The try-catch-destucturing in PHP:

<?php
$userName = null;

try {
    throw new Exception(json_encode(['name' => 'Thomas']));
} catch (Exception $e) {
    $error = json_decode($e->getMessage(), true);
    $userName = $error['name'];
}

echo $userName;
?>

Explanation:

  • In PHP, you can’t throw arrays or objects directly. Instead, you throw an Exception with a JSON-encoded string.
  • The catch block catches the Exception and decodes the JSON string back into an associative array to extract the name value.
  • Finally, the value of $userName is printed.

objects and objects literals

In JavaScript, the term „object“ is used to refer to the generaal data type that (a.) represents an instance of a class or (b.) a standalone entity that constrains properties and methods.

a. same like in PHP, instance of a class

b. JavaScript object that stores information similar to an array, an object literal.

//object literal
let person = {
    name: 'Bernd',
    age: 30,
    city: 'Berlin'
}

//new Object()
let person = new Object();
person.name = 'Bernd';
person.age = 30;
person.city = 'Berlin';

// Object constructor, properties passed as arguments
let person = new Object({
    name: 'Bernd',
    age: 30,
    city: 'Berlin'
});

Accessing properties of an object can be done using dot notation or square bracket notation:

console.log(person.name);
//output: Bernd

console.log(person['age']);
//output: 30

Objects in JavaScript are mutable, which means their properties can be modified, added, or deleted after they’re created:

//modify the age property
person.age = 31;

// Adding a new property
person.job = 'Developer';

// Deleting the city property
delete person.city;

The „get“ keyword, getter and setter in object literals calling a function with the point notation. Similar to classes!

const user = {
  get age() { return 'I am ' + 22; }
};
user.age;

Result:

'I am 22'

The setter version:

const user = {
  realName: 'Thomas',
  set userName(newName) {
    this.realName = `new name: ${newName}`;
  },
};

user.userName = 'Klaus';
user.realName;

result:

'new name: Klaus'

„set“ and „get“ make the functions single parts of an object without the „:“ notation:

// without get and set

const user = {
  userName: function () { return 'Thomas'; }
};

In PHP an object is an instance of a class. There is no concept of object literals.

You can also use PHP’s built-in stdClass to create objects with dynamic properties, which somewhat mimics the flexibility of JavaScript object literals.

<?php
$person = new stdClass();
$person->name = "John";
$person->age = 30;

echo $person->name;
// Outputs: John
echo $person->age;
// Outputs: 30
?>

Author:
Thomas Hezel
email: info@zazu.berlin

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert