Quelltext der Seite ECMAScript/Beispiele

== <code>console.log</code> ==
<source lang="javascript">
let a = 5, b = 6

console.log(a);
console.log(a, b);
console.log(a, ' != ', b);
</source>

== Kommentare ==
<source lang="javascript">
// Einzeiliger Kommentar

/* Das ist ein langer,
 * mehrzeiliger Kommentar
 */

/* Man kann keine Kommentare, /* Verschachteln */ SyntaxError */
</source>

== Werte ==
<source lang="javascript">
// Zahlen
5;   -3.21;   0.255e+3;   NaN;   +Infinity;   -Infinity;   0xff /* Hex */ 

// BigInt
BigInt(9007199254740991);   BigInt("9007199254740991")
typeof 1n          === 'bigint'  // true
typeof BigInt('1') === 'bigint'  // true

// NULL
null;  undefined;   NaN;   null !== undefined;   null == undefined

// Boolean
true;   false 

(5 < 2) == null
(5 < 2) == undefined
(5 < 2) == NaN
(5 < 2) == 0
(5 < 2) == -0
(5 < 2) == 0n
(5 < 2) == -0n

// String
'';   'a';   'abc';   "abc";   `abc`

// Array
[1];   [1,2];   [];   ['a', 2, true, []]

// Object
{a: 1};   {a: 1, b: 7};    {};   {"name": "Wolfgang", "geb": 1961, "HSA-Dozent": true, urenkel: []}
</source>

== Quotes ==
<source lang="javascript">
let a = 5
console.log(`aabc`)      // aabc
console.log(`a${a}bc`)   // a5bc
console.log(`a${a+2}bc`) // a7bc
console.log(`a${a}+2bc`) / a5+2bc

let o = {x: 258, y: 400, vx: 80, vy: -200}

`{x: ${this.x}, y: ${this.y}, vx: ${this.vx}, vy: ${this.vy}}`
// {x: 258, y: 400, vx: 80, vy: -200}

'{x: ' + this.x + ', y: ' + this.y + ', vx: ' + this.vx + ', vy: ' +  this.vy + '}'
// {x: 258, y: 400, vx: 80, vy: -200

let select =
`SELECT *
 FROM   haendler
`
console.log(select);

select =
'SELECT * ' + 
'FROM haendler'

console.log(select);
</source>

== Deklarationen ==
<source lang="javascript">
let a            // a === undefined
let a: number    // TypeScript
a = 5;           // a === 5
a = 'abc';       // a === 'abc', TypeScript: Error

let b = 7        // b === 7, TypeScript: b ist vom Typ number
b = 13.33;       // b === 13.333

const c          // Error
const c = 'abc'  // c === 'abc'
c = 'def';       // Error
</source>

== Scope ==
<source lang="javascript">
if (true) { var x = 5 }
console.log(x);  // 5

if (true) { let y = 5 }
console.log(y); // ReferenceError: y is not defined

if (true) { const z = 5 }
console.log(z); // ReferenceError: z is not defined
</source>

== Objekte ==
<source lang="javascript">
let o
o = {};                                              // leeres Objekt
o = { a: 1, b: 2, "Attributname mit Leerzeichen": 3};
o = { x: 100,
      y: 200,
      moveTo(p_x, p_y) { this.x  = p_x; this.y  = p_y; },
      moveBy(p_x, p_y) { this.x += p_x; this.y += p_y; },
    };

o = { a: 5 };
console.log(o.a);

o.a = 6;
console.log(o.a);

o = { _a: 0,
      get a()    { return this._a },
      set a(p_a) { this._a = p_a },
    };

o.a = 6;
console.log(o.a);
</source>

== Kurzschreibweise ==
<source lang="javascript">
let
  a = 5, b = 'abc',
  o = { a, b }      // = { a: a, b: b } // = { a: 5, b: 'abc' }
  // a und b dürfen Variablen, Konstanten und Parameter sein;
  // sie dürfen beliebige Werte, Objekte und auch Funktionen enthalten
</source>

== Spread-Operator ==
<source lang="javascript">
let
  o1  = { a: 1, b: 2 },
  o2a = { a: 3, c: 4, b: o1 }, // { a: 3: b: { a: 1, b: 2 }, c: 4}
  o2b = { ...o1, a: 3, c: 4 }, // { a: 3, b: 2, c: 4}
  o2c = { a: 3, c: 4, ...o1 }, // { a: 1, b: 2, c: 4}
  o3  = { a: 3, b: 2, a: 1 }   // { a: 1, b: 2 }
</source>

== Destructuring ==
<source lang="javascript">
let a, b, rest,
    arr = [11, 22, 33, 44, 55],
    obj = {a: 12, b: 23, c: 34, d: 45 }

[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10
[a, b] = [b, a];

[a, b, ...rest] = [10, 20, 30, 40, 50]
console.log(a);    // 10
console.log(b);    // 20
console.log(rest); // [30, 40, 50]
                   // Strichpunkt wichtig wg. (...)!

({ a, b } = { a: 10, b: 20, c: 30 })
console.log(a); // 10
console.log(b); // 20  // Strichpunkt wichtig wg. (...)!

({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // { c: 30, d: 40 }

[a, b] = arr;
console.log(a); // 11
console.log(b); // 22

[a, b, ...rest] = arr;
console.log(a); // 11
console.log(b); // 22
console.log(rest); // [33, 44, 55]

({ a, b } = obj);
console.log(a); // 12
console.log(b); // 23

({a, b, ...rest} = obj); console.log(a); // 12
console.log(b); // 23
console.log(rest); // {c: 34, d: 45}
</source>

== Export/Import ==
<source lang="javascript">
// aux.js
let   a = 5;
const b = 'abc';
let   c = [2,4,6];

export { a, b };

// main.js
import { a, b as bb } from './aux';  // üblicherweise ohne .js am Ende
import * as aux       from './aux';  // üblicherweise ohne .js am Ende

console.log(a, bb, aux.a, aux.b);    // 5, 'abc', 5, 'abc'
console.log(b, c, aux.c)             // drei Fehler!

// Dynamisches Laden zur Laufzeit (relativ neu)
import('./aux.js').then( aux => { console.log(aux.a, aux.b); } );
</source>

== Proxy ==
<source lang="javascript">
const 
  names =
    { name1: 'world',
      name2: 'Wolfgang',
    },

  handler =
    { get(obj, prop)
      { return `Hello, ${prop in obj ? obj[prop] : 'stranger'}!` },

      set(obj, prop, val) 
      { console.log(obj, `change value '${obj[prop]}' to '${val}'`)
        obj[prop] = val;  // store value
        return true;      // indicate success
      }
    },

  hello =
    new Proxy(names, handler)

console.log(names.name1, names.name2, names.name3);
console.log(hello.name1, hello.name2, hello.name3);

hello.name2 = 'Ilvie';
hello.name3 = 'Jule';

console.log(hello.name1, hello.name2, hello.name3);
</source>