Viewing: developer.mozilla.org

JavaScript

const bigDay = new Date(2019, 6, 19);
console.log(bigDay.toLocaleDateString());
if (bigDay.getTime() < Date.now()) {
  console.log("Once upon a time...");
}

Date bigDay 2 bigDay toLocaleDateString() 2 1 getTime() 1 Date Date.now()

Date JavaScript

new

class MyClass {
  // ...
}

class MyClass {
  // 
  constructor() {
    // 
  }
  // 
  myField = "foo";
  // 
  myMethod() {
    // myMethod 
  }
  // 
  static myStaticField = "bar";
  // 
  static myStaticMethod() {
    // myStaticMethod 
  }
  // 
  static {
    // 
  }
  // 
  // 
  #myPrivateField = "bar";
}

ES6

function MyClass() {
  this.myField = "foo";
  // 
}
MyClass.myStaticField = "bar";
MyClass.myStaticMethod = function () {
  // myStaticMethod 
};
MyClass.prototype.myMethod = function () {
  // myMethod 
};

(function () {
  // 
})();

new

const myInstance = new MyClass();
console.log(myInstance.myField); // 'foo'
myInstance.myMethod();

new new new

const myInstance = MyClass(); // TypeError: Class constructor MyClass cannot be invoked without 'new'

new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {}

let const

const MyClass = class {
  // Class body...
};

const MyClass = class MyClassLongerName {
  // MyClass  MyClassLongerName 
};
new MyClassLongerName(); // ReferenceError: MyClassLongerName is not defined

Date

Color RGB 3

class Color {
  constructor(r, g, b) {
    // RGB  `this` 
    this.values = [r, g, b];
  }
}

const red = new Color(255, 0, 0);
console.log(red);

Object { values: (3) [] }
  values: Array(3) [ 255, 0, 0 ]

Color values RGB

function createColor(r, g, b) {
  return {
    values: [r, g, b],
  };
}

class Color {
  constructor(...values) {
    this.values = values;
  }
}

const red = new Color(255, 0, 0);
//

new

const red = new Color(255, 0, 0);
const anotherRed = new Color(255, 0, 0);
console.log(red === anotherRed); // false

this

this new new this new

class MyClass {
  constructor() {
    this.myField = "foo";
    return {};
  }
}

console.log(new MyClass().myField); // undefined

createX

Date 1 setFullYear setX

Color getRed

class Color {
  constructor(r, g, b) {
    this.values = [r, g, b];
  }
  getRed() {
    return this.values[0];
  }
}

const red = new Color(255, 0, 0);
console.log(red.getRed()); // 255

class Color {
  constructor(r, g, b) {
    this.values = [r, g, b];
    this.getRed = function () {
      return this.values[0];
    };
  }
}

Color

console.log(new Color().getRed === new Color().getRed); // false

this Color.prototype

setRed

class Color {
  constructor(r, g, b) {
    this.values = [r, g, b];
  }
  getRed() {
    return this.values[0];
  }
  setRed(value) {
    this.values[0] = value;
  }
}

const red = new Color(255, 0, 0);
red.setRed(0);
console.log(red.getRed()); // 0

values getRed setRed

class Color {
  constructor(r, g, b) {
    this.values = [r, g, b];
  }
}

const red = new Color(255, 0, 0);
red.values[0] = 0;
console.log(red.values[0]); // 0

HSL

class Color {
  constructor(r, g, b) {
    // values is now an HSL array!
    this.values = rgbToHSL([r, g, b]);
  }
  getRed() {
    return hslToRGB(this.values)[0];
  }
  setRed(value) {
    const rgb = hslToRGB(this.values);
    rgb[0] = value;
    this.values = rgbToHSL(rgb);
  }
}

const red = new Color(255, 0, 0);
console.log(red.values[0]); // 0255  H  0

values RGB API

# ()

class Color {
  // :  Color  #values 
  #values;
  constructor(r, g, b) {
    this.#values = [r, g, b];
  }
  getRed() {
    return this.#values[0];
  }
  setRed(value) {
    this.#values[0] = value;
  }
}

const red = new Color(255, 0, 0);
console.log(red.getRed()); // 255

#privateField

console.log(red.#values); // SyntaxError: Private field '#values' must be declared in an enclosing class

: Chrome JavaScript

JavaScript

values getRed setRed setRed R

class Color {
  #values;
  constructor(r, g, b) {
    this.#values = [r, g, b];
  }
  getRed() {
    return this.#values[0];
  }
  setRed(value) {
    if (value < 0 || value > 255) {
      throw new RangeError("Invalid R value");
    }
    this.#values[0] = value;
  }
}

const red = new Color(255, 0, 0);
red.setRed(1000); // RangeError: Invalid R value

values values[0] API

class Color {
  #values;
  constructor(r, g, b) {
    this.#values = [r, g, b];
  }
  redDifference(anotherColor) {
    // #values 
    // 
    // 
    return this.#values[0] - anotherColor.#values[0];
  }
}

const red = new Color(255, 0, 0);
const crimson = new Color(220, 20, 60);
red.redDifference(crimson); // 35

anotherColor Color #values #values undefined try/catch in

class Color {
  #values;
  constructor(r, g, b) {
    this.#values = [r, g, b];
  }
  redDifference(anotherColor) {
    if (!(#values in anotherColor)) {
      throw new TypeError("Color instance expected");
    }
    return this.#values[0] - anotherColor.#values[0];
  }
}

: # "#values" in anotherColor "#values"

class BadIdeas {
  #firstName;
  #firstName; // syntax error occurs here
  #lastName;
  constructor() {
    delete this.#lastName; // also a syntax error
  }
}

HTML JavaScript

class Counter extends HTMLElement {
  #xValue = 0;
  constructor() {
    super();
    this.onclick = this.#clicked.bind(this);
  }
  get #x() {
    return this.#xValue;
  }
  set #x(value) {
    this.#xValue = value;
    window.requestAnimationFrame(this.#render.bind(this));
  }
  #clicked() {
    this.#x++;
  }
  #render() {
    this.textContent = this.#x.toString();
  }
  connectedCallback() {
    this.#render();
  }
}

customElements.define("num-counter", Counter);

HTML Counter

color.getRed() color.setRed() Java JavaScript

class Color {
  constructor(r, g, b) {
    this.values = [r, g, b];
  }
  get red() {
    return this.values[0];
  }
  set red(value) {
    this.values[0] = value;
  }
}

const red = new Color(255, 0, 0);
red.red = 0;
console.log(red.red); // 0

red 2 get set

class Color {
  constructor(r, g, b) {
    this.values = [r, g, b];
  }
  get red() {
    return this.values[0];
  }
}

const red = new Color(255, 0, 0);
red.red = 0;
console.log(red.red); // 255

red.red = 0 "Cannot set property red of #<Color> which has only a getter"

class MyClass {
  luckyNumber = Math.random();
}
console.log(new MyClass().luckyNumber); // 0.5
console.log(new MyClass().luckyNumber); // 0.3

this

class MyClass {
  constructor() {
    this.luckyNumber = Math.random();
  }
}

Date Date.now() Date Date DateNow() Date

: JavaScript parseInt() Number.parseInt()

Color 3 RGB

class Color {
  static isValid(r, g, b) {
    return r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255;
  }
}

Color.isValid(255, 0, 0); // true
Color.isValid(1000, 0, 0); // false

static

console.log(new Color(0, 0, 0).isValid); // undefined

class MyClass {
  static {
    MyClass.myStaticProperty = "foo";
  }
}

console.log(MyClass.myStaticProperty); // 'foo'

Color

class Color {
  #values;
  constructor(r, g, b, a = 1) {
    this.#values = [r, g, b, a];
  }
  get alpha() {
    return this.#values[3];
  }
  set alpha(value) {
    if (value < 0 || value > 1) {
      throw new RangeError("Alpha value must be between 0 and 1");
    }
    this.#values[3] = value;
  }
}

1 Color

JavaScript extends

class ColorWithAlpha extends Color {
  #alpha;
  constructor(r, g, b, a) {
    super(r, g, b);
    this.#alpha = a;
  }
  get alpha() {
    return this.#alpha;
  }
  set alpha(value) {
    if (value < 0 || value > 1) {
      throw new RangeError("Alpha value must be between 0 and 1");
    }
    this.#alpha = value;
  }
}

super(r, g, b) this super() super() this this = new Color(r, g, b) super() super() this this

this #alpha /

Color get red() ColorWithAlpha red

const color = new ColorWithAlpha(255, 0, 0, 0.5);
console.log(color.red); // 255

Object toString() toString() [object Object]

console.log(red.toString()); // [object Object]

RGB

class Color {
  #values;
  // 
  toString() {
    return this.#values.join(", ");
  }
}

console.log(new Color(255, 0, 0).toString()); // '255, 0, 0'

super

class ColorWithAlpha extends Color {
  #alpha;
  // 
  toString() {
    //  toString() 
    return `${super.toString()}, ${this.#alpha}`;
  }
}

console.log(new ColorWithAlpha(255, 0, 0, 0.5).toString()); // '255, 0, 0, 0.5'

extends

class ColorWithAlpha extends Color {
  // 
  static isValid(r, g, b, a) {
    //  isValid() 
    return super.isValid(r, g, b) && a >= 0 && a <= 1;
  }
}

console.log(ColorWithAlpha.isValid(255, 0, 0, -1)); // false

JavaScript

class ColorWithAlpha extends Color {
  log() {
    console.log(this.#values); // SyntaxError: Private field '#values' must be declared in an enclosing class
  }
}

1 JavaScriptmixins

instance of

const color = new ColorWithAlpha(255, 0, 0, 0.5);
console.log(color instanceof Color); // true
console.log(color instanceof ColorWithAlpha); // true

OOP

Date

function incrementDay(date) {
  return new Date(date.setDate(date.getDate() + 1));
}
const date = new Date(); // 2019-06-19
const newDay = incrementDay(date);
console.log(newDay); // 2019-06-20
// 
console.log(date); // 2019-06-20

OOP 5 3 [ OOP 5 3 ]

1 Java JavaScript

Color

function isRed(color) {
  return color.red === 255;
}
function isValidColor(color) {
  return (
    color.red >= 0 &&
    color.red <= 255 &&
    color.green >= 0 &&
    color.green <= 255 &&
    color.blue >= 0 &&
    color.blue <= 255
  );
}
//

Color API

JavaScript

Map Set get(), set(), has(),
Date UNIX
Error 1 TypeError ReferenceError Error instanceof

JavaScript

MDN

MDN 2026319

GitHub